# Component/BottomSheet

> Props: component-bottomsheet.props.txt

## Examples


### Base

```tsx
{
  args: {
    title: 'Heading',
    subTitle: 'SubHeading'
  },
  render: args => {
    const [show, setShow] = useState(false);
    return <>
        <Button onClick={() => setShow(true)}>open</Button>
        <BottomSheet {...args} opened={show} onClose={() => setShow(false)}>
          <Stack direction='row' mt={16} mb={16}>
            <BaseText kind='Body_12_Regular' color={semantic_colors.content.secondary}>
              Body Content
            </BaseText>
          </Stack>
          <Stack direction='column' gap={40}>
            <Input placeholder='placeholder' size='large' />
            <Button kind='primary' size='large'>
              Label
            </Button>
          </Stack>
        </BottomSheet>
      </>;
  }
}
```

### Bottom Sheet With Modal

```tsx
{
  render: () => {
    const [show, setShow] = useState(false);
    const [show_modal, setShowModal] = useState(false);
    const onHandleConfirm = () => {
      Confirm({
        zIndex: getZIndex('toast'),
        title: 'confirm'
      });
    };
    return <>
        <Button onClick={() => setShow(true)}>open</Button>
        <BottomSheet opened={show} title='Heading' subTitle='SubHeading' onClose={() => setShow(false)} zIndex={getZIndex('modal')}>
          {({
          close
        }) => <>
              <Stack direction='row' mt={16} mb={16}>
                <BaseText kind='Body_12_Regular' color={semantic_colors.content.secondary}>
                  Body Content
                </BaseText>
              </Stack>
              <Stack direction='column' gap={40}>
                <Input size='large' placeholder='placeholder' />
                <Button kind='primary' size='large' onClick={onHandleConfirm}>
                  Confirm
                </Button>
                <Button kind='secondary' size='large' onClick={() => setShowModal(true)}>
                  Open Modal
                </Button>
                <Button kind='primary' size='large' onClick={close}>
                  Close
                </Button>
                <Modal opened={show_modal} onCancel={() => setShowModal(false)} cancelText='닫기' fullScreen>
                  <Button kind='primary' size='large' onClick={onHandleConfirm}>
                    Confirm
                  </Button>
                </Modal>
              </Stack>
            </>}
        </BottomSheet>
      </>;
  }
}
```

### Content With Close Action

```tsx
{
  render: () => {
    const [show, setShow] = useState(false);
    return <>
        <Button onClick={() => setShow(true)}>open</Button>
        <BottomSheet opened={show} title='Heading' subTitle='SubHeading' onClose={() => setShow(false)}>
          {({
          close
        }) => <>
              <Stack direction='row' mt={16} mb={16}>
                <BaseText kind='Body_12_Regular' color={semantic_colors.content.secondary}>
                  Body Content
                </BaseText>
              </Stack>
              <Stack direction='column' gap={40}>
                <Input size='large' placeholder='placeholder' />
                <Button kind='primary' size='large' onClick={close}>
                  Close
                </Button>
              </Stack>
            </>}
        </BottomSheet>
      </>;
  }
}
```

### Disabled Close Dim Click

```tsx
{
  args: {
    title: 'Heading',
    subTitle: 'SubHeading'
  },
  render: args => {
    const [show, setShow] = useState(false);
    return <>
        <Button onClick={() => setShow(true)}>open</Button>
        <BottomSheet {...args} opened={show} onClose={() => setShow(false)}>
          <Stack direction='row' mt={16} mb={16}>
            <BaseText kind='Body_12_Regular' color={semantic_colors.content.secondary}>
              Body Content
            </BaseText>
          </Stack>
          <Stack direction='column' gap={40}>
            <Input placeholder='placeholder' size='large' />
            <Button kind='primary' size='large'>
              Label
            </Button>
          </Stack>
        </BottomSheet>
      </>;
  },
  args: {
    title: 'Heading',
    subTitle: 'SubHeading',
    canClickOutside: false
  }
}
```

### Disabled Close Drag

```tsx
{
  args: {
    title: 'Heading',
    subTitle: 'SubHeading'
  },
  render: args => {
    const [show, setShow] = useState(false);
    return <>
        <Button onClick={() => setShow(true)}>open</Button>
        <BottomSheet {...args} opened={show} onClose={() => setShow(false)}>
          <Stack direction='row' mt={16} mb={16}>
            <BaseText kind='Body_12_Regular' color={semantic_colors.content.secondary}>
              Body Content
            </BaseText>
          </Stack>
          <Stack direction='column' gap={40}>
            <Input placeholder='placeholder' size='large' />
            <Button kind='primary' size='large'>
              Label
            </Button>
          </Stack>
        </BottomSheet>
      </>;
  },
  args: {
    title: 'Heading',
    subTitle: 'SubHeading',
    canDragClose: false
  }
}
```

### Max Height

내부 컨텐츠 길이가 길어질 경우 innerHeight 기준 최소 여백 안에서 max-height 적용됩니다.

```tsx
{
  render: () => {
    const [show, setShow] = useState(false);
    return <>
        <Button onClick={() => setShow(true)}>open</Button>
        <BottomSheet opened={show} title='Heading' subTitle='SubHeading' onClose={() => setShow(false)}>
          <Stack direction='row' mt={16} mb={16}>
            <BaseText kind='Body_12_Regular' color={semantic_colors.content.secondary}>
              Body Content
            </BaseText>
          </Stack>
          <Stack direction='column' gap={40}>
            <Input size='large' placeholder='placeholder' />
            <Button kind='primary' size='large'>
              Label
            </Button>
          </Stack>
          <Stack direction='column' mt={16} p={20} height={1500} style={{
          backgroundColor: colors.gray50
        }}>
            long content...
          </Stack>
        </BottomSheet>
      </>;
  },
  parameters: {
    docs: {
      description: {
        story: '내부 컨텐츠 길이가 길어질 경우 innerHeight 기준 최소 여백 안에서 max-height 적용됩니다.'
      }
    }
  }
}
```

### No Use Portal Bottom Sheet

```tsx
{
  render: args => {
    const [open, setOpen] = useState(false);
    return <Stack direction='column' width={500} height={500} style={{
      position: 'relative',
      border: `1px solid ${semantic_colors.border.primary}`
    }}>
        <Button onClick={() => setOpen(true)}>inline open</Button>
        <BottomSheet {...args} opened={open} onClose={() => setOpen(false)}>
          <Stack direction='column' p={24}>
            <Stack direction='row' align='center' justify='space-between'>
              <BaseText kind='Heading_17_Bold' color={semantic_colors.content.primary}>
                BottomSheet Content
              </BaseText>
              <CloseButton size={24} onClick={() => setOpen(false)} />
            </Stack>
          </Stack>
        </BottomSheet>
      </Stack>;
  },
  args: {
    noUsePortal: true
  }
}
```