@alicloud/console-components
Version:
Alibaba Cloud React Components
28 lines (27 loc) • 1.23 kB
JavaScript
/**
* title: "从底部滑出形态（所有规则同以上右滑样式）"
* description: "设置placement 为 bottom，从底部滑出"
*/
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: "bottom", 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"))));
});