Slideout
Examples
Basic Slideout
Labels
Custom Width
Scrolling Content
Slideouts as Forms
Programmatic Control
Listening to Events
Preventing Close
Slideout Closer Attribute
Customizing Spacing
Importing
Slots
Properties
Events
Methods
Custom Properties
Parts
Dependencies

Slideout

<zn-slideout> | ZnSlideout

Since 1.0

experimental

Short summary of the component’s intended use.

Examples

Basic Slideout

This is a basic slideout that can be triggered by a button. It slides in from the right side of the screen and includes a header with a close button and 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>

Labels

The slideout’s label is displayed in the header and is required for proper accessibility. Use the label attribute to set the label text.

Open Slideout

This slideout has a label in the header that describes its purpose. Close

<zn-button id="slideout-label-trigger">Open Slideout</zn-button>
<zn-slideout trigger="slideout-label-trigger" label="Important Information">
  This slideout has a label in the header that describes its purpose.

  <zn-button color="secondary" slot="footer" slideout-closer>Close</zn-button>
</zn-slideout>

For HTML content in the label, use the label slot instead.

Open Slideout

Important Information This slideout uses the label slot for HTML content. Close

<zn-button id="slideout-label-slot-trigger">Open Slideout</zn-button>
<zn-slideout trigger="slideout-label-slot-trigger">
  <span slot="label">Important <em>Information</em></span>
  This slideout uses the label slot for HTML content.

  <zn-button color="secondary" slot="footer" slideout-closer>Close</zn-button>
</zn-slideout>

Custom Width

You can set a custom slideout width using the --width CSS custom property. The default width is min(100vw, 46rem). Note that the slideout will automatically shrink to accommodate smaller screens.

Open Custom Width Slideout

This slideout has a custom width of 800px set using the –width CSS property. CClose

<zn-button id="slideout-custom-width-trigger">Open Custom Width Slideout</zn-button>
<zn-slideout trigger="slideout-custom-width-trigger" label="Custom Width" style="--width: 800px;">
  This slideout has a custom width of 800px set using the --width CSS property.

  <zn-button color="secondary" slot="footer" slideout-closer>Close</zn-button>
</zn-slideout>

Scrolling Content

When the slideout content is longer than the viewport, the body area automatically becomes scrollable while keeping the header and footer fixed.

Open Scrolling Slideout

This slideout has a lot of content that requires scrolling.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Save

<zn-button id="slideout-scrolling-trigger">Open Scrolling Slideout</zn-button>
<zn-slideout trigger="slideout-scrolling-trigger" label="Scrolling Content">
  <p>This slideout has a lot of content that requires scrolling.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

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

Slideouts as Forms

Use slideouts as forms when you need to collect information from users without navigating away from the current page. This example shows a slideout with a form inside it.

<form method="post" action="#" style="display: inline-block">
  <zn-button id="slideout-form-trigger">Open Form Slideout</zn-button>
  <zn-slideout trigger="slideout-form-trigger" label="Edit Profile">
    <zn-form-group
      label="Profile Information"
      label-tooltip="This information will be displayed on your public profile"
      help-text="All fields marked with an asterisk are required">

      <div class="form-spacing">
        <zn-input type="text" name="name" label="Name" required></zn-input>
        <zn-select label="Favorite Animal" clearable required>
          <zn-option value="birds">Birds</zn-option>
          <zn-option value="cats">Cats</zn-option>
          <zn-option value="dogs">Dogs</zn-option>
          <zn-option value="other">Other</zn-option>
        </zn-select>

        <zn-textarea name="comment" label="Bio" required></zn-textarea>

        <zn-checkbox required>I agree to the terms and conditions</zn-checkbox>

        <br>
        <zn-checkbox-group label="Interests" help-text="Select at least one" label-tooltip="Choose your areas of interest"
                           required>
          <zn-checkbox value="technology">Technology</zn-checkbox>
          <zn-checkbox value="sports">Sports</zn-checkbox>
          <zn-checkbox value="music">Music</zn-checkbox>
        </zn-checkbox-group>
      </div>
    </zn-form-group>

    <zn-button color="secondary" slot="footer" slideout-closer>Cancel</zn-button>
    <zn-button color="default" slot="footer" type="submit">Save Profile</zn-button>
  </zn-slideout>
</form>

Programmatic Control

Slideouts can be controlled programmatically using the show() and hide() methods. You can also check or set the open property to manage the slideout state.

Show Slideout

Hide Slideout

Toggle Slideout

This slideout is controlled programmatically using JavaScript methods. Close

<div>
  <zn-button class="slideout-show">Show Slideout</zn-button>
  <zn-button class="slideout-hide">Hide Slideout</zn-button>
  <zn-button class="slideout-toggle">Toggle Slideout</zn-button>
</div>

<zn-slideout class="slideout-programmatic" label="Programmatic Control">
  This slideout is controlled programmatically using JavaScript methods.

  <zn-button color="secondary" slot="footer" slideout-closer>Close</zn-button>
</zn-slideout>

