List목록

목록은 텍스트나 이미지를 표시하는 세로 방향의 인덱스로, 사용자가 관련 정보를 빠르게 찾아보고 접근할 수 있도록 합니다.

사용법

컴포넌트 가져오기:

import 'mdui/components/list.js';
import 'mdui/components/list-item.js';
import 'mdui/components/list-subheader.js';

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

import type { List } from 'mdui/components/list.js';
import type { ListItem } from 'mdui/components/list-item.js';
import type { ListSubheader } from 'mdui/components/list-subheader.js';

사용 예시:

Subheader

Item 1

Item 2

<mdui-list>
  <mdui-list-subheader>Subheader</mdui-list-subheader>
  <mdui-list-item>Item 1</mdui-list-item>
  <mdui-list-item>Item 2</mdui-list-item>
</mdui-list>

예시

텍스트 내용

<mdui-list-item> 컴포넌트에 headline 속성을 설정하면 목록 항목의 기본 텍스트를, description 속성을 설정하면 부 텍스트를 지정할 수 있습니다.

<mdui-list>
  <mdui-list-item headline="Headline"></mdui-list-item>
  <mdui-list-item headline="Headline" description="Supporting text"></mdui-list-item>
</mdui-list>

소스

default 슬롯을 통해 기본 텍스트를, description 슬롯을 통해 부 텍스트를 지정할 수도 있습니다.

Headline

Headline Supporting text

<mdui-list>
  <mdui-list-item>Headline</mdui-list-item>
  <mdui-list-item>
    Headline
    <span slot="description">Supporting text</span>
  </mdui-list-item>
</mdui-list>

소스

기본적으로 기본 텍스트와 부 텍스트는 길이에 관계없이 모두 표시됩니다. headline-line 및 description-line 속성을 설정하여 기본 텍스트와 부 텍스트에 행 수 제한을 추가할 수 있으며, 최대 3행까지 제한할 수 있습니다.

Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text

<mdui-list>
  <mdui-list-item headline-line="1" description-line="2">
    Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline
    <span slot="description">Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text</span>
  </mdui-list-item>
</mdui-list>

소스

양쪽 내용

<mdui-list-item> 컴포넌트에 icon 및 end-icon 속성을 설정하면 목록 항목의 왼쪽과 오른쪽에 Material Icons 아이콘을 추가할 수 있습니다.

Headline

<mdui-list>
  <mdui-list-item icon="people" end-icon="arrow_right">Headline</mdui-list-item>
</mdui-list>

소스

icon 및 end-icon 슬롯을 통해 목록 항목의 왼쪽과 오른쪽에 요소를 추가할 수도 있습니다.

Headline

<mdui-list>
  <mdui-list-item>
    Headline
    <mdui-avatar slot="icon" src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>
    <mdui-checkbox slot="end-icon"></mdui-checkbox>
  </mdui-list-item>
</mdui-list>

소스

링크

href 속성을 설정하면 목록 항목을 링크로 변환할 수 있습니다. 이때 링크 관련 속성(download, target, rel)도 함께 사용합니다.

Headline

<mdui-list>
  <mdui-list-item href="https://www.mdui.org" target="_blank">Headline</mdui-list-item>
</mdui-list>

소스

비활성화 상태

<mdui-list-item> 컴포넌트에 disabled 속성을 추가하면 해당 목록 항목을 비활성화할 수 있습니다. 이때 목록 항목 내의 체크박스, 라디오, 스위치 등의 컴포넌트도 함께 비활성화됩니다.

Headline

<mdui-list>
  <mdui-list-item disabled>Headline</mdui-list-item>
  <mdui-list-item>Headline</mdui-list-item>
</mdui-list>

소스

활성화 상태

<mdui-list-item> 컴포넌트에 active 속성을 추가하면 해당 목록 항목을 활성화할 수 있습니다.

Headline

<mdui-list>
  <mdui-list-item active>Headline</mdui-list-item>
  <mdui-list-item>Headline</mdui-list-item>
</mdui-list>

소스

클릭 불가 상태

