Skip to main content

Drawer.Content & Drawer.Handle

Drawer.Content​

<Drawer.Content> is the core container that wraps your inner UI elements and attaches gesture pointer listeners.

<Drawer.Content className="fixed bottom-0 left-0 right-0 bg-white p-6 rounded-t-xl">
  {/* Children */}
</Drawer.Content>

Data Attributes Exposed​

Drawer.Content exposes dynamic DOM data attributes for CSS targeting:

  • data-temper-drawer: Always present on <Drawer.Content>.
  • data-temper-drawer-direction: bottom | top | left | right.
  • data-temper-drawer-visible: true | false.

Drawer.Handle​

<Drawer.Handle> renders a drag pill indicator with built-in invisible hit area padding (minimum 44x44px touch target) for accessibility.

<Drawer.Handle className="w-12 h-1.5 bg-gray-300 rounded-full mx-auto my-2" />

Properties​

Accepts standard HTMLAttributes<HTMLDivElement>.

Data Attributes Exposed​

  • data-temper-handle: Placed on the handle element container.
  • data-temper-handle-hitarea: Inner hit area extension element.
  • data-temper-drawer-visible: true | false.

Interaction Features​

  • Long-Press Prevention: Clicking/tapping without dragging won't trigger unintended drag state locks.
  • Cycle Snap Points: When snap points are enabled, tapping <Drawer.Handle /> advances to the next snap point index.