Files
fn_registry/frontend/functions/ui/skeleton.md
T
egutierrez 87e8f33b01 fix: corregir lang y file_path en frontmatter de funciones existentes
Normaliza lang: typescript → ts en funciones frontend y corrige file_path de functions/infra/ → functions/browser/ en funciones CDP. Actualiza referencias cn_typescript_core → cn_ts_core.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 03:23:20 +02:00

1.8 KiB

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant, source_repo, source_license, source_file
name kind lang domain version purity signature description tags uses_functions uses_types returns returns_optional error_type imports tested tests test_file_path file_path props emits has_state framework variant source_repo source_license source_file
skeleton component ts ui 1.0.0 impure Skeleton(props: HTMLAttributes<HTMLDivElement>): JSX.Element Sistema de loading skeletons: base, text, card, avatar, button, table. Variantes preconfiguradas para estados de carga.
skeleton
loading
placeholder
component
ui
cn_ts_core
false
react
false
frontend/functions/ui/skeleton.tsx
name type required description
className string false Clases CSS adicionales
name type required description
lines number false Número de líneas (SkeletonText, default 3)
name type required description
rows number false Filas de tabla (SkeletonTable, default 5)
name type required description
columns number false Columnas de tabla (SkeletonTable, default 4)
name type required description
size 'xs' | 'sm' | 'md' | 'lg' | 'xl' false Tamaño del avatar (SkeletonAvatar, default md)
false react
base
text
card
avatar
button
table
https://gitea-dgg044oo04woo4ggcsws4gk0.organic-machine.com/Bl4cksmith/Frontend_Library MIT frontend/src/components/ui/skeleton.tsx

Ejemplo

<SkeletonCard />
<SkeletonText lines={4} />
<SkeletonTable rows={10} columns={5} />
<SkeletonAvatar size="lg" />
<SkeletonButton />

Notas

Exporta 6 variantes preconfiguradas. Todas componen sobre el Skeleton base con animate-pulse. La última línea de SkeletonText se acorta a w-4/5 para simular texto real. SkeletonCard incluye imagen (h-[180px]) + dos líneas de texto.