علامات التبويب Tabs

مكوّن لتبديل مناطق المحتوى. شكلان خطي وبطاقي، مع دعم التعطيل والإغلاق والإضافة وعلامات التبويب السفلية.

علامات تبويب

<template>
  <div class="demo-col" style="max-width: 640px; gap: 20px">
    <LhTabs v-model="active">
      <LhTabPane name="song" label="سلالة سونغ">
        <p class="demo-note">فان كوان، «المسافرون بين الجبال والوديان»؛ غوو شي، «الربيع المبكر».</p>
      </LhTabPane>
      <LhTabPane name="yuan" label="سلالة يوان">
        <p class="demo-note">هوانغ غونغوانغ، «الإقامة في جبال فوتشون».</p>
      </LhTabPane>
      <LhTabPane name="ming" label="سلالة مينغ" disabled>
        <p class="demo-note">علامة تبويب معطّلة.</p>
      </LhTabPane>
    </LhTabs>
    <p class="demo-note">v-model={{ active }}</p>
    <LhTabs v-model="active2" type="card" tab-position="bottom" closable addable>
      <LhTabPane v-for="t in panes" :key="t.name" :name="t.name" :label="t.label">
        <p class="demo-note">محتوى {{ t.label }}</p>
      </LhTabPane>
    </LhTabs>
    <p class="demo-note">card + علامات سفلية + closable + addable</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    active: 'song',
    active2: 'a',
    panes: [
      { name: 'a', label: 'لفافة A' },
      { name: 'b', label: 'لفافة B' },
      { name: 'c', label: 'لفافة C' },
    ],
  }),
}
</script>

Tabs Props

خاصية	الوصف	النوع	الافتراضي
v-model	اسم علامة التبويب النشطة حاليًا (prop يتحكم في modelValue)	string	—
type	الشكل	'line' \| 'card'	'line'
closable	ما إذا كانت علامة التبويب قابلة للإغلاق	boolean	false
addable	ما إذا كان زر الإضافة يُعرض	boolean	false
tabPosition	موضع علامات التبويب	'top' \| 'bottom'	'top'
sx	خاصية sx المختصرة للتخطيط	—	—

TabPane Props

خاصية	الوصف	النوع	الافتراضي
name	المُعرِّف الفريد لعلامة التبويب (يُستخدم كمفتاح ثابت، ويُستحسن عدم تغييره ديناميكيًا)	string	—
label	عنوان علامة التبويب	string	—
disabled	ما إذا كانت معطّلة	boolean	false

Slots

فتحة	الوصف
TabPane default	محتوى علامة التبويب