List
The Triton List is a versatile user interface element used to display information in a structured and sequential format. It enables the presentation of data or content in a list-layout. Lists can be used to display versatile information, such as data, steps in a process etc. They offer an organized and easy-to-read format, allowing users to quickly scan and locate specific items within the list.
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.
TritonListItem
s 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' |