• 面板
    • 图文组合列表
    • 文字组合列表
    • 小图文组合列表
    • 文字列表附来源

    面板

    面板用于显示组合式的列表信息,由 head、body 和 foot 三部分组成,其中 head 和 foot 是可选的。WeUI 提供了多种面板样式,可根据业务选择不同的样式。

    foot 部分默认支持“查看更多”样式,不过需要在 weui-panel 添加一个 weui-panel_access 类。

    weui-media-box__desc 内的文字默认最多显示两行,超出部分会自动隐藏掉

    图文组合列表

    1. <!-- 图文组合列表 -->
    2. <div class="weui-panel weui-panel_access">
    3. <!-- head 部分 -->
    4. <div class="weui-panel__hd">图文组合列表</div>
    5. <!-- body 部分 -->
    6. <div class="weui-panel__bd">
    7. <!-- 一个列表条目 -->
    8. <a href="#" class="weui-media-box weui-media-box_appmsg">
    9. <div class="weui-media-box__hd">
    10. <img src="" alt="" class="weui-media-box__thumb">
    11. </div>
    12. <div class="weui-media-box__bd">
    13. <h4 class="weui-media-box__title">标题</h4>
    14. <p class="weui-media-box__desc">内容</p>
    15. </div>
    16. </a>
    17. </div>
    18. <!-- foot 部分 -->
    19. <div class="weui-panel__ft">
    20. <a href="#" class="weui-cell weui-cell_access weui-cell_link">
    21. <div class="weui-cell__bd">查看更多</div>
    22. <span class="weui-cell__ft"></span>
    23. </a>
    24. </div>
    25. </div>

    面板 - 图1

    文字组合列表

    1. <!-- 文字组合列表 -->
    2. <div class="weui-panel weui-panel_access">
    3. <!-- head 部分 -->
    4. <div class="weui-panel__hd">文字组合列表</div>
    5. <!-- body 部分 -->
    6. <div class="weui-panel__bd">
    7. <!-- 一个列表条目 -->
    8. <div href="#" class="weui-media-box weui-media-box_text">
    9. <h4 class="weui-media-box__title">标题</h4>
    10. <p class="weui-media-box__desc">内容</p>
    11. </div>
    12. </div>
    13. <!-- foot 部分 -->
    14. <div class="weui-panel__ft">
    15. <a href="#" class="weui-cell weui-cell_access weui-cell_link">
    16. <div class="weui-cell__bd">查看更多</div>
    17. <span class="weui-cell__ft"></span>
    18. </a>
    19. </div>
    20. </div>

    面板 - 图2

    小图文组合列表

    1. <!-- 小图文组合列表 -->
    2. <div class="weui-panel">
    3. <!-- head 部分 -->
    4. <div class="weui-panel__hd">小图文组合列表</div>
    5. <!-- body 部分 -->
    6. <div class="weui-panel__bd">
    7. <div href="#" class="weui-media-box weui-media-box_small-appmsg">
    8. <div class="weui-cells">
    9. <!-- 一个列表条目 -->
    10. <a href="#" class="weui-cell weui-cell_access">
    11. <div class="weui-cell__hd">
    12. <img src="" alt="" style="width:20px;margin-right:5px;display:block">
    13. </div>
    14. <div class="weui-cell__bd weui-cell_primary">
    15. <p>文字标题</p>
    16. </div>
    17. <span class="weui-cell__ft"></span>
    18. </a>
    19. </div>
    20. </div>
    21. </div>
    22. </div>

    面板 - 图3

    文字列表附来源

    1. <!-- 文字列表附来源 -->
    2. <div class="weui-panel">
    3. <!-- head 部分 -->
    4. <div class="weui-panel__hd">文字列表附来源</div>
    5. <!-- body 部分 -->
    6. <div class="weui-panel__bd">
    7. <!-- 一个列表条目 -->
    8. <div href="#" class="weui-media-box weui-media-box_text">
    9. <h4 class="weui-media-box__title">标题</h4>
    10. <p class="weui-media-box__desc">内容</p>
    11. <ul class="weui-media-box__info">
    12. <li class="weui-media-box__info__meta">文字来源</li>
    13. <li class="weui-media-box__info__meta">时间</li>
    14. <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">其它信息</li>
    15. </ul>
    16. </div>
    17. </div>
    18. </div>

    面板 - 图4