Bottom Sheet

Bottom sheet는 화면 하단에 고정되어 이전 화면과 관련된 콘텐츠를 표시합니다. 사용자에게 추가적인 정보, 작업 또는 메뉴를 제공하는 데 사용됩니다.

import { ActionButton } from "seed-design/ui/action-button";
import {
  BottomSheetBody,
  BottomSheetContent,
  BottomSheetFooter,
  BottomSheetRoot,
  BottomSheetTrigger,
} from "seed-design/ui/bottom-sheet";

const BottomSheetPreview = () => {
  return (
    <BottomSheetRoot>
      <BottomSheetTrigger asChild>
        <ActionButton>Open</ActionButton>
      </BottomSheetTrigger>
      <BottomSheetContent title="제목" description="설명을 작성할 수 있어요">
        {/* If you need to omit padding, pass px={0}. */}
        <BottomSheetBody minHeight="x16">Content</BottomSheetBody>
        <BottomSheetFooter>
          <ActionButton variant="neutralSolid">확인</ActionButton>
        </BottomSheetFooter>
      </BottomSheetContent>
    </BottomSheetRoot>
  );
};

export default BottomSheetPreview;

Installation

npx @seed-design/cli@latest add bottom-sheet

Props

`BottomSheetRoot`

Prop	Type	Default
`headerAlign?`	`"left" \| "center"`	`left`
`children?`	`ReactNode`	-
`role?`	`"dialog" \| "alertdialog"`	`"dialog"`
`closeOnInteractOutside?`	`boolean`	`true`
`closeOnEscape?`	`boolean`	`true`
`lazyMount?`	`boolean`	`false`
`unmountOnExit?`	`boolean`	`false`
`open?`	`boolean`	-
`defaultOpen?`	`boolean`	-
`onOpenChange?`	`((open: boolean) => void)`	-

`BottomSheetTrigger`

Prop	Type	Default
`asChild?`	`boolean`	`false`

`BottomSheetContent`

Prop	Type	Default
`title?`	`ReactNode`	-
`description?`	`ReactNode`	-
`layerIndex?`	`number`	-
`asChild?`	`boolean`	`false`

`BottomSheetBody`

Prop	Type	Default
`asChild?`	`boolean`	`false`
`paddingX?`	`0 \| Dimension \| "spacingX.betweenChips" \| "spacingX.globalGutter" \| "spacingY.componentDefault" \| "spacingY.navToTitle" \| "spacingY.screenBottom" \| "spacingY.betweenText" \| (string & {})`	-
`height?`	`Dimension \| "spacingX.betweenChips" \| "spacingX.globalGutter" \| "spacingY.componentDefault" \| "spacingY.navToTitle" \| "spacingY.screenBottom" \| "spacingY.betweenText" \| (string & {}) \| "full"`	-
`maxHeight?`	`Dimension \| "spacingX.betweenChips" \| "spacingX.globalGutter" \| "spacingY.componentDefault" \| "spacingY.navToTitle" \| "spacingY.screenBottom" \| "spacingY.betweenText" \| (string & {}) \| "full"`	-
`minHeight?`	`Dimension \| "spacingX.betweenChips" \| "spacingX.globalGutter" \| "spacingY.componentDefault" \| "spacingY.navToTitle" \| "spacingY.screenBottom" \| "spacingY.betweenText" \| (string & {}) \| "full"`	-
`justifyContent?`	`"flex-start" \| "flex-end" \| "center" \| "space-between" \| "space-around" \| "flexStart" \| "flexEnd" \| "spaceBetween" \| "spaceAround"`	-
`alignItems?`	`"flex-start" \| "flex-end" \| "center" \| "flexStart" \| "flexEnd" \| "stretch"`	-

`BottomSheetFooter`

Prop	Type	Default
`asChild?`	`boolean`	`false`

Examples

Trigger

<BottomSheetTrigger>는 asChild 패턴을 사용해 자식 요소가 BottomSheet를 열 수 있도록 합니다.

<BottomSheetTrigger>는 BottomSheet의 open 상태에 따라 aria-expanded 속성을 자동으로 설정합니다. 이 속성은 스크린 리더와 같은 보조 기술에 유용합니다.

import { ActionButton } from "seed-design/ui/action-button";
import {
  BottomSheetBody,
  BottomSheetContent,
  BottomSheetFooter,
  BottomSheetRoot,
  BottomSheetTrigger,
} from "seed-design/ui/bottom-sheet";

