Default List

  • list item
  • list item
  • list item
  • list item
<h2 class="yo-header">Default List</h2> <ul class="yo-list"> <li class="item">list item</li> <li class="item">list item</li> <li class="item">list item</li> <li class="item">list item</li> </ul>

Default List

  • 标题
    具体描述
  • 标题
    具体描述
  • 标题
    具体描述
  • 标题
    具体描述
<h2 class="yo-header">Default List</h2> <ul class="yo-list"> <li class="item"> <strong class="mark">标题</strong> <div class="cont flex">具体描述</div> </li> <li class="item"> <strong class="mark">标题</strong> <div class="cont flex">具体描述</div> </li> <li class="item"> <strong class="mark">标题</strong> <div class="cont flex">具体描述</div> </li> <li class="item"> <strong class="mark">标题</strong> <div class="cont flex">具体描述</div> </li> </ul>

Default Group List

list group

list item list item

list group

list item list item

list group

list item
<h2 class="yo-header">Default List</h2> <div class="yo-list"> <h3 class="label">list group</h3> <a href="#" class="item item-active">list item</a> <a href="#" class="item item-active">list item</a> <h3 class="label">list group</h3> <a href="#" class="item item-active">list item</a> <a href="#" class="item item-active">list item</a> <h3 class="label">list group</h3> <a href="#" class="item item-active">list item</a> </div>

Default Ico List

  • 飞行模式
  • WIFI
  • 蓝牙
  • 运营商
<h2 class="yo-header">Default Ico List</h2> <ul class="yo-list"> <li class="item"> <i class="yo-ico">&#xf072;</i> <div class="cont flex">飞行模式</div> <input type="checkbox" class="yo-switch" /> </li> <li class="item"> <i class="yo-ico">&#xf086;</i> <div class="cont flex">WIFI</div> </li> <li class="item"> <i class="yo-ico">&#xf11d;</i> <div class="cont flex">蓝牙</div> </li> <li class="item item-active"> <i class="yo-ico">&#xf098;</i> <div class="cont flex">运营商</div> <i class="yo-ico">&#xf105;</i> </li> </ul>
<h2 class="yo-header">Default Img List</h2> <div class="yo-list"> <a href="#" class="item item-active"> <div class="mark"> <img src="../../../img/human.png" alt="美女" /> </div> <div class="cont"> <h3>高圆圆</h3> <p>这是一个我很喜欢的美女</p> </div> </a> <a href="#" class="item item-active"> <div class="mark"> <img src="../../../img/human.png" alt="美女" /> </div> <div class="cont"> <h3>高圆圆</h3> <p>这是一个我很喜欢的美女</p> </div> </a> ... </div>

Default Tbale List

  • name
    name
    name
    name
  • name
    name
    name
    name
  • name
    name
    name
    name
  • name
    name
    name
    name
<h2 class="yo-header">Default Tbale List</h2> <ul class="yo-list"> <li class="label tr"> <div class="col c1">name</div> <div class="col c2 flex">name</div> <div class="col c3">name</div> <div class="col c4">name</div> </li> <li class="item tr"> <div class="col c1">name</div> <div class="col c2 flex">name</div> <div class="col c3">name</div> <div class="col c4">name</div> </li> <li class="item tr"> <div class="col c1">name</div> <div class="col c2 flex">name</div> <div class="col c3">name</div> <div class="col c4">name</div> </li> <li class="item tr"> <div class="col c1">name</div> <div class="col c2 flex">name</div> <div class="col c3">name</div> <div class="col c4">name</div> </li> </ul>
@include yo-list(
    $name:default, //{default|String} yo-list名称
    $margin:default, //{default|Length} yo-list外边距
    $is-outline:default, //{default|Boole} yo-list是否需要轮廓(即外边框)
    $radius:default, //{default|Length} yo-list圆角
    $bordercolor:default, //{default|Color} yo-list边框色
    $item-padding:default, //{default|Length} yo-list项的内补白
    $label-padding:default, //{default|Length} yo-list分组标题内补白
    $label-bgcolor:default, //{default|Length} yo-list分组标题背景色
    $active-bgcolor:default, //{default|Color} yo-list项的激活背景色
    $on-bgcolor:default, //{default|Color} yo-list项的选中背景色
    $item-bordercolor:default, //{default|Color} yo-list列表项边框色
    $label-bordercolor:default, //{default|Color} yo-list列表项组名边框色
    $item-font-size:default, //{default|Color} yo-list列表项字号
    $label-font-size:default //{default|Color} yo-list列表组头字号
)