<script type="module">
  const slideout = document.querySelector('.slideout-programmatic');
  const showButton = document.querySelector('.slideout-show');
  const hideButton = document.querySelector('.slideout-hide');
  const toggleButton = document.querySelector('.slideout-toggle');

  showButton.addEventListener('click', () => slideout.show());
  hideButton.addEventListener('click', () => slideout.hide());
  toggleButton.addEventListener('click', () => {
    if (slideout.open) {
      slideout.hide();
    } else {
      slideout.show();
    }
  });
</script>

Listening to Events

The slideout emits several events that you can listen to: zn-show when opened, zn-close when closed, and zn-request-close when a close is requested.

Open Slideout

Open the browser console to see events logged as you interact with this slideout. Close

<zn-button id="slideout-events-trigger">Open Slideout</zn-button>
<zn-slideout class="slideout-events" trigger="slideout-events-trigger" label="Slideout Events">
  Open the browser console to see events logged as you interact with this slideout.

  <zn-button color="secondary" slot="footer" slideout-closer>Close</zn-button>
</zn-slideout>

<script type="module">
  const slideout = document.querySelector('.slideout-events');

  slideout.addEventListener('zn-show', () => {
    console.log('Slideout opened');
  });

  slideout.addEventListener('zn-close', () => {
    console.log('Slideout closed');
  });

  slideout.addEventListener('zn-request-close', (event) => {
    console.log('Close requested from:', event.detail.source);
  });
</script>

Preventing Close

The zn-request-close event can be cancelled to prevent the slideout from closing. This is useful when you need to validate data or confirm an action before allowing the slideout to close.

Note: Use this feature sparingly and only when closing the slideout would result in destructive behavior such as data loss. Preventing close can be frustrating for users if overused.

Open Slideout

Try closing this slideout using the close button or pressing Escape.

You’ll need to click the “I’m Sure” button to actually close it.

I’m Sure

<zn-button id="slideout-prevent-close-trigger">Open Slideout</zn-button>
<zn-slideout class="slideout-prevent-close" trigger="slideout-prevent-close-trigger" label="Unsaved Changes">
  <p>Try closing this slideout using the close button or pressing Escape.</p>
  <p>You'll need to click the "I'm Sure" button to actually close it.</p>

  <zn-button color="warning" slot="footer" class="close-allowed">I'm Sure</zn-button>
</zn-slideout>

<script type="module">
  const slideout = document.querySelector('.slideout-prevent-close');
  const confirmButton = document.querySelector('.close-allowed');

  // Prevent all close attempts
  slideout.addEventListener('zn-request-close', (event) => {
    event.preventDefault();
    alert('Please click "I\'m Sure" to close this slideout.');
  });

  // Allow close when clicking the confirmation button
  confirmButton.addEventListener('click', () => {
    slideout.hide();
  });
</script>

You can also prevent close from specific sources by checking the event.detail.source property.

Open Slideout

This slideout prevents closing via the Escape key, but allows the close button to work.

<zn-button id="slideout-prevent-specific-trigger">Open Slideout</zn-button>
<zn-slideout class="slideout-prevent-specific" trigger="slideout-prevent-specific-trigger" label="Selective Close Prevention">
  <p>This slideout prevents closing via the Escape key, but allows the close button to work.</p>

  <zn-button color="secondary" slot="footer" slideout-closer>Close</zn-button>
</zn-slideout>

<script type="module">
  const slideout = document.querySelector('.slideout-prevent-specific');

  slideout.addEventListener('zn-request-close', (event) => {
    // Prevent close from keyboard, but allow close button
    if (event.detail.source === 'keyboard') {
      event.preventDefault();
      alert('Please use the close button to dismiss this slideout.');
    }
  });
</script>

Slideout Closer Attribute

Add the slideout-closer attribute to any element inside the slideout to make it close the slideout when clicked. This is commonly used with buttons in the footer.

Open Slideout

Any element with the slideout-closer attribute will close this slideout when clicked.

This Won’t Close

This Will Close

<zn-button id="slideout-closer-trigger">Open Slideout</zn-button>
<zn-slideout trigger="slideout-closer-trigger" label="Slideout Closer">
  <p>Any element with the slideout-closer attribute will close this slideout when clicked.</p>

  <zn-button color="default" slot="footer">This Won't Close</zn-button>
  <zn-button color="secondary" slot="footer" slideout-closer>This Will Close</zn-button>
</zn-slideout>

Customizing Spacing

Use CSS custom properties to customize the padding in different areas of the slideout.

Open Slideout

This slideout has custom spacing applied using CSS properties. Close

<zn-button id="slideout-spacing-trigger">Open Slideout</zn-button>
<zn-slideout
  trigger="slideout-spacing-trigger"
  label="Custom Spacing"
  style="
    --header-spacing: 2rem;
    --body-spacing: 3rem;
    --footer-spacing: 2rem;
  ">
  This slideout has custom spacing applied using CSS properties.

  <zn-button color="secondary" slot="footer" slideout-closer>Close</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.86/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.86/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	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	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>