Drawer

Basic usage

<script lang="ts">
  let show = false
</script>

<CButton label="Click to show drawer" on:click={() => (show = true)} />

<CDrawer bind:show title="Hi, there!">Some drawer content</CDrawer>
<script lang="ts">
  let show = false
</script>

<CButton label="Click to show drawer" on:click={() => (show = true)} />

<CDrawer bind:show title="Hi, there!">Some drawer content</CDrawer>
svelte
Click fold/expand code

Positions

<script lang="ts">
  let show = false
  let position = 'left'

  function openWithPosition(pos) {
    position = pos
    show = true
  }
</script>

<CDrawer bind:show {position} title="Hi, there!">Some drawer content</CDrawer>

<div class="grid grid-cols-4 gap-4">
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('top')}
  >
    <div class="i-ph-arrow-circle-up" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('left')}
  >
    <div class="i-ph-arrow-circle-left" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('right')}
  >
    <div class="i-ph-arrow-circle-right" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('bottom')}
  >
    <div class="i-ph-arrow-circle-down" />
  </CButton>
</div>
<script lang="ts">
  let show = false
  let position = 'left'

  function openWithPosition(pos) {
    position = pos
    show = true
  }
</script>

<CDrawer bind:show {position} title="Hi, there!">Some drawer content</CDrawer>

<div class="grid grid-cols-4 gap-4">
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('top')}
  >
    <div class="i-ph-arrow-circle-up" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('left')}
  >
    <div class="i-ph-arrow-circle-left" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('right')}
  >
    <div class="i-ph-arrow-circle-right" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('bottom')}
  >
    <div class="i-ph-arrow-circle-down" />
  </CButton>
</div>
svelte
Click fold/expand code

CDrawer Props

  • show
    boolean
    default: false

    The drawer shown status. It is recommended to use

  • position
    'left' | 'top' | 'right' | 'bottom'
    default: left

    The drawer position

  • title
    string
    default:

    The title of drawer

  • width
    string
    default: 20vw

    The width of drawer. This prop will only be used when the drawer'position is left or right.

  • bodyHeight
    string=
    default: 20vh

    The content height of drawer. This prop will only be used when the drawer'position is top or left.

  • closeOnClickBackdrop
    boolean
    default: false

    If set to true. The popup would be hidden when click the backdrop.

    This prop is the same as CPopup

CDrawer Events

No data

CDrawer Slots

  • title

    The same as CDialog

  • close-icon

    The same as CDialog

  • default

    The content of drawer

CDrawer Exports

No data
Suggest changes to this page
Last update at: 2023/08/13 13:04:55