Yao ce5559a57e
[improvement] 部分组件边框实现修改 (#87)
* 使用超细边框

* 部分组件切换为 hairline

* 文档 边框替换
2017-12-23 14:25:41 +08:00

75 lines
2.3 KiB
Plaintext

<view class="container">
<view class="doc-title zan-hairline--bottom">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>