Action Sheet

The Action Sheet is a pop-up panel that appears from the bottom of the screen, allowing users to select options.

Highly dangerous options are highlighted in red for immediate recognition. Users can dismiss it by clicking the cancel button or tapping outside the panel.

Parameters

Property	Type	Default	Options	Description
mask	Boolean	true	-	Whether to show overlay mask
show	Boolean	false	-	Controls panel visibility
title	String	""	-	Panel title
titleStyle	String	""	-	Title style
subtitle	String	''	-	Subtitle
subtitleStyle	String	""	-	Subtitle style
options	Array	[]	--	Action items
showCancel	Boolean	true	-	Whether to show cancel button
cancelText	String	''	--	Cancel button text
cancelStyle	String	''	--	Cancel button style
styleZindex	Number	1000	--	Z-index level

Callbacks

Property	Type	Description
onItemClick	Function	Triggered when an option is clicked
onClose	Function	Triggered when panel closes

Example Code

<view>
  <fs-page title="actionsheet" c-bind:onMounted="onMounted">
    <view class="page">
      <scroll-view class="scroll" style="height: {{dScrollHeight}}px" scroll-y="true">
        <fs-divider tip="Without title"></fs-divider>
        <fs-button class="button" type="primary" text="Click me" plain="{{true}}" bindtap="onTap"></fs-button>

        <fs-divider tip="With title"></fs-divider>
        <fs-button class="button" type="primary" text="Click me" plain="{{true}}" bindtap="onTap" data-type="1"></fs-button>

        <fs-divider tip="With subtitle"></fs-divider>
        <fs-button class="button" type="primary" text="Click me" plain="{{true}}" bindtap="onTap" data-type="2"></fs-button>

        <fs-divider tip="Multiple options"></fs-divider>
        <fs-button class="button" type="primary" text="Click me" plain="{{true}}" bindtap="onTap" data-type="3"></fs-button>
      </scroll-view>
    </view>
    <fs-actionsheet show="{{show}}" title="{{title}}" title-style="{{titleStyle}}" subtitle="{{subtitle}}" subtitle-style="{{subtitleStyle}}" options="{{options}}" bindonClose="onClose" bindonItemClick="onItemClick">
    </fs-actionsheet>
  </fs-page>
</view>

// testPages/testActionsheet/testActionsheet.js
const paramConfig = {
  1: {
    title: 'fxiaoke'
  },
  2: {
    title: 'fxiaoke',
    titleStyle: "color: red",
    subtitle: 'subtitle',
    subtitleStyle: "color: green"
  },
  3: {
    options: [
      {
        label: '2',
        subtitle: 'subtitle\nsdsdsds\nsdsd',
        subStyle: 'color: red;'
      },
      { label: '2sds d sds s s sd s s s ds sd ss s s\nsdsdsdssdsdssdsds \n khkhkh \n hhhhjhfyfujfhgfhfhfgfghfghfghfhfhgrfuyruytfhfhftfthfhtfhfhfhyfh' },
      { label: '2' },
      { label: '2' },
      { label: '2' },
      { label: '2' },
      { label: '2' },
      { label: '2' },
      { label: '2' },
      { label: '2' },
      { label: '2' },
      { label: '2' },
      { label: '2' },
      { label: '2' },
      { label: '2' }
    ]
  }
}

Page({
  data: {
    show: false,
    title: '',
    subtitle: '',
    options: [],
    dScrollHeight: 500
  },

  onTap(event) {
    const { type } = event.target.dataset;
    let param = {
      title: '',
      titleStyle: '',
      subtitle: '',
      subtitleStyle: '',
      options: [
        { label: '2' }, { label: '2' }, { label: '2' }
      ]
    }
    param = Object.assign(param, paramConfig[type] || {})
    this.setData({
      title: param.title,
      titleStyle: param.titleStyle,
      subtitle: param.subtitle,
      subtitleStyle: param.subtitleStyle,
      options: param.options,
      show: true
    });
  },
  onItemClick(e) {
    console.log(e)
  },
  onClose() {
    this.setData({
      show: false
    });
  },
  onMounted(e) {
    this.setData({
      dScrollHeight: e.detail.mainHeight
    });
  },

  onLoad: function (options) {},
  onReady: function () {},
  onShow: function () {},
  onHide: function () {},
  onUnload: function () {},
  onPullDownRefresh: function () {},
  onReachBottom: function () {},
  onShareAppMessage: function () {}
})

{
  "usingComponents": {
    "fs-divider": "ava-ui/fxui/Divider/Divider",
    "fs-actionsheet": "ava-ui/fxui/Actionsheet/Actionsheet",
    "fs-button": "ava-ui/fxui/Button/Button"
  }
}