List

A List is a vertical arrangement of items that can contain text or images.

Usage

Import the component:

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

Import the TypeScript type:

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';

Example:

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>

Examples

Text Content

The headline attribute on <mdui-list-item> sets the primary text, while the description attribute sets the secondary text.

Alternatively, use the default slot for the primary text and the description slot for the secondary text.

By default, both primary and secondary text are displayed in full. To limit the number of lines, use the headline-line and description-line attributes. The maximum limit is 3 lines.

Side Content

The icon and end-icon attributes on <mdui-list-item> add Material Icons to the left and right sides, respectively.

Alternatively, use the icon and end-icon slots to add elements to the left and right sides of the list item.

The href attribute turns the list into a link, with download, target, and rel attributes available for link-related functionality.

Disabled State

The disabled attribute on <mdui-list-item> disables the item. This also disables components within the list item.

Active State

The active attribute on <mdui-list-item> activates the item.

Nonclickable State

The nonclickable attribute on <mdui-list-item> removes mouse hover and click ripple effects.

Rounded Shape

The rounded attribute on <mdui-list-item> gives the item a rounded appearance.

Vertical Alignment

The alignment attribute on <mdui-list-item> aligns elements on the left and right. Possible values:

  • start: top alignment.
  • center: center alignment.
  • end: bottom alignment.

Custom Content

The custom slot in <mdui-list-item> allows for full customization of the list item content.

mdui-list API

Slots

Name
(default)

Contains <mdui-list-item> elements.

mdui-list-item API

Properties

AttributePropertyReflectTypeDefault
headlineheadlinestring-

Main text. Alternatively, use the default slot.

headline-lineheadlineLine1 | 2 | 3-

Line limit for main text. Truncates after exceeding. Default is no limit. Possible values:

  • 1: Single-line text, truncates after exceeding
  • 2: Double-line text, truncates after exceeding.
  • 3: Triple-line text, truncates after exceeding.
descriptiondescriptionstring-

Subtext. Alternatively, use slot="description".

description-linedescriptionLine1 | 2 | 3-

Line limit for subtext. Truncates after exceeding. Default is no limit. Possible values:

  • 1: Single-line text, truncates after exceeding
  • 2: Double-line text, truncates after exceeding.
  • 3: Triple-line text, truncates after exceeding.
iconiconstring-

Material Icons name on the left. Alternatively, use slot="icon".

end-iconendIconstring-

Material Icons name on the right. Alternatively, use slot="end-icon".

disableddisabledbooleanfalse

Disables the list item. Grays out the item and disables elements like <mdui-checkbox>, <mdui-radio>, <mdui-switch>.

activeactivebooleanfalse

Activates the list item.

nonclickablenonclickablebooleanfalse

Makes the list item non-clickable. Elements like <mdui-checkbox>, <mdui-radio>, <mdui-switch> remain interactive.

roundedroundedbooleanfalse

Applies rounded style to the list item.

alignmentalignment'start' | 'center' | 'end''center'

Vertical alignment of the list item. Possible values:

  • start: Top alignment.
  • center: Center alignment.
  • end: Bottom alignment.
hrefhrefstring-

The URL for the hyperlink. If specified, the component renders as an <a> element and can use link-related attributes.

downloaddownloadstring-

Instructs the browser to treat the linked URL as a download.

Note: This is only available when href is specified.

targettarget'_blank' | '_parent' | '_self' | '_top'-

Defines where to display the linked URL. Possible values:

  • _blank: Opens in a new tab or window.
  • _parent: Opens in the parent browsing context or _self if no parent exists.
  • _self: Opens in the current browsing context. (Default).
  • _top: Opens in the topmost browsing context or _self if no ancestors exist.

Note: This is only available when href is specified.

relrel'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'-

Specifies the relationship of the linked URL as space-separated link types. Possible values:

  • alternate: Alternate versions of the current document.
  • author: Author of the current document or article.
  • bookmark: Permanent link for the nearest ancestor section.
  • external: The referenced document is not part of the same site as the current document.
  • help: Link to context-sensitive help.
  • license: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.
  • me: Indicates that the current document represents the person who owns the linked content.
  • next: Indicates that the current document is part of a series and the next document in the series is the referenced document.
  • nofollow: Indicates that the current document's original author or publisher does not endorse the referenced document.
  • noreferrer: No Referer header will be included. Also has the same effect as noopener.
  • opener: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has "_blank" as target attribute value).
  • prev: Indicates that the current document is part of a series and the previous document in the series is the referenced document.
  • search: Links to a resource that can be used to search through the current document and its related pages.
  • tag: Gives a tag (identified by the given address) that applies to the current document.

Note: This is only available when href is specified.

autofocusautofocusbooleanfalse

Determines if the element should be focused when the page loads.

tabindextabIndexnumber-

Specifies the order in which the element receives focus when navigating with the Tab key.

Methods

NameParametersReturns
click
void

Simulates a mouse click on the element.

focus
  • options: FocusOptions (Optional)
void

Sets focus on the element. An optional parameter can be an object with a preventScroll property. If preventScroll is set to true, the page will not scroll to bring the focused element into view.

blur
void

Removes focus from the element.

Events

Name
focus

Emitted when the list item gains focus.

blur

Emitted when the list item loses focus.

Slots

Name
(default)

Main text.

description

Subtext.

icon

Element on the left of the list item.

end-icon

Element on the right of the list item.

custom

Any custom content.

CSS Parts

Name
container

List item container.

icon

Left icon.

end-icon

Right icon.

body

Middle part.

headline

Main title.

description

Subtitle.

CSS Custom Properties

Name
--shape-corner

The size of the component corner. You can use a specific pixel value, but it's recommended to reference design tokens.

--shape-corner-rounded

The size of the component corner when rounded is specified. You can use a specific pixel value, but it's recommended to reference design tokens.

mdui-list-subheader API

Slots

Name
(default)

Subheader text.

MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons