Menu Sheet

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

import { IconEyeSlashLine } from "@karrotmarket/react-monochrome-icon";
import { PrefixIcon } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import {
  MenuSheetContent,
  MenuSheetGroup,
  MenuSheetItem,
  MenuSheetRoot,
  MenuSheetTrigger,
} from "seed-design/ui/menu-sheet";

const MenuSheetPreview = () => {
  return (
    <MenuSheetRoot>
      <MenuSheetTrigger asChild>
        <ActionButton>Open</ActionButton>
      </MenuSheetTrigger>
      <MenuSheetContent aria-label="Menu Sheet">
        <MenuSheetGroup>
          <MenuSheetItem>
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 1
          </MenuSheetItem>
          <MenuSheetItem>
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 2
          </MenuSheetItem>
          <MenuSheetItem>
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 3
          </MenuSheetItem>
        </MenuSheetGroup>
        <MenuSheetGroup>
          <MenuSheetItem>
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 4
          </MenuSheetItem>
          <MenuSheetItem tone="critical">
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 5
          </MenuSheetItem>
        </MenuSheetGroup>
      </MenuSheetContent>
    </MenuSheetRoot>
  );
};

export default MenuSheetPreview;

Installation

npx @seed-design/cli@latest add menu-sheet

Props

`MenuSheetRoot`

Prop	Type	Default
`children?`	`ReactNode`	-
`role?`	`"dialog" \| "alertdialog"`	`"dialog"`
`closeOnInteractOutside?`	`boolean`	`true`
`closeOnEscape?`	`boolean`	`true`
`lazyMount?`	`boolean`	`false`
`unmountOnExit?`	`boolean`	`false`
`open?`	`boolean`	-
`defaultOpen?`	`boolean`	-
`onOpenChange?`	`((open: boolean) => void)`	-

`MenuSheetTrigger`

Prop	Type	Default
`asChild?`	`boolean`	`false`

`MenuSheetContent`

Prop	Type	Default
`title?`	`ReactNode`	-
`layerIndex?`	`number`	-
`labelAlign?`	`"left" \| "center"`	`left`
`asChild?`	`boolean`	`false`

`MenuSheetGroup`

Prop	Type	Default
`labelAlign?`	`"left" \| "center"`	`left`

`MenuSheetItem`

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

Examples

With Title

import { IconEyeSlashLine } from "@karrotmarket/react-monochrome-icon";
import { PrefixIcon } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import {
  MenuSheetContent,
  MenuSheetGroup,
  MenuSheetItem,
  MenuSheetRoot,
  MenuSheetTrigger,
} from "seed-design/ui/menu-sheet";

const MenuSheetWithTitle = () => {
  return (
    <MenuSheetRoot>
      <MenuSheetTrigger asChild>
        <ActionButton>Open</ActionButton>
      </MenuSheetTrigger>
      <MenuSheetContent title="Menu Sheet">
        <MenuSheetGroup>
          <MenuSheetItem>
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 1
          </MenuSheetItem>
          <MenuSheetItem>
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 2
          </MenuSheetItem>
          <MenuSheetItem>
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 3
          </MenuSheetItem>
        </MenuSheetGroup>
        <MenuSheetGroup>
          <MenuSheetItem>
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 4
          </MenuSheetItem>
          <MenuSheetItem tone="critical">
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 5
          </MenuSheetItem>
        </MenuSheetGroup>
      </MenuSheetContent>
    </MenuSheetRoot>
  );
};

export default MenuSheetWithTitle;

`labelAlign="left"` (with `PrefixIcon`)

import { IconEyeSlashLine } from "@karrotmarket/react-monochrome-icon";
import { PrefixIcon } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import {
  MenuSheetContent,
  MenuSheetGroup,
  MenuSheetItem,
  MenuSheetRoot,
  MenuSheetTrigger,
} from "seed-design/ui/menu-sheet";

const MenuSheetWithPrefixIcon = () => {
  return (
    <MenuSheetRoot>
      <MenuSheetTrigger asChild>
        <ActionButton>Open</ActionButton>
      </MenuSheetTrigger>
      <MenuSheetContent aria-label="Menu Sheet">
        <MenuSheetGroup>
          <MenuSheetItem>
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 1
          </MenuSheetItem>
          <MenuSheetItem>
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 2
          </MenuSheetItem>
          <MenuSheetItem>
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 3
          </MenuSheetItem>
        </MenuSheetGroup>
        <MenuSheetGroup>
          <MenuSheetItem>
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 4
          </MenuSheetItem>
          <MenuSheetItem tone="critical">
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 5
          </MenuSheetItem>
        </MenuSheetGroup>
      </MenuSheetContent>
    </MenuSheetRoot>
  );
};

export default MenuSheetWithPrefixIcon;

`labelAlign="center"` (without `PrefixIcon`)

import { ActionButton } from "seed-design/ui/action-button";
import {
  MenuSheetContent,
  MenuSheetGroup,
  MenuSheetItem,
  MenuSheetRoot,
  MenuSheetTrigger,
} from "seed-design/ui/menu-sheet";

const MenuSheetWithoutPrefixIcon = () => {
  return (
    <MenuSheetRoot>
      <MenuSheetTrigger asChild>
        <ActionButton>Open</ActionButton>
      </MenuSheetTrigger>
      <MenuSheetContent aria-label="Menu Sheet" labelAlign="center">
        <MenuSheetGroup>
          <MenuSheetItem>Action 1</MenuSheetItem>
          <MenuSheetItem>Action 2</MenuSheetItem>
          <MenuSheetItem>Action 3</MenuSheetItem>
        </MenuSheetGroup>
        <MenuSheetGroup>
          <MenuSheetItem>Action 4</MenuSheetItem>
          <MenuSheetItem tone="critical">Action 5</MenuSheetItem>
        </MenuSheetGroup>
      </MenuSheetContent>
    </MenuSheetRoot>
  );
};

export default MenuSheetWithoutPrefixIcon;

Overriding `labelAlign`

MenuSheetContent에 지정한 labelAlign을 MenuSheetGroup 또는 MenuSheetItem에 지정한 labelAlign으로 덮어쓸 수 있습니다.

import { ActionButton } from "seed-design/ui/action-button";
import {
  MenuSheetContent,
  MenuSheetGroup,
  MenuSheetItem,
  MenuSheetRoot,
  MenuSheetTrigger,
} from "seed-design/ui/menu-sheet";

const MenuSheetOverridingLabelAlign = () => {
  return (
    <MenuSheetRoot>
      <MenuSheetTrigger asChild>
        <ActionButton>Open</ActionButton>
      </MenuSheetTrigger>
      <MenuSheetContent aria-label="Menu Sheet" labelAlign="center">
        <MenuSheetGroup labelAlign="left">
          <MenuSheetItem>Action 1</MenuSheetItem>
          <MenuSheetItem labelAlign="center">Action 2</MenuSheetItem>
          <MenuSheetItem>Action 3</MenuSheetItem>
        </MenuSheetGroup>
        <MenuSheetGroup>
          <MenuSheetItem>Action 4</MenuSheetItem>
          <MenuSheetItem tone="critical" labelAlign="left">
            Action 5
          </MenuSheetItem>
        </MenuSheetGroup>
      </MenuSheetContent>
    </MenuSheetRoot>
  );
};

export default MenuSheetOverridingLabelAlign;

Menu Sheet

Manual Installation

On this page