Bottom Sheet

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.

개요

속성	값	기본값
title	string
description	string

Bottom Sheet 컴포넌트를 React로 사용하는 방법을 설명합니다.

상태	슬롯	속성	값
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	640px
		topCornerRadius	$radius.r6
		enterDuration	$duration.d6
		enterTimingFunction	$timing-function.enter-expressive
		exitDuration	$duration.d4
		exitTimingFunction	$timing-function.exit
	header	gap	$dimension.x2
		paddingTop	$dimension.x6
		paddingBottom	$dimension.x4
	body	paddingX	$dimension.spacing-x.global-gutter
	footer	paddingX	$dimension.spacing-x.global-gutter
		paddingTop	$dimension.x3
		paddingBottom	$dimension.x4
	title	color	$color.fg.neutral
		fontSize	$font-size.t8
		lineHeight	$line-height.t8
		fontWeight	$font-weight.bold
	description	color	$color.fg.neutral-muted
		fontSize	$font-size.t6
		lineHeight	$line-height.t6
		fontWeight	$font-weight.regular
	closeButton	fromTop	$dimension.x5
		fromRight	$dimension.x5

상태	슬롯	속성	값
enabled	header	paddingLeft	$dimension.spacing-x.global-gutter
		paddingRight	50px

상태	슬롯	속성	값
enabled	header	paddingLeft	50px
		paddingRight	50px