Version: 5.0.3

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>

The Header

Item One

Item Two

The Footer

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.

List Item 1

List Item 2

List Item 3

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

Up to one header and up to one footer can be added to the list.

Header!

List Item 1

The Footer

<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.

Flat List Item

Semi-border List Item

<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

xlarge space list

1 List Item

2 List Item

3 List Item

<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.

Horizontal List

1 List Item

2 List Item

3 List Item

<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.

Clickable List

Clickable List Item

Try to use 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'`

Details

Depends on

TritonGap

List

Basic Usage​

Variants​

List​

Items​

Header & Footer​

Appearance​

Skin​

Space​

Behavior​

Orientation​

Clickable​

API​

Properties​

TritonList​

TritonListHeader​

TritonListItem​

Details​

Depends on​

Basic Usage

Variants

List

Items

Header & Footer

Appearance

Skin

Space

Behavior

Orientation

Clickable

API

Properties

TritonList

TritonListHeader

TritonListItem

Details

Depends on