Tabs 选项卡

常用的选项卡。

基础用法

基础样式展示，组件提供2种样式风格，可以使用 styleMode 属性切换风格，使用 padding 控制内边距。

Card样式

非Card样式

纵向

纵向卡片

<template>
  <pa-title :padding="['bottom']">Card样式</pa-title>
  <pa-tabs v-model="activeName">
    <pa-tabs-item label="第一页" name="page1" class="card_style" :padding="['all']" use-border> page1 </pa-tabs-item>
    <pa-tabs-item label="第二页" name="page2" class="card_style" :padding="['all']" use-border> page2 </pa-tabs-item>
  </pa-tabs>

  <pa-title :padding="['bottom']">非Card样式</pa-title>
  <pa-tabs v-model="activeName" styleMode="default" align="edge">
    <pa-tabs-item label="第一页" name="page1" class="card_style" :padding="['all']"> page1 </pa-tabs-item>
    <pa-tabs-item label="第二页" name="page2" class="card_style"> page2 </pa-tabs-item>
  </pa-tabs>

  <pa-title :padding="['bottom']">纵向</pa-title>
  <pa-tabs v-model="activeName3" mode="portrait" styleMode="default">
    <pa-tabs-item label="第一页" name="page1" class="card_style" :padding="['all']"> page1 </pa-tabs-item>
    <pa-tabs-item label="第二页" name="page2" class="card_style"> page2 </pa-tabs-item>
  </pa-tabs>

  <pa-title :padding="['bottom']">纵向卡片</pa-title>
  <pa-tabs v-model="activeName4" mode="portrait">
    <pa-tabs-item label="第一页" name="page1" class="card_style" :padding="['all']"> page1 </pa-tabs-item>
    <pa-tabs-item label="第二页" name="page2" class="card_style"> page2 </pa-tabs-item>
  </pa-tabs>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const activeName = ref("page1");
const activeName3 = ref("page1");
const activeName4 = ref("page1");
</script>

<style scoped lang="scss">
.vp_title_label {
  margin-top: 20px;
  margin-bottom: 5px;
  &:first-child {
    margin-top: 0;
  }
}

.card_style {
  height: 200px;
}
</style>

显示代码

混合使用

混合使用展示

组合使用

<template>
  <pa-title :padding="['bottom']">组合使用</pa-title>
  <pa-tabs v-model="activeName2" align="edge" useHeaderLine>
    <pa-tabs-item label="第一页" name="page1" class="card_style">
      <pa-tabs v-model="activeName5" mode="portrait" styleMode="default">
        <pa-tabs-item label="第一页" name="page1-1" :padding="['all']"> page1 </pa-tabs-item>
        <pa-tabs-item label="第二页" name="page2-1" :padding="['all']"> page2 </pa-tabs-item>
      </pa-tabs></pa-tabs-item
    >
    <pa-tabs-item label="第二页" name="page2" class="card_style" :padding="['all']"> page2 </pa-tabs-item>
  </pa-tabs>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const activeName2 = ref("page1");
const activeName5 = ref("page2-1");
</script>

<style scoped lang="scss">
.vp_title_label {
  margin-top: 20px;
  margin-bottom: 5px;
  &:first-child {
    margin-top: 0;
  }
}

.card_style {
  background-color: #f5f5f5;
  height: 200px;
}
</style>

显示代码

对齐方式展示

对齐方式展示

对其方式：default

对其方式：edge

<template>
  <pa-title :padding="['bottom']">对其方式：default</pa-title>
  <pa-tabs v-model="activeName">
    <pa-tabs-item label="第一页" name="page1" class="card_style" :padding="['all']"> page1 </pa-tabs-item>
  </pa-tabs>

  <pa-title :padding="['bottom']">对其方式：edge</pa-title>
  <pa-tabs v-model="activeName" align="edge">
    <pa-tabs-item label="第一页" name="page1" class="card_style" :padding="['all']"> page1 </pa-tabs-item>
  </pa-tabs>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const activeName = ref("page1");
</script>

<style scoped lang="scss">
.vp_title_label {
  margin-top: 20px;
  margin-bottom: 5px;
  &:first-child {
    margin-top: 0;
  }
}

.card_style {
  background-color: #f5f5f5;
  height: 200px;
}
</style>

