Drawer

Stable

Used to render content that slides in from the side of the screen

<script setup lang="ts">
import { HDrawer } from '@holistics/design-system'

const title = 'Example Drawer'
const description = 'An example drawer'
const info = 'Example tooltip'
</script>

<template>
  <HDrawer
    :title
    dismissable
    :description
    :info
  >
    <div class="h-full min-h-80 bg-gray-300 p-4">
      Test Drawer
    </div>
  </HDrawer>
</template>

Examples

Sizes

<script setup lang="ts">
import { HDrawer } from '@holistics/design-system'

const title = 'Example Drawer'
const description = 'An example drawer'
const info = 'Example tooltip'
const sizes = ['sm', 'md', 'lg'] as const
</script>

<template>
  <div class="flex flex-wrap gap-8">
    <HDrawer
      v-for="size of sizes"
      :key="size"
      :title
      dismissable
      :description
      :info
      :size="size"
    >
      <div class="h-full min-h-80 bg-gray-300 p-4">
        Test Drawer
      </div>
    </HDrawer>
  </div>
</template>

Additional Buttons

<script setup lang="ts">
import { HButton, HDrawer } from '@holistics/design-system'

const title = 'Example Drawer'
const description = 'An example drawer'
const info = 'Example tooltip'
</script>

<template>
  <HDrawer
    :title
    dismissable
    :description
    :info
  >
    <div class="h-full min-h-80 bg-gray-300 p-4">
      Test Drawer
    </div>
    <template #actions>
      <HButton
        type="clear-default"
        size="sm"
        icon="refresh"
      />
      <HButton
        type="clear-default"
        size="sm"
        icon="ellipsis-horizontal"
      />
    </template>
  </HDrawer>
</template>

Resizable

<script setup lang="ts">
import { HDrawer } from '@holistics/design-system'

const title = 'Example Drawer'
const description = 'An example drawer'
const info = 'Example tooltip'
</script>

<template>
  <HDrawer
    :title
    dismissable
    :description
    :info
    resizable
  >
    <div class="h-full min-h-80 bg-gray-300 p-4">
      Test Drawer
    </div>
  </HDrawer>
</template>

API

Pass-through: <div>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
title *	string
info	string
description	string
dismissible	boolean = false
size	"sm" | "md" | "lg" = "sm"
resizable	boolean

Events

Name	Parameters	Description
@dismiss	[]

Slots

Name	Scoped	Description
#actions	{}
#default	{}