Semantic-UI 菜单指向类型

Semantic-UI 提供了多种菜单指向类型，可以通过设置 dropdown 组件的 direction 属性来指定菜单指向的位置。

以下是 Semantic-UI 支持的菜单指向类型及其对应的值：

向下指向

向下指向是默认的指向类型，菜单将向下展开。可以使用 downward 或 auto 来指定向下指向。

<div class="ui dropdown">
  <div class="text">向下指向</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</div>

<!-- 向下指向： -->
<div class="ui dropdown">
  <div class="text">downward</div>
  <i class="dropdown icon"></i>
  <div class="menu downward">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</div>

<!-- 自动指向： -->
<div class="ui dropdown">
  <div class="text">auto</div>
  <i class="dropdown icon"></i>
  <div class="menu auto">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</div>

向上指向

向上指向可以使用 upward 来指定。

<div class="ui dropdown">
  <div class="text">向上指向</div>
  <i class="dropdown icon"></i>
  <div class="menu upward">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</div>

向左指向

向左指向可以使用 left 来指定。

<div class="ui dropdown">
  <div class="text">向左指向</div>
  <i class="dropdown icon"></i>
  <div class="menu left">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</div>

向右指向

向右指向可以使用 right 来指定。

<div class="ui dropdown">
  <div class="text">向右指向</div>
  <i class="dropdown icon"></i>
  <div class="menu right">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</div>

垂直中心

使用 centered 可以将菜单垂直居中。

<div class="ui dropdown">
  <div class="text">垂直中心</div>
  <i class="dropdown icon"></i>
  <div class="menu centered">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</div>

左对齐

使用 left aligned 可以将菜单左对齐。

<div class="ui dropdown">
  <div class="text">左对齐</div>
  <i class="dropdown icon"></i>
  <div class="menu left aligned">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</div>

右对齐

使用 right aligned 可以将菜单右对齐。

<div class="ui dropdown">
  <div class="text">右对齐</div>
  <i class="dropdown icon"></i>
  <div class="menu right aligned">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</div>

悬浮显示

使用 hover 可以实现悬浮显示菜单。

<div class="ui dropdown">
  <div class="text">悬浮显示</div>
  <i class="dropdown icon"></i>
  <div class="menu hover">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</div>

单击显示

使用 click 可以实现单击显示菜单。

<div class="ui dropdown">
  <div class="text">单击显示</div>
  <i class="dropdown icon"></i>
  <div class="menu click">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</div>

以上是 Semantic-UI 菜单指向类型的介绍。使用 Semantic-UI 提供的菜单指向类型，可以轻松地实现丰富多样的菜单效果。