List

概述

列表元素有一些基本的结构约定。

  • 列表元素必须具有 .cm-list 这个基础类名，然后通过其它辅助性的类名来指定细节样式和属性。
  • 列表的各个列表项（.cm-list > li）必须有一个（通常也应该只有一个）子元素作为其 “内容元素”。

因此一个列表的结构往往是这样的：

ul.cm-list
	li > p
	li > p
	...

其效果如下：

作为区块内容

列表可以作为逻辑区块的内容元素。我们需要给列表追加 .cm-section-content 类，然后将其作为子元素放置到 <section> 元素中。

此时列表就可以拥有自己的标题了，参见以下结构：

section
	h2.cm-section-title '列表标题'
	ul.cm-list.cm-section-content
		li > p '列表项'
		li > p '列表项'

如果把以上代码重复两遍，则对应的效果如下：（绿色虚线表示容器边界）

列表标题

  • 列表项

  • 列表项

列表标题

  • 列表项

  • 列表项

间距

常规列表没有默认的垂直外边距，因此列表与其它元素之间的间距需要另行设置。不过两个列表之间是有默认间距的：（绿色虚线表示容器边界）

当列表作为区块内容时，两个 ul.cm-list.cm-section-content 元素之间也是有默认间距的：

  • 列表项

  • 列表项

  • 列表项

  • 列表项

内容

普通列表

纯展示列表的列表项的内容元素可以是 <p> 或 <div> 元素。

ul.cm-list
	li > p
	li > p
	li > div

  • 列表项

  • 列表项

  • 列表项

链接列表

我们用得比较多的其实是链接列表，它是很常见的 UI 元素。

链接列表的列表项的内容元素是链接元素。

ul.cm-list
	li > a
	li > a
	li > a

列表项的右箭头

给需要加右箭头的列表项添加 .cm-list-with-right-arrow 类名。

请记住只有链接列表项才会显示出右箭头——这听起来像个限制，但其实很合理。因为，如果这个列表项没有动作，只是纯展示，那它也是不需要有右箭头的。

ul.cm-list
	li > a
	li.cm-list-with-right-arrow > a

如果恰好一个列表中的每个列表项都需要右箭头，那把 .cm-list-with-right-arrow 类名加给列表元素就可以了。

ul.cm-list.cm-list-with-right-arrow
	li > a
	li > a

列表项有徽章

给列表项添加 data-cm-badge 属性可以生成一个徽章。

ul.cm-list
	li @data-cm-badge="9"
		p
	li @data-cm-badge="999999"
		a
	li.cm-list-with-right-arrow @data-cm-badge="999"
		a

列表项有值

给列表项添加 data-cm-value 属性可以在列表项右侧显示一个值。

ul.cm-list
	li @data-cm-value="foobar"
		p
	li @data-cm-value="foo"
		a
	li.cm-list-with-right-arrow @data-cm-value="bar"
		a

列表项有图标

图标元素应该是列表项内容元素的第一个子元素。有点拗口，看结构吧：

ul.cm-list
	li > a @href="#"
		i.cm-icon.cm-x20
		"foobar"
	...
<< 返回首页