常规列表:

list item
list item
list item
list item

示例描述:

<ul class="yo-list"> <li class="item">list item</li> ... </ul>
  • 常规列表:
  • 标题
    具体描述
  • 标题
    具体描述
  • 标题
    具体描述
  • 标题
    具体描述

示例描述:

<ul class="yo-list"> <li class="item"> <span class="mark">标题</span> <div class="flex">具体描述</div> </li> ... </ul>

list group

list item list item

list group

list item list item

list group

list item list item

示例描述:

<div class="yo-list"> <h3 class="label">list group</h3> <a href="#" class="item">list item</a> <a href="#" class="item">list item</a> ... </div>
  • ico list
  • 飞行模式
  • WIFI
  • 蓝牙
  • 运营商

示例描述:

<div class="yo-list"> <li class="item"> <i class="yo-ico">&#xf04a;</i> <div class="flex">飞行模式</div> <label class="yo-switch"> <input type="checkbox" /> <div class="track"> <span class="handle"></span> </div> </label> </li> <li class="item"> <i class="yo-ico">&#xf04b;</i> <div class="flex">WIFI</div> </li> </div>

示例描述:

<div class="yo-list"> <a href="#" class="item item-active"> <div class="mark"> <img src="*.jpg" alt="美女" /> </div> <div class="flex"> <h3>高圆圆</h3> <p>这是一个我很喜欢的美女</p> </div> </a> ... </div>
  • 第1列
    第2列
    第3列
    第4列
  • name
    name
    name
    name
  • name
    name
    name
    name
  • name
    name
    name
    name

示例描述:

<ul class="yo-list"> <li class="label tr"> <div class="col c1">第1列</div> <div class="col c2 flex">第2列</div> <div class="col c3">第3列</div> <div class="col c4">第4列</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, //{String} yo-list名称
    $margin:default, //{Length} yo-list外边距
    $radius:default, //{Length} yo-list圆角
    $border-width:default, //{Length} 外边框厚度
    $bordercolor:default, //{Color} yo-list边框色
    $item-padding:default, //{Length} yo-list项的内补白
    $label-padding:default, //{Length} yo-list分组标题内补白
    $label-bgcolor:default, //{Color} yo-list分组标题背景色
    $active-bgcolor:default, //{Color} yo-list项的激活背景色
    $on-bgcolor:default, //{Color} yo-list项的选中背景色
    $on-color:default, //{Color} yo-list项的选中文本色
    $item-bordercolor:default, //{Color} yo-list列表项边框色
    $label-bordercolor:default, //{Color} yo-list列表项组名边框色
    $item-font-size:default, //{Length} yo-list列表项字号
    $label-font-size:default, //{Length} yo-list列表组头字号
    $item-border-space:default //{Length} yo-list列表项底线距左边的间隙
)