Semantic-UI 列表图标内容介绍

Semantic-UI 是一套现代化的 UI 框架，提供了丰富的样式和组件，其中列表组件提供了丰富的图标内容。

列表基本语法

Semantic-UI 的列表组件使用 ul 和 li 标签来创建，如下所示：

<ul>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>

添加图标

Semantic-UI 的列表组件可以使用图标来增强列表内容。图标可以使用 i 标签和 icon 类来创建，如下所示：

<ul>
  <li><i class="icon check"></i>List Item</li>
  <li><i class="icon check"></i>List Item</li>
  <li><i class="icon check"></i>List Item</li>
</ul>

其中，check 是一个 Semantic-UI 的图标类，代表一个勾选图标。可以在 Semantic-UI 的官方文档中找到所有的图标类。

图标位置

添加图标后，可以通过 list 类来指定图标的位置。例如，如果希望图标在列表项的左侧显示，可以添加 list 类，如下所示：

<ul class="list">
  <li><i class="icon check"></i>List Item</li>
  <li><i class="icon check"></i>List Item</li>
  <li><i class="icon check"></i>List Item</li>
</ul>

如果希望图标在列表项的右侧显示，可以添加 list 和 aligned 类，如下所示：

<ul class="list aligned">
  <li>List Item<i class="icon check"></i></li>
  <li>List Item<i class="icon check"></i></li>
  <li>List Item<i class="icon check"></i></li>
</ul>

图标大小

可以使用以下类来指定图标的大小：

• mini
• tiny
• small
• large
• big
• huge
• massive

例如，添加 mini 类可以让图标变小，如下所示：

<ul class="list">
  <li><i class="icon check mini"></i>List Item</li>
  <li><i class="icon check mini"></i>List Item</li>
  <li><i class="icon check mini"></i>List Item</li>
</ul>

图标颜色

可以使用以下类来指定图标的颜色：

• primary
• secondary
• red
• orange
• yellow
• olive
• green
• teal
• blue
• violet
• purple
• pink
• brown
• grey
• black

例如，添加 blue 类可以让图标变蓝色，如下所示：

<ul class="list">
  <li><i class="icon check blue"></i>List Item</li>
  <li><i class="icon check blue"></i>List Item</li>
  <li><i class="icon check blue"></i>List Item</li>
</ul>

总结

Semantic-UI 的列表组件提供了丰富的图标内容，可以让列表内容更加有吸引力。除了基本的语法外，还可以使用类来指定图标的位置、大小和颜色等属性。详细的用法可以参考 Semantic-UI 的官方文档。