List
December 31, 2018 ยท View on GitHub
Displays a list of List Tiles, with an optional header.
Lists are also the base component of Menus.
Main features
- All List Tile main features
- Stack lists vertically
- Set borders
- Indent borders
- Optional compact display
- RTL (right-to-left) support
Usage
Options
List specific options
| Parameter | Required | Type | Default | Description |
|---|---|---|---|---|
| tiles | use tiles or content | Array of type String, hyperscript or component | List of List Tile components or List Tile options | |
| all | optional | Options Object | List Tile options that will be applied to all tiles; for this, List children need to be passed as options (instead of passing a list of List Tile components) | |
| border | optional | Boolean | false | Set to true to insert separator borders between List Tiles |
| compact | optional | Boolean | false | Set to true to reduce vertical padding of list tiles |
| header | optional | Object | Options object for a List Tile; use sticky to pin the header when scrolling - does not work in IE or Edge < 16 | |
| indentedBorder | optional | Boolean | false | Set to true to indent the list tile borders; for a proper layout, List Tiles must have option indent as well |
| padding | optional | String | "both" | Vertical padding; possible values: "top", "bottom", "none", "both" |
Common component options
| Parameter | Required | Type | Default | Description |
|---|---|---|---|---|
| after | optional | String, hyperscript or component | Extra content after main content; note that this content is placed right of preceding elements with a higher stacking depth | |
| before | optional | String, hyperscript or component | Extra content before main content; note that this content is placed left of subsequent elements with a lower stacking depth | |
| className | optional | String | Extra CSS class appended to pe-list | |
| content | use tiles or content | String, hyperscript or component | Alternative content; replaces children and ignores tiles | |
| element | optional | String | "div" | HTML element tag |
| id | optional | String | HTML element id | |
| style | optional | Object | For setting simple style attributes | |
| tone | optional | String: "dark" or "light" | Renders the component light on dark (sets class pe-dark-tone); use "light" to locally inverse (sets class pe-light-tone) |
Composition
List is composed from: