CompositionDisponible
Sentence Breakdown
Tarjetas de vocabulario agrupadas según su función en una frase.
Instalación
Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/sentence-breakdown.jsonUso
Importa el componente en tu proyecto y conserva el código bajo tu control.
tsx
import { SentenceBreakdown } from "@/components/ui/sentence-breakdown";
export default function Demo() {
return <SentenceBreakdown lang="en" words={[
{ id: "i", text: "I", ipa: "aɪ", meaning: "yo", category: "pronoun" },
{ id: "drink", text: "drink", ipa: "drɪŋk", meaning: "bebo", category: "verb" },
{ id: "water", text: "water", ipa: "ˈwɔːtər", meaning: "agua", category: "noun" },
{ id: "every", text: "every", ipa: "ˈevri", meaning: "cada", category: "determiner" },
{ id: "day", text: "day", ipa: "deɪ", meaning: "día", category: "noun", punctuation: "." },
]} groups={[
{ id: "subject", label: "Subject", wordIds: ["i"] },
{ id: "verb", label: "Verb", wordIds: ["drink"] },
{ id: "object", label: "Object", wordIds: ["water"] },
{ id: "time", label: "Time", wordIds: ["every", "day"] },
]} />;
}
Estados e interacción
Aspecto, comportamiento y comprobación con teclado.
- La composición hereda los estados de sus controles. Prueba valores vacíos, contenido, carga y error cuando correspondan a la aplicación.
- Los ejemplos de esta página son ejecutables; el código mostrado usa los mismos componentes. La lógica de negocio pertenece al consumidor.
- Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.
Referencia API
Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
| words | Word[] | See example | Words with stable ids and optional card metadata. |
| groups | { id, label, wordIds }[] | See example | Optional grammatical grouping. Ungrouped words remain visible. |
| label / lang | string | See example | Accessible region name and language of the words. |
| groups[].tone | GrammarTone | From category or group label | Optional tone on each group; words keep their own category colors. A group function and a word class are different concepts. |
Accesibilidad
Reglas que deben conservarse cuando el componente se adapte a un producto.
Traduce las etiquetas y conserva el foco visible de teclado.
El feedback incluye texto además de color. La validación y la persistencia pertenecen al consumidor.
El color acompaña la categoría o función escrita; el significado no depende solo del color.