List

import { AXListModule } from '@acorex/components/list';

list component offers a range of features including multiple selection modes, customizable headers and footers, and unique item styling. It also supports disabled and readonly states for controlled interaction, along with a custom loading feature for enhanced user experience.

Overview

In this section, you can test different options of this component and see the output in real time

Select Your Favorite Fruit(s)

Your Custom Footer

Custom Header

Custom Footer

Multiple

Readonly

Disabled

Usage

A simple example of using ax-list

Preview

Code

Multiple

You can use the multiple property to toggle between single and multiple selection modes, accommodating various user interaction scenarios.

Preview

Code

Custom Header

You can create your custom header using the ax-header, allowing for personalized and unique designs tailored to your specific needs.

Preview

Code

Custom Footer

You can personalize the footer of your component using the ax-footer, ideal for adding custom content or design elements at the bottom

Preview

Code

Custom Item

You can customize each list item with the itemTemplate property, enabling unique and tailored appearances for individual entries

Preview

Code

Custom Loading

You can create a custom loading experience with the loadingTemplate property, enhancing user engagement during data processing or retrieval phases

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-list-item-hover-bg-color	var(--ax-sys-color-surface), 0.5	Background color of a list item on hover. Uses the system's input background color with 50% opacity.
--ax-comp-list-item-selected-bg-color	var(--ax-sys-color-primary-surface), 0.2	Background color of a selected list item. Uses the system's input background color.
--ax-comp-list-item-focus-outline-color	var(--ax-sys-color-primary-surface)	Outline color of a focused list item. Uses the primary color at its 500 shade.
--ax-comp-list-font-size	0.875rem	Font size of the list item text.
--ax-comp-list-line-height	1.25rem	Line height of the list item text.
--ax-comp-list-item-height	var(--ax-sys-size-base)	Height of a list item. Uses the system's base size.
--ax-comp-list-item-padding-s	0.75rem	Start (left in LTR, right in RTL) padding of a list item.
--ax-comp-list-item-padding-e	1rem	End (right in LTR, left in RTL) padding of a list item.
--ax-comp-list-item-focus-outline-width	2px	Outline width of a focused list item.
--ax-comp-list-item-focus-outline-offset	-4px	Outline offset of a focused list item.
--ax-comp-list-checkbox-label-margin-s	0.5rem	Start (left in LTR, right in RTL) margin of the checkbox label within a list item.
--ax-comp-list-item-disabled-opacity	0.5	Opacity of a disabled list item. Ranges from 0 (fully transparent) to 1 (fully opaque).
--ax-comp-list-empty-container-height	var(--ax-sys-size-base)	Height of the empty state container when the list has no items. Uses the system's base size.
--ax-comp-list-empty-container-padding-x	0.75rem	Horizontal padding of the empty state container.