Semantic-UI 子菜单内容

在 Semantic-UI 中，子菜单是在父菜单的下方展开的菜单，用于展示更详细的选项。在本文中，我们将介绍如何在 Semantic-UI 中创建子菜单及其相应的内容。

创建子菜单

要创建子菜单，需要将 dropdown 组件的 menu 属性设置为 doubling 或 true。这将使得子菜单在水平方向展开，并且在父菜单下方。

<div class="ui dropdown">
  <div class="text">Parent Menu</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">Option 1</div>
    <div class="item">Option 2</div>
    <div class="divider"></div>
    <div class="header">
      Submenu
      <i class="caret right icon"></i>
    </div>
    <div class="menu">
      <div class="item">Submenu Option 1</div>
      <div class="item">Submenu Option 2</div>
    </div>
  </div>
</div>

在上面的代码中，我们创建了一个父菜单，并在其中添加了两个选项。然后，我们使用 divider 组件来添加一个分隔线，以便将子菜单与父菜单的选项分隔开来。之后，我们创建了一个子菜单使用 menu 组件，其中包含两个选项。

自定义子菜单内容

在子菜单中，我们可以添加任何 Semantic-UI 组件以展示详细的选项。

例如，我们可以使用 accordion 组件来在子菜单中添加折叠面板。

<div class="ui dropdown">
  <div class="text">Parent Menu</div>
  <i class="dropdown icon"></i>
  <div class="menu doubling">
    <div class="item">Option 1</div>
    <div class="item">Option 2</div>
    <div class="divider"></div>
    <div class="header">
      Submenu
      <i class="caret right icon"></i>
    </div>
    <div class="menu">
      <div class="item">
        Accordion
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="ui accordion">
            <div class="title active">
              <i class="dropdown icon"></i>
              Accordion Item 1
            </div>
            <div class="content active">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus consequat commodo metus, quis accumsan ligula.</p>
            </div>
            <div class="title">
              <i class="dropdown icon"></i>
              Accordion Item 2
            </div>
            <div class="content">
              <p>Nunc nec nisi vitae ligula fringilla fringilla. Pellentesque eu massa vel risus dictum aliquet ac laoreet eros.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

在上面的代码中，我们在子菜单中添加了一个 accordion 组件，其中包含两个项。

除此之外，我们还可以使用列表、表格、标签等 Semantic-UI 组件来自定义子菜单内容。

结论

在 Semantic-UI 中，子菜单是便于展示更详细的选项的工具。我们可以使用 dropdown 组件的 menu 属性来创建子菜单，并按照需要自定义其内容。