An action menu panel that pops up from the bottom.

Parameters

Property	Type	Default	Optional Values	Description
mask	Boolean	true	-	Whether to add a mask layer
show	Boolean	false	-	Controls show/hide state
title	String	""	-	Popup title
titleStyle	String	""	-	Title style
subtitle	String	''	-	Subtitle
subtitleStyle	String	""	-	Subtitle style
options	Array	[]	--	Options
showCancel	Boolean	true	-	Whether to show the cancel button
cancelText	String	''	--	Cancel button text
cancelStyle	String	''	--	Cancel button style
styleZindex	Number	1000	--	z-index

Callbacks

Property	Type	Description
onItemClick	Function	Returned after clicking an option
onClose	Function	Returned after closing

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="Try It"
                    plain="{{true}}"
                    bindtap="onTap"
                ></fs-button>

                <fs-divider tip="With Title"></fs-divider>
                <fs-button
                    class="button"
                    type="primary"
                    text="Try It"
                    plain="{{true}}"
                    bindtap="onTap"
                    data-type="1"
                ></fs-button>

                <fs-divider tip="With Subtitle"></fs-divider>
                <fs-button
                    class="button"
                    type="primary"
                    text="Try It"
                    plain="{{true}}"
                    bindtap="onTap"
                    data-type="2"
                ></fs-button>

                <fs-divider tip="Multiple Options"></fs-divider>
                <fs-button
                    class="button"
                    type="primary"
                    text="Try It"
                    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" },
            { label: "2" },
        ],
    },
};

Page({
    /**
     * Initial page data
     */
    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,
        });
    }
});

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