Divider

콘텐츠 사이에 가로 또는 세로 구분선을 배치합니다.

<sy-divider>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

방향두께색상

양 끝 여백

코드 보기

HTML

<div style="display:grid;gap:16px;width:100%"><span>프로젝트 정보</span>
  <sy-divider
    type="horizontal"
    thickness="1"
    color=""
  ></sy-divider><span>멤버와 권한</span>
</div>

사용 가이드

서로 다른 의미의 내용 사이에 명확한 구분이 필요할 때 사용하세요. 여백만으로 충분하면 구분선을 더하지 않아도 됩니다.

가로 구분: 기본 방향입니다. 위아래 콘텐츠를 구분합니다.
세로 구분: type="vertical"을 사용하고 부모 영역의 높이를 확보하세요.
선의 범위·두께: inset으로 양 끝의 여백을, thickness로 두께(px)를 정합니다. color는 CSS 색상이며 기본값은 테마를 따릅니다.

예제

콘텐츠 구분

기본 테마의 가로선으로 두 내용 영역을 구분합니다.

코드 보기

HTML

<div style="display:grid;gap:16px;width:100%"><span>기본 설정</span>
  <sy-divider></sy-divider><span>고급 설정</span>
</div>

동작 구분

같은 줄의 동작을 나눕니다. 부모에 높이를 지정했습니다.

코드 보기

HTML

<div style="display:flex;align-items:center;height:64px">
  <sy-button variant="borderless">편집</sy-button>
  <sy-divider type="vertical"></sy-divider>
  <sy-button variant="borderless">삭제</sy-button>
</div>

안쪽 여백

구분선의 시작과 끝을 콘텐츠 안쪽으로 들여놓습니다.

코드 보기

HTML

<div style="display:grid;gap:16px;width:100%"><span>윗부분</span>
  <sy-divider inset></sy-divider><span>아랫부분</span>
</div>

색상과 두께

특별한 강조가 필요한 경우에만 색상과 두께를 지정하세요.

코드 보기

HTML

<div style="display:grid;gap:16px;width:100%">
  <sy-divider thickness="2" color="#6750a4"></sy-divider>
  <sy-divider thickness="4" color="#8d7ab8"></sy-divider>
</div>

기능별 예제

2개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.

속성 · Type

설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.

코드 보기

HTML

예제를 불러오고 있습니다.

API reference

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

`<sy-divider>`

Properties

Type	Default	Description
`'horizontal' \| 'vertical'`	`'horizontal'`	가로 또는 세로 구분선입니다.
`boolean`	`false`	구분선 양 끝에 여백을 둡니다.
`number`	`1`	구분선의 두께(px)입니다.
`string`	`''`	컴포넌트에 적용할 색상입니다. 지원하는 값은 타입을 확인하세요.