/*! For license information please see 3860.6532234b.js.LICENSE.txt */
(self.webpackChunk=self.webpackChunk||[]).push([["3860"],{75245:function(n,t,s){"use strict";s.r(t);var a=s("80681");let o=["innerHTML"];t.default={setup:()=>({html:""}),render:()=>((0,a.wg)(),(0,a.iD)("div",{class:"van-doc-markdown-body",innerHTML:'ActionBar
\nIntro
\n
Used to provide convenient interaction for page-related operations.
\n
Install
\n
Register component globally via app.use, refer to Component Registration for more registration ways.
\n
import { createApp } from 'vue';\nimport { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';\n\nconst app = createApp();\napp.use(ActionBar);\napp.use(ActionBarIcon);\napp.use(ActionBarButton);\n
\n
Usage
\nBasic Usage
\n
<van-action-bar>\n <van-action-bar-icon icon="chat-o" text="Icon1" @click="onClickIcon" />\n <van-action-bar-icon icon="cart-o" text="Icon2" @click="onClickIcon" />\n <van-action-bar-icon icon="shop-o" text="Icon3" @click="onClickIcon" />\n <van-action-bar-button type="danger" text="Button" @click="onClickButton" />\n</van-action-bar>\n
\n
import { showToast } from 'vant';\n\nexport default {\n setup() {\n const onClickIcon = () => showToast('Click Icon');\n const onClickButton = () => showToast('Click Button');\n return {\n onClickIcon,\n onClickButton,\n };\n },\n};\n
\n
Icon Badge
\n
Use badge prop to show badge in icon.
\n
<van-action-bar>\n <van-action-bar-icon icon="chat-o" text="Icon1" dot />\n <van-action-bar-icon icon="cart-o" text="Icon2" badge="5" />\n <van-action-bar-icon icon="shop-o" text="Icon3" badge="12" />\n <van-action-bar-button type="warning" text="Button" />\n <van-action-bar-button type="danger" text="Button" />\n</van-action-bar>\n
\n
Custom Icon Color
\n
<van-action-bar>\n <van-action-bar-icon icon="chat-o" text="Icon1" color="#ee0a24" />\n <van-action-bar-icon icon="cart-o" text="Icon2" />\n <van-action-bar-icon icon="star" text="Collected" color="#ff5000" />\n <van-action-bar-button type="warning" text="Button" />\n <van-action-bar-button type="danger" text="Button" />\n</van-action-bar>\n
\n
\n
<van-action-bar>\n <van-action-bar-icon icon="chat-o" text="Icon1" />\n <van-action-bar-icon icon="shop-o" text="Icon2" />\n <van-action-bar-button color="#be99ff" type="warning" text="Button" />\n <van-action-bar-button color="#7232dd" type="danger" text="Button" />\n</van-action-bar>\n
\n
API
\nActionBar Props
\n
\n\n\n| Attribute | \nDescription | \nType | \nDefault | \n
\n\n\n\n| safe-area-inset-bottom | \nWhether to enable bottom safe area adaptation | \nboolean | \ntrue | \n
\n\n| placeholder | \nWhether to generate a placeholder element | \nboolean | \nfalse | \n
\n\n
\n
ActionBarIcon Props
\n
\n\n\n| Attribute | \nDescription | \nType | \nDefault | \n
\n\n\n\n| text | \nButton text | \nstring | \n- | \n
\n\n| icon | \nIcon | \nstring | \n- | \n
\n\n| color | \nIcon color | \nstring | \n#323233 | \n
\n\n| icon-class | \nIcon class name | \nstring | Array | object | \n\'\' | \n
\n\n| icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
\n\n| dot | \nWhether to show red dot | \nboolean | \n- | \n
\n\n| badge | \nContent of the badge | \nnumber | string | \n- | \n
\n\n| badge-props | \nProps of Badge, see Badge - props | \nBadgeProps | \n- | \n
\n\n| url | \nLink URL | \nstring | \n- | \n
\n\n| to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
\n\n| replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
\n\n
\n
\n
\n\n\n| Attribute | \nDescription | \nType | \nDefault | \n
\n\n\n\n| text | \nButton text | \nstring | \n- | \n
\n\n| type | \nButton type, Can be set to default primary success warning danger | \nstring | \ndefault | \n
\n\n| color | \nButton color, support linear-gradient | \nstring | \n- | \n
\n\n| icon | \nLeft Icon | \nstring | \n- | \n
\n\n| disabled | \nWhether to disable button | \nboolean | \nfalse | \n
\n\n| loading | \nWhether to show loading status | \nboolean | \nfalse | \n
\n\n| url | \nLink | \nstring | \n- | \n
\n\n| to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
\n\n| replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
\n\n
\n
ActionBarIcon Slots
\n
\n\n\n| Name | \nDescription | \n
\n\n\n\n| default | \nText | \n
\n\n| icon | \nCustom icon | \n
\n\n
\n
\n
\n\n\n| Name | \nDescription | \n
\n\n\n\n| default | \nButton content | \n
\n\n
\n
Types
\n
The component exports the following type definitions:
\n
import type {\n ActionBarProps,\n ActionBarIconProps,\n ActionBarButtonProps,\n} from 'vant';\n
\n
Theming
\nCSS Variables
\n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\n
\n\n\n| Name | \nDefault Value | \nDescription | \n
\n\n\n\n| --van-action-bar-background | \nvar(--van-background-2) | \n- | \n
\n\n| --van-action-bar-height | \n50px | \n- | \n
\n\n| --van-action-bar-icon-width | \n48px | \n- | \n
\n\n| --van-action-bar-icon-height | \n100% | \n- | \n
\n\n| --van-action-bar-icon-color | \nvar(--van-text-color) | \n- | \n
\n\n| --van-action-bar-icon-size | \n18px | \n- | \n
\n\n| --van-action-bar-icon-font-size | \nvar(--van-font-size-xs) | \n- | \n
\n\n| --van-action-bar-icon-active-color | \nvar(--van-active-color) | \n- | \n
\n\n| --van-action-bar-icon-text-color | \nvar(--van-text-color) | \n- | \n
\n\n| --van-action-bar-icon-background | \nvar(--van-background-2) | \n- | \n
\n\n| --van-action-bar-button-height | \n40px | \n- | \n
\n\n| --van-action-bar-button-warning-color | \nvar(--van-gradient-orange) | \n- | \n
\n\n| --van-action-bar-button-danger-color | \nvar(--van-gradient-red) | \n- | \n
\n\n
\n