Action Sheet

Anatomy

• backdrop
• content
• header
• title
• description
• divider
• item
• item label
• close button

Options

Item Tone

Action Sheet의 아이템은 Neutral 혹은 Critical tone을 가집니다.

Neutral

[TODO: 회색 배경에 검은색 텍스트로 표시된 일반 Action Sheet 아이템]
일반적인 액션을 나타내는 기본 아이템입니다. 대부분의 선택지에 사용됩니다.

Critical

[TODO: 회색 배경에 빨간색 텍스트로 표시된 위험 Action Sheet 아이템]
데이터를 삭제하는 등 파괴적인 액션을 수행하는 아이템입니다. 사용자에게 위험한 작업임을 명확히 알리기 위해 빨간색으로 강조됩니다.

Behaviors

표시 및 애니메이션

Action Sheet가 표시될 때 backdrop이 서서히 나타나고(fade in), content가 화면 아래에서 위로 슬라이드됩니다. 이는 사용자에게 모달 상태를 명확히 알립니다.

닫기 동작

Action Sheet는 여러 방법으로 닫을 수 있습니다.

• content 바깥을 탭하는 경우
• close button을 탭하는 경우
• (키보드 환경) Escape 키를 누르는 경우

Usage Guidelines

적절한 사용 상황

[TODO: Action Sheet의 세 가지 옵션]

Action Sheet는 사용자의 의도적인 작업과 관련된 선택지를 제공할 때 사용하세요.

예: 게시물에 대한 작업으로 "공지 등록", "삭제", "신고" 옵션 제공

간결성 유지

Action Sheet는 사용자의 작업을 방해하므로 꼭 필요한 경우에만 사용하세요. Title은 한 줄에 표시될 수 있도록 간결하게 유지하고, Description은 꼭 필요한 경우에만 추가하세요.

위험한 선택 강조

[TODO: 빨간색으로 강조된 "삭제" 아이템이 있는 Action Sheet]

데이터를 삭제하는 등 위험한 작업을 수행하는 선택은 Critial 옵션을 사용해 시각적으로 눈에 띄게 만드세요.

스크롤 방지

[TODO: 적절한 수의 버튼이 있는 Action Sheet와 너무 많은 버튼이 있는 스크롤 가능한 Action Sheet 비교]

Action Sheet가 스크롤되지 않도록 아이템 수를 제한하세요. 스크롤이 필요한 Action Sheet는 사용자가 의도치 않게 버튼을 탭할 위험이 있고, 선택에 더 많은 시간과 노력이 필요합니다.

Action Sheet vs Extended Action Sheet

[TODO: "공지 등록", "삭제", "신고" 와 "이 글 숨기기", "게시글 노출 기준", "신고하기" 비교]

Action Sheet는 사용자가 상호작용한 대상에 관한 선택지만을 제공할 때 사용합니다.

Extended Action Sheet는 사용자가 상호작용한 대상에 관한 선택지 외에도 추가적인 선택지를 제공할 때 사용합니다.

개요

옵션 테이블

링크

스펙

base

상태	슬롯	속성	값
enabled	backdrop	color	$color.bg.overlay
		enterDuration	$duration.d2
		enterTimingFunction	$timing-function.enter
		enterOpacity	0
		exitDuration	$duration.d2
		exitTimingFunction	$timing-function.exit
		exitOpacity	0
	content	color	$color.bg.layer-floating
		maxWidth	480px
		topCornerRadius	$radius.r5
		enterDuration	$duration.d6
		enterTimingFunction	$timing-function.enter-expressive
		exitDuration	$duration.d4
		exitTimingFunction	$timing-function.exit
	header	paddingX	$dimension.spacing-x.global-gutter
		paddingY	$dimension.x3_5
		gap	$dimension.x1
	title	fontSize	$font-size.t4
		lineHeight	$line-height.t4
		fontWeight	$font-weight.bold
		color	$color.fg.neutral-muted
	description	fontSize	$font-size.t3
		lineHeight	$line-height.t3
		fontWeight	$font-weight.regular
		color	$color.fg.neutral-muted
	divider	strokeWidth	1px
		strokeColor	$color.stroke.neutral
		marginX	$dimension.spacing-x.global-gutter