salla-list-tile
A single row for lists and menus: an icon on the start side, a title with an optional subtitle, and an action on the end side.
A single row for lists and menus: an icon on the start side, a title with an optional subtitle, and an action on the end side.
Use it for account menus, settings lists and similar link rows. The whole row is rendered as one link.
It is a link to href, or to # when href is not set.
Use it
In HTML or JSX, use the tag <salla-list-tile> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaListTile } from '@salla.sa/twilight-components-react/list-tile';Try it
web-components/salla-list-tile
Example
import { SallaListTile } from '@salla.sa/twilight-components-react/list-tile';
export function Example() {
return (
<SallaListTile href="/account/notifications">
<i slot="icon" className="sicon-bell-ring"></i>
<span slot="title">Notifications</span>
<span slot="subtitle">See your latest updates</span>
<i slot="action" className="sicon-arrow-left"></i>
</SallaListTile>
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
href | href | URL the row links to. Applied as the href of the inner link; when empty the link points to #. Setting it also adds the s-list-tile-item-href class. | string | undefined |
target | target | Where to open the link: _self (same tab, default), _blank, _parent, _top, or a frame name. Only has an effect together with href. | "_blank" | "_parent" | "_self" | "_top" | "framename" | "_self" |
Slots
| Slot | Description |
|---|---|
action | An element to display after the title. |
icon | An icon to display before the title. |
subtitle | Additional content displayed below the title. |
title | The primary content of the list tile. |
Related
Used inside: <salla-gifting>, <salla-loyalty>, <salla-loyalty-panel>, <salla-scopes>, <salla-user-settings>.