布局组件

我们拓展了基础组件的概念, 创造出了布局组件.

例子

  1. const Grid = (props) => (
  2. <Box {...props}
  3. display='inline-block'
  4. verticalAlign='top'
  5. px={2}/>
  6. );
  7. const Half = (props) => (
  8. <Grid {...props}
  9. width={1 / 2}/>
  10. );
  11. const Third = (props) => (
  12. <Grid {...props}
  13. width={1 / 3}/>
  14. );
  15. const Quarter = (props) => (
  16. <Grid {...props}
  17. width={1 / 4}/>
  18. );
  19. const Flex = (props) => (
  20. <Box {...props}
  21. display='flex'/>
  22. );
  23. const FlexAuto = (props) => (
  24. <Box {...props}
  25. flex='1 1 auto'/>
  26. );

用法

  1. const Layout = () => (
  2. <div>
  3. <div>
  4. <Half>Half width column</Half>
  5. <Half>Half width column</Half>
  6. </div>
  7. <div>
  8. <Third>Third width column</Third>
  9. <Third>Third width column</Third>
  10. <Third>Third width column</Third>
  11. </div>
  12. <div>
  13. <Quarter>Quarter width column</Quarter>
  14. <Quarter>Quarter width column</Quarter>
  15. <Quarter>Quarter width column</Quarter>
  16. <Quarter>Quarter width column</Quarter>
  17. </div>
  18. </div>
  19. );

参考资料: