Component

Separator

인접한 영역을 시각적으로 나누고 필요하면 구조적 의미도 추가합니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

구분선의 방향

보조 장식으로 처리하고 의미를 제거

Code

import { type ComponentPropsWithoutRef } from 'react'

import { cn } from '@amineslab/ui/utils'

import { Separator } from '@amineslab/ui'

function ExampleSeparatorLayout({ className, orientation = 'horizontal', ...props }: ComponentPropsWithoutRef<'div'> & {
    orientation?: 'horizontal' | 'vertical';
}) {
    return (<div {...props} className={cn('w-full max-w-105 gap-3', orientation === 'vertical' ? 'flex h-5 items-center' : 'grid', className)}/>);
}

export default function ExamplePreview() {
  return ((<ExampleSeparatorLayout orientation={"horizontal"}>
      <span>앞 내용</span>
      <Separator decorative={true} orientation={"horizontal"}/>
      <span>뒤 내용</span>
    </ExampleSeparatorLayout>))
}

Props

@amineslab/ui에서 Separator를 가져옵니다.

import { Separator } from '@amineslab/ui'

`Separator`

HTML <div> 요소의 표준 속성을 그대로 받습니다.

Name	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	구분선의 방향입니다.
`decorative`	`boolean`	`true`	보조 기술에서 무시하는 장식 요소로 처리합니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

Vertical

한 줄 안에서 항목을 나눌 때 씁니다. 부모의 높이를 따릅니다.

편집

import { type ComponentPropsWithoutRef } from 'react'

import { cn } from '@amineslab/ui/utils'

import { Separator } from '@amineslab/ui'

function ExampleSeparatorLayout({ className, orientation = 'horizontal', ...props }: ComponentPropsWithoutRef<'div'> & {
    orientation?: 'horizontal' | 'vertical';
}) {
    return (<div {...props} className={cn('w-full max-w-105 gap-3', orientation === 'vertical' ? 'flex h-5 items-center' : 'grid', className)}/>);
}

export default function ExamplePreview() {
  return ((<ExampleSeparatorLayout orientation="vertical">
          <span>편집</span>
          <Separator orientation="vertical"/>
          <span>공유</span>
        </ExampleSeparatorLayout>))
}

사용 기준

권장하는 사용

제목과 간격만으로 영역을 구분하기 어려울 때 사용합니다.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

이 컴포넌트에는 별도의 키보드 조작이 필요하지 않습니다.