@cainiaofe/cn-ui-m
Version:
33 lines (32 loc) • 1.7 kB
JavaScript
import React, { useState } from 'react';
import { CnBox, CnCard, CnPage, CnSwitch } from "../../..";
var demoStyle = {
width: 50,
backgroundColor: '#e2e6ec',
height: '50%',
minHeight: '30px',
border: 'solid 1px rgb(242, 244, 248)',
};
export var 折行 = function () {
var _a = useState(true), wrap = _a[0], setWrap = _a[1];
return (React.createElement(CnPage, { title: "\u6298\u884C" },
React.createElement(CnCard, { title: "\u6362\u884C", noPadding: true },
React.createElement(CnBox, { direction: "row", spacing: 12, align: "center", padding: 8 },
React.createElement(CnSwitch, { checked: wrap, onChange: function (val) {
setWrap(val);
} }),
React.createElement("span", { style: { marginLeft: 4 } }, "\u6362\u884C")),
React.createElement(CnBox, { spacing: 20, wrap: wrap, direction: "row" },
React.createElement("div", { style: demoStyle }),
React.createElement("div", { style: demoStyle }),
React.createElement("div", { style: demoStyle }),
React.createElement("div", { style: demoStyle }),
React.createElement("div", { style: demoStyle }),
React.createElement("div", { style: demoStyle }),
React.createElement("div", { style: demoStyle }),
React.createElement("div", { style: demoStyle }),
React.createElement("div", { style: demoStyle })))));
};
折行.desc =
'默认不折行，可以通过设置`wrap`控制折行。 受浏览器限制，本功能支持到 IE11+。';
export default { title: 'demo/CnBox' };