动作面板 ActionSheet

从底部弹出的动作菜单面板

使用

API

安装使用

{
  // 原生小程序
  "usingComponents": {
    "ti-action-sheet": "@titian-design/weapp/action-sheet/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-action-sheet": "platform://titian-mp/ti-action-sheet"
  }
}

用法示例

展示

• App.wxml
• index.js

code

copy

code

<ti-button bind:click="toggle">展示</ti-button>
<ti-action-sheet
  title="标题"
  visible="{{visible}}"
  actions="{{actions}}"
  bind:cancel="toggle"
  bind:select="toggle"
  bind:close="toggle"
/>

copy

code

Page({
  data: {
    actions: [
      { name: '选项1', description: '描述1' },
      { name: '选项1', description: '描述1', icon: 'home' },
      { name: '选项1', description: '描述1', disabled: true },
    ],
  },
  toggle() {
    const { visible } = this.data;
    this.setData({ visible: !visible });
  },
});

ti-action-sheet API

属性 Properties

名称	类型	必填	默认值	说明	备注
visible	boolean	否	-	是否显示动作面板	-
title	string	否	-	标题	-
actions	Array<Option>	是	-	菜单选项，Option类型	-
cancel-text	string	否	-	按钮	-
hover-class	string	否	'active'	指定按钮按下去的样式类	-
alias	Record<string, string>	否	-	数据项默认字段名name description icon loading disabled的别名，用于自定义数据，可替代tabKey属性	-

Option

API 中的 actions 为一个对象数组，数组中的每一个对象有以下 key：

名称	类型	必填	默认值	说明	备注
name	string	否	-	标题	-
description	string	否	-	描述文字	-
icon	string	否	-	标题左侧图标	-
loading	string	否	-	是否为加载状态	-
disabled	boolean	否	-	是否为禁用状态	-

事件 Events

名称	参数列表	描述	备注
bind:select	(e: WechatMiniprogram.CustomEvent<Option>) => void	选中选项时触发，禁用或加载状态下不会触发，Option类型	-
bind:cancel	(e: WechatMiniprogram.CustomEvent) => void	取消按钮点击时触发	-
bind:close	(e: WechatMiniprogram.CustomEvent) => void	点击遮罩时触发	-

CSS 变量 CSS Variable

变量	默认值	说明	备注
--action-sheet-bg-color	theme.color.gray.background.40	整体弹层，底部内容区域背景色	-
--action-sheet-line-height	theme.lineHeight.multiline.t3	菜单项文字行高	-
--action-sheet-title-color	theme.color.gray.texticon.900	标题文字颜色	-
--action-sheet-title-font-size	theme.fontSize.t7	标题文字字号	-
--action-sheet-description-color	theme.color.gray.texticon.400	描述文字颜色	-
--action-sheet-description-font-size	theme.fontSize.t4	描述文字字号	-
--action-sheet-description-line-height	theme.lineHeight.multiline.t1	描述文字行高	-
--action-sheet-description-margin-top	theme.spacing.vertical.v3	描述文字上方间距	-
--action-sheet-padding-v	theme.spacing.vertical.v9	菜单项垂直方向内边距	-
--action-sheet-padding-h	theme.spacing.horizontal.h0	菜单项水平方向内边距	-
--action-sheet-button-bg-color	theme.color.gray.background.default	菜单项背景色	-
--action-sheet-button-color	theme.color.gray.texticon.900	菜单项文字颜色	-
--action-sheet-button-font-size	theme.fontSize.t6	菜单项文字字号	-
--action-sheet-button-active-color	rgba(0,0,0,0.1)	active状态下菜单项背景色	-
--action-sheet-button-disabled-color	theme.color.gray.texticon.250	禁用状态下侧单项文字颜色	-
--action-sheet-icon-margin-right	theme.spacing.horizontal.h2	菜单项内部图标右边距	-
--action-sheet-cancel-btn-gap	theme.spacing.gap.g5	取消按钮上方间距	-
--action-sheet-title-line-height	theme.lineHeight.multiline.t3	-	-
--action-sheet-title-font-weight	theme.fontWeight.semibold	-	-
--action-sheet-title-padding-v	theme.spacing.vertical.v9	-	-
--action-sheet-button-line-height	theme.lineHeight.multiline.t3	-	-
--action-sheet-button-font-weight	theme.fontWeight.regular	-	-
--action-sheet-icon-font-size	theme.fontSize.t6	-	-
--action-sheet-cancel-font-size	theme.fontSize.t6	-	-
--action-sheet-cancel-line-height	theme.lineHeight.multiline.t3	-	-
--action-sheet-cancel-color	theme.color.gray.texticon.550	-	-
--action-sheet-cancel-padding-v	theme.spacing.vertical.v9	-	-