const BottomSheetTriggerExample = () => {
  return (
    <BottomSheetRoot>
      <BottomSheetTrigger asChild>
        <ActionButton>Open</ActionButton>
      </BottomSheetTrigger>
      <BottomSheetContent title="제목">
        <BottomSheetBody minHeight="x16">Content</BottomSheetBody>
        <BottomSheetFooter>
          <ActionButton variant="neutralSolid">확인</ActionButton>
        </BottomSheetFooter>
      </BottomSheetContent>
    </BottomSheetRoot>
  );
};

export default BottomSheetTriggerExample;

Controlled

Trigger 외의 방식으로 BottomSheet를 열고 닫을 수 있습니다. 이 경우 open prop을 사용하여 BottomSheet의 상태를 제어합니다.

import { useState } from "react";
import { ActionButton } from "seed-design/ui/action-button";
import {
  BottomSheetBody,
  BottomSheetContent,
  BottomSheetFooter,
  BottomSheetRoot,
} from "seed-design/ui/bottom-sheet";

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

  const scheduleOpen = () => {
    setTimeout(() => {
      setOpen(true);
    }, 1000);
  };

  return (
    <>
      <ActionButton onClick={scheduleOpen}>1초 후 열기</ActionButton>
      <BottomSheetRoot open={open} onOpenChange={setOpen}>
        <BottomSheetContent title="제목" description="설명을 작성할 수 있어요">
          {/* If you need to omit padding, pass px={0}. */}
          <BottomSheetBody minHeight="x16">Content</BottomSheetBody>
          <BottomSheetFooter>
            <ActionButton variant="neutralSolid">확인</ActionButton>
          </BottomSheetFooter>
        </BottomSheetContent>
      </BottomSheetRoot>
    </>
  );
};

export default BottomSheetControlled;

Max Height

<BottomSheetBody>에 maxHeight prop을 전달하여 BottomSheet의 최대 높이를 설정할 수 있습니다.

import { Box, VStack } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import {
  BottomSheetBody,
  BottomSheetContent,
  BottomSheetFooter,
  BottomSheetRoot,
  BottomSheetTrigger,
} from "seed-design/ui/bottom-sheet";

const BottomSheetMaxHeight = () => {
  return (
    <BottomSheetRoot>
      <BottomSheetTrigger asChild>
        <ActionButton>Open</ActionButton>
      </BottomSheetTrigger>
      <BottomSheetContent title="제목" description="설명을 작성할 수 있어요">
        {/* If you need to omit padding, pass px={0}. */}
        <BottomSheetBody>
          <VStack maxHeight="300px" overflowY="auto">
            <VStack justifyContent="center" alignItems="center" gap="x4" height="100%">
              <Box width="100%" height="100px" bg="bg.layerBasement" />
              <Box width="100%" height="100px" bg="bg.layerBasement" />
              <Box width="100%" height="100px" bg="bg.layerBasement" />
              <Box width="100%" height="100px" bg="bg.layerBasement" />
            </VStack>
          </VStack>
        </BottomSheetBody>
        <BottomSheetFooter>
          <ActionButton variant="neutralSolid">확인</ActionButton>
        </BottomSheetFooter>
      </BottomSheetContent>
    </BottomSheetRoot>
  );
};

export default BottomSheetMaxHeight;

Bottom Inset

<BottomSheetContent>에 style prop을 전달하여 아래 여백을 주기 위해 사용합니다.

import { ActionButton } from "seed-design/ui/action-button";
import {
  BottomSheetBody,
  BottomSheetContent,
  BottomSheetFooter,
  BottomSheetRoot,
  BottomSheetTrigger,
} from "seed-design/ui/bottom-sheet";

const BottomSheetBottomInset = () => {
  return (
    <BottomSheetRoot>
      <BottomSheetTrigger asChild>
        <ActionButton>Open</ActionButton>
      </BottomSheetTrigger>
      <BottomSheetContent
        title="제목"
        description="설명을 작성할 수 있어요"
        // 모바일 브라우저에서 아래 여백을 주기 위해 사용
        style={{ paddingBottom: "var(--seed-safe-area-bottom)" }}
      >
        {/* If you need to omit padding, pass px={0}. */}
        <BottomSheetBody minHeight="x16">Content</BottomSheetBody>
        <BottomSheetFooter>
          <ActionButton variant="neutralSolid">확인</ActionButton>
        </BottomSheetFooter>
      </BottomSheetContent>
    </BottomSheetRoot>
  );
};

export default BottomSheetBottomInset;

Bottom Sheet

Manual Installation

On this page