WingBlank 两翼留白

布局控件。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "WingBlank",
  3.     "usingComponents": {
  4.         "wux-wing-blank": "../../dist/wing-blank/index",
  5.         "wux-white-space": "../../dist/white-space/index"
  6.     }
  7. }

示例

  1. <view class="page">
  2.     <view class="page__hd">
  3.         <view class="page__title">WingBlank</view>
  4.         <view class="page__desc">两翼留白</view>
  5.     </view>
  6.     <view class="page__bd">
  7.         <wux-wing-blank size="small">
  8.             <view class="placeholder">Wux</view>
  9.         </wux-wing-blank>
  10.         <wux-white-space />
  11.         <wux-wing-blank size="default">
  12.             <view class="placeholder">Wux</view>
  13.         </wux-wing-blank>
  14.         <wux-white-space />
  15.         <wux-wing-blank size="large">
  16.             <view class="placeholder">Wux</view>
  17.         </wux-wing-blank>
  18.         <wux-white-space />
  19.         <wux-wing-blank body-style="margin-left: 20px; margin-right: 20px">
  20.             <view class="placeholder">Wux</view>
  21.         </wux-wing-blank>
  22.     </view>
  23. </view>

视频演示

WingBlank

API

WingBlank props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-wingblank
size string 两翼留白的间距，可选值为 small、default、large default
bodyStyle string,object 自定义样式 -

WingBlank slot

名称 描述
- 自定义内容

WingBlank externalClasses

名称 描述
wux-class 根节点样式类