List Item

List items are used to visualize, list, and interact with a non-tangible entity such as waypoints, orders, coordinates, attachments, properties, etc…

List items are clickable and support a selectable state: the List Item is shown as “selected” (when leading / trailing buttons are displayed, they have their own action events)

They support all the properties and layout configurations of the Card.

Examples

Component

Vanilla JS

    <tpg-list-item primary-label="List Item 1" leading-icon-template={tpgIconPlaceholder}>
      <tpg-divider orientation="vertical" emphasis="low-emphasis" slot="header-trailing-buttons"></tpg-divider>
      <tpg-quaternary-button
        icon-template={tpgIconVisibility}
        slot="header-trailing-buttons"
      ></tpg-quaternary-button>
      <tpg-divider orientation="vertical" emphasis="low-emphasis" slot="header-trailing-buttons"></tpg-divider>
      <tpg-quaternary-button
        icon-template={tpgIconChevronRight}
        slot="header-trailing-buttons"
      ></tpg-quaternary-button>
      <tpg-divider orientation="vertical" emphasis="low-emphasis" slot="header-trailing-buttons"></tpg-divider>
    </tpg-list-item>
    <tpg-list-item primary-label="List Item 2" leading-icon-template={tpgIconPlaceholder}>
      <tpg-divider orientation="vertical" emphasis="low-emphasis" slot="header-trailing-buttons"></tpg-divider>
      <tpg-quaternary-button
        icon-template={tpgIconNoVisibility}
        slot="header-trailing-buttons"
      ></tpg-quaternary-button>
      <tpg-divider orientation="vertical" emphasis="low-emphasis" slot="header-trailing-buttons"></tpg-divider>
      <tpg-quaternary-button
        icon-template={tpgIconChevronRight}
        slot="header-trailing-buttons"
      ></tpg-quaternary-button>
      <tpg-divider orientation="vertical" emphasis="low-emphasis" slot="header-trailing-buttons"></tpg-divider>
    </tpg-list-item>
    <tpg-list-item primary-label="List Item 3" leading-icon-template={tpgIconPlaceholder}>
      <tpg-divider orientation="vertical" emphasis="low-emphasis" slot="header-trailing-buttons"></tpg-divider>
      <tpg-quaternary-button
        icon-template={tpgIconVisibility}
        slot="header-trailing-buttons"
      ></tpg-quaternary-button>
      <tpg-divider orientation="vertical" emphasis="low-emphasis" slot="header-trailing-buttons"></tpg-divider>
      <tpg-quaternary-button
        icon-template={tpgIconChevronRight}
        slot="header-trailing-buttons"
      ></tpg-quaternary-button>
      <tpg-divider orientation="vertical" emphasis="low-emphasis" slot="header-trailing-buttons"></tpg-divider>
    </tpg-list-item>
    <tpg-list-item primary-label="List Item 4" leading-icon-template={tpgIconPlaceholder}>
      <tpg-divider orientation="vertical" emphasis="low-emphasis" slot="header-trailing-buttons"></tpg-divider>
      <tpg-quaternary-button
        icon-template={tpgIconVisibility}
        slot="header-trailing-buttons"
      ></tpg-quaternary-button>
      <tpg-divider orientation="vertical" emphasis="low-emphasis" slot="header-trailing-buttons"></tpg-divider>
      <tpg-quaternary-button
        icon-template={tpgIconChevronRight}
        slot="header-trailing-buttons"
      ></tpg-quaternary-button>
      <tpg-divider orientation="vertical" emphasis="low-emphasis" slot="header-trailing-buttons"></tpg-divider>
    </tpg-list-item>

