• Vant React

ActionBar 动作栏

介绍

用于为页面相关操作提供便捷交互。

引入

import { ActionBar } from "@taroify/commerce"
// or
import ActionBar from "@taroify/commerce/action-bar"

代码演示

基础用法

import { ActionBar } from "@taroify/commerce"
import { CartOutlined, ChatOutlined, ShopOutlined } from "@taroify/icons"
import { Text } from "@tarojs/components"

function BasicActionBar() {
  return (
    <ActionBar>
      <ActionBar.IconButton>
        <ChatOutlined />
        <Text>客服</Text>
      </ActionBar.IconButton>
      <ActionBar.IconButton>
        <CartOutlined />
        <Text>购物车</Text>
      </ActionBar.IconButton>
      <ActionBar.IconButton>
        <ShopOutlined />
        <Text>店铺</Text>
      </ActionBar.IconButton>
      <ActionBar.Button>立即购买</ActionBar.Button>
    </ActionBar>
  )
}

徽标提示

在 ActionBar.IconButton 组件上设置 badge 属性后，会在图标右上角展示一个小红点；设置 badge 属性后，会在图标右上角展示相应的徽标。

import { ActionBar } from "@taroify/commerce"
import { CartOutlined, ChatOutlined, ShopOutlined } from "@taroify/icons"
import { Text } from "@tarojs/components"

function ActionBarWithBadges() {
  return (
    <ActionBar>
      <ActionBar.IconButton badge>
        <ChatOutlined />
        <Text>客服</Text>
      </ActionBar.IconButton>
      <ActionBar.IconButton badge="5">
        <CartOutlined />
        <Text>购物车</Text>
      </ActionBar.IconButton>
      <ActionBar.IconButton badge="12">
        <ShopOutlined />
        <Text>店铺</Text>
      </ActionBar.IconButton>
      <ActionBar.ButtonGroup>
        <ActionBar.Button color="warning">加入购物车</ActionBar.Button>
        <ActionBar.Button color="danger">立即购买</ActionBar.Button>
      </ActionBar.ButtonGroup>
    </ActionBar>
  )
}

自定义图标颜色

通过设置图标的 color 属性可以自定义图标的颜色。

import { ActionBar } from "@taroify/commerce"
import { CartOutlined, ChatOutlined, Star } from "@taroify/icons"
import { Text } from "@tarojs/components"

function ActionBarWithCustomIconButton() {
  return (
    <ActionBar>
      <ActionBar.IconButton>
        <ChatOutlined color="#ee0a24" />
        <Text>客服</Text>
      </ActionBar.IconButton>
      <ActionBar.IconButton>
        <CartOutlined />
        <Text>购物车</Text>
      </ActionBar.IconButton>
      <ActionBar.IconButton>
        <Star color="#ff5000" />
        <Text>已收藏</Text>
      </ActionBar.IconButton>
      <ActionBar.ButtonGroup>
        <ActionBar.Button color="danger">加入购物车</ActionBar.Button>
        <ActionBar.Button color="warning">立即购买</ActionBar.Button>
      </ActionBar.ButtonGroup>
    </ActionBar>
  )
}

自定义按钮颜色

通过 ActionBar.Button 的 style 属性可以自定义按钮的颜色，支持传入 linear-gradient 渐变色。

import { ActionBar } from "@taroify/commerce"
import { CartOutlined, ChatOutlined } from "@taroify/icons"
import { Text } from "@tarojs/components"

function ActionBarWithCustomButton() {
  return (
    <ActionBar>
      <ActionBar.IconButton>
        <ChatOutlined />
        <Text>客服</Text>
      </ActionBar.IconButton>
      <ActionBar.IconButton>
        <CartOutlined />
        <Text>购物车</Text>
      </ActionBar.IconButton>
      <ActionBar.ButtonGroup>
        <ActionBar.Button style={{ background: "#be99ff" }}>加入购物车</ActionBar.Button>
        <ActionBar.Button style={{ background: "#7232dd" }}>立即购买</ActionBar.Button>
      </ActionBar.ButtonGroup>
    </ActionBar>
  )
}

API

ActionBar Props

参数 说明 类型 默认值
fixed 是否固定在底部 boolean false
safeArea 安全区域，可选值 top bottom string -
placeholder 固定在底部时，是否在标签位置生成一个等高的占位元素 boolean false

ActionBar.ButtonGroup Props

参数 说明 类型 默认值
flex 列元素宽度 number -
shape 按钮形状,可选值为 square string round

ActionBar.Button Props

参数 说明 类型 默认值
shape 按钮形状,可选值为 square string round
color 按钮颜色,可选值为 primary info success warning string danger
icon 左侧图标或图片 ReactNode -
disabled 是否禁用按钮 boolean false
loading 是否显示为加载状态 boolean | LoadingProps false

ActionBar.IconButton Props

参数 说明 类型 默认值
badge 徽标内容 boolean | number | string | Badge -

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称 默认值 描述
—action-bar-color var(—gray-6) -
—action-bar-height 50px * $hd -
—action-bar-background var(—action-bar-background) -
—action-bar-button-height 40px * $hd -
—action-bar-button-color var(—white) -
—action-bar-button-font-size var(—font-size-md) -
—action-bar-button-gradient-red var(—gradient-red) -
—action-bar-button-gradient-orange var(—gradient-orange) -
—action-bar-button-border-radius-md var(—border-radius-md) -
—action-bar-button-border-radius-max var(—border-radius-max) -
—action-bar-icon-button-color var(—gray-7) -
—action-bar-icon-button-font-size var(—font-size-xs) -
—action-bar-icon-button-width 48px * $hd -
—action-bar-icon-button-height 100% -
—action-bar-icon-button-icon-font-size 18px * $hd -