OcBottomDrawer component

Description

The OcBottomDrawer component can be used to display content in a bottom drawer that slides up from the bottom of the screen. It is especially useful on mobile devices instead of showing dropdown menus to the user.

Examples

Default

The default use case gets an ID and the selector of the toggle button as props.

<template>
  <oc-button id="toggle-bottom-drawer">Open bottom drawer</oc-button>
  <oc-bottom-drawer
    drawer-id="example-bottom-drawer"
    toggle="#toggle-bottom-drawer"
    title="Example Bottom Drawer"
  >
    Some content in the bottom drawer.
  </oc-bottom-drawer>
</template>

Nesting

The bottom drawer can also be nested, for example to categorize items.

<template>
  <oc-button id="toggle-bottom-drawer-parent">Open bottom drawer</oc-button>
  <oc-bottom-drawer
    ref="parent"
    drawer-id="example-bottom-drawer-parent"
    toggle="#toggle-bottom-drawer-parent"
    title="Example Bottom Drawer Parent"
    @show="renderChild = true"
    @hide="renderChild = false"
  >
    <oc-list class="oc-flex oc-flex-column oc-p-s">
      <oc-button justify-content="left" appearance="raw" no-hover aria-expanded="false">
        <oc-icon size="small" name="rectangle" fill-type="line" />
        Simple button
      </oc-button>
      <oc-button
        id="toggle-bottom-drawer-child"
        class="oc-mt-s"
        justify-content="left"
        appearance="raw"
        no-hover
        aria-expanded="false"
      >
        <oc-icon size="small" name="information" fill-type="line" />
        Open child parent drawer...
      </oc-button>
    </oc-list>
  </oc-bottom-drawer>
  <oc-bottom-drawer
    v-if="renderChild"
    drawer-id="example-bottom-drawer-child"
    toggle="#toggle-bottom-drawer-child"
    title="Example Bottom Drawer Child"
    :is-nested-element="true"
    :nested-parent-ref="parent"
  >
    <oc-list class="oc-flex oc-flex-column oc-p-s">
      <oc-button justify-content="left" appearance="raw" no-hover aria-expanded="false">
        <oc-icon size="small" name="rectangle" fill-type="line" />
        Simple button
      </oc-button>
    </oc-list>
  </oc-bottom-drawer>
</template>
<script setup lang="ts">
import { OcBottomDrawer } from '../../../src/components'
import { ref, useTemplateRef } from 'vue'

const parent = useTemplateRef('parent')
const renderChild = ref(false)
</script>

Portal

You can also provide a portal-target via portal-vue if you want to render the bottom drawer outside of the current DOM hierarchy.

<template>
  <portal-target name="app.design-system.oc-bottom-drawer.portal" />

  <oc-button id="toggle-bottom-drawer-portal">Open bottom drawer</oc-button>
  <oc-bottom-drawer
    drawer-id="example-bottom-drawer"
    toggle="#toggle-bottom-drawer-portal"
    title="Example Bottom Drawer"
    use-portal
    portal-target="app.design-system.oc-bottom-drawer.portal"
  >
    Some content in the bottom drawer.
  </oc-bottom-drawer>
</template>
<script setup lang="ts">
import { OcBottomDrawer } from '../../../src/components'
</script>

Properties

Emits

Slots