布局组件
优质
小牛编辑
129浏览
2023-12-01
我们拓展了基础组件的概念, 创造出了布局组件.
例子
const Grid = (props) => (
<Box {...props}
display='inline-block'
verticalAlign='top'
px={2}/>
);
const Half = (props) => (
<Grid {...props}
width={1 / 2}/>
);
const Third = (props) => (
<Grid {...props}
width={1 / 3}/>
);
const Quarter = (props) => (
<Grid {...props}
width={1 / 4}/>
);
const Flex = (props) => (
<Box {...props}
display='flex'/>
);
const FlexAuto = (props) => (
<Box {...props}
flex='1 1 auto'/>
);
用法
const Layout = () => (
<div>
<div>
<Half>Half width column</Half>
<Half>Half width column</Half>
</div>
<div>
<Third>Third width column</Third>
<Third>Third width column</Third>
<Third>Third width column</Third>
</div>
<div>
<Quarter>Quarter width column</Quarter>
<Quarter>Quarter width column</Quarter>
<Quarter>Quarter width column</Quarter>
<Quarter>Quarter width column</Quarter>
</div>
</div>
);
参考资料:
- Github: React Layout components
- Leveling Up With React: Container Components
- Container Components and Stateless Functional Components in React