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>

По умолчанию основной и дополнительный текст отображаются полностью, независимо от их длины. Вы можете ограничить количество строк основного и дополнительного текста с помощью атрибутов 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>

Исходный код

Боковое содержимое

Установите атрибуты icon и end-icon у компонента <mdui-list-item>, чтобы добавить иконки 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 у компонента <mdui-list-item>, чтобы превратить элемент списка в ссылку. При этом также можно использовать связанные с ссылками атрибуты: download, target, rel.

Headline

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

Исходный код

Отключенное состояние

Добавьте атрибут disabled у компонента <mdui-list-item>, чтобы отключить элемент списка. При этом такие компоненты внутри элемента, как чекбоксы, радиокнопки, переключатели, также будут отключены.

Headline

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

Исходный код

Активное состояние

Добавьте атрибут active у компонента <mdui-list-item>, чтобы активировать элемент списка.

Headline

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

Исходный код

Некликабельное состояние

Добавьте атрибут nonclickable у компонента <mdui-list-item>, чтобы убрать эффекты при наведении курсора и пульсации при клике.

Headline

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

Исходный код

Скругленная форма

Добавьте атрибут rounded у компонента <mdui-list-item>, чтобы элемент списка имел скругленные углы.

Headline

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

Исходный код

Вертикальное выравнивание

Используйте атрибут alignment у компонента <mdui-list-item>, чтобы настроить выравнивание боковых элементов относительно элемента списка. Возможные значения:

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>

Исходный код

Пользовательское содержимое

Используйте слот custom в компоненте <mdui-list-item>, чтобы полностью настроить содержимое элемента списка.

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

Свойства

Атрибут	Свойство	Тип	По умолчанию
`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 Меню

ListСписок

Использование

Примеры

Текстовое содержимое

Боковое содержимое

Ссылка

Отключенное состояние

Активное состояние

Некликабельное состояние

Скругленная форма

Вертикальное выравнивание

Пользовательское содержимое

`mdui-list-item` API

Свойства

Методы

События

Slots

CSS Parts

Пользовательские CSS-свойства

`mdui-list-subheader` API

Slots

`mdui-list` API

Slots