List
An enterprise-grade list component based on BrConfigProvider for global theme configuration, supporting grouping, selection, and virtual scrolling.
Component 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.
<script setup lang="ts">
import { BrList, BrListItem, BrListHeader, BrListFooter } from '@breezeui/vue'
import { Bell, FileText, Settings } from 'lucide-vue-next'
</script>
<template>
<BrList hoverable clickable class="max-w-md mx-auto" variant="bordered">
<BrListHeader>Notification Settings</BrListHeader>
<BrListItem>
<Bell class="w-4 h-4 mr-2" />
Messages
</BrListItem>
<BrListItem>
<FileText class="w-4 h-4 mr-2" />
System Announcements
</BrListItem>
<BrListItem>
<Settings class="w-4 h-4 mr-2" />
Preferences
</BrListItem>
<BrListFooter>You can change these settings at any time</BrListFooter>
</BrList>
</template>
Grouped List and Dividers
Use BrListGroup and BrListDivider for list item partitioning and separation.
<script setup lang="ts">
import { BrList, BrListItem, BrListGroup, BrListDivider } from '@breezeui/vue'
</script>
<template>
<BrList class="max-w-md mx-auto" variant="bordered">
<BrListGroup title="R&D Department">
<BrListItem>Zhang San (Frontend Engineer)</BrListItem>
<BrListItem>Li Si (Backend Engineer)</BrListItem>
</BrListGroup>
<BrListDivider />
<BrListGroup title="Design Department">
<BrListItem>Wang Wu (UI Designer)</BrListItem>
<BrListItem>Zhao Liu (UX Designer)</BrListItem>
</BrListGroup>
</BrList>
</template>
Selectable and Active States
Supports single or multiple selection logic, distinguishing the current list item through selected and active states.
<script setup lang="ts">
import { ref } from 'vue'
import { BrList, BrListItem } from '@breezeui/vue'
import { Check } from 'lucide-vue-next'
const selectedIndex = ref(1)
const items = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']
</script>
<template>
<BrList selectable class="max-w-sm mx-auto" variant="bordered">
<BrListItem
v-for="(item, index) in items"
:key="item"
:selected="selectedIndex === index"
@click="selectedIndex = index"
>
{{ item }}
<template v-if="selectedIndex === index" #extra>
<Check class="w-4 h-4 text-primary" />
</template>
</BrListItem>
</BrList>
</template>
For scenarios with thousands or tens of thousands of data items, enable virtualScroll to achieve high-performance scrolling.
<script setup lang="ts">
import { ref } from 'vue'
import { BrList, BrListItem } from '@breezeui/vue'
const items = ref(Array.from({ length: 10000 }).map((_, i) => ({
id: i,
label: `Test Data - Item ${i + 1}`
})))
</script>
<template>
<BrList
variant="bordered"
class="max-w-md mx-auto"
virtual-scroll
:items="items"
:item-height="44"
>
<template #item="{ item, index }">
<BrListItem hoverable striped>
<span class="text-muted-foreground w-10">{{ index + 1 }}</span>
{{ item.label }}
</BrListItem>
</template>
</BrList>
</template>
API
BrList
The core container component.
BrListItem
The list item component.
Slots
default: Main contentextra: Extra content on the right (action buttons/badges)nested: Nested sub-list contentexpand-icon: Custom expand icon
BrListGroup
The list group component.
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.
<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>