@alicloud/console-components
Version:
Alibaba Cloud React Components
28 lines (27 loc) • 1.26 kB
JavaScript
/**
* 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"))));
});