Col
列组件
- 搭配Row行组件可实现自适应宽度布局。
- 可通过align定义单个项目在交叉轴上的对齐方式, 可选auto、top、bottom、center。
- 可通过width设置单个项目宽度的百分比, 目前支持5-100之间5的倍数、33（1\3）和66(2\3)。
- 可通过offset设置单个项目左边外边距。
主要属性和接口：
- align:单个项目在交叉轴上的对齐方式, 默认auto
<Row> <Col align='top'> <div className='col-demo'>top</div> </Col> <Col align='center'> <div className='col-demo'>center</div> </Col> <Col align='bottom'> <div className='col-demo'>bottom</div> </Col> </Row> - width:单个项目的宽度百分比
<Row> <Col width='15'> <div className='col-demo'>15</div> </Col> </Row> - offset:单个项目的偏移值,即左边外边距
<Row> <Col width='20' offset='10'> <div className='col-demo'>10</div> </Col> </Row>
Constructor
Col
Col
()
Example:
import React, { Component } from "react"
import Grid from "phoenix-ui/lib/grid/Grid"
import Row from "phoenix-ui/lib/grid/Row"
import Col from "phoenix-ui/lib/grid/Col"
import Code from "./code/code"
export default class grid extends Component {
render(){
return(
<div>
<h2 className="comp-title">Grid</h2>
<h3 className="comp-type"><strong>Row</strong></h3>
<h3 className="comp-type">align(默认stretch) 容器属性</h3>
<div className="content">
<h3 className="comp-tip">stretch</h3>
<Grid>
<Row align="stretch">
<Col>
<div className="col-demo">stretch</div>
</Col>
<Col>
<div className="col-demo">stretch<br />baseline</div>
</Col>
<Col>
<div className="col-demo">stretch<br />stretch<br />stretch</div>
</Col>
</Row>
</Grid>
<h3 className="comp-tip">baseline</h3>
<Grid>
<Row align="baseline">
<Col>
<div className="col-demo">baseline</div>
</Col>
<Col>
<div className="col-demo">baseline<br />baseline</div>
</Col>
<Col>
<div className="col-demo">baseline<br />baseline<br />baseline</div>
</Col>
</Row>
</Grid>
<h3 className="comp-tip">top</h3>
<Grid>
<Row align="top">
<Col>
<div className="col-demo">top</div>
</Col>
<Col>
<div className="col-demo">top<br />top</div>
</Col>
<Col>
<div className="col-demo">top<br />top<br />top</div>
</Col>
</Row>
</Grid>
<h3 className="comp-tip">bottom</h3>
<Grid>
<Row align="bottom">
<Col>
<div className="col-demo">bottom</div>
</Col>
<Col>
<div className="col-demo">bottom<br />bottom</div>
</Col>
<Col>
<div className="col-demo">bottom<br />bottom<br />bottom</div>
</Col>
</Row>
</Grid>
<h3 className="comp-tip">center</h3>
<Grid>
<Row align="center">
<Col>
<div className="col-demo">center</div>
</Col>
<Col>
<div className="col-demo">center<br />center</div>
</Col>
<Col>
<div className="col-demo">center<br />center<br />center</div>
</Col>
</Row>
</Grid>
</div>
<Code target="row-align" />
<h3 className="comp-type"><strong>Col</strong></h3>
<h3 className="comp-type">align(默认auto) 项目属性</h3>
<div className="content">
<h3 className="comp-tip">auto</h3>
<Grid>
<Row>
<Col>
<div className="col-demo">auto</div>
</Col>
<Col>
<div className="col-demo">auto auto</div>
</Col>
<Col>
<div className="col-demo">auto auto auto auto</div>
</Col>
</Row>
</Grid>
<h3 className="comp-tip">top/center/bottom</h3>
<Grid>
<Row>
<Col align="top">
<div className="col-demo">top</div>
</Col>
<Col align="center">
<div className="col-demo">center</div>
</Col>
<Col align="bottom">
<div className="col-demo">bottom</div>
</Col>
<Col>
<div className="col-demo">top<br />center<br />bottom</div>
</Col>
</Row>
</Grid>
</div>
<Code target="col-align" />
<h3 className="comp-type">width 设置项目宽度百分比</h3>
<div className="content">
<Grid>
<Row>
<Col width="15">
<div className="col-demo">15</div>
</Col>
<Col width="20">
<div className="col-demo">20</div>
</Col>
<Col width="25">
<div className="col-demo">25</div>
</Col>
<Col width="40">
<div className="col-demo">40<br />40<br />40</div>
</Col>
</Row>
</Grid>
</div>
<Code target="col-width" />
<h3 className="comp-type">offset(即margin-left) 偏移值</h3>
<div className="content">
<Grid>
<Row>
<Col width="20" offset="10">
<div className="col-demo">10</div>
</Col>
<Col width="40" offset="10" >
<div className="col-demo">10<br />10<br />10</div>
</Col>
</Row>
</Grid>
</div>
<Code target="col-offset" />
</div>
)
}
}属性
align
Integer
竖直方向的排列是靠上、居中还是靠下
classPrefix
String
样式前缀
Default:
'col'
offset
Integer
偏移多少，目前支持5-100之间5的倍数、33（1\3）和66(2\3)，默认不偏移
width
Integer
占100份的多少份，目前支持5-100之间5的倍数、33（1\3）和66(2\3)