1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 |
- <view class="page">
- <view class="page__hd">
- <view class="page__title">Button</view>
- <view class="page__desc">按钮</view>
- </view>
- <view class="page__bd page__bd_spacing">
- <view class="sub-title">Type</view>
- <wux-button block type="light">light</wux-button>
- <wux-button block type="stable">stable</wux-button>
- <wux-button block type="positive">positive</wux-button>
- <wux-button block type="calm">calm</wux-button>
- <wux-button block type="assertive">assertive</wux-button>
- <wux-button block type="balanced">balanced</wux-button>
- <wux-button block type="energized">energized</wux-button>
- <wux-button block type="royal">royal</wux-button>
- <wux-button block type="dark">dark</wux-button>
- <view class="sub-title">Outline</view>
- <wux-button block outline type="light">light</wux-button>
- <wux-button block outline type="stable">stable</wux-button>
- <wux-button block outline type="positive">positive</wux-button>
- <wux-button block outline type="calm">calm</wux-button>
- <wux-button block outline type="assertive">assertive</wux-button>
- <wux-button block outline type="balanced">balanced</wux-button>
- <wux-button block outline type="energized">energized</wux-button>
- <wux-button block outline type="royal">royal</wux-button>
- <wux-button block outline type="dark">dark</wux-button>
- <view class="sub-title">Shapes</view>
- <wux-button block type="light">light</wux-button>
- <wux-button block type="stable">stable</wux-button>
- <wux-button block type="positive">positive</wux-button>
- <wux-button block shape="rounded" type="calm">calm</wux-button>
- <wux-button block shape="rounded" type="assertive">assertive</wux-button>
- <wux-button block shape="rounded" type="balanced">balanced</wux-button>
- <wux-button block shape="rectangular" type="energized">energized</wux-button>
- <wux-button block shape="rectangular" type="royal">royal</wux-button>
- <wux-button block shape="rectangular" type="dark">dark</wux-button>
- <view class="sub-title">Size</view>
- <wux-button block size="small" type="light">light</wux-button>
- <wux-button block size="small" type="stable">stable</wux-button>
- <wux-button block size="small" type="positive">positive</wux-button>
- <wux-button block size="default" type="calm">calm</wux-button>
- <wux-button block size="default" type="assertive">assertive</wux-button>
- <wux-button block size="default" type="balanced">balanced</wux-button>
- <wux-button block size="large" type="energized">energized</wux-button>
- <wux-button block size="large" type="royal">royal</wux-button>
- <wux-button block size="large" type="dark">dark</wux-button>
- <view class="sub-title">Clear</view>
- <wux-button block clear type="light">light</wux-button>
- <wux-button block clear type="stable">stable</wux-button>
- <wux-button block clear type="positive">positive</wux-button>
- <wux-button block clear type="calm">calm</wux-button>
- <wux-button block clear type="assertive">assertive</wux-button>
- <wux-button block clear type="balanced">balanced</wux-button>
- <wux-button block clear type="energized">energized</wux-button>
- <wux-button block clear type="royal">royal</wux-button>
- <wux-button block clear type="dark">dark</wux-button>
- <view class="sub-title">Loading</view>
- <wux-button block loading type="light">light</wux-button>
- <wux-button block loading type="stable">stable</wux-button>
- <wux-button block loading type="positive">positive</wux-button>
- <wux-button block loading type="calm">calm</wux-button>
- <wux-button block loading type="assertive">assertive</wux-button>
- <wux-button block loading type="balanced">balanced</wux-button>
- <wux-button block loading type="energized">energized</wux-button>
- <wux-button block loading type="royal">royal</wux-button>
- <wux-button block loading type="dark">dark</wux-button>
- <view class="sub-title">Disabled</view>
- <wux-button block disabled type="light">light</wux-button>
- <wux-button block disabled type="stable">stable</wux-button>
- <wux-button block disabled type="positive">positive</wux-button>
- <wux-button block disabled type="calm">calm</wux-button>
- <wux-button block disabled type="assertive">assertive</wux-button>
- <wux-button block disabled type="balanced">balanced</wux-button>
- <wux-button block disabled type="energized">energized</wux-button>
- <wux-button block disabled type="royal">royal</wux-button>
- <wux-button block disabled type="dark">dark</wux-button>
- <view class="sub-title">Icon</view>
- <wux-button block type="balanced"><wux-icon type="ios-save" size="16" /> balanced</wux-button>
- <wux-button block outline type="balanced"><wux-icon type="ios-save" size="16" /> balanced</wux-button>
- <wux-button block size="small" type="balanced"><wux-icon type="ios-save" size="16" /> balanced</wux-button>
- <wux-button block size="default" type="balanced"><wux-icon type="ios-save" size="16" /> balanced</wux-button>
- <wux-button block size="large" type="balanced"><wux-icon type="ios-save" size="16" /> balanced</wux-button>
- <wux-button block clear type="balanced"><wux-icon type="ios-save" size="16" /> balanced</wux-button>
- <wux-button block disabled type="balanced"><wux-icon type="ios-save" size="16" /> balanced</wux-button>
- </view>
- </view>
|