Egutierrez
5a824c2eee
75 components + DESIGN_SYSTEM.md + sync script. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
78 lines
2.2 KiB
Markdown
78 lines
2.2 KiB
Markdown
---
|
|
name: indicator
|
|
kind: component
|
|
lang: ts
|
|
domain: ui
|
|
version: "1.0.0"
|
|
purity: impure
|
|
signature: "FnIndicator(props: FnIndicatorProps): JSX.Element"
|
|
description: "Badge indicador posicionado sobre un elemento hijo. Wrapper sobre Mantine Indicator."
|
|
tags: [mantine, indicator, badge, notification, dot, component, ui]
|
|
uses_functions: []
|
|
uses_types: []
|
|
returns: []
|
|
returns_optional: false
|
|
error_type: ""
|
|
imports: ["@mantine/core"]
|
|
framework: react
|
|
props:
|
|
- name: children
|
|
type: "ReactNode"
|
|
required: true
|
|
description: "Elemento sobre el cual se posiciona el indicador"
|
|
- name: color
|
|
type: "MantineColor"
|
|
required: false
|
|
description: "Color del indicador, default red"
|
|
- name: size
|
|
type: "number"
|
|
required: false
|
|
description: "Tamano del dot en px, default 10"
|
|
- name: position
|
|
type: "'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-center' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end'"
|
|
required: false
|
|
description: "Posicion del indicador, default top-end"
|
|
- name: processing
|
|
type: "boolean"
|
|
required: false
|
|
description: "Animacion de pulso, default false"
|
|
- name: disabled
|
|
type: "boolean"
|
|
required: false
|
|
description: "Oculta el indicador, default false"
|
|
- name: label
|
|
type: "ReactNode"
|
|
required: false
|
|
description: "Contenido dentro del indicador (numero, texto)"
|
|
output: "Elemento hijo con un dot/badge indicador posicionado en una esquina"
|
|
tested: false
|
|
tests: []
|
|
test_file_path: ""
|
|
file_path: "frontend/functions/ui/indicator.tsx"
|
|
emits: []
|
|
has_state: false
|
|
variant: []
|
|
---
|
|
|
|
## Ejemplo
|
|
|
|
```tsx
|
|
import { FnIndicator } from '@fn_library'
|
|
import { FnActionIcon } from '@fn_library'
|
|
import { IconBell } from '@tabler/icons-react'
|
|
|
|
{/* Dot simple */}
|
|
<FnIndicator processing>
|
|
<FnActionIcon icon={<IconBell size={18} />} />
|
|
</FnIndicator>
|
|
|
|
{/* Con contador */}
|
|
<FnIndicator label={5} size={16} color="blue">
|
|
<Avatar src="user.png" />
|
|
</FnIndicator>
|
|
```
|
|
|
|
## Notas
|
|
|
|
Wrapper sobre Mantine `Indicator`. El `processing` prop agrega una animacion de pulso al dot. Si se provee `label`, el indicador se agranda para mostrar contenido. `disabled` oculta el indicador sin desmontar el componente.
|