Semantic UI Rail 内部类型

Semantic UI Rail是一种指向在屏幕边缘的内容的UI组件。在这篇文章中，我们将介绍Semantic UI Rail内部类型的使用。

Rail

Semantic UI Rail内部类型中的一个基本类型是Rail。Rail组件可以与其他内容组件结合使用，引导用户到页面边缘的相关内容。

使用方式

<div class="ui container">
  <div class="ui grid">
    <div class="four wide column">
      <div class="ui rail">
        <!-- 结合其他组件使用 -->
      </div>
    </div>
    <div class="twelve wide column">
      <!-- 主体内容 -->
    </div>
  </div>
</div>

在这个示例中，我们使用了Rail组件，然后在四分之一的页面宽度中放置它。我们还将主体内容放在剩余的部分中。

垂直方向

我们还可以将Rail组件垂直放置。方法是在Rail元素中添加.left或.right类。

<div class="ui container">
  <div class="ui grid">
    <div class="four wide column">
      <div class="ui left rail">
        <!-- 结合其他组件使用 -->
      </div>
    </div>
    <div class="twelve wide column">
      <!-- 主体内容 -->
    </div>
  </div>
</div>

内部类型

Rail组件内部有几种类型，包括了旁边（Side）和内部（Internal）类型：

旁边

Side Rail组件可以被放置在页面的某一边。

<div class="ui container">
  <div class="ui grid">
    <div class="four wide column">
      <div class="ui left rail">
        <div class="ui card">
          <div class="content">
            <!-- 添加主体内容 -->
          </div>
        </div>
      </div>
    </div>
    <div class="twelve wide column">
      <!-- 主体内容 -->
    </div>
  </div>
</div>

内部

Internal Rail组件可以被放置在页面的中心。

<div class="ui container">
  <div class="ui grid">
    <div class="four wide column">
      <div class="ui internal rail">
        <div class="ui card">
          <div class="content">
            <!-- 添加主体内容 -->
          </div>
        </div>
      </div>
    </div>
    <div class="twelve wide column">
      <!-- 主体内容 -->
    </div>
  </div>
</div>

小结

这篇文章介绍了Semantic UI Rail内部类型的基础使用方式和内部类型。通过使用这些类型，我们可以引导用户到页面边缘的相关内容，使用户体验更加优秀。