未来的一段时间都会围绕一个UI库来学习。
Grid
- Grid 是一个布局类，这个类可以同时作为容器或者容器的item， 只需要在声明Grid对象的时候表明： container / item 即可，例如：
<Grid container></Grid>
<Grid item></Grid>
2.Grid 对象基于css 的flex产生，意味着它可以使用flex的相关属性去调整子属性， 对于容器类：
1.justify: 接受一个字符串，对应flexbox的justify-content，枚举类型如下：
'flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'
-
同样，Grid对象定义了lg md sm xl xs 属性，这些属性的值分别是1~12， 即如果lg={6} ，那么表示屏幕为lg的时候组件所占用屏幕的比例为 1/2。
-
spacing对象，spacing的取值范围为： 0, 8, 16, 24, 32, 40 。 它定义了container容器的item间隔为多少。这个属性是用于容器组件的。
定义Nested Grid
下面代码定义了 nested grid
<Grid container spacing={8}>
<Grid item>
<Grid container></Grid>
</Grid>
</Grid>
component 属性
Grid 类又一个component属性，他可以接受一个字符串，或者React 的component。默认的值为： "div";
direction 属性
direction属性跟flexbox的direction一样，同样接受5个参数：
row row-reverse column column-reverse center
其他flex属性
这些属性分别是 alignContent alignItems, 对应align-content 和 align-items;
Style 和 theme
使用material-ui组件页面可以不需要使用css文件，而是在css中直接生成。
withStyles
首先需要定义一个 styles 函数对象， 他接受一个theme作为参数。
theme自如其名，应用程序的主题对象，他有如下参数：
- breakpoints ，将css 的media抽象成breakpoints， 断点的意思：
[theme.breakpoints.up(lg|md|sm|xl|xs|scale)]: {/* styles */}
breakpoints 对象有4个函数， 分别是 down up only between 。
down： 当屏幕尺寸小于某个值
up: 当屏幕尺寸大于某个值
between(start,end)： 当屏幕尺寸介于两个值之间
Hidden 元素
- 元素导入：
import Hidden from '@material-ui/core/Hidden'
- 元素使用规则:
innerWidth |xs sm md lg xl
|--------|--------|--------|--------|-------->
width | xs | sm | md | lg | xl
smUp | show | hide
mdDown | hide | show
- 案例
<Hidden xsUp></Hidden> // only show on xs screen
<Hidden lgDown></Hidden> // only show on lg screen
<Hidden only=['xs', 'lg']/></Hidden> // only hidden on xs/ lg screen
flex-grow
关于flex-grow，flex可以作用于容器以及条目，关于它的渲染有以下规则：
1.如果容器内有指定了宽度(在direction 为column的时候是高度)，先渲染指定宽度的条目
- 在渲染flex-grow的时候，首先将所有条目的flex-grow相加
- 当前条目的宽度为：当前（行/列）剩余宽度/(当前条目的flex-grow/所有条目的flex-grow的总和)
以上，我们可以总结出，在设定了 flex-grow之后，当前元素的宽度不会为0，只会无限逼近0，然而当元素宽度小于1像素的时候，则按照1像素渲染。
网友评论