<mdui-list-item> 컴포넌트에 nonclickable 속성을 추가하면 목록 항목에서 마우스 호버 및 클릭 물결 효과를 제거할 수 있습니다.

Headline

<mdui-list>
  <mdui-list-item nonclickable>Headline</mdui-list-item>
  <mdui-list-item>Headline</mdui-list-item>
</mdui-list>

소스

둥근 모서리 형태

<mdui-list-item> 컴포넌트에 rounded 속성을 추가하면 해당 목록 항목이 둥근 모서리 형태로 표시됩니다.

Headline

<mdui-list>
  <mdui-list-item rounded>Headline</mdui-list-item>
  <mdui-list-item rounded>Headline</mdui-list-item>
</mdui-list>

소스

수직 정렬 방식

<mdui-list-item> 컴포넌트에 alignment 속성을 설정하면 목록 항목 좌우 요소와 목록 항목의 정렬 방식을 조정할 수 있습니다. 가능한 값은 다음과 같습니다:

start: 상단 정렬
center: 중앙 정렬
end: 하단 정렬

Headline

<mdui-list>
  <mdui-list-item alignment="start" description="Supporting text">
    Headline
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="center" description="Supporting text">
    Headline
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="end" description="Supporting text">
    Headline
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
</mdui-list>

소스

사용자 정의 내용

<mdui-list-item> 컴포넌트에서 custom 슬롯을 사용하면 목록 항목의 내용을 완전히 사용자 정의할 수 있습니다.

test

<mdui-list>
  <mdui-list-item>
    <div slot="custom" style="display: flex;">
      <mdui-icon name="people"></mdui-icon>
      <div>test</div>
    </div>
  </mdui-list-item>
</mdui-list>

소스

`mdui-list-item` API

속성

