列表控件1

class 属性 描述
um-list (必填项),列表控件标记，分割线占满整行
um-list-corner (可选值),设置列表的圆角
um-list-divider (可选值),设置列表分隔条
um-media-heading (可选值),设置列表标题行
um-media-left (可选值),放置媒体元素如图片，图标
um-media-body (可选值),设置媒体列表主体内容
collapse-btn (必填项),伸缩按钮，通过data-target定位伸缩项目
active (可选值),在li元素上设置列本行选中时的激活状态
列表下带有btn类的a标签右侧会有右箭头，表示链接导航，若要去除，可将a标签改为div标签，或者添加um-no-icon类

普通带圆角列表

  1. <ul class="um-list um-list-static um-list-corner">
  2.      <li>通知 </li>
  3.      <li>设置</li>
  4. </ul>
去除um-list-corner即为全屏列表

伸缩列表

  1. <ul class="um-list">
  2.     <li data-action="collapse" class="um-open">
  3.         <a href="javascript:void(0);" 
  4.             class="um-collapse-btn btn"   data-target="p3">伸缩按钮+</a>
  5.                     <div class="um-collapse-content um-open" id="p3">
  6.                          <div class="um-collapse-text">...</div>
  7.                     </div>
  8.      </li>
  9. <ul>

分栏列表

  1. <ul class="um-list">
  2.     <li class="um-list-divider">分栏列表</li>
  3.      <li>
  4.         <a class="btn" href="javascript:;">列表项1 </a>
  5.      </li>
  6.      <li>
  7.         <a class="btn" href="javascript:;">列表项2 </a>
  8.      </li>
  9. </ul>
文档更新时间: 2018-01-12 16:28