显示代码

自定义标签

使用 插槽 对选项卡标签进行自定义内容修改。

<pa-tabs v-model="activeName">
  <pa-tabs-item label="第一页" name="page1">
    <template #label>
      <m-icon name="applet_line" />
      <span>Page1</span>
    </template>
    page1
  </pa-tabs-item>
</pa-tabs>

是否现实第二页：

<template>
  <div class="flex config-box">
    <div class="in_title_label">是否现实第二页：<el-switch v-model="switchValue" /></div>
  </div>

  <pa-tabs v-model="activeName" align="edge">
    <pa-tabs-item label="第一页" name="page1" class="card_style" :padding="['all']">
      <template #label>
        <m-icon name="applet_line" />
        <span>Page1</span>
      </template>
      page1
    </pa-tabs-item>
    <pa-tabs-item v-if="switchValue" label="第二页" name="page2" class="card_style" :padding="['all']"> page2 </pa-tabs-item>
  </pa-tabs>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const activeName = ref("page1");
const switchValue = ref(false);
</script>

<style scoped lang="scss">
.card_style {
  background-color: #f5f5f5;
  height: 200px;
}
</style>

显示代码

滚动模式（锚点）

当设置 slider 模式，可实现全展示与 锚点 功能

<pa-tabs v-model="state.activeName" slider>
  <pa-tabs-item label="User" name="one"></pa-tabs-item>
</pa-tabs>

<template>
  <div class="max-box">
    <pa-tabs v-model="activeName5" mode="slider">
      <pa-tabs-item label="第一页" name="page1-1" class="card_style" :padding="['all']"> page1 </pa-tabs-item>
      <pa-tabs-item label="第二页" name="page2-1" class="card_style" :padding="['all']"> page2 </pa-tabs-item>
      <pa-tabs-item label="第三页" name="page3-1" class="card_style" :padding="['all']"> page3 </pa-tabs-item>
      <pa-tabs-item label="第四页" name="page4-1" class="card_style" :padding="['all']"> page4 </pa-tabs-item>
    </pa-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const activeName5 = ref("page3-1");
</script>

<style scoped lang="scss">
.vp_title_label {
  margin-top: 20px;
  margin-bottom: 5px;
  &:first-child {
    margin-top: 0;
  }
}
.max-box {
  height: 200px;
}
.card_style {
  background-color: #f5f5f5;
  height: 300px;
}
</style>

显示代码

内页是否可滚动

当设置 tabs 高度时，内部元素 pa-tabs-item 高度会被拦截，可添加 scroll 是否滚动属性

<pa-tabs v-model="state.activeName">
  <pa-tabs-item label="User" name="one" scroll></pa-tabs-item>
</pa-tabs>

<template>
  <pa-tabs v-model="state.activeName" align="edge" class="tabs-box">
    <pa-tabs-item label="User" name="one" scroll :padding="['all']" useScrollX class="card_style">
      <div style="height: 800px; width: 2200px; background-color: aliceblue">scroll</div>
    </pa-tabs-item>
    <pa-tabs-item label="User" name="two" :padding="['all']" class="card_style">
      <div style="height: 800px; width: 2200px">no-scroll</div>
    </pa-tabs-item>
  </pa-tabs>
</template>

<script lang="ts" setup>
import { reactive } from "vue";

const state = reactive({
  activeName: "one"
});
</script>

<style scoped lang="scss">
.tabs-box {
  width: 100%;
  height: 400px;
}
.card_style {
  background-color: #f5f5f5;
}
</style>

显示代码

SaTabsProps

属性名	描述	类型	默认值
modelValue	默认选中 tab	—	—
visibleMode	显示类型	display visible	visible
mode	布局模式	default portrait slider sticky	default
styleMode	样式模式	default card	card
align	对齐方式	edge default	default
useHeaderLine	表头下划线	boolean	false
useShadow	是否使用阴影	boolean	true

SaTabsItemProps

属性名	描述	类型	默认值
label	标签名	number string	—
name	标签唯一名	number string	—
scroll	是否可以滚动	boolean	true
tips	提示文字	number string	—
lazy	懒加载	boolean number	false
useScrollX	是否使用水平滚动	boolean	false

SaTabsEvents

字段	描述	类型
tab-change	当 tab 切换时触发	function