Deprecated
Action Sheet (Deprecated)
Deprecated
더 이상 사용되지 않습니다. Menu 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 ui:action-sheetProps
ActionSheetRoot
Prop
Type
childrenReact.ReactNodeopen?boolean | undefineddefaultOpen?boolean | undefinedonOpenChange?((open: boolean, details?: DialogChangeDetails) => void) | undefinedActionSheetContent
Prop
Type
title?React.ReactNodedescription?React.ReactNodelayerIndex?number | undefinedActionSheetItem
Prop
Type
labelReact.ReactNodeExamples
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