ModalBottomSheet

ModalBottomSheet은 일시적으로 화면을 덮으면서 CTA, 알림 또는 그외의 정보를 제공하기 위하여 사용하는 컴포넌트 입니다. 모바일에서는 바텀 시트로 그 이상의 뷰포트에서는 모달로 나타납니다.

<ModalBottomSheet title="오늘도 수강 완료!" subtitle="원하는 시간에 꾸준히 수강할 수 있도록 알림을 보내드릴게요!" primaryButtonOptions={{ text: '확인', onClick: ({ close }) => { close(); }, }} renderOpener={({ open }) => ( <Pressable onClick={open}>열기</Pressable> )} />

<ModalBottomSheet
  title="오늘도 수강 완료!"
  subtitle="원하는 시간에 꾸준히 수강할 수 있도록 알림을 보내드릴게요!"
  primaryButtonOptions={{
    text: '확인',
    onClick: ({ close }) => {
      close();
    },
  }}
  renderOpener={({ open }) => (
    <Pressable onClick={open}>열기</Pressable>
  )}
/>

Loading...

How to use

import { ModalBottomSheet } from '@vibrant-ui/components';

Properties

Prop	Type	Default	Description
open	boolean		열림 상태를 제어합니다.
defaultOpen	boolean		초기 열림 상태를 설정합니다. open 속성과 함께 사용할 수 없습니다.
renderOpener	(_: { open: () => void; isOpen: boolean }) => ReactElementChild		open 함수를 이용하여 모달을 여는 요소를 설정합니다.
title	string		모달의 제목입니다.
subtitle	string		모달의 부제목입니다.
size	lg | md	md	PC 뷰에서 모달의 너비를 설정합니다.
renderContents	(_: { close: () => void }) => ReactElementChild		내부 컨텐츠를 설정합니다.
onClose	() => void		컨텐츠 바깥 영역이 클릭되거나 닫기 버튼이 클릭됐을 때 호출됩니다.
primaryButtonOptions	{ text: string, disabled: boolean, onClick: () => void, kind: "primary" \| "secondary" \| "tertiary", IconComponent: IconComponent<IconProps, 'Fill' \| 'Regular'> }	{kind: 'primary'}	렌더할 Primary 버튼의 속성을 지정합니다.
secondaryButtonOptions	{ text: string, disabled: boolean, onClick: () => void, kind: "primary" \| "secondary" \| "tertiary", IconComponent: IconComponent<IconProps, 'Fill' \| 'Regular'> }	{kind: 'secondary'}	렌더할 Secondary 버튼의 속성을 지정합니다.
subButtonOptions	{ text: string, disabled: boolean, onClick: () => void, IconComponent: IconComponent<IconProps, 'Fill' \| 'Regular'> }		렌더할 Sub 버튼의 속성을 지정합니다.

Usage

제어

open 속성을 통해 열림 상태를 제어합니다.

const Controlled = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Pressable onClick={() => setOpen(true)}>
        열기
      </Pressable>
      <Box mx="auto">
        <ModalBottomSheet
          open={open}
          onClose={() => setOpen(false)}
        />
      </Box>
    </>
  );
};

비제어

defaultOpen 속성을 통해 초기 열림 상태만 지정하고 이후의 상태는 ModalBottomSheet 컴포넌트 내부에서 관리됩니다. render prop인 renderOpener 속성으로 ModalBottomSheet을 열리게 하는 요소를 지정할 수 있으며 전달인자로 ModalBottomSheet을 열린 상태로 변경하는 함수 open와 현재 열림 상태를 나타내는 isOpen 프로퍼티를 가진 객체를 제공합니다.

const Uncontrolled = () => (
  <ModalBottomSheet
    defaultOpen={false}
    renderOpener={({ open, isOpen }) => (
      <Pressable onClick={open}>열기</Pressable>
    )}
  />
);

CTA 버튼

CTA 버튼은 primaryButtonOptions, secondaryButtonOptions, subButtonOptions 속성을 통해 사용할 수 있습니다. Primary 버튼없이 Secondary 버튼이나 Sub 버튼을 사용할 수 없으며 Secondary 버튼이나 Sub 버튼을 동시에 사용할 수도 없습니다.

<HStack alignHorizontal="center" width="100%" spacing={20}> <ModalBottomSheet title="" defaultOpen={false} renderOpener={({ open }) => ( <ContainedButton kind="primary" size="md" onClick={open} > Primary </ContainedButton> )} primaryButtonOptions={{ title: 'primary', disabled: false, }} /> <ModalBottomSheet title="" defaultOpen={false} renderOpener={({ open }) => ( <ContainedButton kind="primary" size="md" onClick={open} > Primary + Secondary </ContainedButton> )} primaryButtonOptions={{ text: 'primary', disabled: false, }} secondaryButtonOptions={{ text: 'secondary', disabled: false, }} /> <ModalBottomSheet title="" defaultOpen={false} renderOpener={({ open }) => ( <ContainedButton kind="primary" size="md" onClick={open} > Primary + Sub </ContainedButton> )} primaryButtonOptions={{ text: 'primary', disabled: false, }} subButtonOptions={{ text: 'secondary', disabled: false, }} /> </HStack>

<HStack alignHorizontal="center" width="100%" spacing={20}>
  <ModalBottomSheet
    title=""
    defaultOpen={false}
    renderOpener={({ open }) => (
      <ContainedButton
        kind="primary"
        size="md"
        onClick={open}
      >
        Primary
      </ContainedButton>
    )}
    primaryButtonOptions={{
      title: 'primary',
      disabled: false,
    }}
  />
  <ModalBottomSheet
    title=""
    defaultOpen={false}
    renderOpener={({ open }) => (
      <ContainedButton
        kind="primary"
        size="md"
        onClick={open}
      >
        Primary + Secondary
      </ContainedButton>
    )}
    primaryButtonOptions={{
      text: 'primary',
      disabled: false,
    }}
    secondaryButtonOptions={{
      text: 'secondary',
      disabled: false,
    }}
  />
  <ModalBottomSheet
    title=""
    defaultOpen={false}
    renderOpener={({ open }) => (
      <ContainedButton
        kind="primary"
        size="md"
        onClick={open}
      >
        Primary + Sub
      </ContainedButton>
    )}
    primaryButtonOptions={{
      text: 'primary',
      disabled: false,
    }}
    subButtonOptions={{
      text: 'secondary',
      disabled: false,
    }}
  />
</HStack>

Loading...

BackHandler (Android only)

Android 에서 뒤로 가기 시스템 버튼을 클릭 시에 모달이 닫히게 됩니다.