动作面板 ActionSheet

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

使用

API

安装使用

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

基本用法

展示

codesanbox

copy

code

import React, { useRef, useState } from 'react';
import { TiActionSheet, TiButton } from 'titian-h5-react';

export default function ButtonDefault() {
  const ref = useRef<HTMLDivElement>();
  const [visible, setVisible] = useState(false);
  const actions = [
    { name: '选项1', description: '描述1' },
    { name: '选项1', description: '描述1', icon: 'home' },
    { name: '选项1', description: '描述1', disabled: true },
  ];

  return (
    <div className="code-container">
      <div className="content">
        <div
          ref={ref}
          className={`popup-container ${visible ? 'is-opened' : 'is-closed'}`}
          style={{ transition: visible ? 'unset' : 'height 0.3s 0.3s' }}
        >
          <TiButton onClick={() => setVisible(true)}> 展示</TiButton>
          <TiActionSheet
            teleport={ref.current}
            visible={visible}
            title="标题"
            actions={actions}
            onSelect={() => setVisible(false)}
            onCancel={() => setVisible(false)}
            onClose={() => setVisible(false)}
          />
        </div>
      </div>
    </div>
  );
}

TiActionSheet API

属性 Properties

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

Option

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

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

事件 Events

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