React

    <tpg-list-item
      primaryLabel="List Item 1"
      leadingIconTemplate={tpgIconPlaceholder}
    >
      <tpg-divider
        orientation="vertical"
        emphasis="low-emphasis"
        slot="header-trailing-buttons"
      />
      <tpg-quaternary-button
        iconTemplate={tpgIconVisibility}
        slot="header-trailing-buttons"
      ></tpg-quaternary-button>
      <tpg-divider
        orientation="vertical"
        emphasis="low-emphasis"
        slot="header-trailing-buttons"
      />
      <tpg-quaternary-button
        iconTemplate={tpgIconChevronRight}
        slot="header-trailing-buttons"
      ></tpg-quaternary-button>
      <tpg-divider
        orientation="vertical"
        emphasis="low-emphasis"
        slot="header-trailing-buttons"
      />
    </tpg-list-item>
    <tpg-list-item
      primaryLabel="List Item 2"
      leadingIconTemplate={tpgIconPlaceholder}
    >
      <tpg-divider
        orientation="vertical"
        emphasis="low-emphasis"
        slot="header-trailing-buttons"
      />
      <tpg-quaternary-button
        iconTemplate={tpgIconNoVisibility}
        slot="header-trailing-buttons"
      ></tpg-quaternary-button>
      <tpg-divider
        orientation="vertical"
        emphasis="low-emphasis"
        slot="header-trailing-buttons"
      />
      <tpg-quaternary-button
        iconTemplate={tpgIconChevronRight}
        slot="header-trailing-buttons"
      ></tpg-quaternary-button>
      <tpg-divider
        orientation="vertical"
        emphasis="low-emphasis"
        slot="header-trailing-buttons"
      />
    </tpg-list-item>
    <tpg-list-item
      primaryLabel="List Item 3"
      leadingIconTemplate={tpgIconPlaceholder}
    >
      <tpg-divider
        orientation="vertical"
        emphasis="low-emphasis"
        slot="header-trailing-buttons"
      />
      <tpg-quaternary-button
        iconTemplate={tpgIconVisibility}
        slot="header-trailing-buttons"
      ></tpg-quaternary-button>
      <tpg-divider
        orientation="vertical"
        emphasis="low-emphasis"
        slot="header-trailing-buttons"
      />
      <tpg-quaternary-button
        iconTemplate={tpgIconChevronRight}
        slot="header-trailing-buttons"
      ></tpg-quaternary-button>
      <tpg-divider
        orientation="vertical"
        emphasis="low-emphasis"
        slot="header-trailing-buttons"
      />
    </tpg-list-item>
    <tpg-list-item
      primaryLabel="List Item 4"
      leadingIconTemplate={tpgIconPlaceholder}
    >
      <tpg-divider
        orientation="vertical"
        emphasis="low-emphasis"
        slot="header-trailing-buttons"
      />
      <tpg-quaternary-button
        iconTemplate={tpgIconVisibility}
        slot="header-trailing-buttons"
      ></tpg-quaternary-button>
      <tpg-divider
        orientation="vertical"
        emphasis="low-emphasis"
        slot="header-trailing-buttons"
      />
      <tpg-quaternary-button
        iconTemplate={tpgIconChevronRight}
        slot="header-trailing-buttons"
      ></tpg-quaternary-button>
      <tpg-divider
        orientation="vertical"
        emphasis="low-emphasis"
        slot="header-trailing-buttons"
      />
    </tpg-list-item>

Tables

Properties

Attribute	Property	Description	Type	Default Value
selected	selected	Indicates if the list-item is in a selected state	boolean	false
current-indicator	currentIndicator	Toggles visibility of Current Item Indicator	boolean	false
read-only	readOnly	Makes the list-item non-interactive when true	boolean	false
primary-label	primaryLabel	Main text content displayed in the list-item header	string	''
secondary-label	secondaryLabel	Secondary text content displayed below the primary text	string	''
heading	heading	Text displayed above the primary text	string	''
subtitle	subtitle	Text displayed below the primary text	string	''
leading-icon-template	leadingIconTemplate	Icon to be displayed to the left in the list item.	IconConstant | ''	''

Events

Event name	Reactjs attribute	Description
tpg-click	ontpg-click	event fired when clicking on the list-item

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
header-leading-buttons	html slot for adding content to the header leading buttons slot
header-trailing-buttons	html slot for adding content to the header trailing buttons slot
header-stuff	html slot for adding content to the header stuff slot
list-item-row-1	slot for adding content to the list-item-row-1 slot
list-item-row-2	slot for adding content to the list-item-row-2 slot

CSS Parts

Attribute	Description
header-stuff	part for adding styling to the header-stuff slot
list-item-row-1	part for adding styling to the list-item-row-1 slot
list-item-row-2	part for adding styling to the list-item-row-2 slot

Sandbox