Install

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

<van-action-bar>
  <van-action-bar-icon icon="chat-o" text="Icon1" @click="onClickIcon" />
  <van-action-bar-icon icon="cart-o" text="Icon2" @click="onClickIcon" />
  <van-action-bar-icon icon="shop-o" text="Icon3" @click="onClickIcon" />
  <van-action-bar-button type="danger" text="Button" @click="onClickButton" />
</van-action-bar>

import { Toast } from 'vant';

export default {
  setup() {
    const onClickIcon = () => Toast('Click Icon');
    const onClickButton = () => Toast('Click Button');
    return {
      onClickIcon,
      onClickButton,
    };
  },
};

Icon Badge

Use badge prop to show badge in icon.

<van-action-bar>
  <van-action-bar-icon icon="chat-o" text="Icon1" dot />
  <van-action-bar-icon icon="cart-o" text="Icon2" badge="5" />
  <van-action-bar-icon icon="shop-o" text="Icon3" badge="12" />
  <van-action-bar-button type="warning" text="Button" />
  <van-action-bar-button type="danger" text="Button" />
</van-action-bar>

Custom Icon Color

<van-action-bar>
  <van-action-bar-icon icon="chat-o" text="Icon1" color="#ee0a24" />
  <van-action-bar-icon icon="cart-o" text="Icon2" />
  <van-action-bar-icon icon="star" text="Collected" color="#ff5000" />
  <van-action-bar-button type="warning" text="Button" />
  <van-action-bar-button type="danger" text="Button" />
</van-action-bar>

Custom Button Color

<van-action-bar>
  <van-action-bar-icon icon="chat-o" text="Icon1" />
  <van-action-bar-icon icon="shop-o" text="Icon2" />
  <van-action-bar-button color="#be99ff" type="warning" text="Button" />
  <van-action-bar-button color="#7232dd" type="danger" text="Button" />
</van-action-bar>

API

ActionBar Props

Attribute	Description	Type	Default
safe-area-inset-bottom	Whether to enable bottom safe area adaptation	boolean	`true`
placeholder `v3.5.1`	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 `v3.0.17`	Icon className prefix	string	`van-icon`
dot	Whether to show red dot	boolean	-
badge	Content of the badge	number \| string	-
badge-props `v3.2.8`	Props of Badge, see Badge - props	BadgeProps	-
url	Link URL	string	-
to	Target route of the link, same as to 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 `primary` `info` `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	Target route of the link, same as to 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:

import type {
  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-color	var(--van-background-color-light)	-
--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-gray-7)	-
--van-action-bar-icon-background-color	var(--van-background-color-light)	-
--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)	-

ActionBar

Intro