<view class="page" data-weui-theme="{{theme}}">
    <view class="page__hd">
        <view class="page__title">Cell</view>
        <view class="page__desc">列表</view>
    </view>
    <view class="page__bd">
        <mp-cells ext-class="my-cells" title="带说明的列表项">
            <mp-cell value="标题文字" footer="说明文字"></mp-cell>
            <mp-cell>
                <view>标题文字（使用slot）</view>
                <view slot="footer">说明文字</view>
            </mp-cell>
            <mp-slideview show="{{true}}" buttons="{{slideButtons}}" bindbuttontap="slideButtonTap">
                <mp-cell value="左滑可以删除" footer="说明文字"></mp-cell>
            </mp-slideview>
        </mp-cells>

        <mp-cells title="带图标、说明的列表项" footer="底部说明文字">
            <mp-cell value="标题文字" footer="说明文字">
                <image slot="icon" src="{{icon}}" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
            </mp-cell>
            <mp-cell value="标题文字" footer="说明文字">
                <image slot="icon" src="{{icon}}" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
            </mp-cell>
        </mp-cells>

        <mp-cells title="带跳转的列表项">
            <mp-cell hover value="有hover效果，无跳转URL" footer="说明文字">
                <image slot="title" src="{{icon}}" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
            </mp-cell>
           
            <mp-cell link url="./cell" value="有跳转URL" footer="说明文字">
                <image slot="icon" src="{{icon}}" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
            </mp-cell>
        </mp-cells>

    </view>
</view>
