ActionBar - Vant 4
ActionBar
🚀 Create powerful bottom action bars that make user interactions a breeze!
Intro
The ActionBar component is your go-to solution for creating sleek, interactive bottom navigation bars! Perfect for e-commerce apps, social platforms, or any mobile interface where you need quick access to key actions. Think of it as your app's command center - always within thumb's reach! 📱✨
Install
Ready to add some action to your app? Let's get the ActionBar components registered! Simply use app.use() to make them available throughout your application. For more creative registration methods, check out our Component Registration guide! 🎯
import { createApp } from'vue'; import { ActionBar, ActionBarIcon, ActionBarButton } from'vant'; const app = createApp(); app.use(ActionBar); app.use(ActionBarIcon); app.use(ActionBarButton);Usage
Basic Usage - Your First Action Bar! 🎉
Let's create a simple yet powerful action bar with icons and buttons. This example shows you how easy it is to build an interactive bottom navigation that users will love!
import { showToast } from'vant'; exportdefault { setup() { constonClickIcon = () => showToast('Click Icon'); constonClickButton = () => showToast('Click Button'); return { onClickIcon, onClickButton, }; }, };Icon Badge - Grab Attention! 🔴
Want to notify users about new messages or updates? Use the badge prop to add eye-catching badges to your icons. Perfect for shopping carts, notifications, or any count that matters!
Custom Icon Color - Make It Yours! 🎨
Express your brand personality by customizing icon colors. Whether you want subtle grays or vibrant brand colors, it's just a prop away!
Custom Button Color - Stand Out! ✨
Make your call-to-action buttons impossible to ignore with custom colors. Support for gradients means your buttons can be as stunning as your imagination!
API
ActionBar Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | boolean | true |
| placeholder | Whether to generate a placeholder element | boolean | false |
ActionBarIcon Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| text | Button text | string | - |
| icon | Icon | string | - |
| color | Icon color | string | #323233 |
| icon-class | Icon class name | string | Array | object | '' | | icon-prefix | Icon className prefix | string | van-icon | | dot | Whether to show red dot | boolean | - | | badge | Content of the badge | number | string | - | | badge-props | Props of Badge, see Badge - props | BadgeProps | - |
| 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 |
ActionBarButton Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| text | Button text | string | - |
| type | Button type, Can be set to default``primary``success``warning``danger | string | default |
| color | Button color, support linear-gradient | string | - |
| icon | Left Icon | string | - |
| disabled | Whether to disable button | boolean | false |
| loading | Whether to show loading status | boolean | false |
| url | Link | 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 |
ActionBarIcon Slots
| Name | Description |
|---|---|
| default | Text |
| icon | Custom icon |
ActionBarButton Slots
| Name | Description |
|---|---|
| default | Button content |
Types
The component exports the following type definitions:
importtype { ActionBarProps, ActionBarIconProps, ActionBarButtonProps, } 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-action-bar-background | var(--van-background-2) | - |
| --van-action-bar-height | 50px | - |
| --van-action-bar-icon-width | 48px | - |
| --van-action-bar-icon-height | 100% | - |
| --van-action-bar-icon-color | var(--van-text-color) | - |
| --van-action-bar-icon-size | 18px | - |
| --van-action-bar-icon-font-size | var(--van-font-size-xs) | - |
| --van-action-bar-icon-active-color | var(--van-active-color) | - |
| --van-action-bar-icon-text-color | var(--van-text-color) | - |
| --van-action-bar-icon-background | var(--van-background-2) | - |
| --van-action-bar-button-height | 40px | - |
| --van-action-bar-button-warning-color | var(--van-gradient-orange) | - |
| --van-action-bar-button-danger-color | var(--van-gradient-red) | - |
Related Docs
Explore more components and features to enhance your mobile app experience:
- Button - Learn about button components and styling options
- Badge - Master badge components for notifications and counts
- Icon - Discover the complete icon library and usage
- ConfigProvider - Customize themes and global configurations
- Advanced Usage - Component registration and advanced techniques
- Vant 4 Overview - Explore all Vant 4 features and components