Menu Sheet
사용자의 작업과 관련된 선택지를 제공하는 시트 형태의 컴포넌트입니다.
Anatomy
Menu Sheet는 Backdrop, Header, Menu Group, Close Button과 함께 조합되어서 제공됩니다.
Properties
Menu Group Count Property
Menu Item이 많을 때는 기능이나 관련성에 따라 그룹으로 묶어서 표시할 수 있습니다. 그룹 간에는 시각적 구분을 위해 간격을 제공합니다.
그룹 구분은 전체 아이템이 3개 이상일 때만 권장되며, 최대 3개 그룹까지 나눌 수 있습니다.
Layout Property
Menu Item은 Text Only와 Text with Icon 두 가지 레이아웃이 있습니다. 아이콘이 포함된 경우에는 항상 좌측 정렬로 표시됩니다.
아이콘은 해당 아이템의 톤에 맞는 색상으로 표시됩니다.
Menu Item Tone
Menu Item은 Neutral과 Critical의 두 가지 톤을 가집니다.
| Tone | 설명 |
|---|---|
| Neutral | 일반적인 작업을 수행하는 기본 아이템으로, 대부분의 메뉴에서 사용됩니다. |
| Critical | 데이터 삭제와 같이 되돌릴 수 없는 작업을 수행하는 아이템입니다. 사용자의 주의를 환기하기 위해 빨간색으로 표시됩니다. |
Show Header
Header를 활용하여 Menu Sheet의 부가 설명을 추가할 수 있습니다. Header는 Title과 Description으로 구성되며 Header를 사용할 경우 Title은 반드시 포함되어야 합니다.
Show Item Description
메뉴 아이템의 액션 설명(description)은 'Show Item Description' prop (on/off)을 이용해 제어할 수 있습니다. 다만, 이 prop은 모든 아이템에 공통으로 사용되는 경우가 드물기 때문에 사용할 리스트 아이템을 클릭하여 Properties 패널에서 설정을 확인해 주세요.
Layout 'Text Only'에서는 제공되지 않습니다.
Guidelines
아이콘의 사용
Menu Item 라벨에 아이콘을 함께 표시할 수 있습니다.
아이콘은 라벨만으로 설명이 부족할 때 시각적 단서를 제공하며, 꼭 필요한 경우에만 제한적으로 사용하길 권장합니다.
메뉴 그룹
Menu Item이 많을 때는 기능이나 관련성에 따라 그룹으로 묶어서 표시할 수 있습니다.
아이템이 3개 이상일 때부터 그룹을 사용할 수 있습니다. 아이템의 개수가 적을 때에는 1개씩 구성하기보다는 가능한 한 그룹으로 묶어 구성하는 것을 권장합니다.
그룹과 아이템 수를 적절히 유지하여 스크롤이 발생하지 않도록 해주세요.
Critical Tone의 사용
삭제, 신고, 나가기 등 되돌릴 수 없는 작업을 수행하는 아이템은 Critical Tone으로 표현할 수 있습니다.
Critical Tone 아이템은 반드시 하나로 제한되지 않으며, 필요한 경우 여러 개를 사용할 수 있습니다.
Header의 사용
부가적인 설명이 필요한 경우 Header를 사용해서 내용의 설명을 도울 수 있습니다.
Title은 한 줄에 표시될 수 있도록 간결하게 유지하고, Description은 꼭 필요한 경우에만 추가해주세요.
Description만 사용하는 것은 권장하지 않습니다.
Item Description의 사용
기능 이름이 추상적이어서 직접적인 설명이 있어야 오작동을 막는 경우와 같이 선택지를 이해하기 위해 추가 설명이 필요한 경우 사용할 수 있습니다.
Item Description는 꼭 필요한 경우에만 추가해주세요.
Menu Sheet V3 변경점
- Action Sheet V2.0과 V2.1(beta) 스타일을 통합하여 하나의 컴포넌트로 제공합니다.
- 컴포넌트 이름을 'Action Sheet'에서 'Menu Sheet'로 변경했습니다.
- V3 Foundation Color 토큰을 적용하며 배경과 아이템의 색상을 조정했습니다.
- Destructive 타입을 삭제했으며, Critical Tone은 개별 아이템에서 설정할 수 있도록 변경했습니다.
- Overlay 속성은 제거하고 Backdrop 레이어를 기본으로 포함합니다.
- Figma에서만 제공하던 OS Indicator 속성을 삭제했습니다. OS Indicator 사용은 가이드를 참고해주세요.
Specification
Menu Sheet
base
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | backdrop | color | |
| enterDuration | |||
| enterTimingFunction | |||
| enterOpacity | 0 | ||
| exitDuration | |||
| exitTimingFunction | |||
| exitOpacity | 0 | ||
| content | color | ||
| maxWidth | 480px | ||
| paddingX | |||
| paddingY | |||
| topCornerRadius | |||
| enterDuration | |||
| enterTimingFunction | |||
| exitDuration | |||
| exitTimingFunction | |||
| header | gap | ||
| paddingBottom | |||
| title | fontSize | ||
| lineHeight | |||
| fontWeight | |||
| color | |||
| description | fontSize | ||
| lineHeight | |||
| fontWeight | |||
| color | |||
| list | gap | ||
| group | cornerRadius | ||
| divider | strokeBottomWidth | 1px | |
| strokeColor | |||
| footer | paddingTop |
Menu Sheet Item
base
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | color | |
| minHeight | 52px | ||
| paddingX | |||
| paddingY | |||
| gap | |||
| prefixIcon | size | 22px | |
| content | gap | ||
| label | fontSize | ||
| lineHeight | |||
| fontWeight | |||
| description | fontSize | ||
| lineHeight | |||
| fontWeight | |||
| color | |||
| pressed | root | color |
tone=neutral
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | prefixIcon | color | |
| label | color |
tone=critical
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | prefixIcon | color | |
| label | color |
labelAlign=left
| 상태 | 슬롯 | 속성 | 값 |
|---|
labelAlign=center
| 상태 | 슬롯 | 속성 | 값 |
|---|
Menu Sheet Close Button
base
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | color | |
| minHeight | 52px | ||
| cornerRadius | |||
| paddingX | |||
| paddingY | |||
| label | color | ||
| fontSize | |||
| lineHeight | |||
| fontWeight | |||
| pressed | root | color |
Last updated on