List

An enterprise-grade list component based on BrConfigProvider for global theme configuration, supporting grouping, selection, and virtual scrolling.

Features

• 📦 Comprehensive Capabilities: Supports list grouping, dividers, loading states, empty states, nested collapsing, and other enterprise-grade requirements.
• 🎨 Theme Configuration: Based on BrConfigProvider, supports global variable configuration and seamless dark mode switching.
• ⚡ Virtual Scrolling: Built-in virtual scrolling capability to easily handle large data rendering.
• ⌨️ Keyboard Navigation: Perfect accessibility experience, supports up/down key navigation, and Enter to trigger selection.

Basic List and Interactive States

Provides basic list layout and supports interactive states such as hoverable and clickable.

Notification Settings

Messages

System Announcements

Preferences

You can change these settings at any time

Example

Grouped List and Dividers

Use BrListGroup and BrListDivider for list item partitioning and separation.

R&D Department

Zhang San (Frontend Engineer)

Li Si (Backend Engineer)

Design Department

Wang Wu (UI Designer)

Zhao Liu (UX Designer)

Example

Selectable and Active States

Supports single or multiple selection logic, distinguishing the current list item through selected and active states.

Shanghai

Beijing

Guangzhou

Shenzhen

Example

Virtual Scrolling Large Data List

For scenarios with thousands or tens of thousands of data items, enable virtualScroll to achieve high-performance scrolling.

Example

API

BrList

The core container component.

Property	Type	Default	Description
size	'sm' | 'default' | 'lg'	'default'	Global size of the list
variant	'default' | 'bordered' | 'ghost'	'default'	Appearance variant of the list
hoverable	boolean	false	Globally enable hover effects for list items
clickable	boolean	false	Globally enable clickable effects for list items
selectable	boolean	false	Globally enable selectable effects for list items
striped	boolean	false	Whether to show zebra stripes
loading	boolean	false	Whether to show the loading state
disabled	boolean	false	Globally disable the list
virtualScroll	boolean	false	Whether to enable virtual scrolling
items	any[]	[]	Data source for virtual scrolling
itemHeight	number	40	Estimated height of list items for virtual scrolling

BrListItem

The list item component.

Property	Type	Default	Description
align	'start' | 'center' | 'end'	'center'	Internal alignment
disabled	boolean	false	Disable the current item
active	boolean	false	Active state style
selected	boolean	false	Selected state style

Slots

• default: Main content
• extra: Extra content on the right (action buttons/badges)
• nested: Nested sub-list content
• expand-icon: Custom expand icon

BrListGroup

The list group component.

Property	Type	Default	Description
title	string	-	Group title

BrListHeader / BrListFooter / BrListDivider / BrListEmpty / BrListLoading

Auxiliary structural components, supporting custom styles via class.

Theme Customization

BrList is deeply integrated with BrConfigProvider, supporting the following two levels of theme customization:

1. Global Configuration (BrConfigProvider)

Adjust the default color system of BrList by configuring the application root node.

<script setup lang="ts">
import { BrConfigProvider, BrList, BrListItem } from '@breezeui/vue'

const themeConfig = {
  theme: 'dark', // Automatically switch List background and text colors in dark mode
  radius: 0.75, // Affects the border radius of variant="bordered"
}
</script>

<template>
  <BrConfigProvider :theme="themeConfig">
    <BrList variant="bordered" hoverable>
      <BrListItem>Supports Dark Mode</BrListItem>
    </BrList>
  </BrConfigProvider>
</template>

2. Local Override (TailwindCSS)

You can precisely override any default style using Tailwind atomic classes by passing the class property.

<template>
  <!-- Custom background and border color -->
  <BrList class="bg-blue-50 border-blue-200 dark:bg-blue-900/20" variant="bordered">
    <!-- Override hover and selected colors -->
    <BrListItem class="hover:bg-blue-100 dark:hover:bg-blue-800" selected>
      Customized List Item
    </BrListItem>
  </BrList>
</template>