Extended Action Sheet

Extended Action Sheet는 사용자가 특정 작업에 관한 선택지뿐만 아니라 추가적인 선택지를 제공할 때 사용하는 시트 형태의 컴포넌트입니다.

import { IconEyeSlashLine } from "@karrotmarket/react-monochrome-icon";
import { PrefixIcon } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import {
  ExtendedActionSheetContent,
  ExtendedActionSheetGroup,
  ExtendedActionSheetItem,
  ExtendedActionSheetRoot,
  ExtendedActionSheetTrigger,
} from "seed-design/ui/extended-action-sheet";

const ExtendedActionSheetPreview = () => {
  return (
    <ExtendedActionSheetRoot>
      <ExtendedActionSheetTrigger asChild>
        <ActionButton>Open</ActionButton>
      </ExtendedActionSheetTrigger>
      <ExtendedActionSheetContent aria-label="Extended Action Sheet">
        <ExtendedActionSheetGroup>
          <ExtendedActionSheetItem>
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 1
          </ExtendedActionSheetItem>
          <ExtendedActionSheetItem>
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 2
          </ExtendedActionSheetItem>
          <ExtendedActionSheetItem>
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 3
          </ExtendedActionSheetItem>
        </ExtendedActionSheetGroup>
        <ExtendedActionSheetGroup>
          <ExtendedActionSheetItem>
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 4
          </ExtendedActionSheetItem>
          <ExtendedActionSheetItem tone="critical">
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 5
          </ExtendedActionSheetItem>
        </ExtendedActionSheetGroup>
      </ExtendedActionSheetContent>
    </ExtendedActionSheetRoot>
  );
};

export default ExtendedActionSheetPreview;

Installation

npx @seed-design/cli@latest add extended-action-sheet

pnpm dlx @seed-design/cli@latest add extended-action-sheet

yarn dlx @seed-design/cli@latest add extended-action-sheet

bun x @seed-design/cli@latest add extended-action-sheet

Props

`ExtendedActionSheetRoot`

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`	-

`ExtendedActionSheetContent`

Prop	Type	Default
`asChild?`	`boolean`	`false`
`layerIndex?`	`number`	-
`title?`	`ReactNode`	-

`ExtendedActionSheetItem`

Prop	Type	Default
`tone?`	`"neutral" \| "critical"`	`neutral`
`asChild?`	`boolean`	`false`

Extended Action Sheet

Installation

Manual Installation

Props

ExtendedActionSheetRoot

ExtendedActionSheetContent

ExtendedActionSheetItem

On this page

`ExtendedActionSheetRoot`

`ExtendedActionSheetContent`

`ExtendedActionSheetItem`