| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102 |
- <view class="page">
- <view class="page__hd">
- <view class="page__title">Popover</view>
- <view class="page__desc">气泡框</view>
- </view>
- <view class="page__bd">
- <view class="sub-title">Placement</view>
- <view class="button-sp-area">
- <wux-popover placement="topLeft" title="Title" content="Content">
- <wux-button type="light">topLeft</wux-button>
- </wux-popover>
- </view>
- <view class="button-sp-area">
- <wux-popover placement="top" title="Title" content="Content">
- <wux-button type="light">top</wux-button>
- </wux-popover>
- </view>
- <view class="button-sp-area">
- <wux-popover placement="topRight" title="Title" content="Content">
- <wux-button type="light">topRight</wux-button>
- </wux-popover>
- </view>
- <view class="button-sp-area text-left">
- <wux-popover placement="rightTop" title="Title" content="Content">
- <wux-button type="light">rightTop</wux-button>
- </wux-popover>
- </view>
- <view class="button-sp-area text-left">
- <wux-popover placement="right" title="Title" content="Content">
- <wux-button type="light">right</wux-button>
- </wux-popover>
- </view>
- <view class="button-sp-area text-left">
- <wux-popover placement="rightBottom" title="Title" content="Content">
- <wux-button type="light">rightBottom</wux-button>
- </wux-popover>
- </view>
- <view class="button-sp-area">
- <wux-popover placement="bottomRight" title="Title" content="Content">
- <wux-button type="light">bottomRight</wux-button>
- </wux-popover>
- </view>
- <view class="button-sp-area">
- <wux-popover placement="bottom" title="Title" content="Content">
- <wux-button type="light">bottom</wux-button>
- </wux-popover>
- </view>
- <view class="button-sp-area">
- <wux-popover placement="bottomLeft" title="Title" content="Content">
- <wux-button type="light">bottomLeft</wux-button>
- </wux-popover>
- </view>
- <view class="button-sp-area text-right">
- <wux-popover placement="leftBottom" title="Title" content="Content">
- <wux-button type="light">leftBottom</wux-button>
- </wux-popover>
- </view>
- <view class="button-sp-area text-right">
- <wux-popover placement="left" title="Title" content="Content">
- <wux-button type="light">left</wux-button>
- </wux-popover>
- </view>
- <view class="button-sp-area text-right">
- <wux-popover placement="leftTop" title="Title" content="Content">
- <wux-button type="light">leftTop</wux-button>
- </wux-popover>
- </view>
- <view class="sub-title">Default Visible</view>
- <view class="button-sp-area text-left">
- <wux-popover defaultVisible placement="rightBottom" title="Title" content="Content">
- <wux-button type="light">rightBottom</wux-button>
- </wux-popover>
- </view>
- <view class="sub-title">Custom style</view>
- <view class="button-sp-area">
- <wux-popover placement="top" title="Title" content="Content" body-style="width: 300px;">
- <wux-button type="light">top</wux-button>
- </wux-popover>
- </view>
- <view class="sub-title">Theme = dark</view>
- <view class="button-sp-area">
- <wux-popover theme="dark" placement="top" title="Title" content="Content">
- <wux-button type="light">top</wux-button>
- </wux-popover>
- </view>
- <view class="sub-title">Slot</view>
- <view class="button-sp-area">
- <wux-popover placement="top">
- <wux-button type="light">top</wux-button>
- <view slot="title" style="padding: 20rpx; color: red;">Title</view>
- <view slot="content" style="padding: 20rpx">Content</view>
- </wux-popover>
- </view>
- <view class="sub-title">Controlled</view>
- <view class="button-sp-area">
- <wux-popover visible="{{ visible }}" controlled placement="top" title="Title" bind:change="onChange">
- <view slot="content" style="padding: 20rpx" bindtap="hide">Close</view>
- <wux-button type="light">top</wux-button>
- </wux-popover>
- </view>
- </view>
- </view>
|
