ActionBar 动作栏

文档: https://vant-contrib.gitee.io/vant/#/zh-CN/action-bar

一般是吸附在底部的一个横条容器, 里面放着按钮. 例如

image-20240116223606196

涉及的组件有: ActionBar 作为容器使用. ActionBarIcon, 内部的图标按钮. ArctionBarButton 表示内部的大按钮. 默认会显示在页面底部. 默认会采用固定定位.

image-20240117014250879

基本语法:

  1. 使用 van-action-bar 作为容器, 该组件会控制定位与布局.
  2. 内部需要什么, 就添加什么子组件, 包括: van-action-bar-icon 和 van-action-bar-button.

常用属性:

  • placeholder 在底部创建一个与动作栏按钮等高的占位区域 (不需要自己实现了).
  • safe-area-inset-bottom 开启底部安全适配区 (默认为 true).

ActionBarIcon 属性

语法:

<van-action-bar>
  <van-action-bar-icon icon="..." text="..."></van-action-bar-icon>
</van-action-bar>

常用属性:

  • text 和 icon 合用, 用于展示图标与底部文字.
  • dot 和 badge 用于控制右上角的小红点或数字徽标.
  • url 用于点击后跳转.
  • to 点击后的导航.
  • replace 导航后是否覆盖当前历史.

ActionBarButton 属性

基本用法

<van-action-bar>
  <van-action-bar-button text="文案" type="..."></van-action-bar-button>
  <van-action-bar-button text="..." type="..."></van-action-bar-button>
</van-action-bar>

所有连在一起的按钮会组合成一个整体胶囊型的按钮组.

常用属性:

  • text 按钮上的文字
  • type 决定了按钮的颜色. 可取值有 default, primary, success, warning, danger.
  • loading 是否启用加载状态.
  • url, to, replace 与 ActionBarIcon 组件的一样.
Last Updated:
Contributors: jk