@cainiaofe/cn-ui-m
Version:
32 lines (31 loc) • 2.13 kB
JavaScript
import React from 'react';
import { CnBox, CnPage, CnCard } from "../../..";
var demoStyle = {
width: '20%',
backgroundColor: '#e2e6ec',
height: '50%',
minHeight: '30px',
border: 'solid 1px rgb(242, 244, 248)',
};
export var 垂直水平对齐 = function () { return (React.createElement(CnPage, { title: "\u5782\u76F4\u6C34\u5E73\u5BF9\u9F50" },
React.createElement(CnCard, { title: "\u5782\u76F4\u5C45\u4E2D", noPadding: true },
React.createElement(CnBox, { direction: "row", align: "center", style: { height: 90, marginBottom: 20 } },
React.createElement("div", { style: demoStyle }),
React.createElement("div", { style: demoStyle }),
React.createElement("div", { style: demoStyle }),
React.createElement("div", { style: demoStyle }))),
React.createElement(CnCard, { title: "\u6C34\u5E73\u5C45\u4E2D", noPadding: true },
React.createElement(CnBox, { direction: "row", justify: "center", style: { marginBottom: 20 } },
React.createElement("div", { style: demoStyle }),
React.createElement("div", { style: demoStyle }),
React.createElement("div", { style: demoStyle }),
React.createElement("div", { style: demoStyle }))),
React.createElement(CnCard, { title: "\u589E\u52A0\u5185\u8FB9\u8DDD\u540E\u7684\u6C34\u5E73\u5C45\u4E2D", noPadding: true },
React.createElement(CnBox, { direction: "row", justify: "center", padding: 20, style: { marginBottom: 20 } },
React.createElement("div", { style: demoStyle }),
React.createElement("div", { style: demoStyle }),
React.createElement("div", { style: demoStyle }),
React.createElement("div", { style: demoStyle }))))); };
垂直水平对齐.desc =
'justify align等价于justify-contents align-items，用来设置CnBox的主轴方向、垂直主轴方向的对齐方式，即：direction为row时，align控制垂直方向, justify控制水平方向；direction为column时(默认值)，justify控制垂直方向,align控制水平方向。';
export default { title: 'demo/CnBox' };