跳到主要内容

动作面板 ActionSheet

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

安装使用

import { TiActionSheet } from '@titian-design/mobile-react'

用法示例

基础用法

const App: React.FC = () => {
const actions = [
{ name: '选项1', description: '描述1' },
{ name: '选项1', description: '描述1', icon: 'home' },
{ name: '选项1', description: '描述1', disabled: true }
]
return (
<>
<TiActionSheet title="标题" actions={actions} onSelect={onSelect} onCancel={onCancel} />
</>
)
}

TiActionSheet API

属性 Properties

名称类型必填默认值说明备注
visibleboolean-是否显示动作面板-
titlestring-标题-
actionsArray<Option>-菜单选项,Option类型-
cancelTextstring-按钮-
hoverClassstring'active'指定按钮按下去的样式类-
aliasRecord<string, string>-数据项默认字段名name description icon loading disabled的别名,用于自定义数据,可替代tabKey属性-
teleportElementdocument.bodyDOM 挂载节点-

Option

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

名称类型必填默认值说明备注
namestring-标题-
descriptionstring-描述文字-
iconstring-标题左侧图标-
loadingstring-是否为加载状态-
disabledboolean-是否为禁用状态-

事件 Events

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

CSS 变量 CSS Variable

变量默认值说明备注
--action-sheet-bg-color#f5f5f5整体弹层,底部内容区域背景色-
--action-sheet-line-height36px菜单项文字行高-
--action-sheet-title-color#9e9e9e标题文字颜色-
--action-sheet-title-font-size30px标题文字字号-
--action-sheet-description-color#9e9e9e描述文字颜色-
--action-sheet-description-font-size24px描述文字字号-
--action-sheet-description-line-height28px描述文字行高-
--action-sheet-description-margin-top12px描述文字上方间距-
--action-sheet-padding-v36px菜单项垂直方向内边距-
--action-sheet-padding-h0px菜单项水平方向内边距-
--action-sheet-button-bg-color#fff菜单项背景色-
--action-sheet-button-color#212121菜单项文字颜色-
--action-sheet-button-font-size28px菜单项文字字号-
--action-sheet-button-active-colorrgba(0,0,0,0.1)active状态下菜单项背景色-
--action-sheet-button-disabled-color#e0e0e0禁用状态下侧单项文字颜色-
--action-sheet-icon-margin-right8px菜单项内部图标右边距-
--action-sheet-cancel-btn-gap20px取消按钮上方间距-