List

Displays a collection of related items, capable of carrying a title, description, and extra actions.

Basic Usage

Bordered list

Iteration v1.0 requirements listAll component unit tests passDocs site deployedReleased

Example

Without Border

Default dividers

Only item dividers remainNo outer border

Example

Content Forms

Multiple content forms

NEW When no description slot is provided, content falls back to the default slot. Awaiting owner confirmationPending

Example

Loading and Empty States

Loading state

Skeleton placeholder until loading finishesThe loading attribute handles the placeholder

Example

Empty state

Setting empty forces the empty state; the list also shows it automatically when it has no oas-list-item children, and the copy can be customized via empty-text.

Example

Empty Text and Dividers

empty-text customizes the empty state text (default "暂无数据").

Custom empty text

Example

split controls the item dividers: by default (without bordered) dividers are included; setting bordered turns the dividers off, and split can be used to re-enable them when needed.

split dividers

bordered does not draw item dividers by defaultOnly the outer borderbordered + split adds item dividersBorder and dividers coexist

Example

Image and Text

The default slot of an item can hold a thumbnail, combining it with the title and description to form a rich-media list.

Image-text list (thumbnail + title + description)

Product Weekly #12

6 new components shipped this week

Design review log

Interaction states and dark theme review

Released v1.6

All display components released

Released

Example

API

oas-list

Attribute	Description	Type	Default
bordered	Whether to show the outer border	boolean	—
empty	Force empty state; auto empty when there are no children	boolean	—
empty-text	Empty state text	—	—
loading	Loading state, shows skeleton placeholders	boolean	—
split	Whether to show item dividers	boolean	—

Name	Description
default	—

oas-list-item

Attribute	Description	Type	Default
title	Item title	string	—

Name	Description
description	Description area (falls back to the default slot when not provided)
extra	Extra area on the right of the item