Divider구분선

구분선은 목록 및 컨테이너 내에서 콘텐츠를 그룹화하는 데 사용되는 얇은 선입니다.

사용법

컴포넌트 가져오기:

import 'mdui/components/divider.js';

컴포넌트의 TypeScript 타입 가져오기:

import type { Divider } from 'mdui/components/divider.js';

사용 예시:

<mdui-divider></mdui-divider>

vertical 속성을 추가하면 구분선이 수직으로 표시됩니다.

<div style="height: 80px;padding: 0 20px">
  <mdui-divider vertical></mdui-divider>
</div>

소스

inset 속성을 추가하면 구분선 왼쪽에 들여쓰기가 적용됩니다. 이는 주로 목록에서 구분선을 왼쪽 텍스트에 맞추는 데 사용됩니다.

Item 1

Item 2

<mdui-list>
  <mdui-list-item>Item 1</mdui-list-item>
  <mdui-divider inset></mdui-divider>
  <mdui-list-item>Item 2</mdui-list-item>
</mdui-list>

소스

middle 속성을 추가하면 구분선 양쪽에 들여쓰기가 적용됩니다.

Item 1

Item 2

<mdui-list>
  <mdui-list-item>Item 1</mdui-list-item>
  <mdui-divider middle></mdui-divider>
  <mdui-list-item>Item 2</mdui-list-item>
</mdui-list>

소스

HTML 속성	JavaScript 프로퍼티	유형	기본값
`vertical`	`vertical`	`boolean`	`false`
수직 구분선으로 표시할지 여부를 설정합니다.
`inset`	`inset`	`boolean`	`false`
왼쪽 들여쓰기를 적용할지 여부를 설정합니다.
`middle`	`middle`	`boolean`	`false`
양쪽 들여쓰기를 적용할지 여부를 설정합니다.

이전 장

Dialog 다이얼로그

다음 장

Dropdown 드롭다운