Bottom sheet

사용자가 현재 맥락과 밀접한 관련이 있는 범위가 정해진 작업을 수행할 수 있도록 돕는 요소입니다. 모바일 화면 하단에 오버레이되어 추가적인 사항이나 액션을 표시합니다. 메인 콘텐츠에 대한 접근성을 유지하면서 임시적으로 간단한 정보를 쉽게 접근할 수 있게 해줍니다.

Design

Web

iOS

Android

WantedModalBottomSheet

Bottom sheet 형태의 모달 컴포넌트입니다. 시스템 Bottom sheet 또는 커스텀 드래그가 가능한 Bottom sheet를 사용할 수 있습니다.

var showSheet by remember { mutableStateOf(false) }
val listState = rememberLazyListState()
// Foundation 1.8.x부터 anchoredDraggable이 nestedScroll 체인에 참여하면서, LazyColumn 스크롤 잔여값이 시트로 전달되어 튕김 버그가 발생할 수 있습니다.
val scrollPolicy = rememberBottomSheetScrollPolicy(listState)

WantedModalBottomSheet(
    isShow = showSheet,
    onDismissRequest = { showSheet = false },
    content = {
        // 목록 스크롤은 LazyColumn이 담당하고, 위로 남는 잔여 스크롤만 정책으로 차단합니다.
        // LazyColumn 에서만 Modifier.nestedScroll(scrollPolicy.connection) 추가 합니다.
        Column(modifier = Modifier.nestedScroll(scrollPolicy.connection)) {
            LazyColumn(state = listState) {
                // items(...)
            }
        }
    }
)

Parameters

이름	타입	설명
`isShow`	Boolean	모달 표시 여부입니다.
`onDismissRequest`	() -> Unit	모달이 닫힐 때 호출되는 콜백입니다.
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`background`	Color	배경 색상입니다.
`type`	ModalType	모달의 형태입니다.
`sheetDefault`	WantedBottomSheetDefault	Bottom Sheet 의 모양·여백 설정입니다. 기본값은 [type] 에 맞춰 골라집니다 (Full 만 별도 값).
`dismissOnClickOutside`	Boolean	외부 클릭 시 닫힘 여부입니다.
`topBar`	(@Composable () -> Unit)?	상단 바 슬롯입니다.
`bottomBar`	(@Composable () -> Unit)?	하단 바 슬롯입니다.
`content`	(@Composable () -> Unit)	본문 콘텐츠 슬롯입니다.

Advanced

WantedBottomSheetDefault

Bottom Sheet / Full 의 모양과 여백을 정의하는 데이터 클래스입니다. 값을 바꿔 쓸 때는 [WantedBottomSheetDefaults.getDefault] · [WantedBottomSheetDefaults.getFullDefault] 의 인자로 넘기거나 copy 를 사용합니다. 여백은 디자인 4.0.0 기준으로 ModalSize 와 무관하게 통일되어 있고, Full 만 별도 값을 사용합니다.

Properties

이름	타입	설명
`shape`	RoundedCornerShape	Bottom Sheet 의 모서리 둥글기입니다. Full 은 화면 전체를 덮으므로 0dp 입니다.
`navigationPadding`	Dp	Navigation 영역에 Bottom Sheet 가 추가로 얹는 여백입니다. 여백 자체는 Navigation 컴포넌트가 소유하므로 기본값은 0dp 입니다.
`contentHorizontalPadding`	Dp	Content 영역의 좌우 여백입니다.
`contentVerticalPadding`	Dp	Content 영역의 상하 여백입니다.
`actionHorizontalPadding`	Dp	Action Area 의 좌우 여백입니다.
`actionVerticalPadding`	Dp	Action Area 의 상하 여백입니다.

WantedModalDefaults

Bottom sheet 상단에 표시되는 드래그 핸들 컴포넌트입니다.

DragHandle

BottomSheet 상단에 표시되는 드래그 핸들 컴포넌트입니다.

WantedModalDefaults.DragHandle()

Parameters

이름	타입	설명
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`color`	Color	핸들의 배경 색상입니다.
`shape`	Shape	핸들의 모양입니다.

getDefault

Bottom Sheet 의 기본 설정을 생성합니다. (디자인 4.0.0)

