HUA Docs - The Syntax of Emotion

v1.0.0

bash

npm install @hua-labs/hua

tsx

import { BottomSheet, BottomSheetHeader, BottomSheetContent } from "@hua-labs/hua";


`isOpen`	`boolean`	-	BottomSheet open/close state (recommended)
`open`	`boolean`	-	BottomSheet open/close state (deprecated, use isOpen)
`onClose`	`() => void`	-	Close callback (recommended)
`onOpenChange`	`(open: boolean) => void`	-	State change callback (deprecated, use onClose)
`closable`	`boolean`	`true`	Show close button
`backdropClassName`	`string`	-	Additional CSS class for backdrop
`children*`	`React.ReactNode`	-	docs:components.bottomSheet.props.children
`height`	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	`"md"`	docs:components.bottomSheet.props.height
`showBackdrop`	`boolean`	`true`	docs:components.bottomSheet.props.showBackdrop
`closeOnBackdropClick`	`boolean`	`true`	docs:components.bottomSheet.props.closeOnBackdropClick
`closeOnEscape`	`boolean`	`true`	docs:components.bottomSheet.props.closeOnEscape
`showDragHandle`	`boolean`	`true`	docs:components.bottomSheet.props.showDragHandle
`snapPoints`	`number[]`	`[25, 50, 75, 100]`	docs:components.bottomSheet.props.snapPoints
`defaultSnap`	`number`	`50`	docs:components.bottomSheet.props.defaultSnap

Prop	Type	Default
children	React.ReactNode	-	docs:components.bottomSheet.headerProps.children
showCloseButton	boolean	true	docs:components.bottomSheet.headerProps.showCloseButton
onClose	() => void	-	docs:components.bottomSheet.headerProps.onClose

docs:common.basicUsagetsx

1// Via framework (recommended)
2import { BottomSheet, BottomSheetHeader, BottomSheetContent, Button } from '@hua-labs/hua';
3// Or direct import
4// import { BottomSheet, BottomSheetHeader, BottomSheetContent } from '@hua-labs/ui/overlay';
5import { useState } from 'react';
6 
7const [open, setOpen] = useState(false);
8 
9<Button onClick={() => setOpen(true)}>Open BottomSheet</Button>
10 
11<BottomSheet open={open} onOpenChange={setOpen}>
12  <BottomSheetHeader onClose={() => setOpen(false)}>
13    <h2 className="text-lg font-semibold">Title</h2>
14  </BottomSheetHeader>
15  <BottomSheetContent>
16    <p>BottomSheet content goes here.</p>
17  </BottomSheetContent>
18</BottomSheet>

docs:components.bottomSheet.codeExamples.customHeighttsx

1<BottomSheet
2  open={open}
3  onOpenChange={setOpen}
4  height="lg"
5>
6  <BottomSheetContent>
7    Large height BottomSheet
8  </BottomSheetContent>
9</BottomSheet>

docs:components.bottomSheet.codeExamples.snapPointstsx

1<BottomSheet
2  open={open}
3  onOpenChange={setOpen}
4  snapPoints={[30, 60, 90]}
5  defaultSnap={30}
6>
7  <BottomSheetContent>
8    Drag up/down to snap to different heights
9  </BottomSheetContent>
10</BottomSheet>

•docs:components.bottomSheet.accessibility.escKey: docs:components.bottomSheet.accessibility.escKeyDesc
•docs:components.bottomSheet.accessibility.bodyScrollLock: docs:components.bottomSheet.accessibility.bodyScrollLockDesc
•docs:components.bottomSheet.accessibility.touchGestures: docs:components.bottomSheet.accessibility.touchGesturesDesc

Drawer Accordion