📌  相关文章
📜  Semantic-UI Rail 类型(1)

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

Semantic-UI Rail 类型

Semantic-UI是一款现代化的UI框架，提供多种UI组件，其中Rail类型是其中一个非常实用的组件，可以帮助我们实现侧边菜单、侧边栏、浮动面板等功能。在本篇介绍中，我们将通过代码片段的方式来详细介绍如何使用Rail组件。

简单使用方法

首先需要在html中引入semantic-ui的CSS和JS文件，即

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha512-z5HpvI+i7VhOpYMJyz2kVfTT+NnTRl6VzU6ELotbAIW8BvGyU6C3q6YwDrpWaqIvkiLec9JUeRd1wuW6U8L+UQ==" crossorigin="anonymous" />
<script
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha512-zF1EDAwqb/nlxHBmq2ftZiRp+zC9j4SiLlFAh4hqJCnOpOdMfjc+ZncoKAR3sWZLt3exLcX2zjWFCA8AQbgFzQ==" crossorigin="anonymous"></script>

然后在HTML中使用Rail组件，即

<div class="ui inverted segment">
  <div class="ui inverted top attached label">Header</div>
  <div class="ui sidebar inverted vertical menu">
    <a class="item">Item 1</a>
    <a class="item">Item 2</a>
    <a class="item">Item 3</a>
  </div>
  <div class="pusher">
    <p>Main content</p>
  </div>
</div>

这里使用了ui inverted segment设置了背景色和内外边距等样式，ui inverted top attached label设置了顶部的Header样式，ui sidebar inverted vertical menu设置了侧边栏的样式与内容，pusher类则将页面的内容挤开，让侧边栏不会遮住主要内容。

动态控制

除了简单的静态使用外，Rail组件还提供了多种动态控制的方法。例如，可以通过调用$('.ui.sidebar').sidebar('toggle')方法来实现按钮切换控制侧边栏的显隐，如下所示：

<button class="ui button" onclick="$('.ui.sidebar').sidebar('toggle')">Toggle Sidebar</button>

可以参考下面的完整代码片段来了解更多Rail组件的使用方法。

<!DOCTYPE html>
<html>
<head>
  <title>Semantic-UI Rail Demo</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha512-z5HpvI+i7VhOpYMJyz2kVfTT+NnTRl6VzU6ELotbAIW8BvGyU6C3q6YwDrpWaqIvkiLec9JUeRd1wuW6U8L+UQ==" crossorigin="anonymous" />
  <script
    src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha512-zF1EDAwqb/nlxHBmq2ftZiRp+zC9j4SiLlFAh4hqJCnOpOdMfjc+ZncoKAR3sWZLt3exLcX2zjWFCA8AQbgFzQ==" crossorigin="anonymous"></script>
</head>
<body>
  <div class="ui inverted segment">
    <div class="ui inverted top attached label">Header</div>
    <div class="ui sidebar inverted vertical menu">
      <a class="item">Item 1</a>
      <a class="item">Item 2</a>
      <a class="item">Item 3</a>
    </div>
    <div class="pusher">
      <p>Main content</p>
      <button class="ui button" onclick="$('.ui.sidebar').sidebar('toggle')">Toggle Sidebar</button>
    </div>
  </div>
</body>
</html>