@cainiaofe/cn-ui-m
Version:
30 lines (29 loc) • 1.68 kB
JavaScript
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: "\u57FA\u672C" },
React.createElement("div", null, "\u57FA\u672C\u6BD4\u4F8B \u9ED8\u8BA44\u6805\u683C"),
React.createElement(CnCard, null,
React.createElement(CnGridLayout, null,
React.createElement(CnGridItem, null,
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, null,
React.createElement("div", { style: styledGridLayoutItemDemo }, "E")),
React.createElement(CnGridItem, null,
React.createElement("div", { style: styledGridLayoutItemDemo }, "F")))))); };
基本.desc =
'直接使用 GridLayout 和 GridItem，是默认的一种栅格布局。默认 4 栅格，每个 Item 占 1 栅格。支持使用者自定义栅格数、每个 Item 行/列跨度以及 Item 之间的水平/垂直方向间距。';
export default { title: 'demo/CnGridLayout' };