WingBlank 两翼留白
如何使用
设计上,通常dom两边要设置下特定宽度边距代码演示
<WingBlank size={8}>…</WingBlank>
import { WingBlank, WhiteSpace, Button } from 'antd-mobile';
let WingBlankExample = React.createClass({
render() {
return (
<div className="button-container">
<WhiteSpace />
<WingBlank>
<Button>两翼留白8px</Button>
</WingBlank>
<WhiteSpace />
<div style={{ borderTop: '1px solid #2DB7F5' }} />
<WhiteSpace />
<WingBlank size={16}>
<Button type="primary">两翼留白16px</Button>
</WingBlank>
<WhiteSpace />
<div style={{ borderTop: '1px solid #2DB7F5' }} />
<WhiteSpace />
<WingBlank size={32}>
<Button>两翼留白32px</Button>
</WingBlank>
<WhiteSpace />
</div>
);
},
});
ReactDOM.render(<WingBlankExample />, mountNode);
API
成员 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
size | 两翼留白的间距,单位是像素 | number | 4 、8 、12 、16 、20 、24 、28 、32 | 8 |