README
uxcore-layout
setup develop environment
$ git clone https://github.com/uxcore/uxcore-layout
$ cd uxcore-layout
$ npm install
$ npm start
Usage
let Layout = require('../src');
let {Left, Right} = Layout;
let classnames = require('classnames');
class Demo extends React.Component {
constructor(props) {
super(props);
}
render() {
return <div>
<p>左侧自适应,右侧固定</p>
<Layout className="layoutDemo">
<Left adaptive={true} className="left">左</Left>
<Right width={190} className="right">右</Right>
</Layout>
<p>右侧自适应,左侧固定</p>
<Layout className="layoutDemo">
<Left width={190} className="left">左</Left>
<Right adaptive={true} className="right">右</Right>
</Layout>
<p>左右都固定</p>
<Layout className="layoutDemo">
<Left width={500} className="left">左</Left>
<Right width={500} className="right">右</Right>
</Layout>
</div>
}
}
module.exports = Demo;
Props
配置项 | 类型 | 必填 | 默认值 | 功能/备注 |
---|---|---|---|---|
className | string | optional | "" | 加入额外的类名,在使用 kuma 的基础上进行适当的定制时会用得到 |
子组件
Left/Right
配置项 | 类型 | 必填 | 默认值 | 功能/备注 |
---|---|---|---|---|
className | string | optional | 加入额外的类名,在使用 kuma 的基础上进行适当的定制时会用得到 | |
width | number | optional | 500 | 布局块的宽度,仅在定宽时起作用 |
adaptive | boolean | optional | 是否为自适应,未设定 adaptive=true 的一侧,则为定宽,不可两者皆为自适应 |