WingBlank 两翼留白

WingBlank 是 Flex 布局的控件之一。

代码演示

基本

<WingBlank size='md'>…</WingBlank>

  1. import { WingBlank, WhiteSpace } from 'antd-mobile';
  3. const PlaceHolder = (props) => (
  4.   <div style={{
  5.     backgroundColor: '#ebebef',
  6.     color: '#bbb',
  7.     textAlign: 'center',
  8.     height: '0.6rem',
  9.     lineHeight: '0.6rem',
  10.     width: '100%',
  11.   }} {...props}
  12.   >Block</div>
  13. );
  15. const WingBlankExample = React.createClass({
  16.   render() {
  17.     return (
  18.       <div style={{ padding: '0.3rem 0' }}>
  19.         <WingBlank><PlaceHolder /></WingBlank>
  21.         <WhiteSpace size="lg" />
  22.         <WingBlank size="md"><PlaceHolder /></WingBlank>
  24.         <WhiteSpace size="lg" />
  25.         <WingBlank size="sm"><PlaceHolder /></WingBlank>
  26.       </div>
  27.     );
  28.   },
  29. });
  31. ReactDOM.render(<WingBlankExample />, mountNode);

WingBlank两翼留白 - 图1

API ( 适用平台：WEB、React-Native )

成员说明类型默认值
size两翼留白的间距，可选sm,md,lgstringlg