Semantic-UI 侧边栏变体

介绍

Semantic-UI 是一个流行的前端 UI 框架，里面包含了各种常用的 UI 组件。其中，侧边栏是一个非常实用的组件，可以用来展示导航菜单、个人资料等内容。

在 Semantic-UI 中，侧边栏有多种变体，可以根据不同的需求选择合适的变体。

常用的变体

基本侧边栏

基本侧边栏是最简单的侧边栏变体，它包含了一个菜单和一个内容区域，可以通过按钮或手势来展开或关闭。基本侧边栏的代码如下：

<div class="ui left sidebar visible">
  <div class="ui segment">
    <p>菜单内容</p>
  </div>
</div>

<div class="pusher">
  <div class="ui segment">
    <p>主内容区域</p>
  </div>
</div>

其中，.ui.left.sidebar.visible 表示左侧的可见的侧边栏，.pusher 表示主内容区域。

双侧侧边栏

双侧侧边栏包含了两个侧边栏和一个主内容区域。可以通过按钮或手势来展开或关闭侧边栏。双侧侧边栏的代码如下：

<div class="ui inverted vertical sidebar menu left">
  <a class="active item">选项 1</a>
  <a class="item">选项 2</a>
  <a class="item">选项 3</a>
</div>

<div class="pusher">
  <div class="ui basic segment">
    <h3 class="ui header">主内容区域</h3>
  </div>
</div>

<div class="ui vertical sidebar menu right">
  <a class="active item">选项 1</a>
  <a class="item">选项 2</a>
  <a class="item">选项 3</a>
</div>

其中，.ui.inverted.vertical.sidebar.menu.left 表示左侧的侧边栏，.ui.vertical.sidebar.menu.right 表示右侧的侧边栏，.pusher 表示主内容区域。

可折叠侧边栏

可折叠侧边栏是一种可以折叠的侧边栏，可以节省页面空间。当鼠标放置在侧边栏上时，会自动展开；当鼠标离开侧边栏时，会自动折叠。可折叠侧边栏的代码如下：

<div class="ui left vertical inverted sidebar menu">
  <div class="item">
    <a class="ui logo icon image" href="#">
      <i class="circular gavel icon"></i>
    </a>
    <a class="item">导航 1</a>
    <a class="item">导航 2</a>
    <a class="item">导航 3</a>
  </div>
</div>

<div class="pusher">
  <div class="ui segment">
    <h2 class="ui header">主内容区域</h2>
    <p>内容</p>
  </div>
</div>

其中，.ui.left.vertical.inverted.sidebar.menu 表示左侧的可折叠的侧边栏，.pusher 表示主内容区域。

总结

Semantic-UI 的侧边栏变体功能强大，可以帮助程序员快速构建强大的界面。通过上述介绍，相信你已经掌握了基本的侧边栏用法，可以根据不同需求选择合适的变体，快速构建自己的界面。