淘应用文档
Grid 栅格布局
面向移动端页面的简单布局标签，提供外部行布局容器标签 Row，列 Col，多行多列布局参考 MultiRow 。
长列表需求不要使用一个大的 MultiRow 组件进行统一布局，没有一个完整的大标签包裹性能会更好。
默认等宽度布局
等宽布局支持任意多列
等宽3列布局：
<Grid.Row> <Gird.Col>列1</Gird.Col> <Gird.Col>列2</Gird.Col> <Gird.Col>列3</Gird.Col> </Grid.Row>
等宽两列布局
<Grid.Row> <Gird.Col>列1</Gird.Col> <Gird.Col>列2</Gird.Col> </Grid.Row>
自定义列宽度
下面示例中第一列占整个容器的 1/3，第二列占整个容器的 2/3
const styles = {
col1: {
flex: 1
},
col2: {
flex: 2
},
}
<Grid.Row>
<Gird.Col style={styles.col1}>flex: 1</Gird.Col>
<Gird.Col style={styles.col2}>flex: 2</Gird.Col>
</Grid.Row>
基本示例
// demo
import { createElement, render, Component } from 'rax';
const styles = {
container: {
width: 750
},
row: {
height: 400
}
};
class App extends Component {
render() {
return (
<Gird.Row style={[styles.container, styles.row]}>
<Gird.Col style={{flex: 1, backgroundColor: 'red'}}>Col1</Gird.Col>
<Gird.Col style={{flex: 1, backgroundColor: 'green'}}>Col2</Gird.Col>
<Gird.Col style={{flex: 1, backgroundColor: 'blue'}}>Col3</Gird.Col>
</Grid.Row>
);
}
}
render(<App />);
