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

Alibaba Cloud React Components

/**
 * title: "从右侧滑出形态"
 * description: "默认从右侧滑出"
 */
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, { title: "\u6807\u9898 Title", isShowing: active, width: "medium", onVisibleChange: function (v) {
                setActive(v);
            }, onClose: function () {
                setActive(false);
            } },
            React.createElement("div", { style: containerStyle }, "Content Placehoder"))));
});