Slideout

KSlideout is a slide-out overlay container with optional backdrop that displays over the page content.

<KSlideout
  :visible="slideoutVisible"
  title="Slideout Content"
  @close="hideSlideout"
>
  <KTabs :tabs="tabs">
    <template #tab1>
      <p>Tab 1 content</p>
    </template>
    <template #tab2>
      <p>Tab 2 content</p>
    </template>
    <template #tab3>
      <p>Tab 3 content</p>
    </template>
  </KTabs>
</KSlideout>

Props

visible

Boolean to show/hide the slideout. Defaults to false.

<template>
  <KSlideout
    :visible="slideoutVisible"
    @close="hideSlideout"
  />
</template>

<script setup lang="ts">
const slideoutVisible = ref<boolean>(false)

const hideSlideout = () => {
  slideoutVisible.value = false
}
</script>

title

A string to be displayed as slideout title. Can also be slotted.

<KSlideout
  title="Slideout With A Title"
  :visible="slideoutVisible"
  @close="hideSlideout"
/>

offsetTop

Allows a host app to define the offset from the top of the page. If the value is a number, it will be treated as a pixel value (e.g. 60 becomes '60px'); otherwise, it will be used as-is. Defaults to 0.

<KSlideout
  offset-top="64px"
  title="Slideout With Offset"
  :visible="slideoutVisible"
  @close="hideSlideout"
/>

hasOverlay

A boolean whether or not the slideout should have background overlay. Defaults to true.

<KSlideout
  :has-overlay="false"
  title="Slideout Without Overlay"
  :visible="slideoutVisible"
  @close="hideSlideout"
/>

closeOnBlur

A boolean whether on not the slideout should close when user clicks outside the slideout content area. Defaults to true.

When set to false, the user can only close the slideout by clicking the close button (or pressing Escape if closeOnEscape is set to true).

<KSlideout
  :close-on-blur="false"
  title="Click On Close Icon To Dismiss"
  :visible="slideoutVisible"
  @close="hideSlideout"
/>

closeOnEscape

Whether pressing the Escape key should close the modal (by emitting the close event). Defaults to true.

maxWidth

Controls width of the slideout content area. Default value is 500px.

<KSlideout
  max-width="80%"
  title="Very Wide Slideout"
  :visible="slideoutVisible"
  @close="hideSlideout"
/>

zIndex

Controls z-index of the slideout content area. Default value is 9999.

<KSlideout
  z-index="92929"
  title="Very high z-index"
  :visible="slideoutVisible"
  @close="hideSlideout"
/>

Slots

default

Slot for slideout content. The component container will have a scrollbar, should the content overflow.

<KSlideout
  :visible="slideoutVisible"
  title="Slideout Content"
  @close="hideSlideout"
>
  <p>Lorem ipsum dolor sit amet...</p>
</KSlideout>

title

Slot for custom title.

<KSlideout
  :visible="slideoutVisible"
  @close="hideSlideout"
>
  <template #title>
    <KongIcon />
    Custom Title
  </template>
</KSlideout>

Events

close

Emitted when the close icon is clicked, anything outside the slideout content area is clicked (when closeOnBlur prop is set to false), or the esc key is pressed (when closeOnEscape prop is set to false).