Action Sheet
Action Sheet는 사용자의 작업과 관련된 선택지를 제공하는 시트 형태의 컴포넌트입니다.
import {
ActionSheetContent,
ActionSheetItem,
ActionSheetRoot,
ActionSheetTrigger,
} from "seed-design/ui/action-sheet";
import { ActionButton } from "seed-design/ui/action-button";
const ActionSheetPreview = () => {
return (
<ActionSheetRoot>
<ActionSheetTrigger asChild>
<ActionButton>Open</ActionButton>
</ActionSheetTrigger>
<ActionSheetContent aria-label="Action Sheet">
<ActionSheetItem label="Action 1" />
<ActionSheetItem label="Action 2" />
<ActionSheetItem tone="critical" label="Action 3" />
</ActionSheetContent>
</ActionSheetRoot>
);
};
export default ActionSheetPreview;Installation
npx @seed-design/cli@latest add action-sheetpnpm dlx @seed-design/cli@latest add action-sheetyarn dlx @seed-design/cli@latest add action-sheetbun x @seed-design/cli@latest add action-sheetProps
ActionSheetRoot
| Prop | Type | Default |
|---|---|---|
onOpenChange? | ((open: boolean) => void) | - |
defaultOpen? | boolean | - |
open? | boolean | - |
unmountOnExit? | boolean | false |
lazyMount? | boolean | false |
closeOnEscape? | boolean | true |
closeOnInteractOutside? | boolean | true |
role? | "dialog" | "alertdialog" | "dialog" |
children? | ReactNode | - |
ActionSheetContent
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | false |
layerIndex? | number | - |
description? | ReactNode | - |
title? | ReactNode | - |
ActionSheetItem
| Prop | Type | Default |
|---|---|---|
tone? | "neutral" | "critical" | neutral |
label? | ReactNode | - |
Examples
Portalled
<Portal>으로 <ActionSheetContent>를 감싸서 컨텐츠를 원하는 요소에 렌더링할 수 있습니다.
Portal은 기본적으로 document.body에 렌더링됩니다.
import { Portal } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import {
ActionSheetContent,
ActionSheetItem,
ActionSheetRoot,
ActionSheetTrigger,
} from "seed-design/ui/action-sheet";
const ActionSheetPortalled = () => {
return (
<ActionSheetRoot>
<ActionSheetTrigger asChild>
<ActionButton>Open</ActionButton>
</ActionSheetTrigger>
<Portal>
<ActionSheetContent aria-label="Action Sheet">
<ActionSheetItem label="Action 1" />
<ActionSheetItem label="Action 2" />
<ActionSheetItem tone="critical" label="Action 3" />
</ActionSheetContent>
</Portal>
</ActionSheetRoot>
);
};
export default ActionSheetPortalled;Last updated on