SEED Design
DocsReactLynxAI IntegrationBreeze

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 variant="neutralSolid">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;

Stackflow

Stackflow와 Menu Sheet를 함께 사용하는 방법에 대해 알아보세요.

Installation

npx @seed-design/cli@latest add --seed-react-version 1.1 ui:menu-sheet

Props

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

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 variant="neutralSolid">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 variant="neutralSolid">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 variant="neutralSolid">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 variant="neutralSolid">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;

onOpenChange Details

onOpenChange 두 번째 인자로 details가 제공됩니다.

reason

열릴 때 (open: true)

  • "trigger": MenuSheetTrigger (MenuSheet.Trigger)로 열림

닫힐 때 (open: false)

  • "closeButton": MenuSheet.CloseButton으로 닫힘
  • "escapeKeyDown": ESC 키 사용
  • "interactOutside": 외부 영역 클릭
import { IconEyeSlashLine } from "@karrotmarket/react-monochrome-icon";
import { HStack, PrefixIcon, Text, VStack } from "@seed-design/react";
import { useState } from "react";
import { ActionButton } from "seed-design/ui/action-button";
import {
  MenuSheetContent,
  MenuSheetGroup,
  MenuSheetItem,
  MenuSheetRoot,
  MenuSheetTrigger,
} from "seed-design/ui/menu-sheet";

export default function MenuSheetOnOpenChangeReason() {
  const [open, setOpen] = useState(false);
  const [openReason, setOpenReason] = useState<string | null>(null);
  const [closeReason, setCloseReason] = useState<string | null>(null);

  return (
    <VStack gap="x4" align="center">
      <MenuSheetRoot
        open={open}
        onOpenChange={(open, meta) => {
          setOpen(open);

          (open ? setOpenReason : setCloseReason)(meta?.reason ?? null);
        }}
      >
        <MenuSheetTrigger asChild>
          <ActionButton variant="neutralSolid">열기</ActionButton>
        </MenuSheetTrigger>
        <MenuSheetContent title="메뉴" 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>
        </MenuSheetContent>
      </MenuSheetRoot>

      <HStack gap="x4">
        <Text fontSize="t3" color="fg.neutralMuted">
          마지막 열림 이유: {openReason ?? "-"}
        </Text>
        <Text fontSize="t3" color="fg.neutralMuted">
          마지막 닫힘 이유: {closeReason ?? "-"}
        </Text>
      </HStack>
    </VStack>
  );
}

Skip Animation

skipAnimation prop을 사용하여 MenuSheet의 enter/exit 애니메이션을 건너뛸 수 있습니다.

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 MenuSheetSkipAnimation = () => {
  return (
    <MenuSheetRoot skipAnimation>
      <MenuSheetTrigger asChild>
        <ActionButton variant="neutralSolid">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>
      </MenuSheetContent>
    </MenuSheetRoot>
  );
};

export default MenuSheetSkipAnimation;

Last updated on

On this page

Installation
Props
MenuSheetRoot
MenuSheetTrigger
MenuSheetContent
MenuSheetGroup
MenuSheetItem
Examples
With Title
labelAlign="left" (with PrefixIcon)
labelAlign="center" (without PrefixIcon)
Overriding labelAlign
onOpenChange Details
reason
Skip Animation