📌  相关文章
📜  Semantic-UI 角图标组(1)

📅  最后修改于: 2023-12-03 14:47:23.832000             🧑  作者: Mango

Semantic-UI 角图标组

介绍

Semantic-UI 是一个流行的 UI 框架，其中包括了角图标组。角图标组是一组带有边角或角标记的图标。它们可以用于突出显示某些元素或状态。这些图标是纯 CSS 制作的，可以轻松地添加到 HTML 页面中。

安装

要使用 Semantic-UI 角图标组，首先需要下载和安装 Semantic-UI 框架。可以从 Semantic-UI 官网（https://semantic-ui.com/）下载各种版本的框架文件，包括 CSS、JavaScript 和字体文件。下载完成后，将这些文件放到项目的相关目录中。然后，在 HTML 页面中引入 Semantic-UI 的 CSS 文件即可使用该框架。

<link rel="stylesheet" type="text/css" href="semantic.min.css">
用法

Semantic-UI 角图标组包含两种类型的图标：有角标记（pointing）和有边角（corner）的图标。

角标记图标

要使用带有角标记的图标，请使用下面的 HTML 代码：

<i class="icon angle up"></i>
<i class="icon angle down"></i>
<i class="icon angle left"></i>
<i class="icon angle right"></i>
<i class="icon caret up"></i>
<i class="icon caret down"></i>
<i class="icon caret left"></i>
<i class="icon caret right"></i>
边角图标

要使用带有边角的图标，请使用下面的 HTML 代码：

<i class="icon corner add"></i>
<i class="icon corner remove"></i>
<i class="icon corner edit"></i>
<i class="icon corner check"></i>
<i class="icon corner close"></i>
<i class="icon corner down"></i>
<i class="icon corner left"></i>
<i class="icon corner right"></i>

在这些示例中，icon 是一个基础 CSS 类，它用于指定元素是一个图标。angle, caret, corner 是特定图标的 CSS 类，用于指定元素的角度或边角。其它的 CSS 类则指定了特定的图标。可以根据具体需要来组合使用这些 CSS 类。

示例

下面是一个使用 Semantic-UI 角图标组的示例。这个示例使用了箭头和菜单图标。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Semantic-UI 角图标组示例</title>
  <link rel="stylesheet" type="text/css" href="semantic.min.css">
  <style type="text/css">
    .ui.icon.menu .dropdown > .menu {
      margin: 0;
    }
    .ui.icon.menu .dropdown > .menu > .item {
      padding: 0.5em 1em 0.5em 2em;
    }
  </style>
</head>
<body>
  <div class="ui icon menu">
    <div class="item">
      <i class="icon angle left"></i>
      <span>返回</span>
    </div>
    <div class="right dropdown item">
      <i class="icon caret down"></i>
      <span>操作</span>
      <div class="menu">
        <div class="item">
          <i class="icon edit"></i>
          <span>编辑</span>
        </div>
        <div class="item">
          <i class="icon delete"></i>
          <span>删除</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

在这个示例中，我们创建了一个带有菜单项的菜单栏。左侧有一个返回箭头，右侧有一个下拉菜单，包含编辑和删除选项。这个示例展示了角标记和边角图标的用法。还展示了如何使用 CSS 自定义菜单样式。注意，要使用 Semantic-UI 角图标组的 dropdowm 组件，需要安装并引入 jQuery 和 transition.js 文件。

总结

Semantic-UI 角图标组是一组方便的图标，可以用于制作各种 UI 元素。它们是 Semantic-UI 框架的一部分，使用纯 CSS 技术实现。要使用这些图标，需要下载并安装 Semantic-UI 框架，然后按照上述示例中的方法来使用。使用这些图标，可以让界面更加美观和易用。