Lapikit

 v0.3.5
23.8k

List component

List

The List component displays a set of vertically organized elements. It’s a flexible container that can be used for menus, navigation lists or action blocks within an interface. It can be customized according to different themes, visual variants, sizes and densities.

Each ListItem child can contain additional elements (prepend, append) and be individually styled.

Item 1
Item 2
Item 3
Item 4
Item 5

Examples of list

Base

The basic example shows a simple list with no particular configuration. It uses the default size and style for a neutral presentation.

Item 1
Item 2
Item 3
Item 4
Item 5

Active

Demonstrates how to put one or more elements in an active state to reflect a current selection or navigation.

Density

Shows the different densities available (compact, comfortable, default), which influence the vertical spacing between items.

Disabled

Displays disabled elements, indicating that they are not interactive. Useful for indicating that an option is temporarily unavailable.

Enables specific rendering for lists used as navigation (nav). This automatically adjusts the style to be more consistent in a menu bar or side panel.

Size

Shows the different sizes applicable to the list (xs to full). This allows the component to be adapted to various UI contexts (sidebar, modal, etc.).

Item 1 xs
Item 2 xs
Item 3 xs
Item 1 sm
Item 2 sm
Item 3 sm
Item 1 md
Item 2 md
Item 3 md
Item 1 lg
Item 2 lg
Item 3 lg
Item 1 xl
Item 2 xl
Item 2 xl
Item 2 responsive
Item 2 responsive
Item 3 responsive

Variant

Shows visual variants (filled, text, outline) to adapt the overall appearance of the list to graphic needs.

Snippet

Enables you to compose each ListItem with additional elements such as icons, badges or any other content via the prepend and append slots.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 1
Item 2
Item 3
Item 4
Item 5

API Reference

List

propstypedescriptiondefaulttype_extend
ref $bindableHTMLElementDirect access to DOM elementundefined
isenumMakes the component <nav> or <div >.divnav | div
navbooleanEnable specific rendering for navigation listsfalse
darkbooleanEnable dark theme for component.false
lightbooleanEnable light theme for the component.false
colorstringApplies a custom color to text or icons.undefined
backgroundstringApply a custom background color.undefined
densityenumControls vertical density for elementsdefaultcompact | comfortable | default
roundedstringContainer edge radiusmd
variantenumSets the visual style of the List.filledoutline | text | filled
sizeenum | {enum: enum}Defines the global size of the listmdxs | sm | md | lg | xl | full

ListItem

propstypedescriptiondefaulttype_extend
ref $bindableHTMLElementDirect access to DOM elementundefined
isenumMakes the component <a> or <button> or div.divbutton | a | div
hrefstringAdd path or urlundefined
darkbooleanEnable dark theme for component.false
lightbooleanEnable light theme for the component.false
colorstringApplies a custom color to text or icons.undefined
backgroundstringApply a custom background color.undefined
roundedstringControls item rounding (none, sm, md, lg, etc.).md
activebooleanDisplays active statusfalse
disabledbooleanDeactivates the ListItem, preventing any interaction.false
noRipplebooleanDeactivates ripple effectfalse
appendSnippetContent displayed after the main contentundefined
prependSnippetContent displayed before main contentundefined

Variables CSS

Root

variabledefaultdescription
–-list-color--kit-label-primaryText color
–-list-background--kit-background-grouped-primaryBackground color

Item

variabledefaultdescription
--list-item-color--kit-label-primaryText color
–-list-item-backgroundcurrentColorBackground color
–-list-item-shape---system-shape-smList edge radius

A well-structured List can easily be enriched with Separators or elements in a Card.