Light Dark System

Slideout

<zn-slideout> | ZnSlideout
Since 1.0 experimental

Short summary of the component’s intended use.

Examples

Basic Slideout

This is a basic sliding out component that can be triggered by a button. It includes a footer with action buttons.

Open Basic slideout This is the slideout’s body. Do Something Close Slideout 

<zn-button id="slideout-trigger">Open Basic slideout</zn-button>
<zn-slideout class="slideout-basic" trigger="slideout-trigger" label="Slideout">
  This is the slideout’s body.

  <zn-button color="default" slot="footer">Do Something</zn-button>
  <zn-button color="secondary" slot="footer" slideout-closer>Close Slideout</zn-button>
</zn-slideout>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.0/dist/components/slideout/slideout.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.0/dist/components/slideout/slideout.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/slideout/slideout.js';

Slots

Name Description
(default) The default slot.
label The slideout’s label. Alternatively you can use the label attribute.

Learn more about using slots.

Properties

Name Description Reflects Type Default
open Indicated whether of not the slideout is open. You can toggle this attribute to show and hide the slideout, or you can use the show() and hide() methods and this attribute will reflect the slideout’s state. boolean false
label The slideout’s label as displayed in the header. You should always include a relevant label even when using no-header, as it is required for proper accessibility. If you need to display HTML, use the label slot instead. string -
trigger The slideout’s trigger element. This is used to open the slideout when clicked. If you do not provide a trigger, you will need to manually open the slideout using the show() method. string -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
zn-show Emitted when the slideout is opens. -
zn-close Emitted when the slideout is closed. -
zn-request-close Emitted when the user attempts to close the slideout by clicking the close button, clicking the overlay, or pressing escape. Calling event.preventDefault() will keep the slideout open. Avoid using this unless closing the slideout will result in destructive behavior such as data loss. { source: 'close-button' | 'keyboard' | 'overlay' }

Learn more about events.

Methods

Name Description Arguments
show() Shows the slideout. -
hide() Hides the slideout. -

Learn more about methods.

Custom Properties

Name Description Default
--width The preferred width of the slideout. Note the slideout will shrink to accommodate smaller screens.
--header-spacing The amount of padding to use for the header.
--body-spacing The amount of padding to use for the body.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper.
header The slideout’s header. This element wraps the title and header actions.
close-button The slideout’s close button.
close-button__base The close buttons exported base part.
body The slideout’s body.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <zn-button>
  • <zn-example>
  • <zn-icon>
  • <zn-tooltip>