Sheet

Sheets allow users to engage in secondary activities while maintaining the context of their current page. Unlike modals, sheets can be easily dismissed and are typically used for complex interactions that require multiple steps or inputs.

Opening a Sheet

Sheets are opened via a SheetLayer API that is injected from a Dashboard Component in any parent view (we suggest 1 at the root of your application). The SheetLayer API opens Sheets into the proper place, and with the right relative layering compared to other layers.

In your view inject sheetLayer which will give you everything you need to open and close sheets. To open a sheet, use the open method within sheetLayer, pass in your component and any data for the component.

Sheets are closed by clicking the 'times' icon in them, but you can programmatically close them by telling an open sheetLayer to close.

Use the title prop or slot to give your sheet a title and then add your content. In this demo we pass in a custom title to our sheet component.

Title

The title slot allows you to customize the title of your sheet. If no title is provided via the title prop, the content of the title slot will be used instead.

Actions Slot

The actions slot allows you to add custom actions to your sheet. This could be anything from a button to a set of controls. The actions slot content will be displayed in the top-right corner of the sheet.

Overflowing Content

This demo also showcases how the sheet component handles overflowing content.

<template>
  <div>
    <ci-button @click="openSheet">Open Overflowing Content Sheet</ci-button>
  </div>
</template>

<script>
import SheetDemoOverflowSheet from './SheetDemoOverflowSheet.vue'

export default {
  inject: {
    sheetLayer : 'sheetLayer'
  },
  methods: {
    openSheet () {
      this.sheetLayer.open(SheetDemoOverflowSheet, { title: 'My Overflowing Content Sheet' })
    }
  }
}
</script>

// MyOverflowSheet.vue

<template>
  <ci-sheet :title="title">
    <template v-slot:actions>
      <ci-button @click="alert('Action')">Action</ci-button>
    </template>
    <div class="content-container">
      <p v-for="i in 100" :key="i">Item {{i}} Long text goes here that needs to wrap instead of overflowing the horizontal boundaries.</p>
    </div>
  </ci-sheet>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: 'Overflowing Content Sheet'
    }
  },
  methods: {
    alert (message) {
      window.alert(message)
    }
  }
}
</script>

<style scoped>
.content-container {
  overflow-x: hidden;
  word-break: break-word;
}
</style>

Before Close

This demo showcases how to setup a beforeClose function for the sheet component that also uses a confirmation modal. Use the beforeClose prop to pass in a callback function to execute prior to closing. The function accepts an exitValue as a string which you can use for conditional logic.

<template>
  <div>
    <ci-button @click="openSheet">Open Sheet</ci-button>
  </div>
</template>

<script>
import SheetDemoBeforeCloseSheet from './SheetDemoBeforeCloseSheet.vue'

export default {
  inject: {
    sheetLayer : 'sheetLayer'
  },
  methods: {
    openSheet () {
      this.sheetLayer.open(SheetDemoBeforeCloseSheet, { title: 'My Sheet Title' })
    },
  }
}
</script>

// MyBeforeCloseSheet.vue

<template>
  <ci-sheet :title="title" :beforeClose="confirmClose" @close="closeSheet">
    <template v-slot:actions>
      <ci-button @click="closeSheet('save')">Save</ci-button>
    </template>
    <div class="content-container">
      <p v-for="i in 100" :key="i">Item {{i}} Long text goes here that needs to wrap instead of overflowing the horizontal boundaries.</p>
    </div>

    <ci-modal v-if="showCloseConfirmation" title="Close Confirmation" @close="showCloseConfirmation = false" class="ci-close-modal">
      <p>Are you sure you want to close the sheet?</p>
      <template v-slot:actions>
        <ci-button @click="closeSheet()">Yes</ci-button>
        <ci-button @click="showCloseConfirmation = false">No</ci-button>
      </template>
    </ci-modal>
  </ci-sheet>
</template>

<script>
export default {
  data() {
    return {
      showCloseConfirmation: false,
    };
  },
  props: {
    title: {
      type: String,
      default: 'Before Close Demo Sheet'
    }
  },
  inject: {
    sheetLayer : 'sheetLayer'
  },
  methods: {
    confirmClose(exitValue, proceed, stop) {
      if (exitValue === 'cancel') {
        this.showCloseConfirmation = true;
        stop();
      } else {
        proceed();
      }
    },
    closeSheet(exitValue = 'cancel') {
      this.sheetLayer.close();
      this.$emit('close', exitValue);
    },
  }
}
</script>

<style scoped>
.content-container {
  overflow-x: hidden;
  word-break: break-word;
}
.ci-close-modal {
  height: 25vh;
}
</style>

Props

Name	Type	Default	Description
title	String	null	The title of the sheet.
flush	Boolean	false	Removes inner padding for content.

Events

Name	Description
@close	Emitted when the sheet is closed.

Methods

Name	Description
close()	Closes the sheet.

SheetLayer API

Name	Description
open(component, data)	Opens the specified sheet component with the provided data.
isOpen()	Returns true if a sheet is currently open, false otherwise.