vant/src/action-bar/README.md

ActionBar

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 {
  methods: {
    onClickIcon() {
      Toast('Click Icon');
    },
    onClickButton() {
      Toast('Click Button');
    },
  },
};

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="#07c160" />
  <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 v2.4.2	Icon color	string	#323233
icon-class	Icon class name	any	''
dot 2.5.5	Whether to show red dot	boolean	-
badge 2.5.6	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 v2.1.8	Button color, support linear-gradient	string	-
icon v2.4.4	Left Icon	string	-
primary	Is primary button (red color)	boolean	false
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