ActionSheet 动作面板

该组件提供了一种多端统一的 动作面板 样式与 IOS 对齐，在页面上的层级为 1010

使用指南

在 Taro 文件中引入组件

  1. import { AtActionSheet, AtActionSheetItem } from "taro-ui"

组件依赖的样式文件（仅按需引用时需要）

  1. @import "~taro-ui/dist/style/components/action-sheet.scss";

一般用法

  1. <AtActionSheet isOpened>
      <AtActionSheetItem>
        按钮一
      </AtActionSheetItem>
      <AtActionSheetItem>
        按钮二
      </AtActionSheetItem>
    </AtActionSheet>

添加标题和底部取消按钮

  1. <AtActionSheet isOpened cancelText='取消' title='头部标题可以用通过转义字符换行'>
      <AtActionSheetItem>
        按钮一
      </AtActionSheetItem>
      <AtActionSheetItem>
        按钮二
      </AtActionSheetItem>
    </AtActionSheet>

添加监听事件

  1. <AtActionSheet isOpened cancelText='取消' title='头部标题可以用通过转义字符换行' onCancel={ this.handleCancel } onClose={ this.handleClose }>
      <AtActionSheetItem onClick={ this.handleClick }>
        按钮一
      </AtActionSheetItem>
      <AtActionSheetItem>
        按钮二
      </AtActionSheetItem>
    </AtActionSheet>

AtActionSheet 参数

参数说明类型可选值默认值
title元素的标题String--
isOpened是否展示元素Boolean-false
cancelText取消按钮的内容String--

AtActionSheet 事件

事件名称说明返回参数
onClose元素被关闭触发的事件-
onCancel点击了底部取消按钮触发的事件-

AtActionSheetItem 事件

事件名称说明返回参数
onClick点击 Item 触发的事件-

ActionSheet动作面板 - 图1