Files
fn_registry/frontend/functions/ui/skeleton.md
T
egutierrez 953f598b9b feat: funciones frontend React/TS — componentes UI, hooks Wails, charts y tipos
Componentes React reutilizables: card, dialog, tabs, select, alert, badge, button, input, label,
skeleton, tooltip, progress_bar, page_header, form_field, settings_page, crud_page, analytics_page,
dashboard_layout. Charts: area, bar, line, sparkline, kpi_card, chart_container.
Hooks Wails: use_wails_query, use_wails_mutation, use_wails_stream, use_wails_event, use_animated_canvas.
Funciones core: cn, format_compact, chart_colors, get_series_color, wails_cache, theme_config_to_colors.
Tipos: chart_series, wails_ipc, theme_config, component_variants.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-01 20:55:34 +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 typescript 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_typescript_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.