HTML 속성	JavaScript 프로퍼티	유형	기본값
`headline`	`headline`	`string`	-
주요 텍스트입니다. 기본 슬롯을 통해서도 설정할 수 있습니다.
`headline-line`	`headlineLine`	`1 \| 2 \| 3`	-
주요 텍스트 줄 수로, 제한을 초과하면 잘라서 표시합니다. 기본값은 줄 수 제한 없음입니다. 사용 가능한 값: `1`: 한 줄로 표시, 초과 시 잘라냄 `2`: 두 줄로 표시, 초과 시 잘라냄 `3`: 세 줄로 표시, 초과 시 잘라냄
`description`	`description`	`string`	-
보조 텍스트입니다. `slot="description"`을 통해서도 설정할 수 있습니다.
`description-line`	`descriptionLine`	`1 \| 2 \| 3`	-
보조 텍스트 줄 수로, 제한을 초과하면 잘라서 표시합니다. 기본값은 줄 수 제한 없음입니다. 사용 가능한 값: `1`: 한 줄로 표시, 초과 시 잘라냄 `2`: 두 줄로 표시, 초과 시 잘라냄 `3`: 세 줄로 표시, 초과 시 잘라냄
`icon`	`icon`	`string`	-
왼쪽의 Material Icons 아이콘 이름입니다. `slot="icon"`을 통해서도 설정할 수 있습니다.
`end-icon`	`endIcon`	`string`	-
오른쪽의 Material Icons 아이콘 이름입니다. `slot="end-icon"`을 통해서도 설정할 수 있습니다.
`disabled`	`disabled`	`boolean`	`false`
해당 목록 항목을 비활성화할지 여부를 설정합니다. 비활성화되면 목록 항목이 회색으로 변하고, 그 안의 `<mdui-checkbox>`, `<mdui-radio>`, `<mdui-switch>` 등도 비활성화됩니다.
`active`	`active`	`boolean`	`false`
해당 목록 항목을 활성화할지 여부를 설정합니다.
`nonclickable`	`nonclickable`	`boolean`	`false`
목록 항목을 클릭 불가능하게 할지 여부를 설정합니다. 설정하면 목록 항목 내의 `<mdui-checkbox>`, `<mdui-radio>`, `<mdui-switch>` 등은 여전히 상호 작용할 수 있습니다.
`rounded`	`rounded`	`boolean`	`false`
둥근 모서리 모양의 목록 항목을 사용할지 여부를 설정합니다.
`alignment`	`alignment`	`'start' \| 'center' \| 'end'`	`'center'`
목록 항목의 수직 정렬 방식입니다. 사용 가능한 값: `start`: 상단 정렬 `center`: 중앙 정렬 `end`: 하단 정렬
`href`	`href`	`string`	-
링크의 대상 URL입니다. 이 속성을 설정하면 컴포넌트 내부가 `<a>` 요소로 렌더링되며, 링크 관련 속성을 사용할 수 있습니다.
`download`	`download`	`string`	-
다운로드할 링크 대상을 지정합니다. 참고: `href` 속성이 지정된 경우에만 유효합니다.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
링크를 여는 방식을 지정합니다. 사용 가능한 값은 다음과 같습니다: `_blank`: 새 창에서 링크 열기 `_parent`: 부모 프레임에서 링크 열기 `_self`: 기본값. 현재 프레임에서 링크 열기 `_top`: 전체 창에서 링크 열기 참고: `href` 속성이 지정된 경우에만 유효합니다.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
현재 문서와 링크된 문서 간의 관계를 나타냅니다. 사용 가능한 값은 다음과 같습니다: `alternate`: 현재 문서의 대체 버전 `author`: 현재 문서 또는 글의 작성자 `bookmark`: 가장 가까운 상위 섹션으로의 영구 링크 `external`: 참조된 문서가 현재 문서와 동일한 사이트에 있지 않음 `help`: 관련 도움말 문서로 링크 `license`: 현재 문서의 주요 내용이 참조된 파일의 저작권 라이선스에 따라 사용됨 `me`: 현재 문서가 링크된 콘텐츠의 소유자를 나타냄 `next`: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 다음 문서임 `nofollow`: 현재 문서의 작성자 또는 게시자가 참조된 파일을 보증하지 않음 `noreferrer`: `Referer` 헤더가 포함되지 않음. `noopener`와 유사하게 동작합니다. `opener`: 하이퍼링크가 최상위 브라우징 컨텍스트를 생성할 때(즉, `target` 속성 값이 `_blank`인 경우) 보조 브라우징 컨텍스트를 생성함 `prev`: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 이전 문서임 `search`: 현재 파일 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스 링크를 제공 `tag`: 현재 문서에 적용할 수 있는 태그(지정된 주소로 식별됨)를 제공 참고: `href` 속성이 지정된 경우에만 사용 가능합니다.
`autofocus`	`autofocus`	`boolean`	`false`
페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
`tabindex`	`tabIndex`	`number`	-
Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.

메서드

이름	매개변수	반환값
`click`		`void`
마우스 클릭을 시뮬레이션합니다.
`focus`	`options: FocusOptions` (선택사항)	`void`
현재 요소에 포커스를 설정합니다. 객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다: `preventScroll`: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 `true`로 설정하십시오.
`blur`		`void`
현재 요소에서 포커스를 제거합니다.

이벤트

이름
`focus`
포커스를 얻었을 때 발생합니다.
`blur`
포커스를 잃었을 때 발생합니다.

Slots

이름
기본
주요 텍스트
`description`
보조 텍스트
`icon`
목록 항목 왼쪽의 요소
`end-icon`
목록 항목 오른쪽의 요소
`custom`
임의의 사용자 정의 콘텐츠

CSS Parts

이름
`container`
목록 항목 컨테이너
`icon`
왼쪽 아이콘
`end-icon`
오른쪽 아이콘
`body`
중간 부분
`headline`
주요 제목
`description`
보조 제목

CSS 사용자 정의 속성

이름
`--shape-corner`
목록 항목의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
`--shape-corner-rounded`
`rounded` 속성이 지정되었을 때 목록 항목의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.

`mdui-list-subheader` API

Slots

이름
기본
목록 소제목 텍스트

`mdui-list` API

Slots

이름
기본
`<mdui-list-item>` 요소

이전 장

LinearProgress 선형 프로그레스

다음 장

Menu 메뉴