Yao fbbf539662
[breaking change] Dialog Popup 重构 (#69)
* 重新更改 popup

* 更丰富的popup 功能

* 文档补充

* rebuild dialog

* dialog 文档补充

* 增加 icon 文档
2017-12-03 17:40:42 +08:00

75 lines
2.3 KiB
Plaintext

<view class="container">
<view class="doc-title">POPUP</view>
<view class="zan-btns" style="margin-top: 30vh;">
<button class="zan-btn" bindtap="togglePopup">
弹出popup
</button>
<button class="zan-btn" bindtap="toggleTopPopup">
从顶部弹出popup
</button>
<button class="zan-btn" bindtap="toggleBottomPopup">
从底部弹出popup
</button>
<button class="zan-btn" bindtap="toggleLeftPopup">
从左边弹出popup
</button>
<button class="zan-btn" bindtap="toggleRightPopup">
从右边弹出popup
</button>
</view>
<view class="zan-popup {{ showPopup ? 'zan-popup--show' : ''}}">
<view class="zan-popup__mask" bindtap="togglePopup"></view>
<view class="zan-popup__container popup-example--center">
<view class="zan-btns">
<button class="zan-btn" bindtap="togglePopup">
关闭 popup
</button>
</view>
</view>
</view>
<view class="popup-example--left zan-popup zan-popup--left {{ showLeftPopup ? 'zan-popup--show' : ''}}">
<view class="zan-popup__mask" bindtap="toggleLeftPopup"></view>
<view class="zan-popup__container">
<view class="zan-btns">
<button class="zan-btn" catchtap="toggleLeftPopup">
关闭 popup
</button>
</view>
</view>
</view>
<view class="popup-example--right zan-popup zan-popup--right {{ showRightPopup ? 'zan-popup--show' : ''}}">
<view class="zan-popup__mask" catchtap="toggleRightPopup"></view>
<view class="zan-popup__container">
<view class="zan-btns">
<button class="zan-btn" catchtap="toggleRightPopup">
关闭 popup
</button>
</view>
</view>
</view>
<view class="popup-example--top zan-popup zan-popup--top {{ showTopPopup ? 'zan-popup--show' : ''}}">
<view class="zan-popup__mask" catchtap="toggleTopPopup"></view>
<view class="zan-popup__container">
内容
</view>
</view>
<view class="popup-example--bottom zan-popup zan-popup--bottom {{ showBottomPopup ? 'zan-popup--show' : ''}}">
<view class="zan-popup__mask" catchtap="toggleBottomPopup"></view>
<view class="zan-popup__container">
<view class="zan-btns">
<button class="zan-btn" catchtap="toggleBottomPopup">
关闭 popup
</button>
</view>
</view>
</view>
</view>