@codeplex-sac/navigation 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +152 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,155 @@
|
|
|
1
|
-
# navigation
|
|
1
|
+
# @codeplex-sac/navigation
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Colección de componentes de navegación diseñada para cubrir todas las necesidades de movimiento dentro de las aplicaciones Codeplex, desde menús simples hasta complejos flujos de pasos.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## 📦 Instalación
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @mui/material @emotion/react @emotion/styled @mui/icons-material @codeplex-sac/navigation
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## 🧭 Menús y Barras
|
|
14
|
+
|
|
15
|
+
### `<CodeplexCajonLateral />` (Drawer)
|
|
16
|
+
Panel deslizante para menús principales o filtros. Soporta modo "Deslizable" (Swipeable) para móviles.
|
|
17
|
+
|
|
18
|
+
| Propiedad | Tipo | Descripción |
|
|
19
|
+
| :--- | :--- | :--- |
|
|
20
|
+
| `abierto` | `boolean` | Controla la visibilidad. |
|
|
21
|
+
| `anclaje` | `'left' \| 'right'` | Lado de aparición. |
|
|
22
|
+
| `deslizable` | `boolean` | Activa soporte táctil (SwipeableDrawer). |
|
|
23
|
+
| `ancho` | `number \| string` | Ancho del panel (default: 280). |
|
|
24
|
+
| `cabecera` | `ReactNode` | Contenido superior fijo (Logo, Título). |
|
|
25
|
+
| `pie` | `ReactNode` | Contenido inferior fijo. |
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
<CodeplexCajonLateral
|
|
29
|
+
abierto={open}
|
|
30
|
+
anclaje="left"
|
|
31
|
+
cabecera={<Logo />}
|
|
32
|
+
pie={<LogOutButton />}
|
|
33
|
+
>
|
|
34
|
+
<ListaMenu />
|
|
35
|
+
</CodeplexCajonLateral>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### `<CodeplexNavegacionInferior />` (Bottom Nav)
|
|
39
|
+
Barra de pestañas inferior, el estándar para apps móviles.
|
|
40
|
+
|
|
41
|
+
| Propiedad | Descripción |
|
|
42
|
+
| :--- | :--- |
|
|
43
|
+
| `elementos` | Array `{ etiqueta, icono, valor }`. |
|
|
44
|
+
| `fijo` | `boolean`. Fija la barra al fondo de la pantalla (`position: fixed`). |
|
|
45
|
+
| `conPapel` | `boolean`. Añade elevación y fondo (Paper). |
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## 📍 Ubicación y Flujo
|
|
50
|
+
|
|
51
|
+
### `<CodeplexMigasPan />` (Breadcrumbs)
|
|
52
|
+
Muestra la ruta actual. Añade automáticamente un icono de "Inicio" si se define `rutaInicio`.
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
<CodeplexMigasPan
|
|
56
|
+
rutaInicio="/"
|
|
57
|
+
elementos={[
|
|
58
|
+
{ etiqueta: 'Configuración', href: '/settings' },
|
|
59
|
+
{ etiqueta: 'Perfil', href: '/settings/profile' }, // Último activo
|
|
60
|
+
]}
|
|
61
|
+
/>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### `<CodeplexPasos />` (Stepper)
|
|
65
|
+
Ideal para wizards o formularios largos.
|
|
66
|
+
|
|
67
|
+
| Propiedad | Descripción |
|
|
68
|
+
| :--- | :--- |
|
|
69
|
+
| `pasos` | Array `{ etiqueta, leyenda, opcional, error, completado }`. |
|
|
70
|
+
| `pasoActivo` | Índice del paso actual (0-based). |
|
|
71
|
+
| `noLineal` | `boolean`. Permite saltar entre pasos haciendo clic. |
|
|
72
|
+
| `etiquetaAlternativa` | `boolean`. Pone los textos debajo de los círculos. |
|
|
73
|
+
|
|
74
|
+
### `<CodeplexPaginacion />`
|
|
75
|
+
Navegación entre páginas de datos.
|
|
76
|
+
|
|
77
|
+
| Propiedad | Descripción |
|
|
78
|
+
| :--- | :--- |
|
|
79
|
+
| `total` | Número total de páginas (`count`). |
|
|
80
|
+
| `pagina` | Página actual. |
|
|
81
|
+
| `centrado` | `boolean`. Centra horizontalmente el paginador. |
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## 🔗 Interacción
|
|
86
|
+
|
|
87
|
+
### `<CodeplexPestanas />` (Tabs)
|
|
88
|
+
Organización de contenido en pestañas.
|
|
89
|
+
|
|
90
|
+
| Propiedad | Descripción |
|
|
91
|
+
| :--- | :--- |
|
|
92
|
+
| `elementos` | Array `{ etiqueta, valor, icono, disabled }`. |
|
|
93
|
+
| `valor` | Valor de la pestaña activa. |
|
|
94
|
+
| `centrado` | `boolean`. Centra las pestañas en el contenedor. |
|
|
95
|
+
|
|
96
|
+
### `<CodeplexEnlace />` (Link)
|
|
97
|
+
Enlace estilizado estándar.
|
|
98
|
+
|
|
99
|
+
| Propiedad | Descripción |
|
|
100
|
+
| :--- | :--- |
|
|
101
|
+
| `subrayado` | `'none' \| 'hover' \| 'always'`. |
|
|
102
|
+
| `componente` | Permite cambiar el nodo raíz (útil para `react-router-dom Link`). |
|
|
103
|
+
|
|
104
|
+
```tsx
|
|
105
|
+
<CodeplexEnlace componente={RouterLink} to="/home">
|
|
106
|
+
Ir al Inicio
|
|
107
|
+
</CodeplexEnlace>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### `<CodeplexMarcacionRapida />` (Speed Dial)
|
|
111
|
+
Botón flotante (FAB) que despliega acciones secundarias.
|
|
112
|
+
|
|
113
|
+
| Propiedad | Descripción |
|
|
114
|
+
| :--- | :--- |
|
|
115
|
+
| `acciones` | Array `{ icono, tituloTooltip, alHacerClick }`. |
|
|
116
|
+
| `direction` | Dirección de apertura (`up`, `down`, `left`, `right`). |
|
|
117
|
+
|
|
118
|
+
### `<CodeplexMenu />`
|
|
119
|
+
Menú emergente estándar (Dropdown).
|
|
120
|
+
|
|
121
|
+
| Propiedad | Descripción |
|
|
122
|
+
| :--- | :--- |
|
|
123
|
+
| `elementos` | Array `{ etiqueta, icono, alHacerClick }`. |
|
|
124
|
+
| `elementoAnclaje` | Elemento HTML al que se pega el menú. |
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
## 🎨 Patrones Comunes
|
|
129
|
+
|
|
130
|
+
### Navegación Móvil Fija
|
|
131
|
+
Para crear una app móvil con barra inferior fija:
|
|
132
|
+
```tsx
|
|
133
|
+
<CodeplexNavegacionInferior
|
|
134
|
+
fijo
|
|
135
|
+
valor={pestana}
|
|
136
|
+
alCambiar={(_, v) => setPestana(v)}
|
|
137
|
+
elementos={[
|
|
138
|
+
{ label: 'Inicio', valor: 'home', icon: <HomeIcon /> },
|
|
139
|
+
{ label: 'Perfil', valor: 'profile', icon: <PersonIcon /> }
|
|
140
|
+
]}
|
|
141
|
+
/>
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
### Wizard de Registro
|
|
145
|
+
```tsx
|
|
146
|
+
<CodeplexPasos
|
|
147
|
+
pasoActivo={paso}
|
|
148
|
+
etiquetaAlternativa
|
|
149
|
+
pasos={[
|
|
150
|
+
{ etiqueta: 'Cuenta', leyenda: 'Datos de acceso' },
|
|
151
|
+
{ etiqueta: 'Perfil', opcional: true },
|
|
152
|
+
{ etiqueta: 'Confirmación' }
|
|
153
|
+
]}
|
|
154
|
+
/>
|
|
155
|
+
```
|