vant/src/action-bar

ActionBar

Intro

Used to provide convenient interaction for page-related operations.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

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

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	-
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

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 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

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-white)	-
--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-white)	-
--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)	-