Divider

Divider 는 콘텐츠의 영역을 나누고 싶을때 사용할 수 있는 구획 컴포넌트입니다.

<VStack> <Box width="100%" height={20} backgroundColor="surface4" /> <Divider direction="horizontal" margin="none" kind="default" /> <Box width="100%" height={20} backgroundColor="surface4" /> </VStack>

<VStack>
  <Box
    width="100%"
    height={20}
    backgroundColor="surface4"
  />
  <Divider
    direction="horizontal"
    margin="none"
    kind="default"
  />
  <Box
    width="100%"
    height={20}
    backgroundColor="surface4"
  />
</VStack>

Loading...

How to use

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

Properties

Prop	Type	Default	Description
direction(*)	horizontal | vertical	-	Divider 의 방향
kind	dashed | default | thick	default	Divider 선의 종류
margin	lg | md | none	none	Divider 선 주위의 여백 크기

Usage

방향

Divider 의 방향을 결정하며, 필수 속성입니다.

horizontal 일때는 가로 구분선, vertical 일때는 세로 구분선으로 적용됩니다.

<HStack spacing={20} height={100}> <VStack width="50%"> <Box width="100%" height="50%" backgroundColor="surface4" /> <Divider direction="horizontal" kind="thick" /> <Box width="100%" height="50%" backgroundColor="surface4" /> </VStack> <HStack height="100%" width="50%"> <Box width="50%" height="100%" backgroundColor="surface4" /> <Divider direction="vertical" kind="thick" /> <Box width="50%" height="100%" backgroundColor="surface4" /> </HStack> </HStack>

<HStack spacing={20} height={100}>
  <VStack width="50%">
    <Box
      width="100%"
      height="50%"
      backgroundColor="surface4"
    />
    <Divider direction="horizontal" kind="thick" />
    <Box
      width="100%"
      height="50%"
      backgroundColor="surface4"
    />
  </VStack>
  <HStack height="100%" width="50%">
    <Box
      width="50%"
      height="100%"
      backgroundColor="surface4"
    />
    <Divider direction="vertical" kind="thick" />
    <Box
      width="50%"
      height="100%"
      backgroundColor="surface4"
    />
  </HStack>
</HStack>

Loading...

종류

kind 는 구분선의 스타일을 결정할 수 있습니다.

<VStack> <VStack> <Box width="100%" height={20} backgroundColor="surface4" /> <Divider direction="horizontal" margin="lg" kind="dashed" // default, thick 속성을 각각 입혀 확인해보세요 /> <Box width="100%" height={20} backgroundColor="surface4" /> </VStack> </VStack>

<VStack>
  <VStack>
    <Box
      width="100%"
      height={20}
      backgroundColor="surface4"
    />
    <Divider
      direction="horizontal"
      margin="lg"
      kind="dashed" // default, thick 속성을 각각 입혀 확인해보세요
    />
    <Box
      width="100%"
      height={20}
      backgroundColor="surface4"
    />
  </VStack>
</VStack>

Loading...