布局组件
我们拓展了基础组件的概念, 创造出了布局组件.
例子
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
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程