<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>
