@cainiaofe/cn-ui-m
Version:
42 lines (41 loc) • 2.04 kB
JavaScript
import { __assign } from "tslib";
import React, { useState } from 'react';
import { CnButton, CnCard, CnDemoPage, CnDrawer, CnBox, } from "../../..";
export var 弹出位置 = function () {
var _a = useState(false), visible = _a[0], setVisible = _a[1];
var _b = useState('bottom'), placement = _b[0], setPlacement = _b[1];
var open = function (p) {
setPlacement(p);
setVisible(true);
};
var close = function () {
setVisible(false);
};
var sizeProps = {
height: '',
width: '',
};
if (['top', 'bottom'].indexOf(placement) !== -1) {
sizeProps.height = '5rem';
}
else {
sizeProps.width = '2rem';
}
return (React.createElement(CnDemoPage, { title: "\u5F39\u51FA\u4F4D\u7F6E" },
React.createElement(CnCard, null,
React.createElement(CnBox, { spacing: 12 },
React.createElement(CnButton, { type: "primary", onClick: function () { return open('left'); } }, "Open Left Drawer"),
React.createElement(CnButton, { type: "primary", onClick: function () { return open('right'); } }, "Open Right Drawer"),
React.createElement(CnButton, { type: "primary", onClick: function () { return open('top'); } }, "Open Top Drawer"),
React.createElement(CnButton, { type: "primary", onClick: function () { return open('bottom'); } }, "Open Bottom Drawer"))),
React.createElement(CnDrawer, __assign({ placement: placement }, sizeProps, { visible: visible, containerClassName: "drawer-container", onClose: function (reason) {
console.log('closed by ', reason);
close();
}, onVisibleChange: function (visi) {
console.log('visible change', visi);
}, onMaskClick: function () {
console.log('mask click');
} }), "\u666E\u901A\u7684\u62BD\u5C49")));
};
弹出位置.desc = '通过placement属性控制抽屉的弹出位置';
export default { title: 'demo/CnDrawer' };