@cainiaofe/cn-ui-m
Version:
29 lines (28 loc) • 1.75 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: "\u54CD\u5E94\u5F0F" },
React.createElement(CnCard, null,
React.createElement(CnGridLayout, { responsive: true },
React.createElement(CnGridItem, { colSpan: { xs: 1, sm: 2, md: 4, lg: 4, xl: 6 } },
React.createElement("div", { style: styledGridLayoutItemDemo }, "A")),
React.createElement(CnGridItem, { colSpan: { xs: 1, sm: 2, md: 4, lg: 4, xl: 6 } },
React.createElement("div", { style: styledGridLayoutItemDemo }, "B")),
React.createElement(CnGridItem, { colSpan: { xs: 1, sm: 1, md: 4, lg: 4, xl: 6 } },
React.createElement("div", { style: styledGridLayoutItemDemo }, "C")),
React.createElement(CnGridItem, { colSpan: { xs: 1, sm: 1, md: 2, lg: 4, xl: 6 } },
React.createElement("div", { style: styledGridLayoutItemDemo }, "D")),
React.createElement(CnGridItem, { colSpan: { xs: 1, sm: 2, md: 1, lg: 4, xl: 4 } },
React.createElement("div", { style: styledGridLayoutItemDemo }, "E")),
React.createElement(CnGridItem, { colSpan: { xs: 1, sm: 4, md: 3, lg: 4, xl: 4 } },
React.createElement("div", { style: styledGridLayoutItemDemo }, "F")))))); };
响应式.desc =
'grids 和 colSpan 支持响应布局。预设 5 个响应尺寸{xs sm md lg xl}。';
export default { title: 'demo/CnGridLayout' };