BottomSheet

@hua-labs/ui

v1.0.0

드래그 제스처와 스냅 포인트를 지원하는 모바일 친화적인 하단 시트 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

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

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 사용법

커스텀 높이 (lg)

전체 높이

Props

이름	타입	기본값	설명
`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`	-	추가 CSS 클래스
`children*`	`React.ReactNode`	-	BottomSheet 내용
`height`	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	`"md"`	BottomSheet 높이 프리셋
`showBackdrop`	`boolean`	`true`	배경 오버레이 표시
`closeOnBackdropClick`	`boolean`	`true`	배경 클릭 시 닫기
`closeOnEscape`	`boolean`	`true`	ESC 키로 닫기
`showDragHandle`	`boolean`	`true`	상단 드래그 핸들 표시
`snapPoints`	`number[]`	`[25, 50, 75, 100]`	스냅 포인트 (퍼센트)
`defaultSnap`	`number`	`50`	기본 스냅 포인트

BottomSheetHeader Props

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

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

모바일 최적화

BottomSheet는 모바일 환경에 최적화되어 있습니다. 터치 제스처로 드래그하여 높이를 조절하거나 닫을 수 있습니다.

접근성

•ESC 키: BottomSheet 닫기
•스크롤 잠금: 열려있을 때 바디 스크롤 잠금
•터치 제스처: 모바일에서 아래로 스와이프하여 닫기

Drawer Accordion