微信小程序 WeUI·确认页样式

Msg

Msg组件提供操作确认页或操作成功或失败的标准的确认页的样式。

示例代码:

{
  "usingComponents": {
    "mp-msg": "../components/msg/msg"
  },
  "navigationBarTitleText": "UI组件库"
}
<view class="page">
    <mp-msg type="success" title="操作成功">
        <view slot="desc">内容详情,可根据实际需要安排,如果换行则不超过规定长度,居中展现<navigator url="" class="weui-msg__link">文字链接</navigator></view>
        <view slot="extend">
            <view>1. 说明1</view>
            <view>2. 说明2</view>
        </view>
        <view slot="handle">
            <button class="weui-btn" type="primary">主要操作</button>
            <button class="weui-btn" type="default">辅助操作</button>
        </view>
        <view slot="footer">
            <view class="weui-footer__links">
                <navigator url="" class="weui-footer__link">底部链接文本</navigator>
            </view>
            <view class="weui-footer__text">Copyright © 2008-2016 weui.io</view>
        </view>
    </mp-msg> 
</view>


属性列表

属性 类型 默认值 必填 说明
ext-class string 添加在组件内部结构的class,可用于修改组件内部的样式
type string 顶部图标的样式,和icon组件的type属性用法一样
size number 64 type不为空的时候有效,和icon组件的size属性用法一样
icon string type为空的时候,icon的值是顶部图标的路径
title string 标题
desc string 描述内容,和desc的slot显示在相同的位置

Slot

名称 描述
desc 描述内容slot
extend desc下面的说明区域的slot
handle 操作按钮区域slot
footer 底部slot

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《微信小程序 WeUI·确认页样式》
文章链接:https://zhuji.vsping.com/309860.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。