머티리얼 디자인 3 및 웹 컴포넌트 기반의 새로운 mdui 2가 출시되었습니다. mdui 2 개발 문서 보기.

구분선

구분선은 리스트와 페이지 레이아웃의 콘텐츠를 관리하고 분리하여 시각적 효과와 공간감을 향상시키는 데 사용됩니다.

구분선은 순수 CSS로 작성되었으며, HTML 코드만 작성하면 적용됩니다.

스타일

전체 너비 구분선은 너비의 100%를 차지합니다. 사용할 수 있는 클래스 이름은 다음과 같습니다:

예시

<div class="mdui-divider"></div>

인셋 구분선은 왼쪽에서 72px 떨어진 위치에서 시작하며, 아바타나 아이콘이 있는 리스트에서 자주 사용됩니다. 사용할 수 있는 클래스 이름은 다음과 같습니다:

예시

<div class="mdui-divider-inset"></div>

클래스 이름	설명
`.mdui-divider`	구분선을 정의합니다. 기본 테마에서는 어둡게, 다크 테마에서는 밝게 표시됩니다.
`.mdui-divider-light`	어두운 배경을 위한 밝은 구분선을 정의합니다.
`.mdui-divider-dark`	밝은 배경을 위한 어두운 구분선을 정의합니다.
`.mdui-divider-inset`	인셋 구분선을 정의합니다. 기본 테마에서는 어둡게, 다크 테마에서는 밝게 표시됩니다.
`.mdui-divider-inset-light`	어두운 배경을 위한 밝은 인셋 구분선을 정의합니다.
`.mdui-divider-inset-dark`	밝은 배경을 위한 어두운 인셋 구분선을 정의합니다.