UNPKG

@cainiaofe/cn-ui-m

Version:

## 在线文档

unpkg.alibaba-inc.com/@alife/monorepo-cn-ui-m@0.1.21/build/index.html

73 lines (72 loc) • 4.61 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import React from 'react'; import { CnCard, CnDemoPage, CnGridItem, CnGridLayout, } from "../../.."; var styledGridLayoutItemDemo = { display: 'flex', background: '#c0ccdd', color: 'white', justifyContent: 'center', alignItem: 'center', height: '100%', }; export var 自定义栅格 = function () { return (React.createElement(CnDemoPage, { title: "\u81EA\u5B9A\u4E49\u6805\u683C" }, React.createElement("div", null, "\u81EA\u5B9A\u4E49\u6805\u683C\u8DE8\u5EA6"), React.createElement(CnCard, null, React.createElement(CnGridLayout, null, React.createElement(CnGridItem, { colSpan: 2, rowSpan: 2 }, React.createElement("div", { style: styledGridLayoutItemDemo }, React.createElement("span", { style: { height: '50px' } }, "A"))), React.createElement(CnGridItem, null, React.createElement("div", { style: styledGridLayoutItemDemo }, "B")), React.createElement(CnGridItem, null, React.createElement("div", { style: styledGridLayoutItemDemo }, "C")), React.createElement(CnGridItem, null, React.createElement("div", { style: styledGridLayoutItemDemo }, "D")), React.createElement(CnGridItem, { colSpan: 2 }, React.createElement("div", { style: styledGridLayoutItemDemo }, "E")), React.createElement(CnGridItem, null, React.createElement("div", { style: styledGridLayoutItemDemo }, "F")))), React.createElement("div", null, "\u81EA\u5B9A\u4E49\u6805\u683C\u95F4\u8DDD"), React.createElement(CnCard, null, React.createElement(CnGridLayout, { gutter: 10 }, React.createElement(CnGridItem, { colSpan: 2 }, React.createElement("div", { style: styledGridLayoutItemDemo }, "A")), React.createElement(CnGridItem, null, React.createElement("div", { style: styledGridLayoutItemDemo }, "B")), React.createElement(CnGridItem, null, React.createElement("div", { style: styledGridLayoutItemDemo }, "C")), React.createElement(CnGridItem, null, React.createElement("div", { style: styledGridLayoutItemDemo }, "D")), React.createElement(CnGridItem, { colSpan: 3 }, React.createElement("div", { style: styledGridLayoutItemDemo }, "E")), React.createElement(CnGridItem, null, React.createElement("div", { style: styledGridLayoutItemDemo }, "F"))), React.createElement("h1", null), React.createElement(CnGridLayout, { gutter: [5, 30] }, React.createElement(CnGridItem, { colSpan: 2 }, React.createElement("div", { style: styledGridLayoutItemDemo }, "A")), React.createElement(CnGridItem, null, React.createElement("div", { style: styledGridLayoutItemDemo }, "B")), React.createElement(CnGridItem, null, React.createElement("div", { style: styledGridLayoutItemDemo }, "C")), React.createElement(CnGridItem, null, React.createElement("div", { style: styledGridLayoutItemDemo }, "D")), React.createElement(CnGridItem, { colSpan: 3 }, React.createElement("div", { style: styledGridLayoutItemDemo }, "E")), React.createElement(CnGridItem, null, React.createElement("div", { style: styledGridLayoutItemDemo }, "F")))), React.createElement("div", null, "\u81EA\u5B9A\u4E49\u6805\u683C\u6570 12\u6805\u683C"), React.createElement(CnCard, null, React.createElement(CnGridLayout, { grids: 12 }, React.createElement(CnGridItem, { colSpan: 2 }, React.createElement("div", { style: styledGridLayoutItemDemo }, "A")), React.createElement(CnGridItem, { colSpan: 8 }, React.createElement("div", { style: styledGridLayoutItemDemo }, "B")), React.createElement(CnGridItem, { colSpan: 2 }, React.createElement("div", { style: styledGridLayoutItemDemo }, "C")), React.createElement(CnGridItem, { colSpan: 4 }, React.createElement("div", { style: styledGridLayoutItemDemo }, "D")), React.createElement(CnGridItem, { colSpan: 6 }, React.createElement("div", { style: styledGridLayoutItemDemo }, "E")), React.createElement(CnGridItem, { colSpan: 2 }, React.createElement("div", { style: styledGridLayoutItemDemo }, "F")))))); }; export default { title: 'demo/CnGridLayout' };