动作面板 ActionSheet

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

使用

API

用法示例

基础用法

• index.html
• index.js

code

<ti-action-sheet title="标题" id="ti-action-sheet" />

window.onload = function(){
  var options = [
    { name: '选项1', description: '描述1' },
    { name: '选项1', description: '描述1', icon: 'home' },
    { name: '选项1', description: '描述1', disabled: true }
  ];
  var tiActionSheet = document.querySelector("#ti-action-sheet");
  tiActionSheet.actions = options;
  tiActionSheet.addEventListener('select', function (e) {
    console.log(e.detail);
  });
  tiActionSheet.addEventListener('cancel', function (e) {
    console.log(e.detail);
  });
  tiActionSheet.addEventListener('close', function (e) {
    console.log(e.detail);
  });
} 

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

名称	参数列表	描述	备注
select	(e: CustomEvent) => void	选中选项时触发，禁用或加载状态下不会触发，Option类型	-
cancel	(e: CustomEvent) => void	取消按钮点击时触发	-
close	(e: 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	标题区域上下padding	-
--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	取消文字上下Padding	-