Divider

Foundation

콘텐츠 사이를 나누는 구분선.

Usage

콘텐츠 사이 구분선(line) 또는 점(dot)

import

import { Divider } from '@mildang/design-system/Divider';

API Reference

Divider Props

Prop

Type

Default

type

"dot" | "verticalBar" | "horizontalBar"

verticalBar

예제

길이 조절

별도 prop 없이 h/w 같은 panda 스타일 prop 으로 구분선 길이를 늘립니다.

코드

Open in Playground

import type { ComponentProps } from 'react';
import { Divider } from '@mildang/design-system/Divider';

const STORY_DEFAULT_ARGS = { ...({}), ...({ type: 'verticalBar', h: '100%' }) } as ComponentProps<typeof Divider>;

export default function DividerCustomLengthExample(props: Partial<ComponentProps<typeof Divider>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Divider>;
  return <Divider {...mergedProps} />;
}

Demo

코드

Open in Playground

import type { ComponentProps } from 'react';
import { Divider } from '@mildang/design-system/Divider';

const STORY_DEFAULT_ARGS = { ...({}), ...({ type: 'verticalBar' }) } as ComponentProps<typeof Divider>;

export default function DividerDemoExample(props: Partial<ComponentProps<typeof Divider>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Divider>;
  return <Divider {...mergedProps} />;
}

HorizontalBar

코드

Open in Playground

import type { ComponentProps } from 'react';
import { Divider } from '@mildang/design-system/Divider';

const STORY_DEFAULT_ARGS = { ...({}), ...({ type: 'horizontalBar' }) } as ComponentProps<typeof Divider>;

export default function DividerHorizontalBarExample(props: Partial<ComponentProps<typeof Divider>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Divider>;
  return <Divider {...mergedProps} />;
}

Dot

코드

Open in Playground

import type { ComponentProps } from 'react';
import { Divider } from '@mildang/design-system/Divider';

const STORY_DEFAULT_ARGS = { ...({}), ...({ type: 'dot' }) } as ComponentProps<typeof Divider>;

export default function DividerDotExample(props: Partial<ComponentProps<typeof Divider>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Divider>;
  return <Divider {...mergedProps} />;
}