Definition Term
Uso
El componente SDefinitionTerm renderiza un par semántico <dt>/<dd>. Proporciona el término mediante la prop labels (o el slot default) y el contenido mediante la prop description (o el slot description).
Múltiples Etiquetas
Pasa un array de strings a labels para renderizar varios elementos <dt> que comparten la misma descripción — útil cuando un único valor se conoce por varios nombres.
Usando Slots
Usa el slot default para la etiqueta y el slot description cuando el contenido no sea texto plano (enlaces, texto con formato, íconos, etc.). Los slots tienen prioridad sobre sus props equivalentes.
Para múltiples etiquetas mediante slots, nómbralos con claves numéricas (#1, #2, …); cada uno se convierte en su propio elemento <dt>:
<template>
<SDefinitionTerm>
<template #1>Teléfono</template>
<template #2>Móvil</template>
<template #description>+57 300 123 4567</template>
</SDefinitionTerm>
</template>
Oneline (Diseño Agrupado)
Activa oneline para eliminar el <div> envolvente y permitir que varias instancias de SDefinitionTerm compartan un único <dl> padre, produciendo un resumen apilado y limpio.
Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
labels | string | string[] | - | El texto de la etiqueta renderizado como <dt>. Pasa un array para renderizar múltiples términos. Se ignora cuando se usan el slot default o los slots numerados. |
description | string | - | El texto de la descripción renderizado como <dd>. Se ignora cuando se usa el slot description. |
oneline | boolean | false | Elimina el <div> envolvente para que <dt>/<dd> se rendericen directamente en el padre — útil cuando se agrupan varias instancias dentro de un <dl> compartido. |
class | string | - | Clases CSS adicionales aplicadas al elemento raíz. |
Slots
| Nombre | Descripción |
|---|---|
default | Contenido personalizado para un único <dt>. Tiene prioridad sobre labels. |
1, 2, 3, … | Slots con nombre numérico; cada uno se renderiza como su propio elemento <dt>. Útil para múltiples etiquetas. |
description | Contenido personalizado para el <dd> de descripción. Tiene prioridad sobre description. |
Passthrough
| Key | Elemento | Descripción |
|---|---|---|
dt | <dt> | Elemento(s) de etiqueta del término |
dd | <dd> | Elemento de descripción |
<template>
<SDefinitionTerm
labels="Nombre completo"
description="John Doe"
pt:dt="uppercase tracking-wide"
pt:dd:class="font-semibold"
/>
</template>