Dark Mode
backgroundLayer 1
Components and their props
  • List
    • dense true/false
      Makes the list with lesser padding.
    • two-line true/false
      Makes container for two line list item.
  • List.Item
    • no specific props
  • List.LinkItem
    • graphic true/false
      Makes the Icon align to start.
    • meta true/false
      Makes the Icon align to end.
  • List.ItemAvatar
    • src path of avatar image
      path of avatar image
  • List.TextContainer
    • no specific props
  • List.PrimaryText
    • no specific props
  • List.SecondaryText
    • no specific props
Sample code
import {h, Component} from 'preact';
import List from 'preact-material-components/List';
import 'preact-material-components/List/style.css';

export default class ListPage extends Component {
    return (
Original documentation
This component encapsulates mdc-list, you can refer to its documentation here.
  • Item1
  • Item2
  • Item3
  • Item4
  • Item5
Action items
Two line
  • Heading 1Lorem ipsum dolor sit amet.
  • Heading 2Lorem ipsum dolor sit amet.
  • Heading 3Lorem ipsum dolor sit amet.