Pestañas

Componente para alternar áreas de contenido. Dos aspectos (línea y tarjeta); admite la desactivación, el cierre, la adición y las pestañas inferiores.

Pestañas

<template>
  <div class="demo-col" style="max-width: 640px; gap: 20px">
    <LhTabs v-model="active">
      <LhTabPane name="song" label="Dinastía Song">
        <p class="demo-note">Fan Kuan, *Viaje por las montañas y los arroyos*; Guo Xi, *Primera primavera*.</p>
      </LhTabPane>
      <LhTabPane name="yuan" label="Dinastía Yuan">
        <p class="demo-note">Huang Gongwang, *Morada en las montañas Fuchun*.</p>
      </LhTabPane>
      <LhTabPane name="ming" label="Dinastía Ming" disabled>
        <p class="demo-note">Pestaña desactivada.</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">Contenido de {{ t.label }}</p>
      </LhTabPane>
    </LhTabs>
    <p class="demo-note">card + pestañas inferiores + closable + addable</p>
  </div>
</template>

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

Tabs Props

Prop	Descripción	Tipo	Predeterminado
v-model	Nombre de la pestaña activa (prop controlada modelValue)	string	—
type	Aspecto	'line' \| 'card'	'line'
closable	Si las pestañas se pueden cerrar	boolean	false
addable	Si se muestra el botón de adición	boolean	false
tabPosition	Posición de las pestañas	'top' \| 'bottom'	'top'
sx	Prop abreviada de maquetación	—	—

TabPane Props

Prop	Descripción	Tipo	Predeterminado
name	Identificador único de la pestaña (actúa como clave estable; no se recomienda modificarlo de forma dinámica)	string	—
label	Título de la pestaña	string	—
disabled	Si está desactivada	boolean	false

Slots

Slot	Descripción
TabPane default	Contenido de la pestaña