Tab 标签页

INFO

用于在多个内容面板之间切换展示

基本语法

<c-tab tabs="标签1,标签2,标签3" center active="1">
  <c-tab-panel>第一个标签的内容</c-tab-panel>
  <c-tab-panel>第二个标签的内容</c-tab-panel>
  <c-tab-panel>第三个标签的内容</c-tab-panel>
</c-tab>

参数说明

参数

类型

默认值

说明

tabs

string

必填

标签名称，用英文逗号分隔

center

boolean

false

添加此属性使内容居中

active

number

1

默认激活的标签页（从 1 开始）

使用示例

示例 1：基本用法

<c-tab tabs="JavaScript,Python,Go">
  <c-tab-panel>
    <pre><code>console.log('Hello, World!');</code></pre>
  </c-tab-panel>
  <c-tab-panel>
    <pre><code>print('Hello, World!')</code></pre>
  </c-tab-panel>
  <c-tab-panel>
    <pre><code>fmt.Println("Hello, World!")</code></pre>
  </c-tab-panel>
</c-tab>

示例 2：居中显示，默认第二个

<c-tab tabs="macOS,Windows,Linux" center active="2">
  <c-tab-panel>
    使用 Homebrew 安装：<br>
    <code>brew install halo</code>
  </c-tab-panel>
  <c-tab-panel>
    从官网下载安装包，双击运行。
  </c-tab-panel>
  <c-tab-panel>
    使用包管理器：<br>
    <code>apt install halo</code>
  </c-tab-panel>
</c-tab>

示例 3：复杂内容

<c-tab tabs="功能介绍,安装步骤,常见问题">
  <c-tab-panel>
    <h4>主要功能</h4>
    <ul>
      <li>三栏响应式布局</li>
      <li>深色模式支持</li>
      <li>丰富的内容组件</li>
    </ul>
  </c-tab-panel>
  <c-tab-panel>
    <ol>
      <li>下载主题包</li>
      <li>上传到 Halo 后台</li>
      <li>启用主题并配置</li>
    </ol>
  </c-tab-panel>
  <c-tab-panel>
    <p><strong>Q: 为什么样式不生效？</strong></p>
    <p>A: 请清除浏览器缓存后刷新。</p>
  </c-tab-panel>
</c-tab>

使用效果