List
TODO: Add description
Basic Usage
<triton-list>
<triton-list-header>The Header</triton-list-header>
<triton-list-item>Item One</triton-list-item>
<triton-list-item>Item Two</triton-list-item>
<triton-list-footer>The Footer</triton-list-footer>
</triton-list>
<TritonList>
<TritonListHeader>The Header</TritonListHeader>
<TritonListItem>Item One</TritonListItem>
<TritonListItem>Item Two</TritonListItem>
<TritonListFooter>The Footer</TritonListFooter>
</TritonList>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-list>
<triton-list-header>The Header</triton-list-header>
<triton-list-item>Item One</triton-list-item>
<triton-list-item>Item Two</triton-list-item>
<triton-list-footer>The Footer</triton-list-footer>
</triton-list>
</body>
</html>
Variants
List
To render a list, wrap list-items with <triton-list>. This wrapper will apply style and prevent
unwanted events from child conmponents to propagate outside the list.
<triton-list>
...
</triton-list>
Items
A TritonList consists of TritonListItem elements. These are the items which will be rendered in the list.
TritonListItems can be rendered in two different ways, either by simply passing in markup, or by using predefined props.
If title or description properties are set, the content in the slot will be ignored.
<triton-list>
<triton-list-item>List Item 1</triton-list-item>
<triton-list-item>List Item 2</triton-list-item>
<triton-list-item>List Item 3</triton-list-item>
</triton-list>
Header & Footer
Up to one header and up to one footer can be added to the list.
<triton-list>
<triton-list-header>Header!</triton-list-header>
<triton-list-item>List Item 1</triton-list-item>
<triton-list-footer>The Footer</triton-list-footer>
</triton-list>
Appearance
Skin
The list itself can be styled using the skin property.
<triton-list skin="flat">
<triton-list-item>Flat List Item</triton-list-item>
<triton-list-item>Flat List Item</triton-list-item>
<triton-list-item>Flat List Item</triton-list-item>
</triton-list>
<triton-list skin="semi-border">
<triton-list-item>Semi-border List Item</triton-list-item>
<triton-list-item>Semi-border List Item</triton-list-item>
<triton-list-item>Semi-border List Item</triton-list-item>
</triton-list>
Space
The space property can be used to set the amount of space between the content of the list-items
<triton-list space="xlarge">
<triton-list-header>xlarge space list</triton-list-header>
<triton-list-item>1 List Item</triton-list-item>
<triton-list-item>2 List Item</triton-list-item>
<triton-list-item>3 List Item</triton-list-item>
</triton-list>
Behavior
Orientation
Use the orientation property to determine the direction in which the list renders.
<triton-list orientation="horizontal">
<triton-list-header>Horizontal List</triton-list-header>
<triton-list-item>1 List Item</triton-list-item>
<triton-list-item>2 List Item</triton-list-item>
<triton-list-item>3 List Item</triton-list-item>
</triton-list>
Clickable
To make the list item appear clickable, use the clickable property. This will also allow the list to be manouvered by tab.
<triton-list clickable>
<triton-list-header>Clickable List</triton-list-header>
<triton-list-item>Clickable List Item</triton-list-item>
<triton-list-item>Clickable List Item</triton-list-item>
<triton-list-item>Try to use tab!</triton-list-item>
</triton-list>
API
Properties
TritonList
| Property | Description | Type | Default |
|---|---|---|---|
clickable | Make the list items appear clickable, it will also make them tabable | boolean | false |
gap | Gap between each element in the component, only applies to skin flat | base body large medium small tiny xlarge xxlarge xxxlarge | - |
orientation | Orientation of the list layout | horizontal vertical | 'vertical' |
skin | Skin of the entire list | border flat semi-border | 'border' |
space | Gap between each element inside items in the list | base body large medium small tiny xlarge xxlarge xxxlarge | 'base' |
TritonListHeader
| Property | Description | Type | Default |
|---|---|---|---|
sticky | Stic the header to the top of the list on scroll | boolean | false |
TritonListItem
| Property | Description | Type | Default |
|---|---|---|---|
active | The state of the list item, true indicates active | boolean | false |
icon | Icon | - | |
primary-text | string | - | |
secondary-text | string | - | |
space | Gap between each element in the component | base body large medium small tiny xlarge xxlarge xxxlarge | 'base' |