Cell - Vant 4
Cell
📱 Build beautiful list interfaces with flexible, customizable cell components that adapt to any content!
Intro 📋
The building block of great lists! Cell components provide a consistent, flexible way to display information in lists - perfect for settings pages, contact lists, menu items, and any structured content! 🎯✨
Install 📦
Start building amazing lists! Register both Cell and CellGroup components to create organized, beautiful interfaces! 🚀
import { createApp } from'vue'; import { Cell, CellGroup } from'vant'; const app = createApp(); app.use(Cell); app.use(CellGroup);Usage 🎯
Basic Usage 🌟
Create your first cell list! Simple, clean, and perfect for displaying key-value information! 📝
Inset Grouped 📦
Create card-like grouped lists! Perfect for settings sections and organized content with beautiful rounded corners! 🎨
Size 📏
Choose your perfect size! Use large for important content or keep it normal for compact lists! 📐
Left Icon 🎨
Add visual context! Icons help users quickly identify content and make your lists more intuitive! 🌟
Link 🔗
Make it clickable! Transform cells into interactive links that navigate users to external URLs! 🚀
Router 🧭
Navigate with Vue Router! Seamlessly integrate with your app's routing for smooth page transitions! ⚡
Group Title 📚
Organize with style! Add descriptive titles to group related cells together beautifully! 🏷️
Use Slots ✨
Customize everything! Use slots to add any content - from complex layouts to custom components! 🎭
Vertical Center 🎯
Perfect alignment every time! Center content vertically for a polished, professional look! 📐
API
CellGroup Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| title | Group title | string | - |
| inset | Whether to be inset grouped | boolean | false |
| border | Whether to show outer border | boolean | true |
Cell Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| title | Title | *number | string* |
| value | Right text | *number | string* |
| label | Description below the title | *number | string* |
| size | Size, can be set to large``normal | string | - |
| icon | Left Icon | string | - |
| icon-prefix | Icon className prefix | string | van-icon |
| tag | Custom element tag | string | div |
| url | Link URL | string | - |
| to | The target route should navigate to when clicked on, same as the to prop of Vue Router | *string | object* |
| replace | If true, the navigation will not leave a history record | boolean | false | | border | Whether to show inner border | boolean | true | | center | Whether to center content vertically | boolean | false | | clickable | Whether to show click feedback when clicked | boolean | null | | is-link | Whether to show link icon | boolean | false | | required | Whether to show required mark | boolean | false | | arrow-direction | Can be set to left``up``down | string | right | | title-style | Title style | string | Array | object | - | | title-class | Title className | string | Array | object | - | | value-class | Value className | string | Array | object | - | | label-class | Label className | string | Array | object | - |
Cell Events
| Event | Description | Arguments |
|---|---|---|
| click | Emitted when cell is clicked | event: MouseEvent |
CellGroup Slots
| Name | Description |
|---|---|
| default | Default slot |
| title | Custom title |
Cell Slots
| Name | Description |
|---|---|
| title | Custom title |
| value | Custom value |
| label | Custom label |
| icon | Custom left icon |
| right-icon | Custom right icon |
| extra | Custom extra content on the right |
Types
The component exports the following type definitions:
importtype { CellSize, CellProps, CellGroupProps, CellArrowDirection, } from'vant';Theming
CSS Variables
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
| Name | Default Value | Description |
|---|---|---|
| --van-cell-font-size | var(--van-font-size-md) | - |
| --van-cell-line-height | 24px | - |
| --van-cell-vertical-padding | 10px | - |
| --van-cell-horizontal-padding | var(--van-padding-md) | - |
| --van-cell-text-color | var(--van-text-color) | - |
| --van-cell-background | var(--van-background-2) | - |
| --van-cell-border-color | var(--van-border-color) | - |
| --van-cell-active-color | var(--van-active-color) | - |
| --van-cell-required-color | var(--van-danger-color) | - |
| --van-cell-label-color | var(--van-text-color-2) | - |
| --van-cell-label-font-size | var(--van-font-size-sm) | - |
| --van-cell-label-line-height | var(--van-line-height-sm) | - |
| --van-cell-label-margin-top | var(--van-padding-base) | - |
| --van-cell-value-color | var(--van-text-color-2) | - |
| --van-cell-value-font-size | inherit | - |
| --van-cell-icon-size | 16px | - |
| --van-cell-right-icon-color | var(--van-gray-6) | - |
| --van-cell-large-vertical-padding | var(--van-padding-sm) | - |
| --van-cell-large-title-font-size | var(--van-font-size-lg) | - |
| --van-cell-large-label-font-size | var(--van-font-size-md) | - |
| --van-cell-large-value-font-size | inherit | - |
| --van-cell-group-background | var(--van-background-2) | - |
| --van-cell-group-title-color | var(--van-text-color-2) | - |
| --van-cell-group-title-padding | var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) | - |
| --van-cell-group-title-font-size | var(--van-font-size-md) | - |
| --van-cell-group-title-line-height | 16px | - |
| --van-cell-group-inset-padding | 0 var(--van-padding-md) | - |
| --van-cell-group-inset-radius | var(--van-radius-lg) | - |
| --van-cell-group-inset-title-padding | var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) var(--van-padding-xl) | - |
## Related Docs 📚
- [List](./list) - Advanced list component with virtual scrolling
- [Icon](./icon) - Add icons to your cells
- [Badge](./badge) - Show notifications and counts
- [Switch](./switch) - Add toggle controls
- [Field](./field) - Input fields in cells
- [Button](./button) - Action buttons in cells
- [Divider](./divider) - Separate cell groups
- [ConfigProvider](./config-provider) - Global configuration
- [Advanced Usage](./advanced-usage) - Component registration guide