แท็บ

แท็บใช้เพื่อจัดระเบียบเนื้อหาเป็นส่วนต่างๆ แท็บมักใช้ในเว็บแอปพลิเคชันเพื่อจัดการมุมมองหลายมุมมอง

การใช้งานพื้นฐาน

แท็บปกติ:

tab

tab

tab

<template>
  <spr-tabs :list="tabsBasic" />
</template>

<script lang="ts" setup>
import SprTabs from '@/components/tabs/tabs.vue';

const tabsBasic = [{ label: 'tab' }, { label: 'tab' }, { label: 'tab' }];
</script>

แท็บขีดเส้นใต้:

title

title

title

<template>
  <spr-tabs :list="tabsUnderlined" :underlined="true" />
</template>

<script lang="ts" setup>
import SprTabs from '@/components/tabs/tabs.vue';

const tabsUnderlined = [
  { label: 'title', disabled: false },
  { label: 'title', disabled: false },
  { label: 'title', disabled: false },
];
</script>

สถานะปิดใช้งาน

แท็บปกติ:

tab

tab

tab

<template>
  <spr-tabs :list="tabsBasicWithDisabled" />
</template>

<script lang="ts" setup>
import SprTabs from '@/components/tabs/tabs.vue';

const tabsBasicWithDisabled = ref([
  { label: 'tab', disabled: false },
  { label: 'tab', disabled: false },
  { label: 'tab', disabled: true },
]);
</script>

แท็บขีดเส้นใต้:

title

title

title

<template>
  <spr-tabs :list="tabsUnderlinedDisabled" :underlined="true" />
</template>

<script lang="ts" setup>
import SprTabs from '@/components/tabs/tabs.vue';

const tabsUnderlinedDisabled = [
  { label: 'title', disabled: false },
  { label: 'title', disabled: false },
  { label: 'title', disabled: true },
];
</script>

สถานะใช้งานอยู่

โดยการเพิ่มแอตทริบิวต์ active-tab ให้กับคอมโพเนนต์ คุณสามารถระบุแท็บใดที่ควรตั้งเป็นใช้งานอยู่ ซึ่งจะไฮไลต์แท็บและแสดงภาพว่าถูกเลือก

tab 1

tab 2

tab 3

<template>
  <spr-tabs :list="tabsRandomLabel" active-tab="tab 2" />
</template>

<script lang="ts" setup>
import SprTabs from '@/components/tabs/tabs.vue';

const tabsRandomLabel = ref([{ label: 'tab 1' }, { label: 'tab 2' }, { label: 'tab 3' }]);
</script>

ด้วยไอคอน

แท็บปกติ:

tab

tab

tab

<template>
  <spr-tabs :list="tabsWithIcon" />
</template>

<script lang="ts" setup>
import SprTabs from '@/components/tabs/tabs.vue';

const tabsWithIcon = [
  { label: 'tab', icon: 'ph:plant-light', iconFill: 'ph:plant-fill' },
  { label: 'tab', icon: 'ph:leaf-light', iconFill: 'ph:leaf-fill' },
  { label: 'tab', icon: 'ph:tree-light', iconFill: 'ph:tree-fill' },
];
</script>

แท็บขีดเส้นใต้:

title

title

title

<template>
  <spr-tabs :list="tabsUnderlinedWithIcon" :underlined="true" />
</template>

<script lang="ts" setup>
import SprTabs from '@/components/tabs/tabs.vue';

const tabsUnderlinedWithIcon = [
  { label: 'title', disabled: false, icon: 'ph:plant-light', iconFill: 'ph:plant-fill' },
  { label: 'title', disabled: false, icon: 'ph:leaf-light', iconFill: 'ph:leaf-fill' },
  { label: 'title', disabled: false, icon: 'ph:tree-light', iconFill: 'ph:tree-fill' },
];
</script>

ไอคอนเท่านั้น

แท็บปกติ:

<template>
  <spr-tabs :list="tabsIconOnly" />
</template>

<script lang="ts" setup>
import SprTabs from '@/components/tabs/tabs.vue';

const tabsIconOnly = [
  { icon: 'ph:plant-light', iconFill: 'ph:plant-fill' },
  { icon: 'ph:leaf-light', iconFill: 'ph:leaf-fill' },
  { icon: 'ph:tree-light', iconFill: 'ph:tree-fill' },
];
</script>

แท็บขีดเส้นใต้:

<template>
  <spr-tabs :list="tabsIconOnly" :underlined="true" />
</template>

<script lang="ts" setup>
import SprTabs from '@/components/tabs/tabs.vue';

const tabsIconOnly = [
  { icon: 'ph:plant-light', iconFill: 'ph:plant-fill' },
  { icon: 'ph:leaf-light', iconFill: 'ph:leaf-fill' },
  { icon: 'ph:tree-light', iconFill: 'ph:tree-fill' },
];
</script>

API Reference

Props

ชื่อ	คำอธิบาย	ประเภท	ค่าเริ่มต้น
list	อาร์เรย์ของรายการแท็บที่จะแสดง แต่ละรายการควรมีคุณสมบัติ label (สำหรับแสดงข้อความ) และสามารถมี icon (ไอคอนที่จะแสดง) iconFill (ไอคอนที่จะแสดงเมื่อใช้งานอยู่) และ disabled (แท็บถูกปิดใช้งานหรือไม่) ได้อย่างเลือก	Array<{ label: string; icon?: string; iconFill?: string | Component; disabled?: boolean }>	[]
underlined	กำหนดสไตล์ภาพของแท็บ เมื่อ true แท็บจะมีสไตล์ขีดเส้นใต้พร้อมแท็บที่ใช้งานอยู่ไฮไลต์ด้วยเส้นใต้ เมื่อ false แท็บจะมีลักษณะเหมือนปุ่มพร้อมขอบ	boolean	false
activeTab	ตั้งแท็บใดที่ควรใช้งานโดยการจับคู่ป้ายกำกับ หากระบุ แท็บที่มีป้ายกำกับตรงกันจะถูกเปิดใช้งานเมื่อคอมโพเนนต์ติดตั้ง หากไม่ระบุหรือไม่พบการจับคู่ แท็บแรกจะใช้งานโดยค่าเริ่มต้น	string	''

Events

ชื่อ	คำอธิบาย	พารามิเตอร์
tabIndex	ถูกปล่อยออกมาเมื่อแท็บถูกเลือก ส่งคืนดัชนีของแท็บที่เลือก	(index: number)

List Item Properties

ชื่อ	คำอธิบาย	ประเภท	จำเป็น
label	ข้อความที่จะแสดงในแท็บ นอกจากนี้ยังใช้เพื่อจับคู่กับพร็อพ activeTab	string	ใช่ (เว้นแต่ใช้แท็บไอคอนเท่านั้น)
icon	ไอคอนที่จะแสดงในแท็บ ใช้ Iconify สำหรับการเรนเดอร์ไอคอน	string	ไม่
iconFill	ไอคอนที่จะแสดงเมื่อแท็บใช้งานอยู่ สิ่งนี้ช่วยให้สามารถใช้สไตล์ไอคอนที่แตกต่างเมื่อแท็บถูกเลือก	string | Component	ไม่
disabled	แท็บถูกปิดใช้งานหรือไม่ แท็บที่ปิดใช้งานไม่สามารถเลือกได้และมีสถานะภาพปิดใช้งาน	boolean	ไม่

Product Uses