// 본문 상하 여백까지 켠다 (좌우는 기본값 28)
WantedModalBottomSheet(
    isShow = true,
    onDismissRequest = { },
    sheetDefault = WantedBottomSheetDefaults.getDefault(
        contentVerticalPadding = WantedBottomSheetDefaults.CONTENT_VERTICAL_PADDING
    ),
    content = { }
)

Parameters

이름	타입	설명
`shape`	RoundedCornerShape	Bottom Sheet 의 모서리 둥글기입니다.
`navigationPadding`	Dp	Navigation 영역에 추가로 얹는 여백입니다.
`contentHorizontalPadding`	Dp	Content 영역의 좌우 여백입니다.
`contentVerticalPadding`	Dp	Content 영역의 상하 여백입니다.
`actionHorizontalPadding`	Dp	Action Area 의 좌우 여백입니다.
`actionVerticalPadding`	Dp	Action Area 의 상하 여백입니다.

Return

타입	설명
WantedBottomSheetDefault	설정된 WantedBottomSheetDefault 인스턴스를 반환합니다.

getFullDefault

Full(전체화면) 의 기본 설정을 생성합니다. 여백은 Bottom Sheet 와 다른 값을 쓰고, 모서리는 Bottom Sheet 와 같은 Sheet Radius(32) 를 씁니다. (디자인 4.0.0)

WantedModalBottomSheet(
    isShow = true,
    onDismissRequest = { },
    type = WantedModalContract.ModalType.FixedFullScreen(),
    sheetDefault = WantedBottomSheetDefaults.getFullDefault(),
    content = { }
)

Parameters

이름	타입	설명
`shape`	RoundedCornerShape	Full 의 모서리 둥글기입니다. Android 의 Full 은 상태바 아래에서 시작해 상단 모서리가 보이므로 Bottom Sheet 와 같은 값을 씁니다.
`navigationPadding`	Dp	Navigation 영역에 추가로 얹는 여백입니다.
`contentHorizontalPadding`	Dp	Content 영역의 좌우 여백입니다.
`contentVerticalPadding`	Dp	Content 영역의 상하 여백입니다.
`actionHorizontalPadding`	Dp	Action Area 의 좌우 여백입니다.
`actionVerticalPadding`	Dp	Action Area 의 상하 여백입니다.

Return

타입	설명
WantedBottomSheetDefault	설정된 WantedBottomSheetDefault 인스턴스를 반환합니다.

getWithoutContentPadding

Content 여백만 0 으로 지운 설정을 생성합니다. Navigation · Action Area 여백은 스펙 값을 그대로 씁니다. 호출부가 본문 여백을 직접 주고 있는 화면에서 이중 패딩을 피하려고 씁니다. 신규 화면은 [getDefault] · [getFullDefault] 를 그대로 쓰세요.

WantedModalBottomSheet(
    isShow = true,
    onDismissRequest = { },
    sheetDefault = WantedBottomSheetDefaults.getWithoutContentPadding(),
    content = { Column(modifier = Modifier.padding(horizontal = 20.dp)) { } }
)

Parameters

이름	타입	설명
`type`	ModalType	모달의 형태입니다. Full 만 별도 여백 값을 씁니다.

Return

타입	설명
WantedBottomSheetDefault	Content 여백이 0 인 WantedBottomSheetDefault 인스턴스를 반환합니다.

WantedModalContract

Modal 컴포넌트에서 사용하는 설정값을 정의하는 객체입니다.

Enum

ModalSize

값	설명
`Small`	작은 크기의 Modal 입니다.
`Medium`	중간 크기의 Modal 입니다.
`Large`	큰 크기의 Modal 입니다.
`XLarge`	매우 큰 크기의 Modal 입니다.
`Custom`	커스텀 크기의 Modal 입니다. 모든 패딩이 0dp로 설정되어 사용자가 직접 정의 할 수 있습니다.

Sealed Class

ModalType

Modal의 형태를 정의하는 sealed 클래스입니다. Flexible, FixedWrapContent, Fixed, FixedFullScreen, FixedRatio 형태를 제공합니다.

값	설명
`Flexible`	콘텐츠 크기에 따라 자동으로 조정되는 유동형 Modal 입니다.
`FixedWrapContent`	콘텐츠 높이에 맞게 조정되는 고정형 Modal 입니다.
`Fixed`	특정 높이를 갖는 고정형 Modal 입니다.
`FixedFullScreen`	화면 전체를 덮는 고정형 Modal 입니다.
`FixedRatio`	화면 비율을 기준으로 높이가 설정되는 고정형 Modal입니다.