Bottom Sheet
화면 하단에서 올라오는 시트 컴포넌트로, 드래그·snap·dismiss 상호작용을 제공합니다.
Installation
npx @seed-design/cli add ui:bottom-sheet@seed-design/lynx-react의 BottomSheet는 @lynx-js/lynx-ui-sheet를 래핑합니다. 드래그·스프링·snap·presence 로직은 lynx-ui-sheet가 담당하고, SEED는 공개 API와 recipe 슬롯 스타일만 제공합니다. @seed-design/lynx-react를 설치하면 @lynx-js/lynx-ui-sheet도 함께 설치됩니다.
Usage
import {
BottomSheetBody,
BottomSheetContent,
BottomSheetFooter,
BottomSheetRoot,
BottomSheetTrigger,
} from "@/components/ui/bottom-sheet";
export function App() {
return (
<BottomSheetRoot snapPoints={["fit", "80%"]}>
<BottomSheetTrigger>
<text>시트 열기</text>
</BottomSheetTrigger>
<BottomSheetContent title="제목" description="부가 설명" showHandle>
<BottomSheetBody>
<text>본문 콘텐츠</text>
</BottomSheetBody>
<BottomSheetFooter>
<text>하단 액션 영역</text>
</BottomSheetFooter>
</BottomSheetContent>
</BottomSheetRoot>
);
}snippet의 BottomSheetContent는 내부에서 Positioner, Backdrop, Content, Header, Title, Description을 조립합니다. BottomSheetTrigger는 Content 밖에 두어야 탭으로 시트를 열 수 있습니다.
Imperative 제어
BottomSheetRoot에 ref를 전달하면 open, close, snapTo, expand, collapse 메서드를 호출할 수 있습니다.
import { useRef } from "@lynx-js/react";
import { BottomSheetRoot, type BottomSheetRootRef } from "@/components/ui/bottom-sheet";
export function App() {
const ref = useRef<BottomSheetRootRef>(null);
return (
<BottomSheetRoot ref={ref} snapPoints={["fit", "80%"]}>
{/* ... */}
</BottomSheetRoot>
);
}Props
BottomSheetRoot
Prop
Type
BottomSheetTrigger
Prop
Type
style?CSSProperties | undefinedchildren?ReactNodeclassName?string | undefinedbindtap?EventHandler<BaseTouchEvent<Target>> | undefinedBottomSheetContent
Prop
Type
title?ReactNodedescription?ReactNodeBottomSheetBody
Prop
Type
style?CSSProperties | undefinedchildren?ReactNodeclassName?string | undefinedBottomSheetFooter
웹 버전과의 차이
Lynx BottomSheet는 React BottomSheet와 다음과 같은 차이가 있습니다.
- 이벤트 핸들링:
onClick대신bindtap을 사용합니다. - 렌더링 요소: HTML
<div>대신 네이티브<view>/<text>요소를 렌더링합니다. - 내부 엔진: Radix
Drawer대신@lynx-js/lynx-ui-sheet를 래핑합니다.
| 항목 | 웹 | Lynx |
|---|---|---|
| 상태 prop | open/defaultOpen/onOpenChange | 동일 (내부에서 lynx-ui-sheet의 show/defaultShow/onShowChange로 매핑) |
| 마운트 제어 | lazyMount, unmountOnExit | 미지원 — forceMount로 대체 |
BottomSheetPositioner | 존재 | 동일 (lynx-ui-sheet의 SheetView 래핑) — 첫 open 전까지 Backdrop/Content 마운트 지연 |
BottomSheetCloseButton | 존재 | 미포함 — Tier B (SVG 지원 후 추가 예정) |
snapPoints | 없음 | 지원 ((number | string)[], 기본값 ["fit"]) |
BottomSheetTrigger의 asChild | 지원 | 미지원 (기본 <view>로만 렌더링) |
| imperative ref API | — | BottomSheetRootRef.{open, close, snapTo, expand, collapse} |
Lynx 미지원 기능
현재 Lynx 플랫폼 제약으로 다음 기능이 지원되지 않습니다.
Lynx SVG 지원 후 추가 예정
| 기능 | 웹 대응 | 설명 |
|---|---|---|
BottomSheetCloseButton | BottomSheet.CloseButton | X 아이콘 SVG 필요 |
마운트 수명주기
| 기능 | 웹 대응 | 대체 방법 |
|---|---|---|
lazyMount | BottomSheet.Root prop | forceMount={false} (기본값) — 기본적으로 열릴 때만 마운트 |
unmountOnExit | BottomSheet.Root prop | forceMount로 제어 — lynx-ui-sheet의 presence 상태 머신이 자연스럽게 언마운트 처리 |
Last updated on