Semantic-UI 标签附加类型

Semantic-UI 是一个流行的 UI 框架，其中的标签可以通过添加附加类型来进行样式和行为的修改。附加类型是指在标签上添加的 class 属性值，这些 class 值会被 Semantic-UI 的 CSS 和 JavaScript 解释并产生效果。

常用的标签附加类型

标签类型

在 Semantic-UI 中，基本的标签附加类型如下所示：

• ui：必须的附加类型，表示该标签使用 Semantic-UI 样式。
• header、content、footer：用于布局的标签附加类型，用于将内容分解到多个部分中。
• container、grid、column：用于布局的标签附加类型，用于实现网页布局、并将组件放置在栅格中。
• button、input、form：用于构建表单或具有输入功能的组件的标签附加类型。
• menu、list、table：用于构建界面元素的标签附加类型。

主题类型

在 Semantic-UI 中，样式可以通过不同的主题类型进行修改，其中常用的主题类型如下：

• primary、secondary、tertiary：用于指定标签的主要、次要和第三级主题。
• positive、negative、warning、info：用于指定标签的正面、负面、警告和信息主题。
• inverted：用于指定标签的反色主题。
• fluid：用于指定标签具有流动性，可以占据整个父容器的宽度。

行为类型

在 Semantic-UI 中，还可以通过添加行为类型来实现特定的交互效果，其中常用的行为类型如下：

• dimmer、modal、dropdown：用于实现弹出层效果的行为类型。
• accordion、tab、menu：用于实现切换选项卡效果的行为类型。
• popup、tooltip、progress：用于实现带提示或动态变化效果的行为类型。
• checkbox、radio、toggle：用于实现表单控件的行为类型。

使用示例

下面是一个使用 Semantic-UI 的示例，展示了如何使用标签、主题和行为附加类型：

<div class="ui inverted segment">
  <div class="ui grid">
    <div class="four wide column">
      <div class="ui vertical menu">
        <a class="item active" href="#">主页</a>
        <a class="item" href="#">新闻</a>
        <a class="item" href="#">关于我们</a>
      </div>
    </div>
    <div class="twelve wide column">
      <h1 class="ui header">Semantic-UI 示例</h1>
      <p>欢迎使用 Semantic-UI！</p>
      <button class="ui primary button">提交</button>
      <button class="ui button">重置</button>
      <div class="ui accordion">
        <div class="title">
          <i class="dropdown icon"></i>更多选项
        </div>
        <div class="content">
          <p>这里是更多选项！</p>
        </div>
      </div>
    </div>
  </div>
</div>

在以上示例中，我们使用了 Semantic-UI 的 segment 类型和 inverted 主题来实现了一个灰色的反色段落，使用 grid、column 和 menu 类型来实现了一个网格布局和一个垂直菜单，使用 header 类型来实现了一个页面标题，使用 button 类型来实现了两个按钮，使用 accordion 类型来实现了一个收缩框。