@alicloud/console-components/esm/rc/slide-panel/demos/demo2.js

Alibaba Cloud React Components

/**
 * title: "吸底按钮在内容区外（吸底按钮不包含在内容区域内）"
 * description: "通过设置onOk,onCancel属性，控制底部按钮的显示与隐藏"
 */
import React, { useState } from 'react';
import { Button } from '@alicloud/console-components';
import SlidePanel from '@alicloud/console-components-slide-panel';
var containerStyle = {
    height: '128px',
    borderRadius: '4px',
    lineHeight: '128px',
    background: '#f6f6f6',
    textAlign: 'center',
};
export default (function () {
    var _a = useState(false), active = _a[0], setActive = _a[1];
    return (React.createElement(React.Fragment, null,
        React.createElement(Button, { onClick: function () {
                setActive(true);
            } }, "open"),
        React.createElement(SlidePanel, { placement: "right", title: "\u6807\u9898 Title", isShowing: active, width: "medium", onOk: function () { }, onCancel: function () { }, cancelText: "\u57FA\u7840\u6309\u94AE", okText: "\u57FA\u7840\u6309\u94AE", onVisibleChange: function (v) {
                setActive(v);
            }, onClose: function () {
                setActive(false);
            } },
            React.createElement("div", { style: containerStyle }, "Content Placehoder"))));
});