mobile-design 0.1.0 → 0.1.1
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/COMPONENTS.md +3776 -0
- package/README.md +1257 -6
- package/package.json +3 -2
package/COMPONENTS.md
ADDED
|
@@ -0,0 +1,3776 @@
|
|
|
1
|
+
# Componentes de Mobile Design
|
|
2
|
+
|
|
3
|
+
Los ejemplos son componentes de pantalla que puedes montar bajo el proveedor de la guía de instalación. Importan desde `mobile-design/react-native`. Para un archivo específico del navegador, sustituye esa entrada por `mobile-design/react-native-web`. Las propiedades que requieren un valor de entrada llevan la marca **requerida**. La columna Inicial recoge valores explícitos del componente, y **—** indica que la tabla no fija un valor inicial. Los tipos exportados contienen también las propiedades heredadas del host.
|
|
4
|
+
|
|
5
|
+
- [Acciones y botones](#acciones-y-botones). Button, IconButton, ButtonGroup, SegmentedButtons, SplitButton, FAB, FAB.Extended, FAB.Menu.
|
|
6
|
+
- [Campos y selección](#campos-y-selección). TextField, Select, Autocomplete, Checkbox, RadioButton, Switch, Slider y RangeSlider, DatePicker y DockedDatePicker, TimePicker.
|
|
7
|
+
- [Navegación y búsqueda](#navegación-y-búsqueda). TopAppBar, NavigationBar, NavigationRail, NavigationDrawer, Tabs y TabsPager, Searchbar y SearchView, Toolbar.
|
|
8
|
+
- [Contenido y tipografía](#contenido-y-tipografía). Text, Badge y BadgedBox, Card, Carousel, Chip, Divider, List.
|
|
9
|
+
- [Superficies y ayuda](#superficies-y-ayuda). Menu, Dialog y FullScreenDialog, BottomSheet, SideSheet, Snackbar, Tooltip y RichTooltip.
|
|
10
|
+
- [Carga y progreso](#carga-y-progreso). LoadingIndicator y PullToRefresh, ProgressIndicator.
|
|
11
|
+
|
|
12
|
+
### Acciones y botones
|
|
13
|
+
|
|
14
|
+
#### Button
|
|
15
|
+
|
|
16
|
+
Ayuda a completar tareas con acciones claras. Default ejecuta una acción. Toggle representa un estado seleccionado controlado.
|
|
17
|
+
|
|
18
|
+
- Define variant, size y shape según la jerarquía de la acción. Children contiene su etiqueta.
|
|
19
|
+
- Usa onPress para un comando. Para Toggle, controla selected desde la pantalla.
|
|
20
|
+
- loading=true muestra el progreso circular. Para una espera breve, loading también acepta un renderer que recibe size y color para componer LoadingIndicator. Ambos bloquean las pulsaciones repetidas.
|
|
21
|
+
|
|
22
|
+
El estado controlado se distingue por la presencia de `selected`. Conserva `pressed` para reflejar una superficie anclada que sigue abierta. En web puedes proporcionar `href` y `hrefAttrs` para obtener un enlace. En Android e iOS ejecuta la navegación en `onPress`.
|
|
23
|
+
|
|
24
|
+
**Propiedades de `Button`**
|
|
25
|
+
|
|
26
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
27
|
+
| --- | --- | --- | --- |
|
|
28
|
+
| `children` · requerida | `React.ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
29
|
+
| `accessibilityHint` | `string` | — | Contexto adicional sobre la acción. |
|
|
30
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
31
|
+
| `accessibilityState` | `AccessibilityState` | — | Estado semántico del control. |
|
|
32
|
+
| `buttonColor` | `ColorValue` | — | Color personalizado del fondo del botón. |
|
|
33
|
+
| `contentStyle` | `StyleProp<ViewStyle>` | — | Estilo del contenido dentro de la superficie. |
|
|
34
|
+
| `disabled` | `boolean` | `false` | Bloquea la interacción del control. |
|
|
35
|
+
| `hitSlop` | `RectOrSize` | — | Amplía la zona de pulsación más allá de los bordes visibles. La zona queda limitada por su contenedor y respeta el orden visual de los elementos superpuestos. |
|
|
36
|
+
| `href` | `string` | — | Dirección del enlace real en el navegador. |
|
|
37
|
+
| `hrefAttrs` | `{ target?: string; rel?: string; download?: boolean \| string; }` | — | Atributos del enlace web, como `target`, `rel` o `download`. |
|
|
38
|
+
| `icon` | `IconSource` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
39
|
+
| `labelStyle` | `StyleProp<TextStyle>` | — | Estilo aplicado a la etiqueta del botón. |
|
|
40
|
+
| `loading` | `boolean \| ((props: { size: number; color: ColorValue; }) => ReactNode)` | — | Booleano o función que recibe `size` y `color` para representar la carga. Bloquea las pulsaciones repetidas. |
|
|
41
|
+
| `morph` | `boolean` | `true` | Cambia la forma en pulsación y selección. Con `false` conserva la forma de reposo. |
|
|
42
|
+
| `nativeID` | `string` | — | Identificador del control para enlazarlo a contenido accesible. |
|
|
43
|
+
| `onBlur` | `((event: BlurEvent) => void)` | — | Avisa cuando el control pierde el foco. |
|
|
44
|
+
| `onFocus` | `((event: FocusEvent) => void)` | — | Avisa cuando el control recibe el foco. |
|
|
45
|
+
| `onHoverIn` | `((event: MouseEvent) => unknown)` | — | Avisa al entrar el puntero en la superficie. |
|
|
46
|
+
| `onHoverOut` | `((event: MouseEvent) => unknown)` | — | Avisa al salir el puntero de la superficie. |
|
|
47
|
+
| `onLongPress` | `((e: GestureResponderEvent) => void)` | — | Acción que requiere una pulsación mantenida. |
|
|
48
|
+
| `onPress` | `((e: GestureResponderEvent) => void)` | — | Ejecuta la acción al activar el control. |
|
|
49
|
+
| `onPressIn` | `((e: GestureResponderEvent) => void)` | — | Avisa al iniciar una pulsación. |
|
|
50
|
+
| `onPressOut` | `((e: GestureResponderEvent) => void)` | — | Avisa al terminar o salir de una pulsación. |
|
|
51
|
+
| `pressed` | `boolean` | `false` | Conserva la apariencia de pulsación para composiciones coordinadas. |
|
|
52
|
+
| `ref` | `Ref<default>` | — | Referencia imperativa con las operaciones del componente anfitrión. |
|
|
53
|
+
| `selected` | `boolean` | — | Selección persistente controlada por el consumidor. |
|
|
54
|
+
| `shape` | `"round" \| "square"` | `'round'` | Forma visual de la superficie. |
|
|
55
|
+
| `size` | `"extra-small" \| "small" \| "medium" \| "large" \| "extra-large"` | `'small'` | Tamaño visual o escala semántica del control. |
|
|
56
|
+
| `style` | `Animated.WithAnimatedValue<StyleProp<ViewStyle>>` | — | Estilo de la superficie exterior. |
|
|
57
|
+
| `testID` | `string` | `'mobile-button'` | Identificador para automatización en el host. |
|
|
58
|
+
| `textColor` | `ColorValue` | — | Color personalizado del texto del botón. |
|
|
59
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
60
|
+
| `uppercase` | `boolean` | `false` | Convierte la etiqueta a mayúsculas cuando el contenido es texto. |
|
|
61
|
+
| `variant` | `"filled" \| "tonal" \| "elevated" \| "outlined" \| "text"` | `'filled'` | Tratamiento visual o modalidad del componente. |
|
|
62
|
+
|
|
63
|
+
**Ejemplo**
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
import { useState } from 'react';
|
|
67
|
+
import { Button, MaterialSymbol } from 'mobile-design/react-native';
|
|
68
|
+
|
|
69
|
+
export default function Example() {
|
|
70
|
+
const [saved, setSaved] = useState(false);
|
|
71
|
+
|
|
72
|
+
return (
|
|
73
|
+
<Button
|
|
74
|
+
variant="filled"
|
|
75
|
+
size="medium"
|
|
76
|
+
shape="round"
|
|
77
|
+
selected={saved}
|
|
78
|
+
icon={(props) => (
|
|
79
|
+
<MaterialSymbol
|
|
80
|
+
{...props}
|
|
81
|
+
name="bookmark"
|
|
82
|
+
filled={saved}
|
|
83
|
+
/>
|
|
84
|
+
)}
|
|
85
|
+
onPress={() => setSaved((value) => !value)}
|
|
86
|
+
>
|
|
87
|
+
{saved ? 'Guardado' : 'Guardar'}
|
|
88
|
+
</Button>
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
#### IconButton
|
|
94
|
+
|
|
95
|
+
Representa acciones reconocibles mediante iconos. Puede ejecutar un comando o alternar un estado seleccionado.
|
|
96
|
+
|
|
97
|
+
- Define icon y accessibilityLabel. SizeClass controla la escala completa. Size heredado puede personalizar el glifo. Usa MaterialSymbol para controlar su relleno.
|
|
98
|
+
- Default omite selected. Toggle recibe selected y lo actualiza en onPress. Mode="contained" corresponde a Filled, contained-tonal a Tonal, outlined a Outlined. Omitir mode corresponde a Standard.
|
|
99
|
+
|
|
100
|
+
El componente usa `mode` y `sizeClass`. `mode="contained"` aplica Filled, `contained-tonal` aplica Tonal, `outlined` aplica el contorno y omitirlo aplica Standard. El objetivo táctil no se deduce del tamaño del glifo.
|
|
101
|
+
|
|
102
|
+
**Propiedades de `IconButton`**
|
|
103
|
+
|
|
104
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
105
|
+
| --- | --- | --- | --- |
|
|
106
|
+
| `icon` · requerida | `IconSource` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
107
|
+
| `accessibilityHint` | `string` | — | Contexto adicional sobre la acción. |
|
|
108
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
109
|
+
| `accessibilityState` | `AccessibilityState` | — | Estado semántico del control. |
|
|
110
|
+
| `containerColor` | `ColorValue` | — | Color de la superficie del control. |
|
|
111
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
112
|
+
| `iconColor` | `ColorValue` | — | Color del icono. |
|
|
113
|
+
| `loading` | `boolean` | — | Muestra el estado de carga y bloquea nuevas pulsaciones. |
|
|
114
|
+
| `mode` | `IconButtonMode` | — | Modo de uso admitido por este componente. |
|
|
115
|
+
| `morph` | `boolean` | — | Con `false` conserva la forma de reposo y mantiene la respuesta de pulsación. |
|
|
116
|
+
| `nativeID` | `string` | — | Identificador del control para enlazarlo a contenido accesible. |
|
|
117
|
+
| `onPress` | `(((event: GestureResponderEvent) => unknown) & ((e: GestureResponderEvent) => void) & ((e: GestureResponderEvent) => void))` | — | Ejecuta la acción al activar el control. |
|
|
118
|
+
| `pressed` | `boolean` | — | Conserva la apariencia de pulsación para composiciones coordinadas. |
|
|
119
|
+
| `ref` | `Ref<default>` | — | Referencia imperativa con las operaciones del componente anfitrión. |
|
|
120
|
+
| `selected` | `boolean` | — | Selección persistente controlada por el consumidor. |
|
|
121
|
+
| `shape` | `"round" \| "square"` | `'round'` | Forma visual de la superficie. |
|
|
122
|
+
| `size` | `number` | — | Tamaño visual o escala semántica del control. |
|
|
123
|
+
| `sizeClass` | `ButtonSize` | `'small'` | Escala del botón, incluido el contenedor y el objetivo de interacción. |
|
|
124
|
+
| `style` | `Animated.WithAnimatedValue<StyleProp<ViewStyle>>` | — | Estilo de la superficie exterior. |
|
|
125
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
126
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
127
|
+
| `widthVariant` | `"narrow" \| "default" \| "wide"` | `'default'` | Proporción del botón de icono. |
|
|
128
|
+
|
|
129
|
+
**Ejemplo**
|
|
130
|
+
|
|
131
|
+
```tsx
|
|
132
|
+
import { useState } from 'react';
|
|
133
|
+
import {
|
|
134
|
+
IconButton,
|
|
135
|
+
MaterialSymbol,
|
|
136
|
+
Tooltip,
|
|
137
|
+
} from 'mobile-design/react-native';
|
|
138
|
+
|
|
139
|
+
export default function Example() {
|
|
140
|
+
const [favorite, setFavorite] = useState(false);
|
|
141
|
+
const label = favorite ? 'Quitar de favoritos' : 'Añadir a favoritos';
|
|
142
|
+
|
|
143
|
+
return (
|
|
144
|
+
<Tooltip title={label}>
|
|
145
|
+
<IconButton
|
|
146
|
+
icon={(props) => (
|
|
147
|
+
<MaterialSymbol
|
|
148
|
+
{...props}
|
|
149
|
+
name="favorite"
|
|
150
|
+
filled={favorite}
|
|
151
|
+
/>
|
|
152
|
+
)}
|
|
153
|
+
accessibilityLabel="Favorito"
|
|
154
|
+
mode="contained-tonal"
|
|
155
|
+
selected={favorite}
|
|
156
|
+
sizeClass="small"
|
|
157
|
+
shape="round"
|
|
158
|
+
widthVariant="default"
|
|
159
|
+
onPress={() => setFavorite((value) => !value)}
|
|
160
|
+
/>
|
|
161
|
+
</Tooltip>
|
|
162
|
+
);
|
|
163
|
+
}
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
#### ButtonGroup
|
|
167
|
+
|
|
168
|
+
Reúne acciones relacionadas o alternativas de selección. Standard redistribuye el espacio al pulsar. Connected mantiene el grupo unido.
|
|
169
|
+
|
|
170
|
+
- Define items con value estable y label. Usa onPress por ítem para comandos.
|
|
171
|
+
- Para selección, controla selectionMode, value y onValueChange.
|
|
172
|
+
|
|
173
|
+
Cada ítem puede tener icono y `selectedIcon`. `maxVisibleItems` limita cuántos se muestran y el resto aparece en el menú. Con selección múltiple el valor es un arreglo de claves.
|
|
174
|
+
|
|
175
|
+
**Propiedades de `ButtonGroup`**
|
|
176
|
+
|
|
177
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
178
|
+
| --- | --- | --- | --- |
|
|
179
|
+
| `items` · requerida | `readonly ButtonGroupItem[]` | — | Elementos del conjunto. Usa identificadores únicos y estables. |
|
|
180
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
181
|
+
| `allowEmptySelection` | `boolean` | `false` | Permite que un conjunto seleccionable quede sin opciones activas. |
|
|
182
|
+
| `buttonVariant` | `ButtonVariant` | `'tonal'` | Tratamiento de los botones individuales. |
|
|
183
|
+
| `density` | `0 \| -1 \| -2 \| -3` | `0` | Ajuste de densidad de los controles. |
|
|
184
|
+
| `disabled` | `boolean` | `false` | Bloquea la interacción del control. |
|
|
185
|
+
| `expandedRatio` | `number` | `0.15` | Fracción de crecimiento al pulsar en un grupo estándar. Con `0` el ancho se mantiene fijo. |
|
|
186
|
+
| `fullWidth` | `boolean` | — | Distribuye el grupo a lo ancho del contenedor. |
|
|
187
|
+
| `maxVisibleItems` | `number` | — | Limita los elementos directos y mueve el resto al menú. |
|
|
188
|
+
| `onValueChange` | `((value: string \| string[]) => void)` | — | Entrega el siguiente valor para actualizar el estado del consumidor. |
|
|
189
|
+
| `overflowAccessibilityLabel` | `string` | `'Más opciones'` | Nombre accesible para abrir las opciones restantes. |
|
|
190
|
+
| `selectionMode` | `"none" \| "single" \| "multiple"` | — | Define si la selección es inexistente, única o múltiple. |
|
|
191
|
+
| `shape` | `"round" \| "square"` | `'round'` | Forma visual de la superficie. |
|
|
192
|
+
| `showSelectedIcon` | `boolean` | `true` | Muestra el icono de selección en opciones activas. |
|
|
193
|
+
| `size` | `"extra-small" \| "small" \| "medium" \| "large" \| "extra-large"` | `'small'` | Tamaño visual o escala semántica del control. |
|
|
194
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
195
|
+
| `testID` | `string` | `'mobile-button-group'` | Identificador para automatización en el host. |
|
|
196
|
+
| `value` | `string \| readonly string[]` | — | Valor actual controlado por la pantalla. |
|
|
197
|
+
| `variant` | `"standard" \| "connected"` | `'standard'` | Tratamiento visual o modalidad del componente. |
|
|
198
|
+
|
|
199
|
+
<details>
|
|
200
|
+
<summary>Configuración complementaria de ButtonGroup</summary>
|
|
201
|
+
|
|
202
|
+
**`ButtonGroupItem`**
|
|
203
|
+
|
|
204
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
205
|
+
| --- | --- | --- | --- |
|
|
206
|
+
| `label` · requerida | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
207
|
+
| `value` · requerida | `string` | — | Valor actual controlado por la pantalla. |
|
|
208
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
209
|
+
| `buttonColor` | `ColorValue` | — | Color de fondo personalizado de esta opción. |
|
|
210
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
211
|
+
| `icon` | `any` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
212
|
+
| `onPress` | `(() => void)` | — | Ejecuta la acción al activar el control. |
|
|
213
|
+
| `selectionMode` | `"none"` | — | Define si la selección es inexistente, única o múltiple. |
|
|
214
|
+
| `shape` | `"round" \| "square"` | — | Forma visual de la superficie. |
|
|
215
|
+
| `size` | `"small" \| "medium" \| "large" \| "extra-small" \| "extra-large"` | — | Tamaño visual o escala semántica del control. |
|
|
216
|
+
| `textColor` | `ColorValue` | — | Color de texto personalizado de esta opción. |
|
|
217
|
+
| `variant` | `"filled" \| "tonal" \| "elevated" \| "outlined" \| "text"` | — | Tratamiento visual o modalidad del componente. |
|
|
218
|
+
| `weight` | `number` | — | Proporción de espacio asignada al elemento cuando el grupo ocupa todo el ancho. El tamaño del contenido fija el mínimo. |
|
|
219
|
+
| `widthVariant` | `"narrow" \| "default" \| "wide"` | — | Proporción del botón de icono. |
|
|
220
|
+
|
|
221
|
+
</details>
|
|
222
|
+
|
|
223
|
+
**Ejemplo**
|
|
224
|
+
|
|
225
|
+
```tsx
|
|
226
|
+
import { useState } from 'react';
|
|
227
|
+
import { ButtonGroup } from 'mobile-design/react-native';
|
|
228
|
+
|
|
229
|
+
export default function Example() {
|
|
230
|
+
const [value, setValue] = useState<string | string[]>('week');
|
|
231
|
+
|
|
232
|
+
return (
|
|
233
|
+
<ButtonGroup
|
|
234
|
+
variant="connected"
|
|
235
|
+
selectionMode="single"
|
|
236
|
+
accessibilityLabel="Intervalo del calendario"
|
|
237
|
+
value={value}
|
|
238
|
+
onValueChange={setValue}
|
|
239
|
+
items={[
|
|
240
|
+
{ value: 'day', label: 'Día' },
|
|
241
|
+
{ value: 'week', label: 'Semana' },
|
|
242
|
+
{ value: 'month', label: 'Mes' },
|
|
243
|
+
]}
|
|
244
|
+
/>
|
|
245
|
+
);
|
|
246
|
+
}
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
#### SegmentedButtons
|
|
250
|
+
|
|
251
|
+
Permite elegir una o varias alternativas de un conjunto pequeño y relacionado.
|
|
252
|
+
|
|
253
|
+
- Usa opciones con valores únicos y el mismo tratamiento visual para etiquetas e iconos.
|
|
254
|
+
- Controla value y onValueChange. Single-select recibe un valor. MultiSelect recibe un array.
|
|
255
|
+
|
|
256
|
+
**Propiedades de `SegmentedButtons`**
|
|
257
|
+
|
|
258
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
259
|
+
| --- | --- | --- | --- |
|
|
260
|
+
| `buttons` · requerida | `SegmentedButtonOption<T>[]` | — | Opciones de segmentación con claves únicas. |
|
|
261
|
+
| `onValueChange` · requerida | `((value: T) => void) \| ((value: T[]) => void)` | — | Entrega el siguiente valor para actualizar el estado del consumidor. |
|
|
262
|
+
| `value` · requerida | `T \| T[]` | — | Valor actual controlado por la pantalla. |
|
|
263
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
264
|
+
| `density` | `"small" \| "medium" \| "regular" \| "high"` | — | Ajuste de densidad de los controles. |
|
|
265
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
266
|
+
| `multiSelect` | `boolean` | — | Permite seleccionar varios valores y usar un arreglo de claves. |
|
|
267
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
268
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
269
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
270
|
+
|
|
271
|
+
<details>
|
|
272
|
+
<summary>Configuración complementaria de SegmentedButtons</summary>
|
|
273
|
+
|
|
274
|
+
**`SegmentedButtonOption`**
|
|
275
|
+
|
|
276
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
277
|
+
| --- | --- | --- | --- |
|
|
278
|
+
| `value` · requerida | `T` | — | Valor actual controlado por la pantalla. |
|
|
279
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
280
|
+
| `checkedColor` | `string` | — | Color del contenido de la opción seleccionada. |
|
|
281
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
282
|
+
| `icon` | `any` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
283
|
+
| `label` | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
284
|
+
| `labelStyle` | `StyleProp<TextStyle>` | — | Estilo aplicado a la etiqueta de esta opción. |
|
|
285
|
+
| `onPress` | `((event: GestureResponderEvent) => void)` | — | Ejecuta la acción al activar el control. |
|
|
286
|
+
| `showSelectedCheck` | `boolean` | — | Muestra una marca al seleccionar la opción. |
|
|
287
|
+
| `uncheckedColor` | `string` | — | Color del contenido de la opción sin seleccionar. |
|
|
288
|
+
|
|
289
|
+
</details>
|
|
290
|
+
|
|
291
|
+
**Ejemplo**
|
|
292
|
+
|
|
293
|
+
```tsx
|
|
294
|
+
import { useState } from 'react';
|
|
295
|
+
import { SegmentedButtons } from 'mobile-design/react-native';
|
|
296
|
+
|
|
297
|
+
export default function Example() {
|
|
298
|
+
const [value, setValue] = useState('walk');
|
|
299
|
+
|
|
300
|
+
return (
|
|
301
|
+
<SegmentedButtons
|
|
302
|
+
value={value}
|
|
303
|
+
onValueChange={setValue}
|
|
304
|
+
buttons={[
|
|
305
|
+
{ value: 'walk', label: 'A pie', icon: 'walk' },
|
|
306
|
+
{ value: 'car', label: 'Auto', icon: 'car-outline' },
|
|
307
|
+
]}
|
|
308
|
+
/>
|
|
309
|
+
);
|
|
310
|
+
}
|
|
311
|
+
```
|
|
312
|
+
|
|
313
|
+
#### SplitButton
|
|
314
|
+
|
|
315
|
+
Combina una acción directa con un menú de opciones relacionadas. Cada región conserva su función independiente.
|
|
316
|
+
|
|
317
|
+
- Define label, icon opcional y onPress para el comando principal. Las actions contienen alternativas relacionadas con key, label y onPress.
|
|
318
|
+
- La mitad principal admite texto, icono o ambos. Conserva un nombre accesible explícito si no hay texto. Expanded/onExpandedChange permiten coordinar el menú.
|
|
319
|
+
|
|
320
|
+
**Propiedades de `SplitButton`**
|
|
321
|
+
|
|
322
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
323
|
+
| --- | --- | --- | --- |
|
|
324
|
+
| `actions` · requerida | `readonly SplitButtonAction[]` | — | Acciones relacionadas de la composición. |
|
|
325
|
+
| `label` · requerida | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
326
|
+
| `onPress` · requerida | `() => void` | — | Ejecuta la acción al activar el control. |
|
|
327
|
+
| `disabled` | `boolean` | `false` | Bloquea la interacción del control. |
|
|
328
|
+
| `expanded` | `boolean` | — | Estado controlado de expansión. |
|
|
329
|
+
| `icon` | `any` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
330
|
+
| `menuAccessibilityLabel` | `string` | `'Más acciones'` | Nombre accesible del disparador que abre el menú. |
|
|
331
|
+
| `onExpandedChange` | `((expanded: boolean) => void)` | — | Recibe el siguiente estado de expansión. |
|
|
332
|
+
| `primaryAccessibilityLabel` | `string` | — | Nombre accesible de la acción principal. |
|
|
333
|
+
| `scrollIndicators` | `ScrollIndicatorOptions` | — | Configura los indicadores de desplazamiento del paquete. |
|
|
334
|
+
| `size` | `"extra-small" \| "small" \| "medium" \| "large" \| "extra-large"` | `'small'` | Tamaño visual o escala semántica del control. |
|
|
335
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
336
|
+
| `testID` | `string` | `'mobile-split-button'` | Identificador para automatización en el host. |
|
|
337
|
+
| `variant` | `"filled" \| "tonal" \| "elevated" \| "outlined"` | `'filled'` | Tratamiento visual o modalidad del componente. |
|
|
338
|
+
|
|
339
|
+
<details>
|
|
340
|
+
<summary>Configuración complementaria de SplitButton</summary>
|
|
341
|
+
|
|
342
|
+
**`SplitButtonAction`**
|
|
343
|
+
|
|
344
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
345
|
+
| --- | --- | --- | --- |
|
|
346
|
+
| `key` · requerida | `string` | — | Identificador único y estable dentro del conjunto. |
|
|
347
|
+
| `label` · requerida | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
348
|
+
| `onPress` · requerida | `() => void` | — | Ejecuta la acción al activar el control. |
|
|
349
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
350
|
+
| `icon` | `any` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
351
|
+
| `selected` | `boolean` | — | Selección persistente controlada por el consumidor. |
|
|
352
|
+
|
|
353
|
+
</details>
|
|
354
|
+
|
|
355
|
+
**Ejemplo**
|
|
356
|
+
|
|
357
|
+
```tsx
|
|
358
|
+
import { useState } from 'react';
|
|
359
|
+
import { View } from 'react-native';
|
|
360
|
+
import { SplitButton, MaterialSymbol, Text } from 'mobile-design/react-native';
|
|
361
|
+
|
|
362
|
+
export default function Example() {
|
|
363
|
+
const [feedback, setFeedback] = useState('');
|
|
364
|
+
|
|
365
|
+
return (
|
|
366
|
+
<View style={{ gap: 16 }}>
|
|
367
|
+
<SplitButton
|
|
368
|
+
label="Enviar"
|
|
369
|
+
icon={(props: { size: number; color: string }) => (
|
|
370
|
+
<MaterialSymbol
|
|
371
|
+
{...props}
|
|
372
|
+
name="send"
|
|
373
|
+
filled
|
|
374
|
+
/>
|
|
375
|
+
)}
|
|
376
|
+
onPress={() => setFeedback('Mensaje enviado')}
|
|
377
|
+
menuAccessibilityLabel="Más opciones de envío"
|
|
378
|
+
actions={[
|
|
379
|
+
{
|
|
380
|
+
key: 'later',
|
|
381
|
+
label: 'Programar envío',
|
|
382
|
+
icon: 'clock-outline',
|
|
383
|
+
onPress: () => setFeedback('Programar envío'),
|
|
384
|
+
},
|
|
385
|
+
{
|
|
386
|
+
key: 'draft',
|
|
387
|
+
label: 'Guardar borrador',
|
|
388
|
+
icon: 'content-save-outline',
|
|
389
|
+
onPress: () => setFeedback('Borrador guardado'),
|
|
390
|
+
},
|
|
391
|
+
]}
|
|
392
|
+
/>
|
|
393
|
+
<Text accessibilityLiveRegion="polite">{feedback}</Text>
|
|
394
|
+
</View>
|
|
395
|
+
);
|
|
396
|
+
}
|
|
397
|
+
```
|
|
398
|
+
|
|
399
|
+
#### FAB
|
|
400
|
+
|
|
401
|
+
Da presencia a la acción principal de la pantalla mediante una superficie flotante y un único icono.
|
|
402
|
+
|
|
403
|
+
- Define icon, accessibilityLabel y onPress para la acción principal. MaterialSymbol permite elegir el relleno del glifo.
|
|
404
|
+
- El host controla visible, posición e insets. Size y variant seleccionan tamaño y par de colores semánticos. Añade Tooltip para explicar la acción al pasar el puntero o enfocar.
|
|
405
|
+
|
|
406
|
+
**Propiedades de `FAB`**
|
|
407
|
+
|
|
408
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
409
|
+
| --- | --- | --- | --- |
|
|
410
|
+
| `icon` · requerida | `any` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
411
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
412
|
+
| `accessibilityState` | `AccessibilityState` | — | Estado semántico del control. |
|
|
413
|
+
| `aria-describedby` | `string` | — | Identificador del texto que complementa el nombre accesible en navegador. |
|
|
414
|
+
| `aria-haspopup` | `"menu"` | — | Identifica un FAB que abre un menú en el árbol accesible web. |
|
|
415
|
+
| `background` | `PressableAndroidRippleConfig` | — | Superficie personalizada del FAB. |
|
|
416
|
+
| `containerColor` | `ColorValue` | — | Color de la superficie del control. |
|
|
417
|
+
| `contentColor` | `ColorValue` | — | Color del texto o glifo que aparece sobre la superficie. |
|
|
418
|
+
| `elevation` | `0 \| 1 \| 2 \| 3` | — | Nivel de elevación de la superficie. |
|
|
419
|
+
| `onPress` | `((event: GestureResponderEvent) => void)` | — | Ejecuta la acción al activar el control. |
|
|
420
|
+
| `ref` | `Ref<default>` | — | Referencia imperativa con las operaciones del componente anfitrión. |
|
|
421
|
+
| `size` | `FABSize` | `'default'` | Tamaño visual o escala semántica del control. |
|
|
422
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
423
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
424
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
425
|
+
| `variant` | `"primary" \| "secondary" \| "tertiary" \| "tonalPrimary" \| "tonalSecondary" \| "tonalTertiary"` | `'tonalPrimary'` | Tratamiento visual o modalidad del componente. |
|
|
426
|
+
| `visible` | `boolean` | — | Controla si la superficie o el indicador se presenta. |
|
|
427
|
+
|
|
428
|
+
**Ejemplo**
|
|
429
|
+
|
|
430
|
+
```tsx
|
|
431
|
+
import { useState } from 'react';
|
|
432
|
+
import { View } from 'react-native';
|
|
433
|
+
import { FAB, MaterialSymbol, Tooltip, Text } from 'mobile-design/react-native';
|
|
434
|
+
|
|
435
|
+
export default function Example() {
|
|
436
|
+
const [feedback, setFeedback] = useState('');
|
|
437
|
+
|
|
438
|
+
return (
|
|
439
|
+
<View style={{ gap: 16 }}>
|
|
440
|
+
<Tooltip title="Crear lista">
|
|
441
|
+
<FAB
|
|
442
|
+
size="medium"
|
|
443
|
+
variant="tonalPrimary"
|
|
444
|
+
icon={(props: { size: number; color: string }) => (
|
|
445
|
+
<MaterialSymbol
|
|
446
|
+
{...props}
|
|
447
|
+
name="add"
|
|
448
|
+
filled
|
|
449
|
+
/>
|
|
450
|
+
)}
|
|
451
|
+
accessibilityLabel="Crear lista"
|
|
452
|
+
onPress={() => setFeedback('Nueva lista')}
|
|
453
|
+
/>
|
|
454
|
+
</Tooltip>
|
|
455
|
+
<Text accessibilityLiveRegion="polite">{feedback}</Text>
|
|
456
|
+
</View>
|
|
457
|
+
);
|
|
458
|
+
}
|
|
459
|
+
```
|
|
460
|
+
|
|
461
|
+
#### FAB.Extended
|
|
462
|
+
|
|
463
|
+
Destaca la acción principal de una pantalla con una etiqueta que permite entenderla antes de tocar.
|
|
464
|
+
|
|
465
|
+
- Usa FAB.Extended o ExtendedFAB con label e icon opcional. Size default corresponde al tamaño Small.
|
|
466
|
+
- Coloca la acción respetando las áreas seguras y controla expanded/visible.
|
|
467
|
+
- Conecta expanded al scroll para contraer al bajar y expandir al subir. En un rail expandido puede usarse elevation={0}.
|
|
468
|
+
|
|
469
|
+
**Propiedades de `FAB.Extended`**
|
|
470
|
+
|
|
471
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
472
|
+
| --- | --- | --- | --- |
|
|
473
|
+
| `label` · requerida | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
474
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
475
|
+
| `accessibilityState` | `AccessibilityState` | — | Estado semántico del control. |
|
|
476
|
+
| `aria-describedby` | `string` | — | Identificador del texto que complementa el nombre accesible en navegador. |
|
|
477
|
+
| `aria-haspopup` | `"menu"` | — | Identifica un FAB que abre un menú en el árbol accesible web. |
|
|
478
|
+
| `background` | `PressableAndroidRippleConfig` | — | Superficie personalizada del FAB. |
|
|
479
|
+
| `containerColor` | `ColorValue` | — | Color de la superficie del control. |
|
|
480
|
+
| `contentColor` | `ColorValue` | — | Color del texto o glifo que aparece sobre la superficie. |
|
|
481
|
+
| `elevation` | `0 \| 1 \| 2 \| 3` | — | Nivel de elevación de la superficie. |
|
|
482
|
+
| `expanded` | `boolean` | `true` | Estado controlado de expansión. |
|
|
483
|
+
| `icon` | `any` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
484
|
+
| `labelMaxFontSizeMultiplier` | `number` | — | Límite de escalado para la etiqueta. |
|
|
485
|
+
| `onPress` | `((event: GestureResponderEvent) => void)` | — | Ejecuta la acción al activar el control. |
|
|
486
|
+
| `ref` | `Ref<default>` | — | Referencia imperativa con las operaciones del componente anfitrión. |
|
|
487
|
+
| `size` | `FABSize` | `'default'` | Tamaño visual o escala semántica del control. |
|
|
488
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
489
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
490
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
491
|
+
| `variant` | `"primary" \| "secondary" \| "tertiary" \| "tonalPrimary" \| "tonalSecondary" \| "tonalTertiary"` | `'tonalPrimary'` | Tratamiento visual o modalidad del componente. |
|
|
492
|
+
| `visible` | `boolean` | — | Controla si la superficie o el indicador se presenta. |
|
|
493
|
+
|
|
494
|
+
**Ejemplo**
|
|
495
|
+
|
|
496
|
+
```tsx
|
|
497
|
+
import { useState } from 'react';
|
|
498
|
+
import { View } from 'react-native';
|
|
499
|
+
import { FAB, Text } from 'mobile-design/react-native';
|
|
500
|
+
|
|
501
|
+
export default function Example() {
|
|
502
|
+
const [feedback, setFeedback] = useState('');
|
|
503
|
+
|
|
504
|
+
return (
|
|
505
|
+
<View style={{ gap: 16 }}>
|
|
506
|
+
<FAB.Extended
|
|
507
|
+
size="medium"
|
|
508
|
+
icon="pencil-outline"
|
|
509
|
+
label="Crear nota"
|
|
510
|
+
accessibilityLabel="Crear nota"
|
|
511
|
+
onPress={() =>
|
|
512
|
+
setFeedback(
|
|
513
|
+
'Nueva nota. Aquí comienza la tarea principal',
|
|
514
|
+
)
|
|
515
|
+
}
|
|
516
|
+
/>
|
|
517
|
+
<Text accessibilityLiveRegion="polite">{feedback}</Text>
|
|
518
|
+
</View>
|
|
519
|
+
);
|
|
520
|
+
}
|
|
521
|
+
```
|
|
522
|
+
|
|
523
|
+
#### FAB.Menu
|
|
524
|
+
|
|
525
|
+
Expande el FAB para mostrar un conjunto de acciones relacionadas con la tarea principal de la pantalla.
|
|
526
|
+
|
|
527
|
+
- Controla expanded y ciérralo desde onDismiss. Trigger define el FAB y su nombre accesible.
|
|
528
|
+
- Define items relacionados con label, icon y onPress.
|
|
529
|
+
- presentation="expressive" muestra la pila animada en todas las plataformas. La presentación adaptive utiliza el menú baseline en web.
|
|
530
|
+
- Para extender la pila, combina overflow="scroll" con maxHeight.
|
|
531
|
+
|
|
532
|
+
**Propiedades de `FAB.Menu`**
|
|
533
|
+
|
|
534
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
535
|
+
| --- | --- | --- | --- |
|
|
536
|
+
| `expanded` · requerida | `boolean` | — | Estado controlado de expansión. |
|
|
537
|
+
| `items` · requerida | `TwoToSix<FABMenuItemProps> \| readonly FABMenuItemProps[]` | — | Elementos del conjunto. Usa identificadores únicos y estables. |
|
|
538
|
+
| `onDismiss` · requerida | `() => void` | — | Solicita cerrar la superficie. |
|
|
539
|
+
| `trigger` · requerida | `FABMenuTriggerProps` | — | Configuración de la acción que abre el menú flotante. |
|
|
540
|
+
| `backAccessibilityLabel` | `string` | — | Nombre accesible de la acción para volver. |
|
|
541
|
+
| `backLabel` | `string` | — | Etiqueta visible para volver del submenú. |
|
|
542
|
+
| `closeAccessibilityLabel` | `string` | — | Nombre accesible del cierre. |
|
|
543
|
+
| `closeIcon` | `any` | — | Glifo de cierre. |
|
|
544
|
+
| `maxHeight` | `number` | — | Altura máxima del contenido. |
|
|
545
|
+
| `overflow` | `"scroll"` | — | Comportamiento cuando el contenido supera el espacio disponible. |
|
|
546
|
+
| `presentation` | `"adaptive" \| "expressive"` | — | Modo de presentación visual o colocación. |
|
|
547
|
+
| `scrollDownAccessibilityLabel` | `string` | — | Nombre accesible de la acción para desplazar hacia abajo. |
|
|
548
|
+
| `scrollIndicators` | `ScrollIndicatorOptions` | — | Configura los indicadores de desplazamiento del paquete. |
|
|
549
|
+
| `scrollUpAccessibilityLabel` | `string` | — | Nombre accesible de la acción para desplazar hacia arriba. |
|
|
550
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
551
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
552
|
+
|
|
553
|
+
<details>
|
|
554
|
+
<summary>Configuración complementaria de FAB.Menu</summary>
|
|
555
|
+
|
|
556
|
+
**`FABMenuItemProps`**
|
|
557
|
+
|
|
558
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
559
|
+
| --- | --- | --- | --- |
|
|
560
|
+
| `label` · requerida | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
561
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
562
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
563
|
+
| `icon` | `any` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
564
|
+
| `items` | `readonly FABMenuItemProps[]` | — | Elementos del conjunto. Usa identificadores únicos y estables. |
|
|
565
|
+
| `key` | `string` | — | Clave estable del elemento aunque se edite o traduzca su submenú. |
|
|
566
|
+
| `onPress` | `((event: GestureResponderEvent) => void)` | — | Ejecuta la acción al activar el control. |
|
|
567
|
+
|
|
568
|
+
**`FABMenuTriggerProps`**
|
|
569
|
+
|
|
570
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
571
|
+
| --- | --- | --- | --- |
|
|
572
|
+
| `icon` · requerida | `any` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
573
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
574
|
+
| `accessibilityState` | `AccessibilityState` | — | Estado semántico del control. |
|
|
575
|
+
| `aria-describedby` | `string` | — | Identificador del texto que complementa el nombre accesible en navegador. |
|
|
576
|
+
| `aria-haspopup` | `"menu"` | — | Identifica un FAB que abre un menú en el árbol accesible web. |
|
|
577
|
+
| `background` | `PressableAndroidRippleConfig` | — | Superficie personalizada del FAB. |
|
|
578
|
+
| `containerColor` | `ColorValue` | — | Color de la superficie del control. |
|
|
579
|
+
| `contentColor` | `ColorValue` | — | Color del texto o glifo que aparece sobre la superficie. |
|
|
580
|
+
| `elevation` | `0 \| 1 \| 3 \| 2` | — | Nivel de elevación de la superficie. |
|
|
581
|
+
| `onPress` | `((event: GestureResponderEvent) => void)` | — | Ejecuta la acción al activar el control. |
|
|
582
|
+
| `size` | `FABSize` | — | Tamaño visual o escala semántica del control. |
|
|
583
|
+
| `variant` | `"primary" \| "secondary" \| "tertiary" \| "tonalPrimary" \| "tonalSecondary" \| "tonalTertiary"` | — | Tratamiento visual o modalidad del componente. |
|
|
584
|
+
| `visible` | `boolean` | — | Controla si la superficie o el indicador se presenta. |
|
|
585
|
+
|
|
586
|
+
</details>
|
|
587
|
+
|
|
588
|
+
**Ejemplo**
|
|
589
|
+
|
|
590
|
+
```tsx
|
|
591
|
+
import { useState } from 'react';
|
|
592
|
+
import { View } from 'react-native';
|
|
593
|
+
import { FAB, Text } from 'mobile-design/react-native';
|
|
594
|
+
|
|
595
|
+
export default function Example() {
|
|
596
|
+
const [feedback, setFeedback] = useState('');
|
|
597
|
+
const [expanded, setExpanded] = useState(false);
|
|
598
|
+
|
|
599
|
+
return (
|
|
600
|
+
<View style={{ gap: 16 }}>
|
|
601
|
+
<View
|
|
602
|
+
style={{
|
|
603
|
+
minHeight: 280,
|
|
604
|
+
justifyContent: 'flex-end',
|
|
605
|
+
alignItems: 'flex-end',
|
|
606
|
+
}}
|
|
607
|
+
>
|
|
608
|
+
<FAB.Menu
|
|
609
|
+
presentation="expressive"
|
|
610
|
+
expanded={expanded}
|
|
611
|
+
onDismiss={() => setExpanded(false)}
|
|
612
|
+
trigger={{
|
|
613
|
+
icon: 'plus',
|
|
614
|
+
size: 'medium',
|
|
615
|
+
accessibilityLabel: 'Crear',
|
|
616
|
+
onPress: () => setExpanded(true),
|
|
617
|
+
}}
|
|
618
|
+
items={[
|
|
619
|
+
{
|
|
620
|
+
key: 'note',
|
|
621
|
+
label: 'Nota',
|
|
622
|
+
icon: 'pencil-outline',
|
|
623
|
+
onPress: () => setFeedback('Nueva nota'),
|
|
624
|
+
},
|
|
625
|
+
{
|
|
626
|
+
key: 'folder',
|
|
627
|
+
label: 'Carpeta',
|
|
628
|
+
icon: 'folder-outline',
|
|
629
|
+
onPress: () => setFeedback('Nueva carpeta'),
|
|
630
|
+
},
|
|
631
|
+
]}
|
|
632
|
+
/>
|
|
633
|
+
</View>
|
|
634
|
+
<Text accessibilityLiveRegion="polite">{feedback}</Text>
|
|
635
|
+
</View>
|
|
636
|
+
);
|
|
637
|
+
}
|
|
638
|
+
```
|
|
639
|
+
|
|
640
|
+
### Campos y selección
|
|
641
|
+
|
|
642
|
+
#### TextField
|
|
643
|
+
|
|
644
|
+
Recoge información mediante campos Filled u Outlined, con etiquetas, ayuda y errores asociados.
|
|
645
|
+
|
|
646
|
+
- Controla value y onChangeText. Elige Filled u Outlined y mantén la misma variante dentro de un formulario. Otra superficie, como un diálogo, puede utilizar la otra variante.
|
|
647
|
+
- Label identifica el dato incluso después de escribir. Para una etiqueta externa adyacente, usa accessibilityLabel y, en web, aria-labelledby con su nativeID.
|
|
648
|
+
- SupportingText explica el formato. Error y errorText sustituyen esa ayuda por una corrección concreta. El campo conserva la asociación accesible. Counter sólo muestra la longitud. MaxLength impone el límite.
|
|
649
|
+
- Leading/trailing admiten contenido. LeadingIcon/trailingIcon reservan iconos de 24 dp en objetivos de 48 dp. Sus acciones y nombres accesibles son independientes. Muestra Borrar sólo cuando haya texto.
|
|
650
|
+
- Prefix y suffix son afijos persistentes al editar o tener valor. Con una etiqueta externa permanecen visibles también cuando el campo está vacío. PrefixAccessibilityLabel y suffixAccessibilityLabel proporcionan nombres hablados para símbolos, unidades o dominios.
|
|
651
|
+
|
|
652
|
+
El contador muestra la longitud. `maxLength` establece el límite. El ref `TextFieldHandle` ofrece `focus`, `blur`, `clear` e `isFocused`. Para un área de texto de altura fija combina `multiline`, `autoGrow={false}` e `inputStyle` con una altura.
|
|
653
|
+
|
|
654
|
+
**Propiedades de `TextField`**
|
|
655
|
+
|
|
656
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
657
|
+
| --- | --- | --- | --- |
|
|
658
|
+
| `onChangeText` · requerida | `(value: string) => void` | — | Comunica el nuevo texto para actualizar el valor controlado. |
|
|
659
|
+
| `value` · requerida | `string` | — | Valor actual controlado por la pantalla. |
|
|
660
|
+
| `accessibilityHint` | `string` | — | Contexto adicional sobre la acción. |
|
|
661
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
662
|
+
| `accessibilityState` | `AccessibilityState` | — | Estado semántico del control. |
|
|
663
|
+
| `autoGrow` | `boolean` | — | Ajusta la altura al contenido de un campo multilínea. Usa `false` para fijar la altura. |
|
|
664
|
+
| `backgroundColor` | `ColorValue` | — | Color de la superficie bajo el campo o contenedor. |
|
|
665
|
+
| `children` | `React.ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
666
|
+
| `containerStyle` | `StyleProp<ViewStyle>` | — | Estilo adicional del contenedor del campo. |
|
|
667
|
+
| `counter` | `number \| boolean` | — | Muestra la longitud del texto. Usa `maxLength` para limitar la entrada. |
|
|
668
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
669
|
+
| `error` | `boolean` | — | Activa el tratamiento visual y accesible de error. |
|
|
670
|
+
| `errorText` | `string` | — | Mensaje mostrado en el estado de error. |
|
|
671
|
+
| `focused` | `boolean` | — | Controla la apariencia de foco de un campo integrado en otro control. El foco de entrada se gestiona por separado. |
|
|
672
|
+
| `inputComponent` | `React.ComponentType<TextInputProps & React.RefAttributes<_TextInputInstance>>` | — | Adaptador de la entrada nativa. Usa `BottomSheetTextInput` cuando la hoja deba coordinar el foco con el teclado. |
|
|
673
|
+
| `inputStyle` | `StyleProp<TextStyle>` | — | Estilo que recibe la entrada de texto interna. |
|
|
674
|
+
| `label` | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
675
|
+
| `leading` | `React.ReactNode` | — | Slot al inicio lógico del contenido. |
|
|
676
|
+
| `leadingIcon` | `any` | — | Icono al inicio del control. |
|
|
677
|
+
| `leadingIconAccessibilityLabel` | `string` | — | Nombre accesible para la acción del icono inicial. |
|
|
678
|
+
| `maxLength` | `number` | — | Limita la entrada al número de caracteres indicado. |
|
|
679
|
+
| `multiline` | `boolean` | — | Permite escribir en varias líneas. |
|
|
680
|
+
| `nativeID` | `string` | — | Identificador del control para enlazarlo a contenido accesible. |
|
|
681
|
+
| `numberOfLines` | `number` | — | Fija el número de líneas de la entrada cuando `multiline` está habilitado. |
|
|
682
|
+
| `onChange` | `((e: TextInputChangeEvent) => unknown)` | — | Comunica el valor confirmado o el evento de entrada, según el componente. |
|
|
683
|
+
| `onLeadingIconPress` | `(() => void)` | — | Callback del icono inicial cuando es una acción independiente. |
|
|
684
|
+
| `onPress` | `((event: GestureResponderEvent) => unknown)` | — | Ejecuta la acción al activar el control. |
|
|
685
|
+
| `onTrailingIconPress` | `(() => void)` | — | Callback del icono final cuando es una acción independiente. |
|
|
686
|
+
| `placeholder` | `string` | — | Texto de orientación cuando el campo está vacío. |
|
|
687
|
+
| `prefix` | `string` | — | Afijo anterior al valor. |
|
|
688
|
+
| `prefixAccessibilityLabel` | `string` | — | Cómo se anuncia el prefijo. |
|
|
689
|
+
| `readOnly` | `boolean` | — | Permite mostrar o consultar el valor con la edición bloqueada. |
|
|
690
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
691
|
+
| `suffix` | `string` | — | Afijo posterior al valor. |
|
|
692
|
+
| `suffixAccessibilityLabel` | `string` | — | Cómo se anuncia el sufijo. |
|
|
693
|
+
| `supportingText` | `React.ReactNode` | — | Ayuda que acompaña al valor cuando no hay error. |
|
|
694
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
695
|
+
| `trailing` | `React.ReactNode` | — | Slot al final lógico del contenido. |
|
|
696
|
+
| `trailingIcon` | `any` | — | Icono al final del control. |
|
|
697
|
+
| `trailingIconAccessibilityLabel` | `string` | — | Nombre accesible para la acción del icono final. |
|
|
698
|
+
| `variant` | `"filled" \| "outlined"` | — | Tratamiento visual o modalidad del componente. |
|
|
699
|
+
|
|
700
|
+
<details>
|
|
701
|
+
<summary>Configuración complementaria de TextField</summary>
|
|
702
|
+
|
|
703
|
+
**`BottomSheetTextField`**
|
|
704
|
+
|
|
705
|
+
Comparte la configuración de TextField y coordina el campo con el gesto y el teclado de BottomSheet.
|
|
706
|
+
|
|
707
|
+
**`TextFieldHandle`**
|
|
708
|
+
|
|
709
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
710
|
+
| --- | --- | --- | --- |
|
|
711
|
+
| `blur` · requerida | `() => void` | — | Retira el foco de la entrada. |
|
|
712
|
+
| `clear` · requerida | `() => void` | — | Solicita vaciar el valor con `onChangeText` si el campo admite edición. |
|
|
713
|
+
| `focus` · requerida | `() => void` | — | Coloca el foco en la entrada si está habilitada. |
|
|
714
|
+
| `isFocused` · requerida | `() => boolean` | — | Indica si la entrada tiene el foco. |
|
|
715
|
+
|
|
716
|
+
</details>
|
|
717
|
+
|
|
718
|
+
**Ejemplo**
|
|
719
|
+
|
|
720
|
+
```tsx
|
|
721
|
+
import { useState } from 'react';
|
|
722
|
+
import { TextField } from 'mobile-design/react-native';
|
|
723
|
+
|
|
724
|
+
export default function Example() {
|
|
725
|
+
const [name, setName] = useState('');
|
|
726
|
+
|
|
727
|
+
return (
|
|
728
|
+
<TextField
|
|
729
|
+
variant="outlined"
|
|
730
|
+
label="Nombre de la colección"
|
|
731
|
+
value={name}
|
|
732
|
+
onChangeText={setName}
|
|
733
|
+
counter={40}
|
|
734
|
+
maxLength={40}
|
|
735
|
+
supportingText="Elige un nombre fácil de reconocer"
|
|
736
|
+
/>
|
|
737
|
+
);
|
|
738
|
+
}
|
|
739
|
+
```
|
|
740
|
+
|
|
741
|
+
#### Select
|
|
742
|
+
|
|
743
|
+
Select es una extensión de Mobile Design para elegir una opción fija en un formulario.
|
|
744
|
+
|
|
745
|
+
- Importa `Select` desde la entrada de tu plataforma. Es una extensión que compone el campo y las opciones del sistema de diseño. No añade una familia al catálogo de referencia.
|
|
746
|
+
- value contiene el identificador de una opción y onValueChange acepta la nueva elección. Cada value de options debe ser único y estable. Description e icon completan la información de cada opción.
|
|
747
|
+
- variant="outlined" es el valor predeterminado. Variant="filled" utiliza el segundo tratamiento del campo. Placeholder describe un valor aún no elegido y emptyLabel explica una lista vacía.
|
|
748
|
+
- Si el campo Outlined está sobre otra superficie, backgroundColor debe coincidir con esa superficie para recortar el contorno detrás de la etiqueta flotante.
|
|
749
|
+
|
|
750
|
+
Las opciones tienen `value` único y `label`. Puedes añadir `description`, `icon` y `disabled`. `Select` devuelve el identificador elegido, conserva el valor al cancelar y no abre un teclado de texto.
|
|
751
|
+
|
|
752
|
+
**Propiedades de `Select`**
|
|
753
|
+
|
|
754
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
755
|
+
| --- | --- | --- | --- |
|
|
756
|
+
| `label` · requerida | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
757
|
+
| `onValueChange` · requerida | `(value: string) => void` | — | Entrega el identificador `value` de la opción confirmada. |
|
|
758
|
+
| `options` · requerida | `readonly ChoiceOption[]` | — | Opciones con identificador, etiqueta y disponibilidad. |
|
|
759
|
+
| `value` · requerida | `string` | — | Identificador de la opción seleccionada o cadena vacía mientras no haya elección. |
|
|
760
|
+
| `backgroundColor` | `ColorValue` | — | Color de la superficie bajo el campo o contenedor. |
|
|
761
|
+
| `className` | `string` | — | Clase CSS del contenedor del campo en navegador. |
|
|
762
|
+
| `disabled` | `boolean` | `false` | Bloquea la interacción del control. |
|
|
763
|
+
| `emptyLabel` | `string` | `'No hay opciones.'` | Texto mostrado cuando no hay opciones o resultados. |
|
|
764
|
+
| `id` | `string` | — | Identificador del campo. |
|
|
765
|
+
| `placeholder` | `string` | — | Texto de orientación cuando el campo está vacío. |
|
|
766
|
+
| `variant` | `"filled" \| "outlined"` | `'outlined'` | Tratamiento visual o modalidad del componente. |
|
|
767
|
+
|
|
768
|
+
<details>
|
|
769
|
+
<summary>Configuración complementaria de Select</summary>
|
|
770
|
+
|
|
771
|
+
**`ChoiceOption`**
|
|
772
|
+
|
|
773
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
774
|
+
| --- | --- | --- | --- |
|
|
775
|
+
| `label` · requerida | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
776
|
+
| `value` · requerida | `string` | — | Valor actual controlado por la pantalla. |
|
|
777
|
+
| `description` | `string` | — | Texto secundario de apoyo. |
|
|
778
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
779
|
+
| `href` | `string` | — | Dirección del enlace real en el navegador. |
|
|
780
|
+
| `icon` | `string` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
781
|
+
|
|
782
|
+
</details>
|
|
783
|
+
|
|
784
|
+
**Ejemplo**
|
|
785
|
+
|
|
786
|
+
```tsx
|
|
787
|
+
import { useState } from 'react';
|
|
788
|
+
import { Select } from 'mobile-design/react-native';
|
|
789
|
+
|
|
790
|
+
export default function Example() {
|
|
791
|
+
const [format, setFormat] = useState('pdf');
|
|
792
|
+
|
|
793
|
+
return (
|
|
794
|
+
<Select
|
|
795
|
+
label="Formato de exportación"
|
|
796
|
+
value={format}
|
|
797
|
+
onValueChange={setFormat}
|
|
798
|
+
options={[
|
|
799
|
+
{ value: 'pdf', label: 'PDF' },
|
|
800
|
+
{ value: 'csv', label: 'CSV' },
|
|
801
|
+
{ value: 'xlsx', label: 'XLSX', disabled: true },
|
|
802
|
+
]}
|
|
803
|
+
/>
|
|
804
|
+
);
|
|
805
|
+
}
|
|
806
|
+
```
|
|
807
|
+
|
|
808
|
+
#### Autocomplete
|
|
809
|
+
|
|
810
|
+
Autocomplete es una extensión de Mobile Design que muestra sugerencias a medida que se escribe.
|
|
811
|
+
|
|
812
|
+
- Importa `Autocomplete` desde la entrada de tu plataforma. Es una extensión compuesta con TextField y sugerencias. No se presenta como una familia adicional del catálogo de referencia.
|
|
813
|
+
- Controla el texto con value/onValueChange. Al elegir una sugerencia, el texto recibe su label y onSelect recibe la opción completa, incluido su identificador value. Conserva ese identificador por separado si lo necesitas para guardar el dato.
|
|
814
|
+
- variant permite outlined (predeterminado) o filled. Presentation permite popup (predeterminado) o inline. LeadingIcon completa el campo sin añadir un botón de búsqueda ni una acción de borrar.
|
|
815
|
+
- backgroundColor permite igualar la superficie del campo Outlined y de su etiqueta flotante con la ventana que lo contiene. Usa el rol de color de esa superficie desde el tema.
|
|
816
|
+
- options acepta identificadores únicos, etiqueta, descripción, icono, disponibilidad y destino opcional. Filter=false conserva el orden y los resultados entregados por la aplicación, incluso si sus etiquetas no contienen la consulta.
|
|
817
|
+
|
|
818
|
+
El campo admite texto libre. Tras confirmar una sugerencia, `onValueChange` recibe su etiqueta y `onSelect` la opción completa. Guarda por separado su `value` si el formulario necesita el identificador.
|
|
819
|
+
|
|
820
|
+
**Propiedades de `Autocomplete`**
|
|
821
|
+
|
|
822
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
823
|
+
| --- | --- | --- | --- |
|
|
824
|
+
| `label` · requerida | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
825
|
+
| `onValueChange` · requerida | `(value: string) => void` | — | Entrega lo que se escribe y la etiqueta al seleccionar una sugerencia. |
|
|
826
|
+
| `options` · requerida | `readonly ChoiceOption[]` | — | Opciones con identificador, etiqueta y disponibilidad. |
|
|
827
|
+
| `value` · requerida | `string` | — | Texto controlado del campo, que puede contener una etiqueta o una consulta libre. |
|
|
828
|
+
| `backgroundColor` | `ColorValue` | — | Color de la superficie bajo el campo o contenedor. |
|
|
829
|
+
| `className` | `string` | — | Clase CSS del contenedor del campo en navegador. |
|
|
830
|
+
| `disabled` | `boolean` | `false` | Bloquea la interacción del control. |
|
|
831
|
+
| `emptyLabel` | `string` | `'No hay resultados.'` | Texto mostrado cuando no hay opciones o resultados. |
|
|
832
|
+
| `filter` | `boolean` | `true` | Activa el filtrado local de sugerencias. |
|
|
833
|
+
| `id` | `string` | — | Identificador del campo. |
|
|
834
|
+
| `leadingIcon` | `string` | — | Icono al inicio del control. |
|
|
835
|
+
| `listId` | `string` | — | Identificador de la lista de sugerencias. |
|
|
836
|
+
| `onEscape` | `(() => void)` | — | Se ejecuta al cancelar explícitamente con el teclado o una acción de accesibilidad. El desenfoque y el cierre al tocar fuera se gestionan por separado. |
|
|
837
|
+
| `onSelect` | `((option: ChoiceOption) => void)` | — | Recibe la opción completa elegida en la lista. |
|
|
838
|
+
| `openOnFocus` | `boolean` | `true` | Abre las sugerencias cuando el campo recibe el foco. |
|
|
839
|
+
| `placeholder` | `string` | — | Texto de orientación cuando el campo está vacío. |
|
|
840
|
+
| `presentation` | `"popup" \| "inline"` | `'popup'` | Modo de presentación visual o colocación. |
|
|
841
|
+
| `variant` | `"filled" \| "outlined"` | `'outlined'` | Tratamiento visual o modalidad del componente. |
|
|
842
|
+
|
|
843
|
+
<details>
|
|
844
|
+
<summary>Configuración complementaria de Autocomplete</summary>
|
|
845
|
+
|
|
846
|
+
**`ChoiceOption`**
|
|
847
|
+
|
|
848
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
849
|
+
| --- | --- | --- | --- |
|
|
850
|
+
| `label` · requerida | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
851
|
+
| `value` · requerida | `string` | — | Valor actual controlado por la pantalla. |
|
|
852
|
+
| `description` | `string` | — | Texto secundario de apoyo. |
|
|
853
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
854
|
+
| `href` | `string` | — | Dirección del enlace real en el navegador. |
|
|
855
|
+
| `icon` | `string` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
856
|
+
|
|
857
|
+
</details>
|
|
858
|
+
|
|
859
|
+
**Ejemplo**
|
|
860
|
+
|
|
861
|
+
```tsx
|
|
862
|
+
import { useState } from 'react';
|
|
863
|
+
import { Autocomplete } from 'mobile-design/react-native';
|
|
864
|
+
|
|
865
|
+
export default function Example() {
|
|
866
|
+
const [query, setQuery] = useState('');
|
|
867
|
+
|
|
868
|
+
return (
|
|
869
|
+
<Autocomplete
|
|
870
|
+
label="Ciudad"
|
|
871
|
+
value={query}
|
|
872
|
+
onValueChange={setQuery}
|
|
873
|
+
leadingIcon="search"
|
|
874
|
+
options={[
|
|
875
|
+
{ value: 'mty', label: 'Monterrey', description: 'Nuevo León' },
|
|
876
|
+
{ value: 'mid', label: 'Mérida', description: 'Yucatán' },
|
|
877
|
+
{ value: 'qro', label: 'Querétaro', description: 'Querétaro' },
|
|
878
|
+
]}
|
|
879
|
+
/>
|
|
880
|
+
);
|
|
881
|
+
}
|
|
882
|
+
```
|
|
883
|
+
|
|
884
|
+
#### Checkbox
|
|
885
|
+
|
|
886
|
+
Permite seleccionar varias opciones o representar una selección parcial en un conjunto.
|
|
887
|
+
|
|
888
|
+
- Controla status con checked, unchecked o indeterminate.
|
|
889
|
+
- Usa Checkbox.Item para una opción etiquetada y administra el conjunto seleccionado en la pantalla.
|
|
890
|
+
|
|
891
|
+
**Propiedades de `Checkbox`**
|
|
892
|
+
|
|
893
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
894
|
+
| --- | --- | --- | --- |
|
|
895
|
+
| `status` · requerida | `"checked" \| "unchecked" \| "indeterminate"` | — | Estado actual del control. |
|
|
896
|
+
| `accessibilityHint` | `string` | — | Contexto adicional sobre la acción. |
|
|
897
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
898
|
+
| `accessibilityState` | `AccessibilityState` | — | Estado semántico del control. |
|
|
899
|
+
| `color` | `ColorValue` | — | Color del elemento o trazo. |
|
|
900
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
901
|
+
| `nativeID` | `string` | — | Identificador del control para enlazarlo a contenido accesible. |
|
|
902
|
+
| `onPress` | `(((event: GestureResponderEvent) => unknown) & ((e: GestureResponderEvent) => void) & ((e: GestureResponderEvent) => void))` | — | Ejecuta la acción al activar el control. |
|
|
903
|
+
| `style` | `Consultar el tipo TypeScript` | — | Estilo de la superficie exterior. |
|
|
904
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
905
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
906
|
+
|
|
907
|
+
<details>
|
|
908
|
+
<summary>Configuración complementaria de Checkbox</summary>
|
|
909
|
+
|
|
910
|
+
**`Checkbox.Item`**
|
|
911
|
+
|
|
912
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
913
|
+
| --- | --- | --- | --- |
|
|
914
|
+
| `label` · requerida | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
915
|
+
| `status` · requerida | `"checked" \| "unchecked" \| "indeterminate"` | — | Estado actual del control. |
|
|
916
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
917
|
+
| `aria-describedby` | `string` | — | Identificador del texto que complementa el nombre accesible en navegador. |
|
|
918
|
+
| `color` | `string` | — | Color del elemento o trazo. |
|
|
919
|
+
| `description` | `string` | — | Texto secundario de apoyo. |
|
|
920
|
+
| `disabled` | `boolean` | `false` | Bloquea la interacción del control. |
|
|
921
|
+
| `error` | `boolean` | `false` | Activa el tratamiento visual y accesible de error. |
|
|
922
|
+
| `labelMaxFontSizeMultiplier` | `number` | — | Límite de escalado para la etiqueta. |
|
|
923
|
+
| `labelStyle` | `StyleProp<TextStyle>` | — | Estilo aplicado a la etiqueta de la opción. |
|
|
924
|
+
| `labelVariant` | `TypescaleKey` | `'bodyLarge'` | Rol tipográfico de la etiqueta. |
|
|
925
|
+
| `onPress` | `((e: GestureResponderEvent) => void)` | — | Ejecuta la acción al activar el control. |
|
|
926
|
+
| `position` | `"leading" \| "trailing"` | `'trailing'` | Posición lógica o compartida de la superficie. |
|
|
927
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
928
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
929
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
930
|
+
|
|
931
|
+
</details>
|
|
932
|
+
|
|
933
|
+
**Ejemplo**
|
|
934
|
+
|
|
935
|
+
```tsx
|
|
936
|
+
import { useState } from 'react';
|
|
937
|
+
import { Checkbox } from 'mobile-design/react-native';
|
|
938
|
+
|
|
939
|
+
export default function Example() {
|
|
940
|
+
const [checked, setChecked] = useState(false);
|
|
941
|
+
|
|
942
|
+
return (
|
|
943
|
+
<Checkbox.Item
|
|
944
|
+
label="Descargar con Wi-Fi"
|
|
945
|
+
status={checked ? 'checked' : 'unchecked'}
|
|
946
|
+
onPress={() => setChecked((value) => !value)}
|
|
947
|
+
/>
|
|
948
|
+
);
|
|
949
|
+
}
|
|
950
|
+
```
|
|
951
|
+
|
|
952
|
+
#### RadioButton
|
|
953
|
+
|
|
954
|
+
Permite seleccionar una opción de un conjunto. Elegir otra reemplaza la selección anterior.
|
|
955
|
+
|
|
956
|
+
- Usa RadioButton.Group con value/onValueChange y un nombre accesible que describa el conjunto. Cada opción tiene un value único.
|
|
957
|
+
- RadioButton.Item enlaza círculo y etiqueta en un único objetivo. Position coloca el control al inicio o al final lógico. Description añade texto de apoyo sin sustituir el nombre.
|
|
958
|
+
- El círculo mide 20 dp, el trazo 2 dp y el punto seleccionado 10 dp. La tinta circular mide 40 dp dentro de un objetivo táctil de 48 dp. Las filas crecen con el texto.
|
|
959
|
+
|
|
960
|
+
**Propiedades de `RadioButton`**
|
|
961
|
+
|
|
962
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
963
|
+
| --- | --- | --- | --- |
|
|
964
|
+
| `value` · requerida | `string` | — | Clave de la opción dentro de su grupo. |
|
|
965
|
+
| `color` | `string` | — | Color del elemento o trazo. |
|
|
966
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
967
|
+
| `onPress` | `((e: GestureResponderEvent) => void)` | — | Ejecuta la acción al activar el control. |
|
|
968
|
+
| `status` | `"checked" \| "unchecked"` | — | Estado actual del control. |
|
|
969
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
970
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
971
|
+
|
|
972
|
+
<details>
|
|
973
|
+
<summary>Configuración complementaria de RadioButton</summary>
|
|
974
|
+
|
|
975
|
+
**`RadioButton.Group`**
|
|
976
|
+
|
|
977
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
978
|
+
| --- | --- | --- | --- |
|
|
979
|
+
| `children` · requerida | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
980
|
+
| `onValueChange` · requerida | `(value: string) => void` | — | Entrega el siguiente valor para actualizar el estado del consumidor. |
|
|
981
|
+
| `value` · requerida | `string` | — | Clave de la opción seleccionada en el conjunto. |
|
|
982
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
983
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
984
|
+
|
|
985
|
+
**`RadioButton.Item`**
|
|
986
|
+
|
|
987
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
988
|
+
| --- | --- | --- | --- |
|
|
989
|
+
| `label` · requerida | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
990
|
+
| `value` · requerida | `string` | — | Clave única de la opción etiquetada. |
|
|
991
|
+
| `accessibilityHint` | `string` | — | Contexto adicional sobre la acción. |
|
|
992
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
993
|
+
| `aria-describedby` | `string` | — | Identificador del texto que complementa el nombre accesible en navegador. |
|
|
994
|
+
| `color` | `string` | — | Color del elemento o trazo. |
|
|
995
|
+
| `description` | `string` | — | Texto secundario de apoyo. |
|
|
996
|
+
| `disabled` | `boolean` | `false` | Bloquea la interacción del control. |
|
|
997
|
+
| `labelMaxFontSizeMultiplier` | `number` | — | Límite de escalado para la etiqueta. |
|
|
998
|
+
| `labelStyle` | `StyleProp<TextStyle>` | — | Estilo aplicado a la etiqueta de la opción. |
|
|
999
|
+
| `labelVariant` | `TypescaleKey` | `'bodyLarge'` | Rol tipográfico de la etiqueta. |
|
|
1000
|
+
| `onPress` | `((e: GestureResponderEvent) => void)` | — | Ejecuta la acción al activar el control. |
|
|
1001
|
+
| `position` | `"leading" \| "trailing"` | `'trailing'` | Posición lógica o compartida de la superficie. |
|
|
1002
|
+
| `status` | `"checked" \| "unchecked"` | — | Estado actual del control. |
|
|
1003
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
1004
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
1005
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
1006
|
+
|
|
1007
|
+
</details>
|
|
1008
|
+
|
|
1009
|
+
**Ejemplo**
|
|
1010
|
+
|
|
1011
|
+
```tsx
|
|
1012
|
+
import { useState } from 'react';
|
|
1013
|
+
import { RadioButton } from 'mobile-design/react-native';
|
|
1014
|
+
|
|
1015
|
+
export default function Example() {
|
|
1016
|
+
const [value, setValue] = useState('home');
|
|
1017
|
+
|
|
1018
|
+
return (
|
|
1019
|
+
<RadioButton.Group
|
|
1020
|
+
value={value}
|
|
1021
|
+
onValueChange={setValue}
|
|
1022
|
+
accessibilityLabel="Ship to"
|
|
1023
|
+
>
|
|
1024
|
+
<RadioButton.Item
|
|
1025
|
+
position="leading"
|
|
1026
|
+
value="home"
|
|
1027
|
+
label="Home"
|
|
1028
|
+
description="123 Main Street"
|
|
1029
|
+
/>
|
|
1030
|
+
<RadioButton.Item
|
|
1031
|
+
position="leading"
|
|
1032
|
+
value="office"
|
|
1033
|
+
label="Office"
|
|
1034
|
+
description="456 Market Street"
|
|
1035
|
+
/>
|
|
1036
|
+
</RadioButton.Group>
|
|
1037
|
+
);
|
|
1038
|
+
}
|
|
1039
|
+
```
|
|
1040
|
+
|
|
1041
|
+
#### Switch
|
|
1042
|
+
|
|
1043
|
+
Activa o desactiva una configuración binaria mediante un track y un handle que expresan el estado.
|
|
1044
|
+
|
|
1045
|
+
- Controla value y actualízalo desde onValueChange. Aplica el ajuste al activarlo. No añadas Guardar ni una confirmación diferida.
|
|
1046
|
+
- Coloca una etiqueta visible al lado y usa el mismo nombre estable en accessibilityLabel. La etiqueta describe el efecto de estar activado, sin cambiar a una instrucción de activar/desactivar.
|
|
1047
|
+
- checkedIcon y uncheckedIcon permiten las tres configuraciones. Sin iconos, sólo un icono seleccionado, o un icono en cada estado. Usa símbolos claros como check y close.
|
|
1048
|
+
- Si una fila controla la selección, muestra el Switch como decoración con accessible=false y sin onValueChange. La fila debe ser el único objetivo y anunciar su valor. Sin callback propio, Switch no crea otro destino interactivo.
|
|
1049
|
+
|
|
1050
|
+
**Propiedades de `Switch`**
|
|
1051
|
+
|
|
1052
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1053
|
+
| --- | --- | --- | --- |
|
|
1054
|
+
| `accessibilityHint` | `string` | — | Contexto adicional sobre la acción. |
|
|
1055
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
1056
|
+
| `accessible` | `boolean` | `true` | Usa `false` cuando la fila contenedora ya comunica el estado del interruptor y gestiona su activación. |
|
|
1057
|
+
| `checkedIcon` | `any` | — | Icono de un interruptor activado. |
|
|
1058
|
+
| `disabled` | `boolean` | `false` | Bloquea la interacción del control. |
|
|
1059
|
+
| `onValueChange` | `((value: boolean) => void)` | — | Entrega el siguiente valor para actualizar el estado del consumidor. |
|
|
1060
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
1061
|
+
| `testID` | `string` | `'mobile-switch'` | Identificador para automatización en el host. |
|
|
1062
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
1063
|
+
| `uncheckedIcon` | `any` | — | Icono de un interruptor desactivado. |
|
|
1064
|
+
| `value` | `boolean` | `false` | Estado booleano de la configuración. |
|
|
1065
|
+
|
|
1066
|
+
**Ejemplo**
|
|
1067
|
+
|
|
1068
|
+
```tsx
|
|
1069
|
+
import { useState } from 'react';
|
|
1070
|
+
import { View } from 'react-native';
|
|
1071
|
+
import {
|
|
1072
|
+
Switch,
|
|
1073
|
+
Text,
|
|
1074
|
+
useMobileTheme,
|
|
1075
|
+
useLocale,
|
|
1076
|
+
} from 'mobile-design/react-native';
|
|
1077
|
+
|
|
1078
|
+
export default function Example() {
|
|
1079
|
+
const { direction } = useLocale();
|
|
1080
|
+
const theme = useMobileTheme();
|
|
1081
|
+
const [enabled, setEnabled] = useState(true);
|
|
1082
|
+
|
|
1083
|
+
return (
|
|
1084
|
+
<View
|
|
1085
|
+
style={{
|
|
1086
|
+
direction: 'ltr',
|
|
1087
|
+
flexDirection: direction === 'rtl' ? 'row-reverse' : 'row',
|
|
1088
|
+
alignItems: 'center',
|
|
1089
|
+
gap: 16,
|
|
1090
|
+
}}
|
|
1091
|
+
>
|
|
1092
|
+
<Text
|
|
1093
|
+
variant="bodyLarge"
|
|
1094
|
+
style={{ flex: 1, color: theme.colors.onSurface }}
|
|
1095
|
+
>
|
|
1096
|
+
Descargar sólo con Wi-Fi
|
|
1097
|
+
</Text>
|
|
1098
|
+
<Switch
|
|
1099
|
+
value={enabled}
|
|
1100
|
+
onValueChange={setEnabled}
|
|
1101
|
+
accessibilityLabel="Descargar sólo con Wi-Fi"
|
|
1102
|
+
/>
|
|
1103
|
+
</View>
|
|
1104
|
+
);
|
|
1105
|
+
}
|
|
1106
|
+
```
|
|
1107
|
+
|
|
1108
|
+
#### Slider y RangeSlider
|
|
1109
|
+
|
|
1110
|
+
Permite recorrer un intervalo con control continuo o discreto, en una o dos posiciones.
|
|
1111
|
+
|
|
1112
|
+
- Usa Slider para standard o centered y RangeSlider para dos límites. Controla value/onValueChange. Step=0 es continuo y un step positivo define las detenciones de stops.
|
|
1113
|
+
- Define minimumValue y maximumValue finitos. Cada extremo del rango tiene su propio nombre accesible. MinimumRange mantiene la separación sin cruzar los controles.
|
|
1114
|
+
- Los tamaños xs, sm, md, lg y xl usan pistas de 16, 24, 40, 56 y 96 dp y controles de 44, 44, 52, 68 y 108 dp. Length define el ancho horizontal o la altura vertical.
|
|
1115
|
+
- leadingIcon/trailingIcon se reservan a standard en md, lg y xl. ValueIndicator permite mostrar el valor durante la interacción, de forma permanente o nunca. ValueSuffix añade la unidad.
|
|
1116
|
+
|
|
1117
|
+
Publica una vista previa con `onValueChange` y confirma en `onSlidingComplete`. `onSlidingCancel` permite descartar el borrador. En el rango, usa una etiqueta diferente por cada extremo.
|
|
1118
|
+
|
|
1119
|
+
**Propiedades de `Slider`**
|
|
1120
|
+
|
|
1121
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1122
|
+
| --- | --- | --- | --- |
|
|
1123
|
+
| `onValueChange` · requerida | `(value: number) => void` | — | Entrega el siguiente valor para actualizar el estado del consumidor. |
|
|
1124
|
+
| `value` · requerida | `number` | — | Posición actual del control dentro de los límites configurados. |
|
|
1125
|
+
| `accessibilityHint` | `string` | — | Contexto adicional sobre la acción. |
|
|
1126
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
1127
|
+
| `centered` | `boolean` | — | Extiende la pista activa desde el centro del intervalo, por ejemplo para valores positivos y negativos. |
|
|
1128
|
+
| `continuousTickCount` | `number` | — | Número de marcas visuales equidistantes en una pista continua. El gesto se mantiene continuo. |
|
|
1129
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
1130
|
+
| `leadingIcon` | `any` | — | Icono al inicio del control. |
|
|
1131
|
+
| `length` | `number` | — | Ancho en un control horizontal o altura en uno vertical. La altura vertical predeterminada es de 240 dp. |
|
|
1132
|
+
| `maximumValue` | `number` | — | Extremo superior del intervalo. |
|
|
1133
|
+
| `minimumValue` | `number` | — | Extremo inferior del intervalo. |
|
|
1134
|
+
| `onSlidingCancel` | `((value: number) => void)` | — | Avisa de una interacción cancelada para descartar el borrador. |
|
|
1135
|
+
| `onSlidingComplete` | `((value: number) => void)` | — | Recibe el valor confirmado al terminar el gesto. |
|
|
1136
|
+
| `onSlidingStart` | `((value: number) => void)` | — | Avisa al iniciar el gesto. |
|
|
1137
|
+
| `orientation` | `"horizontal" \| "vertical"` | — | Eje de la composición. |
|
|
1138
|
+
| `reversed` | `boolean` | — | Invierte la dirección visual de la pista y conserva los valores numéricos. |
|
|
1139
|
+
| `showStopIndicator` | `boolean` | — | Muestra la marca de final de pista. |
|
|
1140
|
+
| `showTicks` | `boolean` | — | Muestra las marcas del intervalo. |
|
|
1141
|
+
| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | — | Tamaño visual o escala semántica del control. |
|
|
1142
|
+
| `step` | `number` | — | Incremento entre paradas. Cero conserva el control continuo. |
|
|
1143
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
1144
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
1145
|
+
| `trailingIcon` | `any` | — | Icono al final del control. |
|
|
1146
|
+
| `valueIndicator` | `"never" \| "always" \| "on-drag"` | — | Configura cuándo se muestra la etiqueta del valor. |
|
|
1147
|
+
| `valueLabel` | `string` | — | Etiqueta de la lectura del valor. Pasa una cadena vacía para mostrar solo el número. |
|
|
1148
|
+
| `valuePrecision` | `number` | — | Decimales del indicador y del texto accesible. `step` controla por separado el incremento de la selección. |
|
|
1149
|
+
| `valueSuffix` | `string` | — | Unidad o texto que acompaña al número. |
|
|
1150
|
+
|
|
1151
|
+
<details>
|
|
1152
|
+
<summary>Configuración complementaria de Slider y RangeSlider</summary>
|
|
1153
|
+
|
|
1154
|
+
**`RangeSlider`**
|
|
1155
|
+
|
|
1156
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1157
|
+
| --- | --- | --- | --- |
|
|
1158
|
+
| `onValueChange` · requerida | `(value: [number, number]) => void` | — | Entrega los dos extremos actuales para actualizar el estado. |
|
|
1159
|
+
| `value` · requerida | `readonly [number, number]` | — | Par controlado con mínimo y máximo del intervalo seleccionado. |
|
|
1160
|
+
| `accessibilityHint` | `string` | — | Contexto adicional sobre la acción. |
|
|
1161
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
1162
|
+
| `continuousTickCount` | `number` | — | Número de marcas visuales equidistantes en una pista continua. El gesto se mantiene continuo. |
|
|
1163
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
1164
|
+
| `endAccessibilityLabel` | `string` | — | Nombre accesible del extremo superior del rango. |
|
|
1165
|
+
| `leadingIcon` | `any` | — | Icono al inicio del control. |
|
|
1166
|
+
| `length` | `number` | — | Ancho en un control horizontal o altura en uno vertical. La altura vertical predeterminada es de 240 dp. |
|
|
1167
|
+
| `maximumValue` | `number` | — | Extremo superior del intervalo. |
|
|
1168
|
+
| `minimumRange` | `number` | — | Separación mínima entre los dos extremos. |
|
|
1169
|
+
| `minimumValue` | `number` | — | Extremo inferior del intervalo. |
|
|
1170
|
+
| `onSlidingCancel` | `((value: [number, number]) => void)` | — | Avisa de una interacción cancelada para descartar el borrador. |
|
|
1171
|
+
| `onSlidingComplete` | `((value: [number, number]) => void)` | — | Recibe el valor confirmado al terminar el gesto. |
|
|
1172
|
+
| `onSlidingStart` | `((value: [number, number]) => void)` | — | Avisa al iniciar el gesto. |
|
|
1173
|
+
| `orientation` | `"horizontal" \| "vertical"` | — | Eje de la composición. |
|
|
1174
|
+
| `reversed` | `boolean` | — | Invierte la dirección visual de la pista y conserva los valores numéricos. |
|
|
1175
|
+
| `showStopIndicator` | `boolean` | — | Muestra la marca de final de pista. |
|
|
1176
|
+
| `showTicks` | `boolean` | — | Muestra las marcas del intervalo. |
|
|
1177
|
+
| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | — | Tamaño visual o escala semántica del control. |
|
|
1178
|
+
| `startAccessibilityLabel` | `string` | — | Nombre accesible del extremo inferior del rango. |
|
|
1179
|
+
| `step` | `number` | — | Incremento entre paradas. Cero conserva el control continuo. |
|
|
1180
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
1181
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
1182
|
+
| `trailingIcon` | `any` | — | Icono al final del control. |
|
|
1183
|
+
| `valueIndicator` | `"never" \| "always" \| "on-drag"` | — | Configura cuándo se muestra la etiqueta del valor. |
|
|
1184
|
+
| `valueLabel` | `string` | — | Etiqueta de la lectura del valor. Pasa una cadena vacía para mostrar solo el número. |
|
|
1185
|
+
| `valuePrecision` | `number` | — | Decimales del indicador y del texto accesible. `step` controla por separado el incremento de la selección. |
|
|
1186
|
+
| `valueSuffix` | `string` | — | Unidad o texto que acompaña al número. |
|
|
1187
|
+
|
|
1188
|
+
</details>
|
|
1189
|
+
|
|
1190
|
+
**Ejemplo**
|
|
1191
|
+
|
|
1192
|
+
```tsx
|
|
1193
|
+
import { useState } from 'react';
|
|
1194
|
+
import { Slider } from 'mobile-design/react-native';
|
|
1195
|
+
|
|
1196
|
+
export default function Example() {
|
|
1197
|
+
const [value, setValue] = useState(40);
|
|
1198
|
+
|
|
1199
|
+
return (
|
|
1200
|
+
<Slider
|
|
1201
|
+
value={value}
|
|
1202
|
+
onValueChange={setValue}
|
|
1203
|
+
minimumValue={0}
|
|
1204
|
+
maximumValue={100}
|
|
1205
|
+
step={5}
|
|
1206
|
+
accessibilityLabel="Volumen"
|
|
1207
|
+
valueSuffix="%"
|
|
1208
|
+
/>
|
|
1209
|
+
);
|
|
1210
|
+
}
|
|
1211
|
+
```
|
|
1212
|
+
|
|
1213
|
+
#### DatePicker y DockedDatePicker
|
|
1214
|
+
|
|
1215
|
+
Permite elegir días mediante calendario, entrada manual o un selector anclado al campo.
|
|
1216
|
+
|
|
1217
|
+
- Controla visible, value, onChange y onDismiss. Mode distingue fecha simple de rango.
|
|
1218
|
+
- Define locale, firstDayOfWeek y límites cuando la tarea los requiera. DockedDatePicker aporta la composición anclada.
|
|
1219
|
+
|
|
1220
|
+
En modo simple el valor confirmado es un `Date`. En rango usa un objeto `DateRange` con `start` y `end`. Conviene tratar los días como fechas del calendario local y decidir explícitamente cómo se guardan. El callback de cambio recibe el resultado confirmado.
|
|
1221
|
+
|
|
1222
|
+
**Propiedades de `DatePicker`**
|
|
1223
|
+
|
|
1224
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1225
|
+
| --- | --- | --- | --- |
|
|
1226
|
+
| `onChange` · requerida | `((date: Date) => void) \| ((range: DateRange) => void)` | — | Entrega el día o el rango confirmado, según el modo. |
|
|
1227
|
+
| `onDismiss` · requerida | `() => void` | — | Solicita cerrar la superficie. |
|
|
1228
|
+
| `visible` · requerida | `boolean` | — | Controla si la superficie o el indicador se presenta. |
|
|
1229
|
+
| `cancelLabel` | `string` | — | Etiqueta de la acción para descartar. |
|
|
1230
|
+
| `confirmLabel` | `string` | — | Etiqueta de la acción para confirmar. |
|
|
1231
|
+
| `firstDayOfWeek` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | — | Índice del día que inicia la cuadrícula del calendario. |
|
|
1232
|
+
| `initialCalendarView` | `"days" \| "years"` | — | Vista de calendario inicial. |
|
|
1233
|
+
| `initialDisplayMode` | `"calendar" \| "input"` | — | Modo inicial de calendario o entrada manual según el componente. |
|
|
1234
|
+
| `isDateDisabled` | `((date: Date) => boolean)` | — | Predicado para bloquear fechas específicas. |
|
|
1235
|
+
| `locale` | `string` | — | Locale utilizado para mostrar y analizar las fechas. |
|
|
1236
|
+
| `maximumDate` | `Date` | — | Última fecha que se permite elegir. |
|
|
1237
|
+
| `minimumDate` | `Date` | — | Primera fecha que se permite elegir. |
|
|
1238
|
+
| `mode` | `"single" \| "range"` | — | Elige entre `single` y `range`. |
|
|
1239
|
+
| `presentation` | `"dialog" \| "full-screen"` | — | Modo de presentación visual o colocación. |
|
|
1240
|
+
| `scrollIndicators` | `ScrollIndicatorOptions` | — | Configura los indicadores de desplazamiento del paquete. |
|
|
1241
|
+
| `showClearButton` | `boolean` | — | Muestra la acción para limpiar la selección. |
|
|
1242
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
1243
|
+
| `title` | `string` | — | Título visible o contenido principal. |
|
|
1244
|
+
| `value` | `Date \| DateRange` | — | Valor actual controlado por la pantalla. |
|
|
1245
|
+
|
|
1246
|
+
<details>
|
|
1247
|
+
<summary>Configuración complementaria de DatePicker y DockedDatePicker</summary>
|
|
1248
|
+
|
|
1249
|
+
**`DockedDatePicker`**
|
|
1250
|
+
|
|
1251
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1252
|
+
| --- | --- | --- | --- |
|
|
1253
|
+
| `onChange` · requerida | `(date: Date) => void` | — | Entrega la selección confirmada en el selector anclado. |
|
|
1254
|
+
| `disabled` | `boolean` | `false` | Bloquea la interacción del control. |
|
|
1255
|
+
| `firstDayOfWeek` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | `0` | Índice del día que inicia la cuadrícula del calendario. |
|
|
1256
|
+
| `initialCalendarView` | `"days" \| "years" \| "months"` | `'days'` | Vista de calendario inicial. |
|
|
1257
|
+
| `initiallyOpen` | `boolean` | `false` | Abre el calendario al montar cuando la apertura es interna. |
|
|
1258
|
+
| `isDateDisabled` | `((date: Date) => boolean)` | — | Predicado para bloquear fechas específicas. |
|
|
1259
|
+
| `label` | `string` | `'Fecha del evento'` | Etiqueta visible que describe la acción u opción. |
|
|
1260
|
+
| `locale` | `string` | `'es-MX'` | Locale utilizado para mostrar y analizar las fechas. |
|
|
1261
|
+
| `maximumDate` | `Date` | — | Última fecha que se permite elegir. |
|
|
1262
|
+
| `minimumDate` | `Date` | — | Primera fecha que se permite elegir. |
|
|
1263
|
+
| `onOpenChange` | `((open: boolean) => void)` | — | Solicita abrir o cerrar. Actualiza `open` en la pantalla. |
|
|
1264
|
+
| `open` | `boolean` | — | Controla si la superficie está abierta. |
|
|
1265
|
+
| `scrollIndicators` | `ScrollIndicatorOptions` | — | Configura los indicadores de desplazamiento del paquete. |
|
|
1266
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
1267
|
+
| `testID` | `string` | `'docked-date-picker'` | Identificador para automatización en el host. |
|
|
1268
|
+
| `value` | `Date` | — | Valor actual controlado por la pantalla. |
|
|
1269
|
+
|
|
1270
|
+
**`DateRange`**
|
|
1271
|
+
|
|
1272
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1273
|
+
| --- | --- | --- | --- |
|
|
1274
|
+
| `end` · requerida | `Date` | — | Último día del intervalo de fechas. |
|
|
1275
|
+
| `start` · requerida | `Date` | — | Primer día del intervalo de fechas. |
|
|
1276
|
+
|
|
1277
|
+
</details>
|
|
1278
|
+
|
|
1279
|
+
**Ejemplo**
|
|
1280
|
+
|
|
1281
|
+
```tsx
|
|
1282
|
+
import { useState } from 'react';
|
|
1283
|
+
import { Button, DatePicker } from 'mobile-design/react-native';
|
|
1284
|
+
|
|
1285
|
+
export default function Example() {
|
|
1286
|
+
const [visible, setVisible] = useState(false);
|
|
1287
|
+
const [date, setDate] = useState(new Date(2026, 10, 3));
|
|
1288
|
+
|
|
1289
|
+
return (
|
|
1290
|
+
<>
|
|
1291
|
+
<Button onPress={() => setVisible(true)}>Elegir fecha</Button>
|
|
1292
|
+
<DatePicker
|
|
1293
|
+
mode="single"
|
|
1294
|
+
visible={visible}
|
|
1295
|
+
value={date}
|
|
1296
|
+
locale="es-MX"
|
|
1297
|
+
onDismiss={() => setVisible(false)}
|
|
1298
|
+
onChange={(next) => {
|
|
1299
|
+
setDate(next);
|
|
1300
|
+
setVisible(false);
|
|
1301
|
+
}}
|
|
1302
|
+
/>
|
|
1303
|
+
</>
|
|
1304
|
+
);
|
|
1305
|
+
}
|
|
1306
|
+
```
|
|
1307
|
+
|
|
1308
|
+
#### TimePicker
|
|
1309
|
+
|
|
1310
|
+
Selecciona hora y minutos en formato de 12 o 24 horas, con un borrador que se confirma explícitamente.
|
|
1311
|
+
|
|
1312
|
+
- Controla visible y value como { hours, minutes }, y acepta el resultado en onConfirm.
|
|
1313
|
+
- Define is24Hour y el modo inicial. El valor usa horas de 0 a 23 incluso cuando la presentación es de 12 horas.
|
|
1314
|
+
- Personaliza title e inputTitle para nombrar el reloj y la entrada manual.
|
|
1315
|
+
|
|
1316
|
+
El objeto `TimeValue` siempre usa `hours` de 0 a 23 y `minutes` de 0 a 59. `is24Hour` modifica la presentación. Cierra o confirma desde los callbacks y guarda el valor confirmado en el estado de la pantalla.
|
|
1317
|
+
|
|
1318
|
+
**Propiedades de `TimePicker`**
|
|
1319
|
+
|
|
1320
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1321
|
+
| --- | --- | --- | --- |
|
|
1322
|
+
| `onConfirm` · requerida | `(value: TimeValue) => void` | — | Entrega el borrador validado al confirmar. |
|
|
1323
|
+
| `onDismiss` · requerida | `() => void` | — | Solicita cerrar la superficie. |
|
|
1324
|
+
| `value` · requerida | `TimeValue` | — | Valor actual controlado por la pantalla. |
|
|
1325
|
+
| `visible` · requerida | `boolean` | — | Controla si la superficie o el indicador se presenta. |
|
|
1326
|
+
| `autoSwitchToMinutes` | `boolean` | — | Avanza a los minutos al elegir la hora. La exploración táctil nativa conserva el foco y en web el avance automático se activa con puntero. |
|
|
1327
|
+
| `cancelLabel` | `string` | — | Etiqueta de la acción para descartar. |
|
|
1328
|
+
| `confirmLabel` | `string` | — | Etiqueta de la acción para confirmar. |
|
|
1329
|
+
| `dialModeLabel` | `string` | — | Nombre del control que activa el reloj. |
|
|
1330
|
+
| `hourLabel` | `string` | — | Nombre del control para editar horas. |
|
|
1331
|
+
| `initialDisplayMode` | `"input" \| "dial"` | — | Selecciona reloj o entrada manual como vista inicial. |
|
|
1332
|
+
| `initialSelection` | `"hours" \| "minutes"` | — | Parte de la hora que se edita al abrir. |
|
|
1333
|
+
| `inputTitle` | `string` | — | Título cuando se usa la entrada manual. |
|
|
1334
|
+
| `invalidTimeLabel` | `string` | — | Mensaje asociado a una hora inválida. |
|
|
1335
|
+
| `is24Hour` | `boolean` | — | Usa una presentación de 24 horas. |
|
|
1336
|
+
| `keyboardModeLabel` | `string` | — | Nombre del control que activa la entrada manual. |
|
|
1337
|
+
| `minuteLabel` | `string` | — | Nombre del control para editar minutos. |
|
|
1338
|
+
| `scrollIndicators` | `ScrollIndicatorOptions` | — | Configura los indicadores de desplazamiento del paquete. |
|
|
1339
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
1340
|
+
| `title` | `string` | — | Título visible o contenido principal. |
|
|
1341
|
+
|
|
1342
|
+
<details>
|
|
1343
|
+
<summary>Configuración complementaria de TimePicker</summary>
|
|
1344
|
+
|
|
1345
|
+
**`TimeValue`**
|
|
1346
|
+
|
|
1347
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1348
|
+
| --- | --- | --- | --- |
|
|
1349
|
+
| `hours` · requerida | `number` | — | Hora de 0 a 23 en ambos formatos de presentación. |
|
|
1350
|
+
| `minutes` · requerida | `number` | — | Minutos de 0 a 59. |
|
|
1351
|
+
|
|
1352
|
+
</details>
|
|
1353
|
+
|
|
1354
|
+
**Ejemplo**
|
|
1355
|
+
|
|
1356
|
+
```tsx
|
|
1357
|
+
import { useState } from 'react';
|
|
1358
|
+
import { Button, TimePicker } from 'mobile-design/react-native';
|
|
1359
|
+
|
|
1360
|
+
export default function Example() {
|
|
1361
|
+
const [visible, setVisible] = useState(false);
|
|
1362
|
+
const [time, setTime] = useState({ hours: 15, minutes: 45 });
|
|
1363
|
+
|
|
1364
|
+
return (
|
|
1365
|
+
<>
|
|
1366
|
+
<Button onPress={() => setVisible(true)}>Elegir hora</Button>
|
|
1367
|
+
<TimePicker
|
|
1368
|
+
visible={visible}
|
|
1369
|
+
value={time}
|
|
1370
|
+
is24Hour={false}
|
|
1371
|
+
onDismiss={() => setVisible(false)}
|
|
1372
|
+
onConfirm={(next) => {
|
|
1373
|
+
setTime(next);
|
|
1374
|
+
setVisible(false);
|
|
1375
|
+
}}
|
|
1376
|
+
/>
|
|
1377
|
+
</>
|
|
1378
|
+
);
|
|
1379
|
+
}
|
|
1380
|
+
```
|
|
1381
|
+
|
|
1382
|
+
### Navegación y búsqueda
|
|
1383
|
+
|
|
1384
|
+
#### TopAppBar
|
|
1385
|
+
|
|
1386
|
+
Ofrece contexto, navegación y acciones relacionadas con la pantalla. Las barras flexibles responden al desplazamiento del contenido.
|
|
1387
|
+
|
|
1388
|
+
- Elige variant y proporciona title. Subtitle, navigationIcon y actions completan la anatomía.
|
|
1389
|
+
- Para una barra desplazable, conecta useAppBarScrollBehavior con la barra y el contenido de la misma pantalla. El host decide navegación y rutas.
|
|
1390
|
+
|
|
1391
|
+
**Propiedades de `TopAppBar`**
|
|
1392
|
+
|
|
1393
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1394
|
+
| --- | --- | --- | --- |
|
|
1395
|
+
| `title` · requerida | `ReactNode` | — | Título visible o contenido principal. |
|
|
1396
|
+
| `actions` | `readonly TopAppBarAction[]` | `[]` | Acciones relacionadas de la composición. |
|
|
1397
|
+
| `collapsedTitle` | `ReactNode` | — | Título mostrado al contraer la barra. |
|
|
1398
|
+
| `collapseProgress` | `SharedValue<number>` | — | Progreso de contracción. Usa 0 para la barra expandida y 1 para la contraída. Enlaza el desplazamiento en el hilo de interfaz. |
|
|
1399
|
+
| `containerColor` | `ColorValue` | — | Color de la superficie del control. |
|
|
1400
|
+
| `containerColorSource` | `Readonly<Pick<SharedValue<ColorValue>, "get">>` | — | Color animado de la superficie en el hilo de interfaz, por ejemplo durante el desplazamiento. |
|
|
1401
|
+
| `image` | `ReactNode` | — | Logotipo o imagen sobre el título en las variantes flexibles. |
|
|
1402
|
+
| `leading` | `ReactNode` | — | Slot al inicio lógico del contenido. |
|
|
1403
|
+
| `navigationIcon` | `any` | — | Icono de navegación al inicio de la barra. |
|
|
1404
|
+
| `navigationLabel` | `string` | `'Volver'` | Nombre accesible del control de navegación. |
|
|
1405
|
+
| `navigationMode` | `"outlined" \| "contained" \| "contained-tonal"` | — | Tratamiento del botón de navegación. |
|
|
1406
|
+
| `navigationWidthVariant` | `"narrow" \| "default" \| "wide"` | — | Ancho visual del botón de navegación. |
|
|
1407
|
+
| `onNavigationPress` | `(() => void)` | — | Acción asociada al botón de navegación. |
|
|
1408
|
+
| `scrollBehavior` | `AppBarScrollBehavior` | — | Estado y callbacks compartidos con el contenedor desplazable. |
|
|
1409
|
+
| `scrolled` | `boolean` | `false` | Marca la apariencia de la barra cuando el contenido está desplazado. |
|
|
1410
|
+
| `scrolledContainerColor` | `ColorValue` | — | Color de la superficie al desplazar. |
|
|
1411
|
+
| `scrolledSearchContainerColor` | `ColorValue` | — | Color de la superficie de búsqueda al desplazar. |
|
|
1412
|
+
| `search` | `ReactNode` | — | Punto de entrada de un `SearchView` controlado dentro de la barra. |
|
|
1413
|
+
| `searchContainerColor` | `ColorValue` | — | Color del contenedor de búsqueda. Usa un fondo transparente en el disparador hijo para dejar visible este color. |
|
|
1414
|
+
| `statusBarHeight` | `number` | — | Espacio que debe reservar la barra para la barra de estado. |
|
|
1415
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
1416
|
+
| `subtitle` | `string` | — | Contenido secundario bajo el título. |
|
|
1417
|
+
| `testID` | `string` | `'mobile-top-appbar'` | Identificador para automatización en el host. |
|
|
1418
|
+
| `textAlign` | `"start" \| "center"` | `'start'` | Alineación del título. |
|
|
1419
|
+
| `trailing` | `ReactNode` | — | Slot al final lógico del contenido. |
|
|
1420
|
+
| `variant` | `"small" \| "medium-flexible" \| "large-flexible"` | `'small'` | Tratamiento visual o modalidad del componente. |
|
|
1421
|
+
|
|
1422
|
+
<details>
|
|
1423
|
+
<summary>Configuración complementaria de TopAppBar</summary>
|
|
1424
|
+
|
|
1425
|
+
**`useAppBarScrollBehavior`**
|
|
1426
|
+
|
|
1427
|
+
Crea el estado y los callbacks de desplazamiento. Enlaza su resultado con `scrollBehavior` en la barra y con `onScroll` del contenedor. El ejemplo usa un único controlador.
|
|
1428
|
+
|
|
1429
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1430
|
+
| --- | --- | --- | --- |
|
|
1431
|
+
| `behavior` | `AppBarScrollMode` | `'exit-until-collapsed'` | Indica cómo se contrae la barra al desplazar el contenido. |
|
|
1432
|
+
| `snap` | `boolean` | `true` | Activa el ajuste a las posiciones de reposo al terminar el desplazamiento. |
|
|
1433
|
+
|
|
1434
|
+
**`TopAppBarAction`**
|
|
1435
|
+
|
|
1436
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1437
|
+
| --- | --- | --- | --- |
|
|
1438
|
+
| `icon` · requerida | `any` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
1439
|
+
| `key` · requerida | `string` | — | Identificador único y estable dentro del conjunto. |
|
|
1440
|
+
| `label` · requerida | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
1441
|
+
| `onPress` · requerida | `((event: GestureResponderEvent) => unknown) & ((e: GestureResponderEvent) => void)` | — | Ejecuta la acción al activar el control. |
|
|
1442
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
1443
|
+
| `mode` | `"contained" \| "contained-tonal" \| "outlined"` | — | Modo de uso admitido por este componente. |
|
|
1444
|
+
| `widthVariant` | `"narrow" \| "default" \| "wide"` | — | Proporción del botón de icono. |
|
|
1445
|
+
|
|
1446
|
+
</details>
|
|
1447
|
+
|
|
1448
|
+
**Ejemplo**
|
|
1449
|
+
|
|
1450
|
+
```tsx
|
|
1451
|
+
import { useState } from 'react';
|
|
1452
|
+
import { View } from 'react-native';
|
|
1453
|
+
import { TopAppBar, Text } from 'mobile-design/react-native';
|
|
1454
|
+
|
|
1455
|
+
export default function Example() {
|
|
1456
|
+
const [feedback, setFeedback] = useState('');
|
|
1457
|
+
|
|
1458
|
+
return (
|
|
1459
|
+
<View style={{ gap: 16 }}>
|
|
1460
|
+
<TopAppBar
|
|
1461
|
+
variant="medium-flexible"
|
|
1462
|
+
title="Tu biblioteca"
|
|
1463
|
+
navigationIcon="arrow_back"
|
|
1464
|
+
navigationLabel="Volver"
|
|
1465
|
+
onNavigationPress={() =>
|
|
1466
|
+
setFeedback(
|
|
1467
|
+
'Navegación. Regresar a la pantalla anterior',
|
|
1468
|
+
)
|
|
1469
|
+
}
|
|
1470
|
+
actions={[
|
|
1471
|
+
{
|
|
1472
|
+
key: 'search',
|
|
1473
|
+
icon: 'search',
|
|
1474
|
+
label: 'Buscar',
|
|
1475
|
+
onPress: () => setFeedback('Buscar'),
|
|
1476
|
+
},
|
|
1477
|
+
]}
|
|
1478
|
+
/>
|
|
1479
|
+
<Text accessibilityLiveRegion="polite">{feedback}</Text>
|
|
1480
|
+
</View>
|
|
1481
|
+
);
|
|
1482
|
+
}
|
|
1483
|
+
```
|
|
1484
|
+
|
|
1485
|
+
#### NavigationBar
|
|
1486
|
+
|
|
1487
|
+
Permite cambiar entre destinos principales de una interfaz compacta con iconos, etiquetas e indicadores.
|
|
1488
|
+
|
|
1489
|
+
- Define items con key estable, label e icon y conecta value/onValueChange.
|
|
1490
|
+
- Usa entre tres y cinco destinos principales, con iconos y etiquetas breves siempre visibles. Proporciona selectedIcon para representar el destino activo con un icono relleno.
|
|
1491
|
+
- La barra flexible usa variant="short" y una altura mínima de 64 dp. En ventanas compactas combina iconPosition="top" con arrangement="equal". En ventanas medianas combina iconPosition="start" con arrangement="centered".
|
|
1492
|
+
- Los indicadores verticales miden 56 × 32 dp. Los horizontales tienen una altura mínima de 40 dp e incluyen el icono y la etiqueta, separados por 4 dp. El grupo centrado reduce sus anchos cuando el espacio disponible lo requiere.
|
|
1493
|
+
- Sitúa la barra al fondo de la pantalla. SafeArea añade los insets del dispositivo. Usa safeArea={false} dentro de un ejemplo o contenedor que ya los incluya. AccessibilityLabel permite nombrar el conjunto de destinos.
|
|
1494
|
+
|
|
1495
|
+
La barra reporta claves de destino. La pantalla decide qué ruta abrir, qué destino está activo y dónde anclar el conjunto. Si la pantalla ya incorpora el inset inferior, configura `safeArea={false}`.
|
|
1496
|
+
|
|
1497
|
+
**Propiedades de `NavigationBar`**
|
|
1498
|
+
|
|
1499
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1500
|
+
| --- | --- | --- | --- |
|
|
1501
|
+
| `items` · requerida | `readonly NavigationDestination[]` | — | Elementos del conjunto. Usa identificadores únicos y estables. |
|
|
1502
|
+
| `onValueChange` · requerida | `(key: string) => void` | — | Entrega el siguiente valor para actualizar el estado del consumidor. |
|
|
1503
|
+
| `value` · requerida | `string` | — | Valor actual controlado por la pantalla. |
|
|
1504
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
1505
|
+
| `arrangement` | `"centered" \| "equal"` | — | Distribución de destinos a lo ancho de la barra. |
|
|
1506
|
+
| `iconPosition` | `"start" \| "top"` | `'top'` | Posición lógica del icono respecto de la etiqueta. |
|
|
1507
|
+
| `labelVisibility` | `"none" \| "selected" \| "all"` | `'all'` | Configura cuándo se muestra la etiqueta visual. |
|
|
1508
|
+
| `leading` | `ReactNode` | — | Slot al inicio lógico del contenido. |
|
|
1509
|
+
| `safeArea` | `boolean` | `true` | Incluye los insets correspondientes de la ventana. |
|
|
1510
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
1511
|
+
| `testID` | `string` | `'mobile-navigation-bar'` | Identificador para automatización en el host. |
|
|
1512
|
+
| `trailing` | `ReactNode` | — | Slot al final lógico del contenido. |
|
|
1513
|
+
| `variant` | `"standard" \| "short"` | `'short'` | Tratamiento visual o modalidad del componente. |
|
|
1514
|
+
|
|
1515
|
+
<details>
|
|
1516
|
+
<summary>Configuración complementaria de NavigationBar</summary>
|
|
1517
|
+
|
|
1518
|
+
**`NavigationDestination`**
|
|
1519
|
+
|
|
1520
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1521
|
+
| --- | --- | --- | --- |
|
|
1522
|
+
| `icon` · requerida | `any` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
1523
|
+
| `key` · requerida | `string` | — | Identificador único y estable dentro del conjunto. |
|
|
1524
|
+
| `label` · requerida | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
1525
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
1526
|
+
| `badge` | `string \| number \| boolean` | — | Insignia que acompaña al elemento de menú. |
|
|
1527
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
1528
|
+
| `hiddenWhenCollapsed` | `boolean` | — | Oculta el destino cuando el rail se contrae, excepto si es el destino seleccionado. |
|
|
1529
|
+
| `section` | `string` | — | Etiqueta de la sección que agrupa destinos consecutivos en el drawer. |
|
|
1530
|
+
| `selectedIcon` | `any` | — | Icono alternativo para el estado activo. |
|
|
1531
|
+
|
|
1532
|
+
</details>
|
|
1533
|
+
|
|
1534
|
+
**Ejemplo**
|
|
1535
|
+
|
|
1536
|
+
```tsx
|
|
1537
|
+
import { useState } from 'react';
|
|
1538
|
+
import { NavigationBar } from 'mobile-design/react-native';
|
|
1539
|
+
|
|
1540
|
+
export default function Example() {
|
|
1541
|
+
const [value, setValue] = useState('home');
|
|
1542
|
+
|
|
1543
|
+
return (
|
|
1544
|
+
<NavigationBar
|
|
1545
|
+
value={value}
|
|
1546
|
+
onValueChange={setValue}
|
|
1547
|
+
items={[
|
|
1548
|
+
{
|
|
1549
|
+
key: 'home',
|
|
1550
|
+
label: 'Inicio',
|
|
1551
|
+
icon: 'home-outline',
|
|
1552
|
+
selectedIcon: 'home',
|
|
1553
|
+
},
|
|
1554
|
+
{
|
|
1555
|
+
key: 'library',
|
|
1556
|
+
label: 'Biblioteca',
|
|
1557
|
+
icon: 'folder-outline',
|
|
1558
|
+
badge: 3,
|
|
1559
|
+
},
|
|
1560
|
+
{ key: 'saved', label: 'Guardado', icon: 'bookmark-outline' },
|
|
1561
|
+
]}
|
|
1562
|
+
/>
|
|
1563
|
+
);
|
|
1564
|
+
}
|
|
1565
|
+
```
|
|
1566
|
+
|
|
1567
|
+
#### NavigationRail
|
|
1568
|
+
|
|
1569
|
+
Mantiene destinos principales en una columna que puede expandirse para dar contexto adicional.
|
|
1570
|
+
|
|
1571
|
+
- Pasa items, value y onValueChange y coloca el rail al inicio lógico del layout, junto al contenido. La pantalla decide el breakpoint y sus rutas.
|
|
1572
|
+
- Controla expanded/onExpandedChange para alternar las presentaciones contraída y expandida. Header, footer y fab son slots opcionales. El FAB debe tener elevación 0 y puede pasar a Extended FAB al expandir.
|
|
1573
|
+
- En ventanas compactas utiliza NavigationRailModal con open/onOpenChange, o una Navigation bar. La selección comparte el mismo value entre presentaciones. OnClosed permite coordinar una acción al completar la salida.
|
|
1574
|
+
|
|
1575
|
+
Controla `expanded` para cambiar de ancho sin reiniciar el destino. La pantalla decide el breakpoint. El modal puede compartir los mismos `items` y `value` con la variante persistente.
|
|
1576
|
+
|
|
1577
|
+
**Propiedades de `NavigationRail`**
|
|
1578
|
+
|
|
1579
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1580
|
+
| --- | --- | --- | --- |
|
|
1581
|
+
| `items` · requerida | `readonly (NavigationDestination & { href?: string; })[]` | — | Elementos del conjunto. Usa identificadores únicos y estables. |
|
|
1582
|
+
| `onValueChange` · requerida | `(key: string) => void` | — | Entrega el siguiente valor para actualizar el estado del consumidor. |
|
|
1583
|
+
| `value` · requerida | `string` | — | Valor actual controlado por la pantalla. |
|
|
1584
|
+
| `accessibilityLabel` | `string` | `'Navegación'` | Nombre que anuncia la tecnología de asistencia. |
|
|
1585
|
+
| `alignment` | `"top" \| "center"` | `'top'` | Alineación de los elementos en su región. |
|
|
1586
|
+
| `collapsedWidth` | `number` | `96` | Ancho del rail contraído. |
|
|
1587
|
+
| `expanded` | `boolean` | `false` | Estado controlado de expansión. |
|
|
1588
|
+
| `expandedWidth` | `number` | `256` | Ancho del rail expandido. |
|
|
1589
|
+
| `fab` | `ReactNode` | — | Slot para la acción flotante del layout. |
|
|
1590
|
+
| `footer` | `ReactNode` | — | Contenido que permanece en el pie. |
|
|
1591
|
+
| `header` | `ReactNode` | — | Contenido que permanece en la cabecera. |
|
|
1592
|
+
| `indicatorWidth` | `"content" \| "full"` | `'content'` | Configura cuánto espacio ocupa el indicador de destino. |
|
|
1593
|
+
| `labelVisibility` | `"none" \| "selected" \| "all"` | `'all'` | Configura cuándo se muestra la etiqueta visual. |
|
|
1594
|
+
| `onExpandedChange` | `((expanded: boolean) => void)` | — | Recibe el siguiente estado de expansión. |
|
|
1595
|
+
| `scrollIndicators` | `ScrollIndicatorOptions` | — | Configura los indicadores de desplazamiento del paquete. |
|
|
1596
|
+
| `showDivider` | `boolean` | `false` | Muestra la separación visual. |
|
|
1597
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
1598
|
+
| `testID` | `string` | `'mobile-navigation-rail'` | Identificador para automatización en el host. |
|
|
1599
|
+
| `toggleAccessibilityLabel` | `string` | — | Nombre accesible personalizado de la acción de menú cuando la expansión cierra el rail modal. |
|
|
1600
|
+
|
|
1601
|
+
<details>
|
|
1602
|
+
<summary>Configuración complementaria de NavigationRail</summary>
|
|
1603
|
+
|
|
1604
|
+
**`NavigationRailModal`**
|
|
1605
|
+
|
|
1606
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1607
|
+
| --- | --- | --- | --- |
|
|
1608
|
+
| `items` · requerida | `readonly NavigationDestination[]` | — | Elementos del conjunto. Usa identificadores únicos y estables. |
|
|
1609
|
+
| `onOpenChange` · requerida | `(open: boolean) => void` | — | Solicita abrir o cerrar. Actualiza `open` en la pantalla. |
|
|
1610
|
+
| `onValueChange` · requerida | `(key: string) => void` | — | Entrega el siguiente valor para actualizar el estado del consumidor. |
|
|
1611
|
+
| `open` · requerida | `boolean` | — | Controla si la superficie está abierta. |
|
|
1612
|
+
| `value` · requerida | `string` | — | Valor actual controlado por la pantalla. |
|
|
1613
|
+
| `alignment` | `"top" \| "center"` | — | Alineación de los elementos en su región. |
|
|
1614
|
+
| `closeOnSelect` | `boolean` | `true` | Cierra la superficie después de elegir un destino. |
|
|
1615
|
+
| `dismissible` | `boolean` | `true` | Permite descartar la superficie con sus gestos y acciones de cierre. |
|
|
1616
|
+
| `fab` | `ReactNode` | — | Slot para la acción flotante del layout. |
|
|
1617
|
+
| `footer` | `ReactNode` | — | Contenido que permanece en el pie. |
|
|
1618
|
+
| `header` | `ReactNode` | — | Contenido que permanece en la cabecera. |
|
|
1619
|
+
| `indicatorWidth` | `"content" \| "full"` | — | Configura cuánto espacio ocupa el indicador de destino. |
|
|
1620
|
+
| `onClosed` | `(() => void)` | — | Avisa cuando concluye la salida de la superficie. |
|
|
1621
|
+
| `scrollIndicators` | `ScrollIndicatorOptions` | — | Configura los indicadores de desplazamiento del paquete. |
|
|
1622
|
+
| `testID` | `string` | `'mobile-navigation-rail-modal'` | Identificador para automatización en el host. |
|
|
1623
|
+
| `title` | `string` | — | Título visible o contenido principal. |
|
|
1624
|
+
| `width` | `number` | `256` | Ancho de la superficie. |
|
|
1625
|
+
|
|
1626
|
+
**`NavigationDestination`**
|
|
1627
|
+
|
|
1628
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1629
|
+
| --- | --- | --- | --- |
|
|
1630
|
+
| `icon` · requerida | `any` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
1631
|
+
| `key` · requerida | `string` | — | Identificador único y estable dentro del conjunto. |
|
|
1632
|
+
| `label` · requerida | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
1633
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
1634
|
+
| `badge` | `string \| number \| boolean` | — | Insignia que acompaña al elemento de menú. |
|
|
1635
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
1636
|
+
| `hiddenWhenCollapsed` | `boolean` | — | Oculta el destino cuando el rail se contrae, excepto si es el destino seleccionado. |
|
|
1637
|
+
| `section` | `string` | — | Etiqueta de la sección que agrupa destinos consecutivos en el drawer. |
|
|
1638
|
+
| `selectedIcon` | `any` | — | Icono alternativo para el estado activo. |
|
|
1639
|
+
|
|
1640
|
+
</details>
|
|
1641
|
+
|
|
1642
|
+
**Ejemplo**
|
|
1643
|
+
|
|
1644
|
+
```tsx
|
|
1645
|
+
import { useState } from 'react';
|
|
1646
|
+
import { View } from 'react-native';
|
|
1647
|
+
import { ExtendedFAB, NavigationRail, Text } from 'mobile-design/react-native';
|
|
1648
|
+
|
|
1649
|
+
export default function Example() {
|
|
1650
|
+
const [value, setValue] = useState('home');
|
|
1651
|
+
const [expanded, setExpanded] = useState(false);
|
|
1652
|
+
const [drafts, setDrafts] = useState(0);
|
|
1653
|
+
|
|
1654
|
+
return (
|
|
1655
|
+
<View style={{ height: 600, flexDirection: 'row' }}>
|
|
1656
|
+
<NavigationRail
|
|
1657
|
+
value={value}
|
|
1658
|
+
onValueChange={setValue}
|
|
1659
|
+
accessibilityLabel="Navegación principal"
|
|
1660
|
+
expanded={expanded}
|
|
1661
|
+
onExpandedChange={setExpanded}
|
|
1662
|
+
expandedWidth={256}
|
|
1663
|
+
fab={
|
|
1664
|
+
<ExtendedFAB
|
|
1665
|
+
icon="edit"
|
|
1666
|
+
label="Crear"
|
|
1667
|
+
elevation={0}
|
|
1668
|
+
expanded={expanded}
|
|
1669
|
+
onPress={() => {
|
|
1670
|
+
setDrafts((count) => count + 1);
|
|
1671
|
+
setValue('drafts');
|
|
1672
|
+
}}
|
|
1673
|
+
/>
|
|
1674
|
+
}
|
|
1675
|
+
items={[
|
|
1676
|
+
{
|
|
1677
|
+
key: 'home',
|
|
1678
|
+
label: 'Inicio',
|
|
1679
|
+
icon: 'home',
|
|
1680
|
+
selectedIcon: 'home_fill1',
|
|
1681
|
+
},
|
|
1682
|
+
{
|
|
1683
|
+
key: 'search',
|
|
1684
|
+
label: 'Explorar',
|
|
1685
|
+
icon: 'explore',
|
|
1686
|
+
selectedIcon: 'explore_fill1',
|
|
1687
|
+
},
|
|
1688
|
+
{
|
|
1689
|
+
key: 'drafts',
|
|
1690
|
+
label: 'Borradores',
|
|
1691
|
+
icon: 'draft',
|
|
1692
|
+
badge: drafts || undefined,
|
|
1693
|
+
},
|
|
1694
|
+
{
|
|
1695
|
+
key: 'archive',
|
|
1696
|
+
label: 'Archivo',
|
|
1697
|
+
icon: 'archive',
|
|
1698
|
+
section: 'Biblioteca',
|
|
1699
|
+
hiddenWhenCollapsed: true,
|
|
1700
|
+
},
|
|
1701
|
+
]}
|
|
1702
|
+
/>
|
|
1703
|
+
<View style={{ flex: 1, padding: 24 }}>
|
|
1704
|
+
<Text>Destino activo: {value}</Text>
|
|
1705
|
+
</View>
|
|
1706
|
+
</View>
|
|
1707
|
+
);
|
|
1708
|
+
}
|
|
1709
|
+
```
|
|
1710
|
+
|
|
1711
|
+
#### NavigationDrawer
|
|
1712
|
+
|
|
1713
|
+
Organiza destinos y secciones en un panel lateral estándar o modal.
|
|
1714
|
+
|
|
1715
|
+
- Define items y controla value/onValueChange. Header y footer añaden contenido de contexto.
|
|
1716
|
+
- Usa NavigationDrawerModal para superponer la navegación sobre un scrim. CloseOnSelect cierra al elegir un destino. Conserva su valor inicial true en la navegación habitual.
|
|
1717
|
+
- onClosed se ejecuta al terminar la salida. Úsalo para iniciar una ruta o enfocar el nuevo contenido sin competir con el cierre. Una reapertura interrumpe la salida anterior.
|
|
1718
|
+
- El contenedor define la altura disponible. Los destinos desplazan dentro del drawer mientras header y footer permanecen fuera de esa lista.
|
|
1719
|
+
|
|
1720
|
+
La vista estándar comparte espacio con el contenido. La modal superpone el panel y cierra al seleccionar por defecto. Usa el callback de cierre completo si el nuevo destino requiere recibir foco.
|
|
1721
|
+
|
|
1722
|
+
**Propiedades de `NavigationDrawer`**
|
|
1723
|
+
|
|
1724
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1725
|
+
| --- | --- | --- | --- |
|
|
1726
|
+
| `items` · requerida | `readonly NavigationDrawerDestination[]` | — | Elementos del conjunto. Usa identificadores únicos y estables. |
|
|
1727
|
+
| `onValueChange` · requerida | `(key: string) => void` | — | Entrega el siguiente valor para actualizar el estado del consumidor. |
|
|
1728
|
+
| `value` · requerida | `string` | — | Valor actual controlado por la pantalla. |
|
|
1729
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
1730
|
+
| `children` | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
1731
|
+
| `footer` | `ReactNode` | — | Contenido que permanece en el pie. |
|
|
1732
|
+
| `header` | `ReactNode` | — | Contenido que permanece en la cabecera. |
|
|
1733
|
+
| `modal` | `boolean` | `false` | Activa la composición modal del panel. |
|
|
1734
|
+
| `scrollIndicators` | `ScrollIndicatorOptions` | — | Configura los indicadores de desplazamiento del paquete. |
|
|
1735
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
1736
|
+
| `testID` | `string` | `'mobile-navigation-drawer-standard'` | Identificador para automatización en el host. |
|
|
1737
|
+
| `width` | `number` | `360` | Ancho de la superficie. |
|
|
1738
|
+
|
|
1739
|
+
<details>
|
|
1740
|
+
<summary>Configuración complementaria de NavigationDrawer</summary>
|
|
1741
|
+
|
|
1742
|
+
**`NavigationDrawerModal`**
|
|
1743
|
+
|
|
1744
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1745
|
+
| --- | --- | --- | --- |
|
|
1746
|
+
| `items` · requerida | `readonly NavigationDrawerDestination[]` | — | Elementos del conjunto. Usa identificadores únicos y estables. |
|
|
1747
|
+
| `onOpenChange` · requerida | `(open: boolean) => void` | — | Solicita abrir o cerrar. Actualiza `open` en la pantalla. |
|
|
1748
|
+
| `onValueChange` · requerida | `(key: string) => void` | — | Entrega el siguiente valor para actualizar el estado del consumidor. |
|
|
1749
|
+
| `open` · requerida | `boolean` | — | Controla si la superficie está abierta. |
|
|
1750
|
+
| `value` · requerida | `string` | — | Valor actual controlado por la pantalla. |
|
|
1751
|
+
| `closeOnSelect` | `boolean` | `true` | Cierra la superficie después de elegir un destino. |
|
|
1752
|
+
| `dismissible` | `boolean` | `true` | Permite descartar la superficie con sus gestos y acciones de cierre. |
|
|
1753
|
+
| `footer` | `ReactNode` | — | Contenido que permanece en el pie. |
|
|
1754
|
+
| `header` | `ReactNode` | — | Contenido que permanece en la cabecera. |
|
|
1755
|
+
| `onClosed` | `(() => void)` | — | Avisa cuando concluye la salida de la superficie. |
|
|
1756
|
+
| `scrollIndicators` | `ScrollIndicatorOptions` | — | Configura los indicadores de desplazamiento del paquete. |
|
|
1757
|
+
| `testID` | `string` | `'mobile-navigation-drawer'` | Identificador para automatización en el host. |
|
|
1758
|
+
| `title` | `string` | `'Navegación'` | Título visible o contenido principal. |
|
|
1759
|
+
| `width` | `number` | `360` | Ancho de la superficie. |
|
|
1760
|
+
|
|
1761
|
+
**`NavigationDrawerItem`**
|
|
1762
|
+
|
|
1763
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1764
|
+
| --- | --- | --- | --- |
|
|
1765
|
+
| `item` · requerida | `NavigationDrawerDestination` | — | Destino de navegación con una clave y una etiqueta. |
|
|
1766
|
+
| `selected` · requerida | `boolean` | — | Selección persistente controlada por el consumidor. |
|
|
1767
|
+
| `contentStyle` | `StyleProp<ViewStyle>` | — | Estilo del contenido dentro de la superficie. |
|
|
1768
|
+
| `focusRef` | `((target: unknown) => void)` | — | Referencia usada para coordinar el foco entre destinos. |
|
|
1769
|
+
| `href` | `string` | — | Dirección del enlace real en el navegador. |
|
|
1770
|
+
| `onKeyDown` | `((event: NavigationFocusEvent) => void)` | — | Callback de teclado en navegador. |
|
|
1771
|
+
| `onPress` | `(() => void)` | — | Ejecuta la acción al activar el control. |
|
|
1772
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
1773
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
1774
|
+
|
|
1775
|
+
**`NavigationDrawerDestination`**
|
|
1776
|
+
|
|
1777
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1778
|
+
| --- | --- | --- | --- |
|
|
1779
|
+
| `key` · requerida | `string` | — | Identificador único y estable dentro del conjunto. |
|
|
1780
|
+
| `label` · requerida | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
1781
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
1782
|
+
| `badge` | `string \| number \| boolean` | — | Insignia que acompaña al elemento de menú. |
|
|
1783
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
1784
|
+
| `hiddenWhenCollapsed` | `boolean` | — | Oculta el destino cuando el rail se contrae, excepto si es el destino seleccionado. |
|
|
1785
|
+
| `icon` | `any` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
1786
|
+
| `section` | `string` | — | Etiqueta de la sección que agrupa destinos consecutivos en el drawer. |
|
|
1787
|
+
| `selectedIcon` | `any` | — | Icono alternativo para el estado activo. |
|
|
1788
|
+
|
|
1789
|
+
</details>
|
|
1790
|
+
|
|
1791
|
+
**Ejemplo**
|
|
1792
|
+
|
|
1793
|
+
```tsx
|
|
1794
|
+
import { useState } from 'react';
|
|
1795
|
+
import { View } from 'react-native';
|
|
1796
|
+
import {
|
|
1797
|
+
Button,
|
|
1798
|
+
NavigationDrawer,
|
|
1799
|
+
NavigationDrawerModal,
|
|
1800
|
+
Text,
|
|
1801
|
+
} from 'mobile-design/react-native';
|
|
1802
|
+
|
|
1803
|
+
export default function Example() {
|
|
1804
|
+
const [value, setValue] = useState('folder');
|
|
1805
|
+
const [open, setOpen] = useState(false);
|
|
1806
|
+
const items = [
|
|
1807
|
+
{
|
|
1808
|
+
key: 'folder',
|
|
1809
|
+
label: 'Carpetas',
|
|
1810
|
+
icon: 'folder',
|
|
1811
|
+
selectedIcon: 'folder',
|
|
1812
|
+
badge: 12,
|
|
1813
|
+
},
|
|
1814
|
+
{
|
|
1815
|
+
key: 'sent',
|
|
1816
|
+
label: 'Compartidos',
|
|
1817
|
+
icon: 'send',
|
|
1818
|
+
selectedIcon: 'send_fill1',
|
|
1819
|
+
},
|
|
1820
|
+
{
|
|
1821
|
+
key: 'drafts',
|
|
1822
|
+
label: 'Pendientes',
|
|
1823
|
+
icon: 'draft',
|
|
1824
|
+
section: 'Biblioteca',
|
|
1825
|
+
},
|
|
1826
|
+
{
|
|
1827
|
+
key: 'archive',
|
|
1828
|
+
label: 'Archivados',
|
|
1829
|
+
icon: 'archive',
|
|
1830
|
+
section: 'Biblioteca',
|
|
1831
|
+
},
|
|
1832
|
+
];
|
|
1833
|
+
|
|
1834
|
+
return (
|
|
1835
|
+
<View style={{ gap: 16 }}>
|
|
1836
|
+
<NavigationDrawer
|
|
1837
|
+
items={items}
|
|
1838
|
+
value={value}
|
|
1839
|
+
onValueChange={setValue}
|
|
1840
|
+
accessibilityLabel="Proyectos"
|
|
1841
|
+
style={{ height: 360 }}
|
|
1842
|
+
/>
|
|
1843
|
+
<Text>
|
|
1844
|
+
Destino activo: {items.find((item) => item.key === value)?.label}
|
|
1845
|
+
</Text>
|
|
1846
|
+
<Button onPress={() => setOpen(true)}>Abrir navegación modal</Button>
|
|
1847
|
+
<NavigationDrawerModal
|
|
1848
|
+
title="Proyectos"
|
|
1849
|
+
open={open}
|
|
1850
|
+
onOpenChange={setOpen}
|
|
1851
|
+
items={items}
|
|
1852
|
+
value={value}
|
|
1853
|
+
onValueChange={setValue}
|
|
1854
|
+
/>
|
|
1855
|
+
</View>
|
|
1856
|
+
);
|
|
1857
|
+
}
|
|
1858
|
+
```
|
|
1859
|
+
|
|
1860
|
+
#### Tabs y TabsPager
|
|
1861
|
+
|
|
1862
|
+
Organiza contenido del mismo nivel mediante pestañas Primary o Secondary y un indicador de selección.
|
|
1863
|
+
|
|
1864
|
+
- Define destinos pares con key y label. Primary organiza los destinos principales. Secondary añade un nivel dentro del contenido. Comparte value/onValueChange entre Tabs y contenido.
|
|
1865
|
+
- Con TabsPager, enlaza position del hilo UI y selectionRequest para coordinar toque, reelección y swipe.
|
|
1866
|
+
- Asigna un nativeID único a cada pestaña y su panelID al panel correspondiente. TabsPager usa esas mismas propiedades para asociar el panel con su etiqueta. Si compones el contenido manualmente, conserva esa relación.
|
|
1867
|
+
- Usa etiquetas breves y una configuración coherente de iconos en el conjunto. Los iconos sin etiqueta visual necesitan accessibilityLabel. El badge describe novedades y se actualiza cuando se consulta el contenido.
|
|
1868
|
+
|
|
1869
|
+
Para deslizar entre paneles comparte `value`, `position` y la solicitud de selección entre `Tabs` y `TabsPager`. Si gestionas los paneles por tu cuenta, enlaza el `nativeID` de la pestaña y el `panelID` del panel.
|
|
1870
|
+
|
|
1871
|
+
**Propiedades de `Tabs`**
|
|
1872
|
+
|
|
1873
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1874
|
+
| --- | --- | --- | --- |
|
|
1875
|
+
| `items` · requerida | `readonly TabItem[]` | — | Elementos del conjunto. Usa identificadores únicos y estables. |
|
|
1876
|
+
| `onValueChange` · requerida | `(key: string) => void` | — | Entrega el siguiente valor para actualizar el estado del consumidor. |
|
|
1877
|
+
| `value` · requerida | `string` | — | Valor actual controlado por la pantalla. |
|
|
1878
|
+
| `accessibilityLabel` | `string` | `'Pestañas'` | Nombre que anuncia la tecnología de asistencia. |
|
|
1879
|
+
| `edgePadding` | `number` | — | Margen en cada extremo de la fila desplazable de pestañas. |
|
|
1880
|
+
| `iconPosition` | `"start" \| "top"` | `'top'` | Posición lógica del icono respecto de la etiqueta. |
|
|
1881
|
+
| `onTabPress` | `((key: string) => void)` | — | Se ejecuta en cada activación por pulsación o teclado, incluso al volver a elegir la pestaña actual durante un gesto. |
|
|
1882
|
+
| `position` | `SharedValue<number>` | — | Posición fraccional compartida con TabsPager para animar el indicador. |
|
|
1883
|
+
| `scrollable` | `boolean` | `false` | Habilita el desplazamiento de la fila o superficie. |
|
|
1884
|
+
| `scrollIndicators` | `ScrollIndicatorOptions` | — | Configura los indicadores de desplazamiento del paquete. |
|
|
1885
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
1886
|
+
| `testID` | `string` | `'mobile-tabs'` | Identificador para automatización en el host. |
|
|
1887
|
+
| `variant` | `"primary" \| "secondary"` | `'primary'` | Tratamiento visual o modalidad del componente. |
|
|
1888
|
+
|
|
1889
|
+
<details>
|
|
1890
|
+
<summary>Configuración complementaria de Tabs y TabsPager</summary>
|
|
1891
|
+
|
|
1892
|
+
**`TabsPager`**
|
|
1893
|
+
|
|
1894
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1895
|
+
| --- | --- | --- | --- |
|
|
1896
|
+
| `items` · requerida | `readonly TabItem[]` | — | Elementos del conjunto. Usa identificadores únicos y estables. |
|
|
1897
|
+
| `onValueChange` · requerida | `(key: string) => void` | — | Entrega el siguiente valor para actualizar el estado del consumidor. |
|
|
1898
|
+
| `position` · requerida | `SharedValue<number>` | — | Valor compartido para sincronizar página e indicador de Tabs. |
|
|
1899
|
+
| `renderPage` · requerida | `(item: TabItem, selected: boolean) => ReactNode` | — | Compone el contenido asociado a cada pestaña. |
|
|
1900
|
+
| `value` · requerida | `string` | — | Valor actual controlado por la pantalla. |
|
|
1901
|
+
| `enabled` | `boolean` | `true` | Usa `false` para desactivar el paginador y cancelar movimientos pendientes mientras el panel esté ocupado o inactivo. |
|
|
1902
|
+
| `selectionRequest` | `number` | `0` | Señal para coordinar una solicitud de selección en TabsPager. |
|
|
1903
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
1904
|
+
| `swipeEnabled` | `boolean` | `true` | Permite cambiar de página mediante un gesto horizontal. |
|
|
1905
|
+
| `testID` | `string` | `'mobile-tabs-pager'` | Identificador para automatización en el host. |
|
|
1906
|
+
|
|
1907
|
+
**`TabItem`**
|
|
1908
|
+
|
|
1909
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1910
|
+
| --- | --- | --- | --- |
|
|
1911
|
+
| `key` · requerida | `string` | — | Identificador único y estable dentro del conjunto. |
|
|
1912
|
+
| `label` · requerida | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
1913
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
1914
|
+
| `badge` | `string \| number \| boolean` | — | Insignia que acompaña al elemento de menú. |
|
|
1915
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
1916
|
+
| `icon` | `any` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
1917
|
+
| `nativeID` | `string` | — | Identificador del control para enlazarlo a contenido accesible. |
|
|
1918
|
+
| `panelID` | `string` | — | Identificador del panel que corresponde a la pestaña. |
|
|
1919
|
+
|
|
1920
|
+
</details>
|
|
1921
|
+
|
|
1922
|
+
**Ejemplo**
|
|
1923
|
+
|
|
1924
|
+
```tsx
|
|
1925
|
+
import { useState } from 'react';
|
|
1926
|
+
import { View } from 'react-native';
|
|
1927
|
+
import { useSharedValue } from 'react-native-reanimated';
|
|
1928
|
+
import { Tabs, TabsPager, Text } from 'mobile-design/react-native';
|
|
1929
|
+
|
|
1930
|
+
export default function Example() {
|
|
1931
|
+
const [value, setValue] = useState('files');
|
|
1932
|
+
const [request, setRequest] = useState(0);
|
|
1933
|
+
const position = useSharedValue(0);
|
|
1934
|
+
const items = [
|
|
1935
|
+
{
|
|
1936
|
+
key: 'files',
|
|
1937
|
+
label: 'Archivos',
|
|
1938
|
+
icon: 'folder',
|
|
1939
|
+
nativeID: 'library-files-tab',
|
|
1940
|
+
panelID: 'library-files-panel',
|
|
1941
|
+
},
|
|
1942
|
+
{
|
|
1943
|
+
key: 'recent',
|
|
1944
|
+
label: 'Recientes',
|
|
1945
|
+
icon: 'schedule',
|
|
1946
|
+
nativeID: 'library-recent-tab',
|
|
1947
|
+
panelID: 'library-recent-panel',
|
|
1948
|
+
},
|
|
1949
|
+
];
|
|
1950
|
+
|
|
1951
|
+
return (
|
|
1952
|
+
<View style={{ flex: 1 }}>
|
|
1953
|
+
<Tabs
|
|
1954
|
+
items={items}
|
|
1955
|
+
value={value}
|
|
1956
|
+
onValueChange={setValue}
|
|
1957
|
+
position={position}
|
|
1958
|
+
onTabPress={() => setRequest((value) => value + 1)}
|
|
1959
|
+
/>
|
|
1960
|
+
<TabsPager
|
|
1961
|
+
items={items}
|
|
1962
|
+
value={value}
|
|
1963
|
+
onValueChange={setValue}
|
|
1964
|
+
position={position}
|
|
1965
|
+
selectionRequest={request}
|
|
1966
|
+
renderPage={(item) => (
|
|
1967
|
+
<View style={{ padding: 24 }}>
|
|
1968
|
+
<Text>{item.label}</Text>
|
|
1969
|
+
</View>
|
|
1970
|
+
)}
|
|
1971
|
+
/>
|
|
1972
|
+
</View>
|
|
1973
|
+
);
|
|
1974
|
+
}
|
|
1975
|
+
```
|
|
1976
|
+
|
|
1977
|
+
#### Searchbar y SearchView
|
|
1978
|
+
|
|
1979
|
+
Conecta una barra de búsqueda con una vista que presenta consulta, sugerencias y resultados.
|
|
1980
|
+
|
|
1981
|
+
- Searchbar compone el campo con los IconButton, símbolos y colores compartidos. SearchView añade el punto de entrada, la transición y la vista de sugerencias/resultados.
|
|
1982
|
+
- Controla open/onOpenChange, value/onChangeText y onSearch. OnResultPress entrega el dato elegido. RenderResults permite componer listas propias. FooterContent conserva controles contextuales al pie.
|
|
1983
|
+
- La barra mide 56 dp, con objetivos de 48 dp, iconos de 24 dp y gaps interiores de 4 dp. Texto e iconos conservan sus centros al escribir, borrar o ampliar la fuente. El título de búsqueda es su etiqueta accesible.
|
|
1984
|
+
|
|
1985
|
+
El filtrado y la obtención de resultados pertenecen al consumidor. Si las sugerencias llegan de un servicio, descarta respuestas de consultas anteriores. `SearchTrigger` y `SearchIconButton` ayudan a construir el punto de entrada y sus acciones.
|
|
1986
|
+
|
|
1987
|
+
**Propiedades de `Searchbar`**
|
|
1988
|
+
|
|
1989
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
1990
|
+
| --- | --- | --- | --- |
|
|
1991
|
+
| `value` · requerida | `string` | — | Valor actual controlado por la pantalla. |
|
|
1992
|
+
| `accessibilityHint` | `string` | — | Contexto adicional sobre la acción. |
|
|
1993
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
1994
|
+
| `accessibilityState` | `AccessibilityState` | — | Estado semántico del control. |
|
|
1995
|
+
| `autoCapitalize` | `AutoCapitalize` | `'none'` | Capitalización automática. Elige `characters` para todas las letras, `words` para cada palabra, `sentences` para cada oración o `none` para conservar la entrada. |
|
|
1996
|
+
| `autoCorrect` | `boolean` | `false` | Activa la autocorrección de la entrada. |
|
|
1997
|
+
| `children` | `React.ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
1998
|
+
| `clearAccessibilityLabel` | `string` | `'Borrar búsqueda'` | Nombre que anuncia el lector de pantalla para el botón. Proporciona una etiqueta que describa la acción. |
|
|
1999
|
+
| `clearIcon` | `IconSource` | `'close'` | Icono de borrar. Se muestra cuando hay texto, la carga está inactiva y el espacio final queda libre de contenido personalizado. |
|
|
2000
|
+
| `editable` | `boolean` | `true` | Permite editar el texto de búsqueda. |
|
|
2001
|
+
| `elevation` | `0 \| Animated.Value \| 1 \| 2 \| 3 \| 4 \| 5` | `0` | Nivel de elevación de la superficie. |
|
|
2002
|
+
| `icon` | `IconSource` | `'search'` | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
2003
|
+
| `iconColor` | `ColorValue` | — | Color del icono. |
|
|
2004
|
+
| `inputStyle` | `StyleProp<TextStyle>` | — | Estilo que recibe la entrada de texto interna. |
|
|
2005
|
+
| `loading` | `Boolean` | `false` | Representa una operación en curso. |
|
|
2006
|
+
| `maxLength` | `number` | — | Limita la entrada al número de caracteres indicado. |
|
|
2007
|
+
| `mode` | `"bar" \| "view"` | `'bar'` | Controla la presentación como barra independiente o dentro de una vista de búsqueda. |
|
|
2008
|
+
| `multiline` | `boolean` | — | Permite escribir en varias líneas. |
|
|
2009
|
+
| `nativeID` | `string` | — | Identificador del control para enlazarlo a contenido accesible. |
|
|
2010
|
+
| `numberOfLines` | `number` | — | Fija el número de líneas de la entrada cuando `multiline` está habilitado. |
|
|
2011
|
+
| `onChange` | `((e: TextInputChangeEvent) => unknown)` | — | Evento de cambio de la entrada subyacente. |
|
|
2012
|
+
| `onChangeText` | `(((text: string) => unknown) & ((query: string) => void))` | — | Comunica el nuevo texto para actualizar el valor controlado. |
|
|
2013
|
+
| `onClearIconPress` | `((e: GestureResponderEvent) => void)` | — | Se ejecuta después de vaciar la consulta con el botón de borrar. |
|
|
2014
|
+
| `onIconPress` | `((e: GestureResponderEvent) => void)` | — | Acción del icono independiente. |
|
|
2015
|
+
| `onPress` | `((event: GestureResponderEvent) => unknown)` | — | Ejecuta la acción al activar el control. |
|
|
2016
|
+
| `onTraileringIconPress` | `((e: GestureResponderEvent) => void)` | — | Se ejecuta al pulsar el icono adicional del extremo final. |
|
|
2017
|
+
| `placeholder` | `string` | `'Buscar'` | Texto de orientación cuando el campo está vacío. |
|
|
2018
|
+
| `placeholderTextColor` | `ColorValue` | — | Color del texto que orienta al usuario cuando el campo está vacío. |
|
|
2019
|
+
| `ref` | `React.Ref<TextInputHandles>` | — | Referencia imperativa con las operaciones del componente anfitrión. |
|
|
2020
|
+
| `right` | `((props: { color: ColorValue; style: Style; testID: string; }) => React.ReactNode)` | — | Contenido del lado final. |
|
|
2021
|
+
| `searchAccessibilityLabel` | `string` | `'Buscar'` | Nombre que anuncia el lector de pantalla para el botón. Proporciona una etiqueta que describa la acción. |
|
|
2022
|
+
| `showDivider` | `boolean` | `true` | Muestra la separación visual. |
|
|
2023
|
+
| `style` | `Consultar el tipo TypeScript` | — | Estilo de la superficie exterior. |
|
|
2024
|
+
| `testID` | `string` | `'search-bar'` | Identificador para automatización en el host. |
|
|
2025
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
2026
|
+
| `traileringIcon` | `IconSource` | — | Icono adicional al final de la barra. |
|
|
2027
|
+
| `traileringIconAccessibilityLabel` | `string` | — | Nombre accesible del botón con icono adicional al final de la barra. |
|
|
2028
|
+
| `traileringIconColor` | `ColorValue` | — | Color del icono adicional al final. |
|
|
2029
|
+
|
|
2030
|
+
<details>
|
|
2031
|
+
<summary>Configuración complementaria de Searchbar y SearchView</summary>
|
|
2032
|
+
|
|
2033
|
+
**`SearchView`**
|
|
2034
|
+
|
|
2035
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2036
|
+
| --- | --- | --- | --- |
|
|
2037
|
+
| `onChangeText` · requerida | `(value: string) => void` | — | Comunica el nuevo texto para actualizar el valor controlado. |
|
|
2038
|
+
| `onOpenChange` · requerida | `(open: boolean) => void` | — | Solicita abrir o cerrar. Actualiza `open` en la pantalla. |
|
|
2039
|
+
| `onSearch` · requerida | `(query: string) => void` | — | Ejecuta la consulta cuando se confirma la entrada. |
|
|
2040
|
+
| `open` · requerida | `boolean` | — | Controla si la superficie está abierta. |
|
|
2041
|
+
| `value` · requerida | `string` | — | Valor actual controlado por la pantalla. |
|
|
2042
|
+
| `autoFocus` | `boolean` | `true` | Coloca el foco en la entrada al abrir. |
|
|
2043
|
+
| `barContainerColor` | `ColorValue` | — | Color del punto de entrada cerrado. La barra de aplicación puede controlar su fondo animado. |
|
|
2044
|
+
| `barTextAlign` | `"start" \| "center"` | `'start'` | Alineación del texto en la barra cerrada. |
|
|
2045
|
+
| `closeOnSelect` | `boolean` | `true` | Cierra la superficie después de elegir un destino. |
|
|
2046
|
+
| `closeOnSubmit` | `boolean` | `false` | Cierra la superficie al confirmar la consulta. |
|
|
2047
|
+
| `disabled` | `boolean` | `false` | Bloquea la interacción del control. |
|
|
2048
|
+
| `emptyContent` | `ReactNode` | — | Contenido de la búsqueda cuando la lista está vacía. |
|
|
2049
|
+
| `footerAvoidsKeyboard` | `boolean` | `true` | Mantiene el pie visible por encima del teclado. Con `false` queda al fondo de la ventana y el teclado puede cubrirlo. |
|
|
2050
|
+
| `footerContainerColor` | `ColorValue` | — | Color del espacio reservado debajo del pie. Su altura se conserva. |
|
|
2051
|
+
| `footerContent` | `ReactNode` | — | Controles contextuales que permanecen debajo de los resultados desplazables. |
|
|
2052
|
+
| `inputTrailingContent` | `ReactNode` | — | Controles independientes dentro de la entrada expandida, junto al botón de borrar. |
|
|
2053
|
+
| `leadingIcon` | `IconSource` | `'search'` | Icono al inicio del control. |
|
|
2054
|
+
| `loading` | `boolean` | `false` | Representa una operación en curso. |
|
|
2055
|
+
| `onClosed` | `(() => void)` | — | Avisa cuando concluye la salida de la superficie. |
|
|
2056
|
+
| `onLeadingPress` | `(() => void)` | — | Acción del icono al inicio. |
|
|
2057
|
+
| `onResultPress` | `((result: SearchResult) => void)` | — | Recibe el resultado activado. |
|
|
2058
|
+
| `placeholder` | `string` | `'Buscar'` | Texto de orientación cuando el campo está vacío. |
|
|
2059
|
+
| `presentation` | `"auto" \| "full-screen" \| "docked"` | `'auto'` | Modo de presentación visual o colocación. |
|
|
2060
|
+
| `renderResults` | `((state: { containerColor: ColorValue; }) => ReactNode)` | — | Renderiza una región de resultados propia y recibe su color de fondo. |
|
|
2061
|
+
| `renderTrigger` | `((state: { open: () => void; disabled: boolean; expanded: boolean; }) => ReactNode)` | — | Renderiza un disparador alternativo. Usa `SearchTrigger` para una cápsula o `IconButton` y `Chip` para sus propias formas. |
|
|
2062
|
+
| `results` | `readonly SearchResult[]` | `[]` | Resultados con claves estables que prepara la pantalla. |
|
|
2063
|
+
| `resultsAccessibilityLabel` | `string` | — | Texto que se anuncia al cambiar los resultados personalizados, incluso cuando están vacíos o cargando. |
|
|
2064
|
+
| `scrollIndicators` | `ScrollIndicatorOptions` | — | Configura los indicadores de desplazamiento del paquete. |
|
|
2065
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
2066
|
+
| `supportingContent` | `ReactNode` | — | Contenido adicional que acompaña a los resultados. |
|
|
2067
|
+
| `testID` | `string` | `'mobile-search'` | Identificador para automatización en el host. |
|
|
2068
|
+
| `trailingActions` | `readonly { key: string; icon: SearchIcon; label: string; onPress: () => void; disabled?: boolean; testID?: string; }[]` | `[]` | Acciones al final de la barra. Cada una usa clave, icono, etiqueta y acción. |
|
|
2069
|
+
| `trailingContent` | `ReactNode` | — | Contenido al final de la barra cerrada. |
|
|
2070
|
+
| `variant` | `"contained" \| "divided"` | `'contained'` | Tratamiento visual o modalidad del componente. |
|
|
2071
|
+
|
|
2072
|
+
**`SearchTrigger`**
|
|
2073
|
+
|
|
2074
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2075
|
+
| --- | --- | --- | --- |
|
|
2076
|
+
| `children` · requerida | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
2077
|
+
| `accessibilityHint` | `string` | — | Contexto adicional sobre la acción. |
|
|
2078
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
2079
|
+
| `accessibilityRole` | `string` | `'button'` | Rol semántico que debe anunciar la fila. |
|
|
2080
|
+
| `accessibilityState` | `AccessibilityState` | — | Estado semántico del control. |
|
|
2081
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
2082
|
+
| `nativeID` | `string` | — | Identificador del control para enlazarlo a contenido accesible. |
|
|
2083
|
+
| `onPress` | `(((event: GestureResponderEvent) => unknown) & ((e: GestureResponderEvent) => void))` | — | Ejecuta la acción al activar el control. |
|
|
2084
|
+
| `ref` | `Ref<default>` | — | Referencia imperativa con las operaciones del componente anfitrión. |
|
|
2085
|
+
| `rippleColor` | `ColorValue` | — | Color del efecto de pulsación en Android y navegador. |
|
|
2086
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
2087
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
2088
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
2089
|
+
| `underlayColor` | `string` | — | Color de fondo del efecto de pulsación en iOS. |
|
|
2090
|
+
|
|
2091
|
+
**`SearchIconButton`**
|
|
2092
|
+
|
|
2093
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2094
|
+
| --- | --- | --- | --- |
|
|
2095
|
+
| `icon` · requerida | `IconSource` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
2096
|
+
| `accessibilityHint` | `string` | — | Contexto adicional sobre la acción. |
|
|
2097
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
2098
|
+
| `accessibilityState` | `AccessibilityState` | — | Estado semántico del control. |
|
|
2099
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
2100
|
+
| `loading` | `boolean` | — | Representa una operación en curso. |
|
|
2101
|
+
| `mode` | `IconButtonMode` | — | Modo de uso admitido por este componente. |
|
|
2102
|
+
| `nativeID` | `string` | — | Identificador del control para enlazarlo a contenido accesible. |
|
|
2103
|
+
| `onPress` | `(((event: GestureResponderEvent) => unknown) & ((e: GestureResponderEvent) => void) & ((e: GestureResponderEvent) => void))` | — | Ejecuta la acción al activar el control. |
|
|
2104
|
+
| `pressed` | `boolean` | — | Conserva la apariencia de pulsación para composiciones coordinadas. |
|
|
2105
|
+
| `ref` | `Ref<default>` | — | Referencia imperativa con las operaciones del componente anfitrión. |
|
|
2106
|
+
| `selected` | `boolean` | — | Selección persistente controlada por el consumidor. |
|
|
2107
|
+
| `sizeClass` | `ButtonSize` | — | Escala del botón, incluido el contenedor y el objetivo de interacción. |
|
|
2108
|
+
| `style` | `Animated.WithAnimatedValue<StyleProp<ViewStyle>>` | — | Estilo de la superficie exterior. |
|
|
2109
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
2110
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
2111
|
+
| `widthVariant` | `"narrow" \| "default" \| "wide"` | — | Proporción del botón de icono. |
|
|
2112
|
+
|
|
2113
|
+
**`SearchResult`**
|
|
2114
|
+
|
|
2115
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2116
|
+
| --- | --- | --- | --- |
|
|
2117
|
+
| `key` · requerida | `string` | — | Identificador único y estable dentro del conjunto. |
|
|
2118
|
+
| `title` · requerida | `string` | — | Título visible o contenido principal. |
|
|
2119
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
2120
|
+
| `description` | `string` | — | Texto secundario de apoyo. |
|
|
2121
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
2122
|
+
| `icon` | `IconSource` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
2123
|
+
|
|
2124
|
+
</details>
|
|
2125
|
+
|
|
2126
|
+
**Ejemplo**
|
|
2127
|
+
|
|
2128
|
+
```tsx
|
|
2129
|
+
import { useState } from 'react';
|
|
2130
|
+
import { Searchbar } from 'mobile-design/react-native';
|
|
2131
|
+
|
|
2132
|
+
export default function Example() {
|
|
2133
|
+
const [query, setQuery] = useState('');
|
|
2134
|
+
|
|
2135
|
+
return (
|
|
2136
|
+
<Searchbar
|
|
2137
|
+
placeholder="Buscar documentos"
|
|
2138
|
+
value={query}
|
|
2139
|
+
onChangeText={setQuery}
|
|
2140
|
+
accessibilityLabel="Buscar documentos"
|
|
2141
|
+
/>
|
|
2142
|
+
);
|
|
2143
|
+
}
|
|
2144
|
+
```
|
|
2145
|
+
|
|
2146
|
+
#### Toolbar
|
|
2147
|
+
|
|
2148
|
+
Agrupa acciones de edición o contexto en barras Docked o Floating, horizontales o verticales.
|
|
2149
|
+
|
|
2150
|
+
- Cada acción usa `key`, `icon`, `label` y `onPress`. Usa `selected` para una selección persistente.
|
|
2151
|
+
- Docked ocupa el borde inferior con esquinas rectas. Floating conserva una cápsula independiente del contenido y puede disponerse horizontal o verticalmente. Standard y Vibrant son configuraciones de color.
|
|
2152
|
+
- Leading, children y trailing admiten elementos originales. Iconos, botones, textos y campos. Elige un único énfasis principal. El ancho de los slots se mide antes de mover acciones al menú.
|
|
2153
|
+
- Fab coloca una acción principal junto a Floating. Expanded=false recoge las herramientas y amplía el FAB de 56 a 80 dp, conservando su extremo. Sin FAB, expanded controla los slots de los extremos y conserva las acciones centrales.
|
|
2154
|
+
- El host coloca la barra dentro de la pantalla o panel. El formato horizontal reserva al menos 16 dp. El vertical, 24 dp. Limita maxHeight cuando una barra vertical viva dentro de un panel más corto que la ventana.
|
|
2155
|
+
|
|
2156
|
+
**Propiedades de `Toolbar`**
|
|
2157
|
+
|
|
2158
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2159
|
+
| --- | --- | --- | --- |
|
|
2160
|
+
| `actions` · requerida | `readonly ToolbarAction[]` | — | Acciones relacionadas de la composición. |
|
|
2161
|
+
| `accessibilityLabel` | `string` | `'Herramientas'` | Nombre que anuncia la tecnología de asistencia. |
|
|
2162
|
+
| `alignment` | `"start" \| "center" \| "space-between"` | — | Alineación de los elementos en su región. |
|
|
2163
|
+
| `children` | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
2164
|
+
| `color` | `"standard" \| "vibrant"` | `'standard'` | Color del elemento o trazo. |
|
|
2165
|
+
| `elevation` | `0 \| 1 \| 2 \| 3` | — | Nivel de elevación de la superficie. |
|
|
2166
|
+
| `expanded` | `boolean` | `true` | Estado controlado de expansión. |
|
|
2167
|
+
| `fab` | `ToolbarAction` | — | Slot para la acción flotante del layout. |
|
|
2168
|
+
| `leading` | `ReactNode` | — | Slot al inicio lógico del contenido. |
|
|
2169
|
+
| `maxVisibleActions` | `number` | — | Las acciones que superan el espacio disponible pasan al menú. |
|
|
2170
|
+
| `orientation` | `"horizontal" \| "vertical"` | `'horizontal'` | Eje de la composición. |
|
|
2171
|
+
| `safeArea` | `boolean` | `true` | Incluye los insets correspondientes de la ventana. |
|
|
2172
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
2173
|
+
| `testID` | `string` | `'mobile-toolbar'` | Identificador para automatización en el host. |
|
|
2174
|
+
| `trailing` | `ReactNode` | — | Slot al final lógico del contenido. |
|
|
2175
|
+
| `variant` | `"docked" \| "floating"` | `'docked'` | Tratamiento visual o modalidad del componente. |
|
|
2176
|
+
| `visible` | `boolean` | `true` | Controla si la superficie o el indicador se presenta. |
|
|
2177
|
+
|
|
2178
|
+
<details>
|
|
2179
|
+
<summary>Configuración complementaria de Toolbar</summary>
|
|
2180
|
+
|
|
2181
|
+
**`ToolbarAction`**
|
|
2182
|
+
|
|
2183
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2184
|
+
| --- | --- | --- | --- |
|
|
2185
|
+
| `icon` · requerida | `any` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
2186
|
+
| `key` · requerida | `string` | — | Identificador único y estable dentro del conjunto. |
|
|
2187
|
+
| `label` · requerida | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
2188
|
+
| `onPress` · requerida | `() => void` | — | Ejecuta la acción al activar el control. |
|
|
2189
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
2190
|
+
| `mode` | `"contained" \| "contained-tonal" \| "outlined"` | — | Modo de uso admitido por este componente. |
|
|
2191
|
+
| `selected` | `boolean` | — | Selección persistente controlada por el consumidor. |
|
|
2192
|
+
| `widthVariant` | `"narrow" \| "default" \| "wide"` | — | Proporción del botón de icono. |
|
|
2193
|
+
|
|
2194
|
+
</details>
|
|
2195
|
+
|
|
2196
|
+
**Ejemplo**
|
|
2197
|
+
|
|
2198
|
+
```tsx
|
|
2199
|
+
import { useState } from 'react';
|
|
2200
|
+
import { View } from 'react-native';
|
|
2201
|
+
import { Toolbar, TextField, Text } from 'mobile-design/react-native';
|
|
2202
|
+
|
|
2203
|
+
export default function Example() {
|
|
2204
|
+
const [title, setTitle] = useState('Mi colección');
|
|
2205
|
+
const [saved, setSaved] = useState('Mi colección');
|
|
2206
|
+
const [deleted, setDeleted] = useState(false);
|
|
2207
|
+
|
|
2208
|
+
return (
|
|
2209
|
+
<View style={{ gap: 24 }}>
|
|
2210
|
+
<TextField
|
|
2211
|
+
label="Nombre"
|
|
2212
|
+
value={title}
|
|
2213
|
+
onChangeText={setTitle}
|
|
2214
|
+
disabled={deleted}
|
|
2215
|
+
/>
|
|
2216
|
+
<Text accessibilityLiveRegion="polite">
|
|
2217
|
+
{deleted ? 'Colección eliminada' : 'Guardado: ' + saved}
|
|
2218
|
+
</Text>
|
|
2219
|
+
<Toolbar
|
|
2220
|
+
variant="floating"
|
|
2221
|
+
accessibilityLabel="Editar colección"
|
|
2222
|
+
actions={[
|
|
2223
|
+
{
|
|
2224
|
+
key: 'save',
|
|
2225
|
+
icon: 'save',
|
|
2226
|
+
label: 'Guardar',
|
|
2227
|
+
disabled: deleted || title === saved,
|
|
2228
|
+
onPress: () => setSaved(title),
|
|
2229
|
+
},
|
|
2230
|
+
{
|
|
2231
|
+
key: 'undo',
|
|
2232
|
+
icon: 'undo',
|
|
2233
|
+
label: 'Restaurar',
|
|
2234
|
+
onPress: () => {
|
|
2235
|
+
setDeleted(false);
|
|
2236
|
+
setTitle(saved);
|
|
2237
|
+
},
|
|
2238
|
+
},
|
|
2239
|
+
{
|
|
2240
|
+
key: 'delete',
|
|
2241
|
+
icon: 'delete',
|
|
2242
|
+
label: 'Eliminar',
|
|
2243
|
+
disabled: deleted,
|
|
2244
|
+
onPress: () => setDeleted(true),
|
|
2245
|
+
},
|
|
2246
|
+
]}
|
|
2247
|
+
/>
|
|
2248
|
+
</View>
|
|
2249
|
+
);
|
|
2250
|
+
}
|
|
2251
|
+
```
|
|
2252
|
+
|
|
2253
|
+
### Contenido y tipografía
|
|
2254
|
+
|
|
2255
|
+
#### Text
|
|
2256
|
+
|
|
2257
|
+
Aplica la escala tipográfica del tema a contenido, etiquetas y títulos. Los roles de texto conservan sus métricas al cambiar la familia en el proveedor.
|
|
2258
|
+
|
|
2259
|
+
- Combina `display`, `headline`, `title`, `body` o `label` con `Large`, `Medium` o `Small`. Agrega `Emphasized` para enfatizar el mismo rol.
|
|
2260
|
+
- Usa `languageHeight` en MobileDesignProvider para cambiar el perfil de interlineado según el contenido. `Text` permite las propiedades de texto del host como `selectable` y `numberOfLines`.
|
|
2261
|
+
- Conserva `accessibilityRole="header"` cuando el contenido actúe como encabezado. `variant` cambia la tipografía, mientras el rol accesible describe la estructura.
|
|
2262
|
+
|
|
2263
|
+
**Propiedades de `Text`**
|
|
2264
|
+
|
|
2265
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2266
|
+
| --- | --- | --- | --- |
|
|
2267
|
+
| `variant` | `TextVariant` | — | Rol tipográfico del tema. |
|
|
2268
|
+
| `children` · requerida | `React.ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
2269
|
+
| `accessibilityHint` | `string` | — | Contexto adicional sobre la acción. |
|
|
2270
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
2271
|
+
| `accessibilityState` | `AccessibilityState` | — | Estado semántico del control. |
|
|
2272
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
2273
|
+
| `nativeID` | `string` | — | Identificador del control para enlazarlo a contenido accesible. |
|
|
2274
|
+
| `numberOfLines` | `number` | — | Número de líneas antes de truncar el texto. Con `0` el texto puede ocupar las líneas necesarias. |
|
|
2275
|
+
| `onPress` | `((event: GestureResponderEvent) => unknown)` | — | Ejecuta la acción al activar el control. |
|
|
2276
|
+
| `selectable` | `boolean` | — | Permite seleccionar el texto para copiarlo. |
|
|
2277
|
+
| `style` | `((false \| void \| "" \| Readonly<Partial<TextStyle>> \| readonly StyleProp<Readonly<Partial<TextStyle>>>[]) & (false \| void \| "" \| TextStyle \| readonly StyleProp<TextStyle>[])) \| null` | — | Estilo de la superficie exterior. |
|
|
2278
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
2279
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
2280
|
+
|
|
2281
|
+
**Ejemplo**
|
|
2282
|
+
|
|
2283
|
+
```tsx
|
|
2284
|
+
import { View } from 'react-native';
|
|
2285
|
+
import { Text } from 'mobile-design/react-native';
|
|
2286
|
+
|
|
2287
|
+
export default function Example() {
|
|
2288
|
+
return (
|
|
2289
|
+
<View style={{ gap: 8 }}>
|
|
2290
|
+
<Text variant="headlineMedium" accessibilityRole="header">Documentos</Text>
|
|
2291
|
+
<Text variant="bodyLarge" selectable>
|
|
2292
|
+
Elige un archivo. <Text variant="bodyLargeEmphasized">Guardamos tus cambios.</Text>
|
|
2293
|
+
</Text>
|
|
2294
|
+
<Text variant="labelSmall">Actualizado hoy</Text>
|
|
2295
|
+
</View>
|
|
2296
|
+
);
|
|
2297
|
+
}
|
|
2298
|
+
```
|
|
2299
|
+
|
|
2300
|
+
#### Badge y BadgedBox
|
|
2301
|
+
|
|
2302
|
+
Comunica novedades o cantidades junto a un destino, un icono o una etiqueta, sin interrumpir la tarea.
|
|
2303
|
+
|
|
2304
|
+
- Usa Badge para la insignia visual o BadgedBox para anclarla a un icono o destino.
|
|
2305
|
+
- Pasa un número como badge para cantidades o true para una novedad sin texto. El destino conserva su acción.
|
|
2306
|
+
|
|
2307
|
+
**Propiedades de `Badge`**
|
|
2308
|
+
|
|
2309
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2310
|
+
| --- | --- | --- | --- |
|
|
2311
|
+
| `accessibilityElementsHidden` | `boolean \| Node \| AnimatedAddition \| AnimatedSubtraction \| AnimatedDivision \| AnimatedMultiplication \| AnimatedModulo \| AnimatedDiffClamp \| Value \| Interpolation<string \| number> \| Interpolation<number> \| Interpolation<string> \| Interpolation<NativeColorValue>` | — | Oculta los elementos descendientes a las tecnologías de asistencia. |
|
|
2312
|
+
| `accessibilityHint` | `string \| Node \| AnimatedAddition \| AnimatedSubtraction \| AnimatedDivision \| AnimatedMultiplication \| AnimatedModulo \| AnimatedDiffClamp \| Value \| Interpolation<string \| number> \| Interpolation<number> \| Interpolation<string> \| Interpolation<NativeColorValue>` | — | Contexto adicional sobre la acción. |
|
|
2313
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
2314
|
+
| `accessibilityState` | `Consultar el tipo TypeScript` | — | Estado semántico del control. |
|
|
2315
|
+
| `children` | `ReactNode` | — | Contenido breve de una insignia de tipo `large`. |
|
|
2316
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
2317
|
+
| `importantForAccessibility` | `Node \| AnimatedAddition \| AnimatedSubtraction \| AnimatedDivision \| AnimatedMultiplication \| AnimatedModulo \| AnimatedDiffClamp \| Value \| Interpolation<string \| number> \| Interpolation<number> \| Interpolation<string> \| Interpolation<NativeColorValue> \| "auto" \| "yes" \| "no" \| "no-hide-descendants"` | — | Controla qué elementos se exponen a las tecnologías de asistencia en Android. `auto` delega la decisión al sistema, `yes` incluye el elemento, `no` lo excluye y `no-hide-descendants` excluye también a sus descendientes. |
|
|
2318
|
+
| `maximum` | `number` | `999` | A partir de este límite un número se muestra con sufijo `+`. |
|
|
2319
|
+
| `nativeID` | `string \| Node \| AnimatedAddition \| AnimatedSubtraction \| AnimatedDivision \| AnimatedMultiplication \| AnimatedModulo \| AnimatedDiffClamp \| Value \| Interpolation<string \| number> \| Interpolation<number> \| Interpolation<string> \| Interpolation<NativeColorValue>` | — | Identificador del control para enlazarlo a contenido accesible. |
|
|
2320
|
+
| `numberOfLines` | `number \| Node \| AnimatedAddition \| AnimatedSubtraction \| AnimatedDivision \| AnimatedMultiplication \| AnimatedModulo \| AnimatedDiffClamp \| Value \| Interpolation<string \| number> \| Interpolation<number> \| Interpolation<string> \| Interpolation<NativeColorValue>` | — | Número de líneas antes de truncar el texto. Con `0` el texto puede ocupar las líneas necesarias. |
|
|
2321
|
+
| `onPress` | `((event: GestureResponderEvent) => unknown)` | — | Ejecuta la acción al activar el control. |
|
|
2322
|
+
| `selectable` | `boolean \| Node \| AnimatedAddition \| AnimatedSubtraction \| AnimatedDivision \| AnimatedMultiplication \| AnimatedModulo \| AnimatedDiffClamp \| Value \| Interpolation<string \| number> \| Interpolation<number> \| Interpolation<string> \| Interpolation<NativeColorValue>` | — | Permite seleccionar el texto para copiarlo. |
|
|
2323
|
+
| `size` | `number` | — | Tamaño visual o escala semántica del control. |
|
|
2324
|
+
| `style` | `Consultar el tipo TypeScript` | — | Estilo de la superficie exterior. |
|
|
2325
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
2326
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
2327
|
+
| `variant` | `"large" \| "dot"` | — | Tratamiento visual o modalidad del componente. |
|
|
2328
|
+
| `visible` | `boolean` | `true` | Controla si la superficie o el indicador se presenta. |
|
|
2329
|
+
|
|
2330
|
+
<details>
|
|
2331
|
+
<summary>Configuración complementaria de Badge y BadgedBox</summary>
|
|
2332
|
+
|
|
2333
|
+
**`BadgedBox`**
|
|
2334
|
+
|
|
2335
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2336
|
+
| --- | --- | --- | --- |
|
|
2337
|
+
| `children` · requerida | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
2338
|
+
| `badge` | `string \| number \| boolean` | — | Acepta un número, texto o `true` para mostrar una novedad sin texto. Oculta la insignia con `false` u omitiendo el valor. |
|
|
2339
|
+
| `badgeContainerStyle` | `StyleProp<AnimatedStyle<____ViewStyleProp_Internal \| undefined>>` | — | Estilo del contenedor que posiciona la insignia sobre el ancla. |
|
|
2340
|
+
| `maximum` | `number` | `999` | Tope que se usa para mostrar cantidades. |
|
|
2341
|
+
| `onBadgeLayout` | `((event: LayoutChangeEvent) => unknown) \| SharedValueDisableContravariance<((event: LayoutChangeEvent) => unknown) \| undefined>` | — | Recibe el evento de layout del contenedor de la insignia. |
|
|
2342
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
2343
|
+
| `testID` | `string` | `'mobile-badged-box'` | Identificador para automatización en el host. |
|
|
2344
|
+
|
|
2345
|
+
</details>
|
|
2346
|
+
|
|
2347
|
+
**Ejemplo**
|
|
2348
|
+
|
|
2349
|
+
```tsx
|
|
2350
|
+
import { useState } from 'react';
|
|
2351
|
+
import { View } from 'react-native';
|
|
2352
|
+
import {
|
|
2353
|
+
BadgedBox,
|
|
2354
|
+
IconButton,
|
|
2355
|
+
MaterialSymbol,
|
|
2356
|
+
Text,
|
|
2357
|
+
} from 'mobile-design/react-native';
|
|
2358
|
+
|
|
2359
|
+
export default function Example() {
|
|
2360
|
+
const [feedback, setFeedback] = useState('');
|
|
2361
|
+
|
|
2362
|
+
return (
|
|
2363
|
+
<View style={{ gap: 16 }}>
|
|
2364
|
+
<IconButton
|
|
2365
|
+
icon={(props) => (
|
|
2366
|
+
<BadgedBox badge={8}>
|
|
2367
|
+
<MaterialSymbol
|
|
2368
|
+
{...props}
|
|
2369
|
+
name="mail"
|
|
2370
|
+
/>
|
|
2371
|
+
</BadgedBox>
|
|
2372
|
+
)}
|
|
2373
|
+
accessibilityLabel="Correo, 8 mensajes nuevos"
|
|
2374
|
+
onPress={() =>
|
|
2375
|
+
setFeedback('Correo. Tienes 8 mensajes nuevos')
|
|
2376
|
+
}
|
|
2377
|
+
/>
|
|
2378
|
+
<Text accessibilityLiveRegion="polite">{feedback}</Text>
|
|
2379
|
+
</View>
|
|
2380
|
+
);
|
|
2381
|
+
}
|
|
2382
|
+
```
|
|
2383
|
+
|
|
2384
|
+
#### Card
|
|
2385
|
+
|
|
2386
|
+
Agrupa contenido y acciones que pertenecen a una misma entidad, con tratamientos Elevated, Filled u Outlined.
|
|
2387
|
+
|
|
2388
|
+
- Escoge Elevated, Filled u Outlined y compón Card.Title, Card.Content, Card.Cover y Card.Actions. El contenedor es el único elemento obligatorio.
|
|
2389
|
+
- Usa una tarjeta informativa con controles internos, o una superficie directamente pulsable sin otros controles dentro. En navegador, href crea un enlace real. OnPress permite coordinar navegación en la aplicación.
|
|
2390
|
+
|
|
2391
|
+
Compón el contenido con `Card.Title`, `Card.Content`, `Card.Cover` y `Card.Actions`. Si toda la tarjeta abre un destino, reserva sus hijos para contenido de presentación. Si tiene varias acciones, coloca los controles dentro de `Card.Actions` y deja la superficie como contenedor.
|
|
2392
|
+
|
|
2393
|
+
**Propiedades de `Card`**
|
|
2394
|
+
|
|
2395
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2396
|
+
| --- | --- | --- | --- |
|
|
2397
|
+
| `children` · requerida | `React.ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
2398
|
+
| `accessibilityHint` | `string` | — | Contexto adicional sobre la acción. |
|
|
2399
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
2400
|
+
| `accessibilityRole` | `string` | — | Rol semántico que debe anunciar la fila. |
|
|
2401
|
+
| `accessibilityState` | `AccessibilityState` | — | Estado semántico del control. |
|
|
2402
|
+
| `accessible` | `boolean` | — | Expone la tarjeta como elemento accesible. Una tarjeta interactiva puede agrupar su contenido en un objetivo accesible. |
|
|
2403
|
+
| `contentStyle` | `StyleProp<ViewStyle>` | — | Estilo del contenido dentro de la superficie. |
|
|
2404
|
+
| `delayLongPress` | `number` | — | Tiempo en milisegundos antes de activar la pulsación mantenida. |
|
|
2405
|
+
| `disabled` | `boolean` | `false` | Bloquea la interacción del control. |
|
|
2406
|
+
| `dragged` | `boolean` | `false` | Aplica el estado visual de arrastre. |
|
|
2407
|
+
| `elevation` | `0 \| Animated.Value \| 1 \| 2 \| 3 \| 4 \| 5` | — | Nivel de elevación de la superficie. |
|
|
2408
|
+
| `href` | `string` | — | Dirección del enlace real en el navegador. |
|
|
2409
|
+
| `hrefAttrs` | `{ rel?: string; }` | — | Atributos del enlace web, como `target`, `rel` o `download`. |
|
|
2410
|
+
| `mode` | `"elevated" \| "outlined" \| "contained"` | `'elevated'` | Modo de uso admitido por este componente. |
|
|
2411
|
+
| `nativeID` | `string` | — | Identificador del control para enlazarlo a contenido accesible. |
|
|
2412
|
+
| `onBlur` | `((event: BlurEvent) => void)` | — | Avisa cuando el control pierde el foco. |
|
|
2413
|
+
| `onFocus` | `((event: FocusEvent) => void)` | — | Avisa cuando el control recibe el foco. |
|
|
2414
|
+
| `onHoverIn` | `((event: MouseEvent) => unknown)` | — | Avisa al entrar el puntero en la superficie. |
|
|
2415
|
+
| `onHoverOut` | `((event: MouseEvent) => unknown)` | — | Avisa al salir el puntero de la superficie. |
|
|
2416
|
+
| `onLongPress` | `(() => void)` | — | Acción que requiere una pulsación mantenida. |
|
|
2417
|
+
| `onPress` | `((e: GestureResponderEvent) => void)` | — | Ejecuta la acción al activar el control. |
|
|
2418
|
+
| `onPressIn` | `((event: GestureResponderEvent) => void)` | — | Avisa al iniciar una pulsación. |
|
|
2419
|
+
| `onPressOut` | `((event: GestureResponderEvent) => void)` | — | Avisa al terminar o salir de una pulsación. |
|
|
2420
|
+
| `ref` | `React.Ref<(props: Omit<ViewProps, "ref"> & { ref?: React.Ref<ViewInstance> \| undefined; }) => React.ReactNode>` | — | Referencia imperativa con las operaciones del componente anfitrión. |
|
|
2421
|
+
| `style` | `Animated.WithAnimatedValue<StyleProp<ViewStyle>>` | — | Estilo de la superficie exterior. |
|
|
2422
|
+
| `testID` | `string` | `'mobile-card'` | Identificador para automatización en el host. |
|
|
2423
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
2424
|
+
| `variant` | `"filled" \| "elevated" \| "outlined"` | — | Tratamiento visual o modalidad del componente. |
|
|
2425
|
+
|
|
2426
|
+
**Ejemplo**
|
|
2427
|
+
|
|
2428
|
+
```tsx
|
|
2429
|
+
import { useState } from 'react';
|
|
2430
|
+
import { View } from 'react-native';
|
|
2431
|
+
import { Card, Text, Button } from 'mobile-design/react-native';
|
|
2432
|
+
|
|
2433
|
+
export default function Example() {
|
|
2434
|
+
const [feedback, setFeedback] = useState('');
|
|
2435
|
+
|
|
2436
|
+
return (
|
|
2437
|
+
<View style={{ gap: 16 }}>
|
|
2438
|
+
<Card variant="filled">
|
|
2439
|
+
<Card.Title
|
|
2440
|
+
title="En buena compañía"
|
|
2441
|
+
subtitle="Una colección para descubrir"
|
|
2442
|
+
/>
|
|
2443
|
+
<Card.Content>
|
|
2444
|
+
<Text variant="bodyMedium">
|
|
2445
|
+
Contenido y acciones de una misma idea.
|
|
2446
|
+
</Text>
|
|
2447
|
+
</Card.Content>
|
|
2448
|
+
<Card.Actions>
|
|
2449
|
+
<Button
|
|
2450
|
+
variant="text"
|
|
2451
|
+
onPress={() => setFeedback('Colección abierta')}
|
|
2452
|
+
>
|
|
2453
|
+
Explorar
|
|
2454
|
+
</Button>
|
|
2455
|
+
</Card.Actions>
|
|
2456
|
+
</Card>
|
|
2457
|
+
<Text accessibilityLiveRegion="polite">{feedback}</Text>
|
|
2458
|
+
</View>
|
|
2459
|
+
);
|
|
2460
|
+
}
|
|
2461
|
+
```
|
|
2462
|
+
|
|
2463
|
+
#### Carousel
|
|
2464
|
+
|
|
2465
|
+
Muestra colecciones visuales en las variantes de la referencia y en Vertical, una extensión propia de Mobile Design para galerías de distintas proporciones.
|
|
2466
|
+
|
|
2467
|
+
- Pasa items con id único y title. Image, icon y aspectRatio describen su contenido visual.
|
|
2468
|
+
- Elige variant y conecta onItemPress con el destino. OnIndexChange permite observar la posición aceptada.
|
|
2469
|
+
- Para una galería apilada usa variant="vertical" y height como altura del viewport. Cada aspectRatio expresa ancho dividido entre alto. Una proporción ausente o inválida utiliza 1.
|
|
2470
|
+
|
|
2471
|
+
Cada elemento usa un `id` estable. `aspectRatio` es ancho dividido entre alto. `onIndexChange` observa el índice aceptado, mientras `initialIndex` fija la posición de arranque.
|
|
2472
|
+
|
|
2473
|
+
**Propiedades de `Carousel`**
|
|
2474
|
+
|
|
2475
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2476
|
+
| --- | --- | --- | --- |
|
|
2477
|
+
| `items` · requerida | `readonly CarouselItem[]` | — | Elementos del conjunto. Usa identificadores únicos y estables. |
|
|
2478
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
2479
|
+
| `alignment` | `"start" \| "center"` | — | Alineación de los elementos en su región. |
|
|
2480
|
+
| `contentPadding` | `number` | — | Espacio exterior del carrusel. En uncontained afecta al borde inicial y en vertical a todos los bordes. |
|
|
2481
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
2482
|
+
| `height` | `number` | — | Altura disponible en dp o unidades lógicas del host. |
|
|
2483
|
+
| `initialIndex` | `number` | — | Índice inicial al montar la colección. |
|
|
2484
|
+
| `onIndexChange` | `((index: number) => void)` | — | Avisa del cambio de índice aceptado. |
|
|
2485
|
+
| `onItemPress` | `((item: CarouselItem, index: number) => void)` | — | Entrega el elemento activado. |
|
|
2486
|
+
| `preferredItemWidth` | `number` | — | Ancho deseado antes del recorte. La variante multi-browse lo ajusta a la distribución disponible. |
|
|
2487
|
+
| `renderItemContent` | `((props: { item: CarouselItem; index: number; width: number; height: number; }) => ReactNode)` | — | Renderiza el contenido visual dentro de la máscara. Recibe las dimensiones antes del recorte y usa `null` para volver a la imagen o icono del elemento. |
|
|
2488
|
+
| `scrollIndicators` | `ScrollIndicatorOptions` | — | Configura los indicadores de desplazamiento del paquete. |
|
|
2489
|
+
| `showControls` | `boolean` | — | Muestra los controles de navegación de la colección. |
|
|
2490
|
+
| `showText` | `boolean` | — | Muestra el texto que acompaña al elemento. |
|
|
2491
|
+
| `snapping` | `boolean` | — | Ajusta el desplazamiento a posiciones fijas en las variantes vertical y uncontained. Las variantes contenidas y de pantalla completa ya aplican el ajuste. |
|
|
2492
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
2493
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
2494
|
+
| `textInsetBottom` | `number` | — | Espacio inferior reservado para el texto. |
|
|
2495
|
+
| `textPlacement` | `"overlay" \| "below"` | — | Posición del texto respecto del contenido visual. |
|
|
2496
|
+
| `variant` | `"multi-browse" \| "hero" \| "center-aligned-hero" \| "uncontained" \| "uncontained-multi-aspect" \| "full-screen" \| "vertical"` | — | Tratamiento visual o modalidad del componente. |
|
|
2497
|
+
|
|
2498
|
+
<details>
|
|
2499
|
+
<summary>Configuración complementaria de Carousel</summary>
|
|
2500
|
+
|
|
2501
|
+
**`FullScreenCarousel`**
|
|
2502
|
+
|
|
2503
|
+
Cada página usa la altura del viewport en una colección vertical paginada. Úsalo con una ventana compacta o mediana y sin margen exterior. Esta composición toma la parte de `CarouselProps` correspondiente a los elementos, índice inicial, controles y viewport.
|
|
2504
|
+
|
|
2505
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2506
|
+
| --- | --- | --- | --- |
|
|
2507
|
+
| `items` · requerida | `readonly CarouselItem[]` | — | Elementos del conjunto. Usa identificadores únicos y estables. |
|
|
2508
|
+
| `accessibilityLabel` | `string` | `'Carrusel vertical'` | Nombre que anuncia la tecnología de asistencia. |
|
|
2509
|
+
| `disabled` | `boolean` | `false` | Bloquea la interacción del control. |
|
|
2510
|
+
| `height` | `number` | `640` | Altura disponible en dp o unidades lógicas del host. |
|
|
2511
|
+
| `initialIndex` | `number` | `0` | Índice inicial al montar la colección. |
|
|
2512
|
+
| `onIndexChange` | `((index: number) => void)` | — | Avisa del cambio de índice aceptado. |
|
|
2513
|
+
| `onItemPress` | `((item: CarouselItem, index: number) => void)` | — | Entrega el elemento activado. |
|
|
2514
|
+
| `renderItemContent` | `((props: { item: CarouselItem; index: number; width: number; height: number; }) => ReactNode)` | — | Renderiza el contenido visual dentro de la máscara. Recibe las dimensiones antes del recorte y usa `null` para volver a la imagen o icono del elemento. |
|
|
2515
|
+
| `scrollIndicators` | `ScrollIndicatorOptions` | — | Configura los indicadores de desplazamiento del paquete. |
|
|
2516
|
+
| `showControls` | `boolean` | `false` | Muestra los controles de navegación de la colección. |
|
|
2517
|
+
| `showText` | `boolean` | `true` | Muestra el texto que acompaña al elemento. |
|
|
2518
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
2519
|
+
| `testID` | `string` | `'carousel'` | Identificador para automatización en el host. |
|
|
2520
|
+
| `textInsetBottom` | `number` | `0` | Espacio inferior reservado para el texto. |
|
|
2521
|
+
|
|
2522
|
+
**`CarouselItem`**
|
|
2523
|
+
|
|
2524
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2525
|
+
| --- | --- | --- | --- |
|
|
2526
|
+
| `id` · requerida | `string` | — | Identificador del campo. |
|
|
2527
|
+
| `title` · requerida | `string` | — | Título visible o contenido principal. |
|
|
2528
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
2529
|
+
| `aspectRatio` | `number` | — | Relación entre ancho y alto del contenido visual. La variante vertical conserva la proporción indicada y usa `1` cuando se omite. |
|
|
2530
|
+
| `description` | `string` | — | Texto secundario de apoyo. |
|
|
2531
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
2532
|
+
| `icon` | `string` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
2533
|
+
| `image` | `number \| ImageSource` | — | Fuente de imagen del elemento, como un recurso local o un objeto con URI. |
|
|
2534
|
+
|
|
2535
|
+
</details>
|
|
2536
|
+
|
|
2537
|
+
**Ejemplo**
|
|
2538
|
+
|
|
2539
|
+
```tsx
|
|
2540
|
+
import { useState } from 'react';
|
|
2541
|
+
import { View } from 'react-native';
|
|
2542
|
+
import { Carousel, Text } from 'mobile-design/react-native';
|
|
2543
|
+
|
|
2544
|
+
export default function Example() {
|
|
2545
|
+
const [feedback, setFeedback] = useState('');
|
|
2546
|
+
|
|
2547
|
+
return (
|
|
2548
|
+
<View style={{ gap: 16 }}>
|
|
2549
|
+
<Carousel
|
|
2550
|
+
variant="multi-browse"
|
|
2551
|
+
height={240}
|
|
2552
|
+
accessibilityLabel="Destinos para explorar"
|
|
2553
|
+
items={[
|
|
2554
|
+
{ id: 'mountain', title: 'Montaña', icon: 'image-outline' },
|
|
2555
|
+
{ id: 'coast', title: 'Costa', icon: 'image-outline' },
|
|
2556
|
+
{ id: 'forest', title: 'Bosque', icon: 'image-outline' },
|
|
2557
|
+
]}
|
|
2558
|
+
onItemPress={(item) => setFeedback(item.title)}
|
|
2559
|
+
/>
|
|
2560
|
+
<Text accessibilityLiveRegion="polite">{feedback}</Text>
|
|
2561
|
+
</View>
|
|
2562
|
+
);
|
|
2563
|
+
}
|
|
2564
|
+
```
|
|
2565
|
+
|
|
2566
|
+
#### Chip
|
|
2567
|
+
|
|
2568
|
+
Representa acciones auxiliares, filtros, datos introducidos y sugerencias en superficies compactas.
|
|
2569
|
+
|
|
2570
|
+
- Elige variant según Assist, Filter, Input o Suggestion. Children aporta la etiqueta.
|
|
2571
|
+
- Controla selected para filtros. OnClose retira una entrada. OnPress conserva una función distinta.
|
|
2572
|
+
|
|
2573
|
+
**Propiedades de `Chip`**
|
|
2574
|
+
|
|
2575
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2576
|
+
| --- | --- | --- | --- |
|
|
2577
|
+
| `children` · requerida | `React.ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
2578
|
+
| `accessibilityActions` | `readonly Readonly<{ name: AccessibilityActionName \| string; label?: string \| undefined; }>[]` | — | Acciones personalizadas que ofrece el control a las tecnologías de asistencia. |
|
|
2579
|
+
| `accessibilityHint` | `string` | — | Contexto adicional sobre la acción. |
|
|
2580
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
2581
|
+
| `accessibilityRole` | `string` | — | Rol semántico que debe anunciar la fila. |
|
|
2582
|
+
| `accessibilityState` | `AccessibilityState` | — | Estado semántico del control. |
|
|
2583
|
+
| `avatar` | `React.ReactNode` | — | Avatar mostrado al inicio del chip. Úsalo para ocupar el espacio visual del icono. |
|
|
2584
|
+
| `closeIcon` | `IconSource` | `'close'` | Glifo de cierre. |
|
|
2585
|
+
| `closeIconAccessibilityLabel` | `string` | `'Quitar'` | Nombre que anuncia el lector de pantalla para la acción de quitar el chip. |
|
|
2586
|
+
| `containerRef` | `Ref<default>` | — | Referencia de la superficie visible de 32 dp. La zona de interacción exterior mide 48 dp. |
|
|
2587
|
+
| `delayLongPress` | `number` | — | Tiempo en milisegundos antes de activar la pulsación mantenida. |
|
|
2588
|
+
| `disabled` | `boolean` | `false` | Bloquea la interacción del control. |
|
|
2589
|
+
| `dragged` | `boolean` | `false` | Aplica el estado visual de arrastre. |
|
|
2590
|
+
| `elevated` | `boolean` | `false` | Aplica el tratamiento elevado al chip. |
|
|
2591
|
+
| `ellipsizeMode` | `EllipsizeProp` | — | Posición de los puntos suspensivos cuando se trunca la etiqueta. |
|
|
2592
|
+
| `hitSlop` | `RectOrSize` | — | Amplía la zona de pulsación más allá de los bordes visibles. La zona queda limitada por su contenedor y respeta el orden visual de los elementos superpuestos. |
|
|
2593
|
+
| `icon` | `IconSource` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
2594
|
+
| `maxFontSizeMultiplier` | `number` | — | Límite de escalado del contenido de texto. |
|
|
2595
|
+
| `mode` | `"flat" \| "outlined"` | — | Modo de uso admitido por este componente. |
|
|
2596
|
+
| `nativeID` | `string` | — | Identificador del control para enlazarlo a contenido accesible. |
|
|
2597
|
+
| `onAccessibilityAction` | `((event: AccessibilityActionEvent) => unknown)` | — | Se ejecuta cuando se activa una de las acciones de accesibilidad del chip. |
|
|
2598
|
+
| `onBlur` | `((event: BlurEvent) => void)` | — | Avisa cuando el control pierde el foco. |
|
|
2599
|
+
| `onClose` | `(() => void)` | — | Acción de cierre o eliminación. Al pasarla se muestra el botón de cierre. |
|
|
2600
|
+
| `onFocus` | `((event: FocusEvent) => void)` | — | Avisa cuando el control recibe el foco. |
|
|
2601
|
+
| `onHoverIn` | `((event: MouseEvent) => unknown)` | — | Avisa al entrar el puntero en la superficie. |
|
|
2602
|
+
| `onHoverOut` | `((event: MouseEvent) => unknown)` | — | Avisa al salir el puntero de la superficie. |
|
|
2603
|
+
| `onLongPress` | `(() => void)` | — | Acción que requiere una pulsación mantenida. |
|
|
2604
|
+
| `onPress` | `((e: GestureResponderEvent) => void)` | — | Ejecuta la acción al activar el control. |
|
|
2605
|
+
| `onPressIn` | `((e: GestureResponderEvent) => void)` | — | Avisa al iniciar una pulsación. |
|
|
2606
|
+
| `onPressOut` | `((e: GestureResponderEvent) => void)` | — | Avisa al terminar o salir de una pulsación. |
|
|
2607
|
+
| `onTrailingIconPress` | `(() => void)` | — | Callback del icono final cuando es una acción independiente. |
|
|
2608
|
+
| `pressed` | `boolean` | `false` | Conserva la apariencia de pulsación para composiciones coordinadas. |
|
|
2609
|
+
| `ref` | `Ref<default>` | — | Referencia imperativa con las operaciones del componente anfitrión. |
|
|
2610
|
+
| `selected` | `boolean` | `false` | Selección persistente controlada por el consumidor. |
|
|
2611
|
+
| `selectedColor` | `ColorValue` | — | Color personalizado del texto y del icono inicial cuando el chip está habilitado. |
|
|
2612
|
+
| `showSelectedCheck` | `boolean` | — | Muestra una marca de selección en un chip seleccionado que admite ese estado. La marca ocupa el lugar del icono inicial. |
|
|
2613
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
2614
|
+
| `testID` | `string` | `'chip'` | Identificador para automatización en el host. |
|
|
2615
|
+
| `textStyle` | `StyleProp<TextStyle>` | — | Estilo aplicado al texto del chip. |
|
|
2616
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
2617
|
+
| `trailingIcon` | `any` | — | Icono al final del control. |
|
|
2618
|
+
| `trailingIconAccessibilityLabel` | `string` | — | Nombre accesible para la acción del icono final. |
|
|
2619
|
+
| `variant` | `"filter" \| "input" \| "assist" \| "suggestion"` | `'assist'` | Tratamiento visual o modalidad del componente. |
|
|
2620
|
+
|
|
2621
|
+
<details>
|
|
2622
|
+
<summary>Configuración complementaria de Chip</summary>
|
|
2623
|
+
|
|
2624
|
+
**`Chip.Group`**
|
|
2625
|
+
|
|
2626
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2627
|
+
| --- | --- | --- | --- |
|
|
2628
|
+
| `children` · requerida | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
2629
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
2630
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
2631
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
2632
|
+
|
|
2633
|
+
**`ChipGroupProps`**
|
|
2634
|
+
|
|
2635
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2636
|
+
| --- | --- | --- | --- |
|
|
2637
|
+
| `children` · requerida | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
2638
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
2639
|
+
|
|
2640
|
+
</details>
|
|
2641
|
+
|
|
2642
|
+
**Ejemplo**
|
|
2643
|
+
|
|
2644
|
+
```tsx
|
|
2645
|
+
import { useState } from 'react';
|
|
2646
|
+
import { Chip } from 'mobile-design/react-native';
|
|
2647
|
+
|
|
2648
|
+
export default function Example() {
|
|
2649
|
+
const [selected, setSelected] = useState(false);
|
|
2650
|
+
|
|
2651
|
+
return (
|
|
2652
|
+
<Chip
|
|
2653
|
+
variant="filter"
|
|
2654
|
+
selected={selected}
|
|
2655
|
+
onPress={() => setSelected((value) => !value)}
|
|
2656
|
+
>
|
|
2657
|
+
Descargadas
|
|
2658
|
+
</Chip>
|
|
2659
|
+
);
|
|
2660
|
+
}
|
|
2661
|
+
```
|
|
2662
|
+
|
|
2663
|
+
#### Divider
|
|
2664
|
+
|
|
2665
|
+
Ayuda a distinguir contenido o regiones de una composición mediante una línea sutil.
|
|
2666
|
+
|
|
2667
|
+
- Coloca Divider entre regiones. Orientation cambia el eje y thickness e insets ajustan la línea.
|
|
2668
|
+
|
|
2669
|
+
**Propiedades de `Divider`**
|
|
2670
|
+
|
|
2671
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2672
|
+
| --- | --- | --- | --- |
|
|
2673
|
+
| `accessibilityHint` | `string` | — | Contexto adicional sobre la acción. |
|
|
2674
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
2675
|
+
| `accessibilityState` | `AccessibilityState` | — | Estado semántico del control. |
|
|
2676
|
+
| `bold` | `boolean` | `true` | Usa el tratamiento más marcado del divisor. |
|
|
2677
|
+
| `horizontalInset` | `boolean` | — | Reserva margen en ambos extremos de la línea horizontal. |
|
|
2678
|
+
| `leftInset` | `boolean` | — | Reserva un margen al inicio lógico de la línea horizontal. |
|
|
2679
|
+
| `nativeID` | `string` | — | Identificador del control para enlazarlo a contenido accesible. |
|
|
2680
|
+
| `orientation` | `"horizontal" \| "vertical"` | `'horizontal'` | Eje de la composición. |
|
|
2681
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
2682
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
2683
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
2684
|
+
| `thickness` | `number` | — | Grosor del trazo en dp. |
|
|
2685
|
+
|
|
2686
|
+
**Ejemplo**
|
|
2687
|
+
|
|
2688
|
+
```tsx
|
|
2689
|
+
import { View } from 'react-native';
|
|
2690
|
+
import { Divider, Text } from 'mobile-design/react-native';
|
|
2691
|
+
|
|
2692
|
+
export default function Example() {
|
|
2693
|
+
return (
|
|
2694
|
+
<View style={{ gap: 16 }}>
|
|
2695
|
+
<Text variant="titleMedium">Tu biblioteca</Text>
|
|
2696
|
+
<Divider />
|
|
2697
|
+
<Text variant="bodyMedium">Colecciones guardadas</Text>
|
|
2698
|
+
</View>
|
|
2699
|
+
);
|
|
2700
|
+
}
|
|
2701
|
+
```
|
|
2702
|
+
|
|
2703
|
+
#### List
|
|
2704
|
+
|
|
2705
|
+
Presenta elementos con título, descripción y contenido de apoyo en listas Standard o Segmented.
|
|
2706
|
+
|
|
2707
|
+
- Compón List.Item con title y slots leading/trailing. Description y lines definen apoyo y altura.
|
|
2708
|
+
- En List.Group, usa accessibilityLabel para nombrar la selección. Los elementos seleccionables de un mismo modo forman una lista de opciones en web.
|
|
2709
|
+
- Usa una región primaria para navegación y controles trailing independientes cuando la fila tenga varias acciones.
|
|
2710
|
+
|
|
2711
|
+
Usa `List.Collection` para contenido agrupado y `List.Group` para filas coordinadas. `List.Icon`, `List.Image`, `List.Section` y `List.Subheader` son piezas de composición. Para una colección grande monta las filas en una lista virtualizada del consumidor.
|
|
2712
|
+
|
|
2713
|
+
**Propiedades de `List.Item`**
|
|
2714
|
+
|
|
2715
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2716
|
+
| --- | --- | --- | --- |
|
|
2717
|
+
| `title` · requerida | `ReactNode` | — | Título visible o contenido principal. |
|
|
2718
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
2719
|
+
| `accessibilityRole` | `string` | — | Rol semántico que debe anunciar la fila. |
|
|
2720
|
+
| `content` | `ReactNode` | — | Contenido propio dentro de la fila. |
|
|
2721
|
+
| `delayLongPress` | `number` | — | Tiempo en milisegundos antes de activar la pulsación mantenida. |
|
|
2722
|
+
| `description` | `ReactNode` | — | Texto secundario de apoyo. |
|
|
2723
|
+
| `descriptionNumberOfLines` | `1 \| 2 \| 3` | — | Máximo de líneas de la descripción. |
|
|
2724
|
+
| `disabled` | `boolean` | `false` | Bloquea la interacción del control. |
|
|
2725
|
+
| `dragged` | `boolean` | `false` | Aplica el estado visual de arrastre. |
|
|
2726
|
+
| `expanded` | `boolean` | — | Estado controlado de expansión. |
|
|
2727
|
+
| `leading` | `ReactNode \| ((props: ListSlotProps) => ReactNode)` | — | Slot al inicio lógico del contenido. |
|
|
2728
|
+
| `lines` | `1 \| 2 \| 3` | — | Número de líneas que determina la anatomía y altura de la fila. |
|
|
2729
|
+
| `metadata` | `ReactNode` | — | Contenido auxiliar en el extremo de la fila. |
|
|
2730
|
+
| `multiAction` | `boolean` | `false` | Coordina el foco cuando la fila contiene varias acciones independientes. |
|
|
2731
|
+
| `onLongPress` | `(((event: GestureResponderEvent) => unknown) & ((e: GestureResponderEvent) => void))` | — | Acción que requiere una pulsación mantenida. |
|
|
2732
|
+
| `onPress` | `(() => void)` | — | Ejecuta la acción al activar el control. |
|
|
2733
|
+
| `overline` | `string` | — | Etiqueta breve sobre el título de la fila. |
|
|
2734
|
+
| `position` | `Position` | — | Posición lógica o compartida de la superficie. |
|
|
2735
|
+
| `selected` | `boolean` | `false` | Selección persistente controlada por el consumidor. |
|
|
2736
|
+
| `selectionMode` | `"single" \| "multiple"` | — | Define si la selección es inexistente, única o múltiple. |
|
|
2737
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
2738
|
+
| `testID` | `string` | `'mobile-list-item'` | Identificador para automatización en el host. |
|
|
2739
|
+
| `titleNumberOfLines` | `number` | `1` | Máximo de líneas del título. |
|
|
2740
|
+
| `trailing` | `ReactNode \| ((props: ListSlotProps) => ReactNode)` | — | Slot al final lógico del contenido. |
|
|
2741
|
+
| `variant` | `"expressive" \| "baseline"` | `'expressive'` | Tratamiento visual o modalidad del componente. |
|
|
2742
|
+
|
|
2743
|
+
<details>
|
|
2744
|
+
<summary>Configuración complementaria de List</summary>
|
|
2745
|
+
|
|
2746
|
+
**`List.Group`**
|
|
2747
|
+
|
|
2748
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2749
|
+
| --- | --- | --- | --- |
|
|
2750
|
+
| `children` · requerida | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
2751
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
2752
|
+
| `variant` | `"standard" \| "segmented"` | `'segmented'` | Tratamiento visual o modalidad del componente. |
|
|
2753
|
+
|
|
2754
|
+
**`List.Collection`**
|
|
2755
|
+
|
|
2756
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2757
|
+
| --- | --- | --- | --- |
|
|
2758
|
+
| `children` · requerida | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
2759
|
+
|
|
2760
|
+
**`List.Accordion`**
|
|
2761
|
+
|
|
2762
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2763
|
+
| --- | --- | --- | --- |
|
|
2764
|
+
| `children` · requerida | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
2765
|
+
| `title` · requerida | `ReactNode` | — | Título visible o contenido principal. |
|
|
2766
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
2767
|
+
| `description` | `ReactNode` | — | Texto secundario de apoyo. |
|
|
2768
|
+
| `descriptionNumberOfLines` | `1 \| 2 \| 3` | — | Máximo de líneas de la descripción. |
|
|
2769
|
+
| `disabled` | `boolean` | `false` | Bloquea la interacción del control. |
|
|
2770
|
+
| `expanded` | `boolean` | — | Estado controlado de expansión. |
|
|
2771
|
+
| `leading` | `ReactNode \| ((props: ListSlotProps) => ReactNode)` | — | Slot al inicio lógico del contenido. |
|
|
2772
|
+
| `onPress` | `(() => void)` | — | Ejecuta la acción al activar el control. |
|
|
2773
|
+
| `testID` | `string` | `'mobile-list-accordion'` | Identificador para automatización en el host. |
|
|
2774
|
+
| `titleNumberOfLines` | `number` | — | Máximo de líneas del título. |
|
|
2775
|
+
|
|
2776
|
+
**`SwipeListItem`**
|
|
2777
|
+
|
|
2778
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2779
|
+
| --- | --- | --- | --- |
|
|
2780
|
+
| `children` · requerida | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
2781
|
+
| `id` · requerida | `string` | — | Identificador del campo. |
|
|
2782
|
+
| `closeAccessibilityLabel` | `string` | — | Nombre accesible del cierre. |
|
|
2783
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
2784
|
+
| `leadingActions` | `readonly SwipeListAction[]` | — | Acciones que aparecen al deslizar. Cada objetivo mide 64 dp más márgenes de 2 dp y el conjunto debe caber en la fila. Agrupa acciones adicionales en un `Menu`. |
|
|
2785
|
+
| `leadingSwipeMode` | `"disabled" \| "direct" \| "indirect"` | — | Presentación de la acción de deslizamiento del lado inicial. |
|
|
2786
|
+
| `onOpenChange` | `((side: SwipeListSide \| null) => void)` | — | Solicita abrir o cerrar. Actualiza `open` en la pantalla. |
|
|
2787
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
2788
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
2789
|
+
| `trailingActions` | `readonly SwipeListAction[]` | — | Acciones que aparecen al deslizar. Cada objetivo mide 64 dp más márgenes de 2 dp y el conjunto debe caber en la fila. Agrupa acciones adicionales en un `Menu`. |
|
|
2790
|
+
| `trailingSwipeMode` | `"disabled" \| "direct" \| "indirect"` | — | Presentación de la acción de deslizamiento del lado final. |
|
|
2791
|
+
|
|
2792
|
+
**`SwipeListGroup`**
|
|
2793
|
+
|
|
2794
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2795
|
+
| --- | --- | --- | --- |
|
|
2796
|
+
| `children` · requerida | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
2797
|
+
|
|
2798
|
+
**`ListReorderGroup`**
|
|
2799
|
+
|
|
2800
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2801
|
+
| --- | --- | --- | --- |
|
|
2802
|
+
| `itemHeight` · requerida | `number` | — | Altura fija en dp que deben respetar todas las filas renderizadas. |
|
|
2803
|
+
| `items` · requerida | `readonly T[]` | — | Elementos del conjunto. Usa identificadores únicos y estables. |
|
|
2804
|
+
| `keyExtractor` · requerida | `(item: T) => string` | — | Devuelve la clave estable de cada elemento reordenable. |
|
|
2805
|
+
| `onReorder` · requerida | `(items: T[]) => void` | — | Entrega el arreglo en el nuevo orden. |
|
|
2806
|
+
| `renderItem` · requerida | `(info: ListReorderItemInfo<T>) => ReactNode` | — | Renderiza cada elemento con su información de reordenamiento. |
|
|
2807
|
+
| `disabled` | `boolean` | `false` | Bloquea la interacción del control. |
|
|
2808
|
+
| `gap` | `number` | `2` | Espacio en dp entre elementos o entre el ancla y la ayuda. |
|
|
2809
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
2810
|
+
| `testID` | `string` | `'mobile-list-reorder'` | Identificador para automatización en el host. |
|
|
2811
|
+
|
|
2812
|
+
**`ListSlotProps`**
|
|
2813
|
+
|
|
2814
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2815
|
+
| --- | --- | --- | --- |
|
|
2816
|
+
| `color` · requerida | `ColorValue` | — | Color del elemento o trazo. |
|
|
2817
|
+
| `disabled` · requerida | `boolean` | — | Bloquea la interacción del control. |
|
|
2818
|
+
| `height` · requerida | `number` | — | Altura disponible en dp o unidades lógicas del host. |
|
|
2819
|
+
| `selected` · requerida | `boolean` | — | Selección persistente controlada por el consumidor. |
|
|
2820
|
+
|
|
2821
|
+
**`SwipeListAction`**
|
|
2822
|
+
|
|
2823
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2824
|
+
| --- | --- | --- | --- |
|
|
2825
|
+
| `icon` · requerida | `any` | — | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
2826
|
+
| `key` · requerida | `string` | — | Identificador único y estable dentro del conjunto. |
|
|
2827
|
+
| `label` · requerida | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
2828
|
+
| `onPress` · requerida | `() => void` | — | Ejecuta la acción al activar el control. |
|
|
2829
|
+
| `destructive` | `boolean` | — | Aplica el tratamiento visual de acción destructiva. |
|
|
2830
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
2831
|
+
| `variant` | `"outlined" \| "standard" \| "filled" \| "tonal"` | — | Tratamiento visual o modalidad del componente. |
|
|
2832
|
+
|
|
2833
|
+
</details>
|
|
2834
|
+
|
|
2835
|
+
**Ejemplo**
|
|
2836
|
+
|
|
2837
|
+
```tsx
|
|
2838
|
+
import { useState } from 'react';
|
|
2839
|
+
import { View } from 'react-native';
|
|
2840
|
+
import { List, IconButton, Text } from 'mobile-design/react-native';
|
|
2841
|
+
|
|
2842
|
+
export default function Example() {
|
|
2843
|
+
const [feedback, setFeedback] = useState('');
|
|
2844
|
+
|
|
2845
|
+
return (
|
|
2846
|
+
<View style={{ gap: 16 }}>
|
|
2847
|
+
<List.Item
|
|
2848
|
+
title="Informe trimestral"
|
|
2849
|
+
description="Documento compartido"
|
|
2850
|
+
lines={2}
|
|
2851
|
+
onPress={() => setFeedback('Detalle del documento')}
|
|
2852
|
+
trailing={
|
|
2853
|
+
<IconButton
|
|
2854
|
+
icon="bookmark-outline"
|
|
2855
|
+
accessibilityLabel="Guardar Informe trimestral"
|
|
2856
|
+
onPress={() => setFeedback('Guardado Informe trimestral')}
|
|
2857
|
+
/>
|
|
2858
|
+
}
|
|
2859
|
+
/>
|
|
2860
|
+
<Text accessibilityLiveRegion="polite">{feedback}</Text>
|
|
2861
|
+
</View>
|
|
2862
|
+
);
|
|
2863
|
+
}
|
|
2864
|
+
```
|
|
2865
|
+
|
|
2866
|
+
### Superficies y ayuda
|
|
2867
|
+
|
|
2868
|
+
#### Menu
|
|
2869
|
+
|
|
2870
|
+
Muestra acciones o alternativas en una superficie anclada, con grupos, selección y submenús cuando hacen falta.
|
|
2871
|
+
|
|
2872
|
+
- Controla visible y onDismiss y proporciona un anchor que abra el menú.
|
|
2873
|
+
- Compón Menu.Item y grupos. OnClosed permite coordinar la siguiente superficie después de la salida.
|
|
2874
|
+
- variant elige standard, vibrant o baseline. Standard y vibrant usan el menú vertical expresivo. Baseline conserva sus medidas propias. El ancho va de 112 a 280 dp y los ítems conservan un objetivo mínimo de 48 dp.
|
|
2875
|
+
- Usa layout="grouped" y Menu.Group para separar acciones relacionadas. Los grupos usan hasta dos gaps donde están disponibles y divisores cuando el menú necesita scroll o esa presentación no admite gaps.
|
|
2876
|
+
- Para opciones contextuales controla visible y usa anchor={ { x, y } }. Ofrece una activación accesible además de la pulsación mantenida o el clic derecho.
|
|
2877
|
+
|
|
2878
|
+
**Propiedades de `Menu`**
|
|
2879
|
+
|
|
2880
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2881
|
+
| --- | --- | --- | --- |
|
|
2882
|
+
| `anchor` · requerida | `React.ReactNode \| { x: number; y: number; }` | — | Control o coordenadas que sirven como origen de la superficie. |
|
|
2883
|
+
| `children` · requerida | `React.ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
2884
|
+
| `visible` · requerida | `boolean` | — | Controla si la superficie o el indicador se presenta. |
|
|
2885
|
+
| `anchorGap` | `number` | `0` | Separación entre el ancla y la superficie. |
|
|
2886
|
+
| `anchorPosition` | `"bottom" \| "top"` | `'bottom'` | Lado preferido respecto del ancla. |
|
|
2887
|
+
| `anchorStyle` | `StyleProp<ViewStyle>` | — | Estilo del envoltorio del ancla. |
|
|
2888
|
+
| `contentStyle` | `StyleProp<ViewStyle>` | — | Estilo del contenido dentro de la superficie. |
|
|
2889
|
+
| `elevation` | `Elevation` | `2` | Nivel de elevación de la superficie. |
|
|
2890
|
+
| `emptyLabel` | `string` | `'No results'` | Texto mostrado cuando no hay opciones o resultados. |
|
|
2891
|
+
| `filterable` | `boolean` | `false` | Muestra un campo para filtrar opciones. |
|
|
2892
|
+
| `filterAccessibilityLabel` | `string` | — | Nombre accesible del campo de filtro. |
|
|
2893
|
+
| `filterPlaceholder` | `string` | `'Filter options'` | Texto inicial del campo de filtro. |
|
|
2894
|
+
| `filterValue` | `string` | — | Consulta de filtrado controlada. |
|
|
2895
|
+
| `layout` | `"standard" \| "grouped"` | `'standard'` | Distribución de las opciones dentro de la superficie. |
|
|
2896
|
+
| `onClosed` | `(() => void)` | — | Avisa cuando concluye la salida de la superficie. |
|
|
2897
|
+
| `onDismiss` | `(() => void)` | — | Solicita cerrar la superficie. |
|
|
2898
|
+
| `onFilterChange` | `((value: string) => void)` | — | Recibe los cambios de la consulta del filtro. |
|
|
2899
|
+
| `onKeyboardDismiss` | `(() => void)` | — | Callback para coordinar el cierre del teclado. |
|
|
2900
|
+
| `onPointerInside` | `(() => void)` | — | Avisa cuando el puntero está dentro del menú. |
|
|
2901
|
+
| `overlayAccessibilityLabel` | `string` | `'Cerrar menú'` | Nombre que anuncia el lector de pantalla para la superficie exterior que cierra el menú. |
|
|
2902
|
+
| `placement` | `PopupPlacement` | — | Posición de apertura respecto del ancla. |
|
|
2903
|
+
| `scrollIndicators` | `ScrollIndicatorOptions` | — | Configura los indicadores de desplazamiento del paquete. |
|
|
2904
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
2905
|
+
| `testID` | `string` | `'mobile-menu'` | Identificador para automatización en el host. |
|
|
2906
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
2907
|
+
| `variant` | `"standard" \| "vibrant" \| "baseline"` | `'standard'` | Tratamiento visual o modalidad del componente. |
|
|
2908
|
+
| `width` | `number` | `280` | Ancho de la superficie. |
|
|
2909
|
+
|
|
2910
|
+
<details>
|
|
2911
|
+
<summary>Configuración complementaria de Menu</summary>
|
|
2912
|
+
|
|
2913
|
+
**`Menu.Item`**
|
|
2914
|
+
|
|
2915
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2916
|
+
| --- | --- | --- | --- |
|
|
2917
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
2918
|
+
| `accessibilityState` | `AccessibilityState` | — | Estado semántico del control. |
|
|
2919
|
+
| `badge` | `ReactNode` | — | Insignia que acompaña al elemento de menú. |
|
|
2920
|
+
| `closeOnPress` | `boolean` | — | Cierra el menú después de activar la opción. |
|
|
2921
|
+
| `content` | `ReactNode` | — | Contenido propio dentro de la fila. |
|
|
2922
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
2923
|
+
| `leading` | `ReactNode` | — | Slot al inicio lógico del contenido. |
|
|
2924
|
+
| `onHoverIn` | `((event: MouseEvent) => unknown)` | — | Avisa al entrar el puntero en la superficie. |
|
|
2925
|
+
| `onOpenSubmenu` | `(() => void)` | — | Abre el submenú asociado. |
|
|
2926
|
+
| `onPress` | `((e: GestureResponderEvent) => void)` | — | Ejecuta la acción al activar el control. |
|
|
2927
|
+
| `position` | `"middle" \| "first" \| "last" \| "only"` | — | Posición lógica o compartida de la superficie. |
|
|
2928
|
+
| `ref` | `Ref<default>` | — | Referencia imperativa con las operaciones del componente anfitrión. |
|
|
2929
|
+
| `searchText` | `string` | — | Texto que se usa para filtrar opciones cuyo título o contenido es un elemento de React. |
|
|
2930
|
+
| `selected` | `boolean` | — | Selección persistente controlada por el consumidor. |
|
|
2931
|
+
| `selectionIndicatorPosition` | `"leading" \| "trailing"` | — | Coloca la marca de selección al inicio o al final. Usa `trailing` para conservar el icono inicial. |
|
|
2932
|
+
| `selectionMode` | `"single" \| "multiple"` | — | Define si la selección es inexistente, única o múltiple. |
|
|
2933
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
2934
|
+
| `supportingText` | `string` | — | Ayuda que acompaña al valor cuando no hay error. |
|
|
2935
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
2936
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
2937
|
+
| `title` | `ReactNode` | — | Título visible o contenido principal. |
|
|
2938
|
+
| `trailing` | `ReactNode` | — | Slot al final lógico del contenido. |
|
|
2939
|
+
| `trailingText` | `string` | — | Texto auxiliar de la opción, como un atajo. |
|
|
2940
|
+
|
|
2941
|
+
**`Menu.Group`**
|
|
2942
|
+
|
|
2943
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2944
|
+
| --- | --- | --- | --- |
|
|
2945
|
+
| `children` · requerida | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
2946
|
+
| `label` | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
2947
|
+
|
|
2948
|
+
**`Menu.Submenu`**
|
|
2949
|
+
|
|
2950
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2951
|
+
| --- | --- | --- | --- |
|
|
2952
|
+
| `children` · requerida | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
2953
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
2954
|
+
| `accessibilityState` | `AccessibilityState` | — | Estado semántico del control. |
|
|
2955
|
+
| `badge` | `ReactNode` | — | Insignia que acompaña al elemento de menú. |
|
|
2956
|
+
| `content` | `ReactNode` | — | Contenido propio dentro de la fila. |
|
|
2957
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
2958
|
+
| `leading` | `ReactNode` | — | Slot al inicio lógico del contenido. |
|
|
2959
|
+
| `onHoverIn` | `((event: MouseEvent) => unknown)` | — | Avisa al entrar el puntero en la superficie. |
|
|
2960
|
+
| `onOpenSubmenu` | `(() => void)` | — | Abre el submenú asociado. |
|
|
2961
|
+
| `onPress` | `((e: GestureResponderEvent) => void)` | — | Ejecuta la acción al activar el control. |
|
|
2962
|
+
| `position` | `"middle" \| "first" \| "last" \| "only"` | — | Posición lógica o compartida de la superficie. |
|
|
2963
|
+
| `ref` | `Ref<default>` | — | Referencia imperativa con las operaciones del componente anfitrión. |
|
|
2964
|
+
| `scrollIndicators` | `ScrollIndicatorOptions` | — | Configura los indicadores de desplazamiento del paquete. |
|
|
2965
|
+
| `searchText` | `string` | — | Texto que se usa para filtrar opciones cuyo título o contenido es un elemento de React. |
|
|
2966
|
+
| `selected` | `boolean` | — | Selección persistente controlada por el consumidor. |
|
|
2967
|
+
| `selectionIndicatorPosition` | `"leading" \| "trailing"` | — | Coloca la marca de selección al inicio o al final. Usa `trailing` para conservar el icono inicial. |
|
|
2968
|
+
| `selectionMode` | `"single" \| "multiple"` | — | Define si la selección es inexistente, única o múltiple. |
|
|
2969
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
2970
|
+
| `submenuAccessibilityLabel` | `string` | — | Nombre accesible del acceso al submenú. |
|
|
2971
|
+
| `supportingText` | `string` | — | Ayuda que acompaña al valor cuando no hay error. |
|
|
2972
|
+
| `testID` | `string` | `'mobile-submenu'` | Identificador para automatización en el host. |
|
|
2973
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
2974
|
+
| `title` | `ReactNode` | — | Título visible o contenido principal. |
|
|
2975
|
+
| `trailing` | `ReactNode` | — | Slot al final lógico del contenido. |
|
|
2976
|
+
| `trailingText` | `string` | — | Texto auxiliar de la opción, como un atajo. |
|
|
2977
|
+
| `width` | `number` | `280` | Ancho de la superficie. |
|
|
2978
|
+
|
|
2979
|
+
**`MenuItemProps`**
|
|
2980
|
+
|
|
2981
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
2982
|
+
| --- | --- | --- | --- |
|
|
2983
|
+
| `badge` | `ReactNode` | — | Insignia que acompaña al elemento de menú. |
|
|
2984
|
+
| `closeOnPress` | `boolean` | — | Cierra el menú después de activar la opción. |
|
|
2985
|
+
| `content` | `ReactNode` | — | Contenido propio dentro de la fila. |
|
|
2986
|
+
| `leading` | `ReactNode` | — | Slot al inicio lógico del contenido. |
|
|
2987
|
+
| `onHoverIn` | `((event: MouseEvent) => unknown)` | — | Avisa al entrar el puntero en la superficie. |
|
|
2988
|
+
| `onOpenSubmenu` | `(() => void)` | — | Abre el submenú asociado. |
|
|
2989
|
+
| `position` | `"middle" \| "first" \| "last" \| "only"` | — | Posición lógica o compartida de la superficie. |
|
|
2990
|
+
| `ref` | `Ref<default>` | — | Referencia imperativa con las operaciones del componente anfitrión. |
|
|
2991
|
+
| `searchText` | `string` | — | Texto que se usa para filtrar opciones cuyo título o contenido es un elemento de React. |
|
|
2992
|
+
| `selected` | `boolean` | — | Selección persistente controlada por el consumidor. |
|
|
2993
|
+
| `selectionMode` | `"single" \| "multiple"` | — | Define si la selección es inexistente, única o múltiple. |
|
|
2994
|
+
| `supportingText` | `string` | — | Ayuda que acompaña al valor cuando no hay error. |
|
|
2995
|
+
| `title` | `ReactNode` | — | Título visible o contenido principal. |
|
|
2996
|
+
| `trailing` | `ReactNode` | — | Slot al final lógico del contenido. |
|
|
2997
|
+
| `trailingText` | `string` | — | Texto auxiliar de la opción, como un atajo. |
|
|
2998
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
2999
|
+
| `accessibilityState` | `AccessibilityState` | — | Estado semántico del control. |
|
|
3000
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
3001
|
+
| `onPress` | `((e: GestureResponderEvent) => void)` | — | Ejecuta la acción al activar el control. |
|
|
3002
|
+
|
|
3003
|
+
**`MenuSubmenuProps`**
|
|
3004
|
+
|
|
3005
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
3006
|
+
| --- | --- | --- | --- |
|
|
3007
|
+
| `children` · requerida | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
3008
|
+
| `badge` | `ReactNode` | — | Insignia que acompaña al elemento de menú. |
|
|
3009
|
+
| `content` | `ReactNode` | — | Contenido propio dentro de la fila. |
|
|
3010
|
+
| `leading` | `ReactNode` | — | Slot al inicio lógico del contenido. |
|
|
3011
|
+
| `onHoverIn` | `((event: MouseEvent) => unknown)` | — | Avisa al entrar el puntero en la superficie. |
|
|
3012
|
+
| `onOpenSubmenu` | `(() => void)` | — | Abre el submenú asociado. |
|
|
3013
|
+
| `position` | `"middle" \| "first" \| "last" \| "only"` | — | Posición lógica o compartida de la superficie. |
|
|
3014
|
+
| `ref` | `Ref<default>` | — | Referencia imperativa con las operaciones del componente anfitrión. |
|
|
3015
|
+
| `scrollIndicators` | `ScrollIndicatorOptions` | — | Configura los indicadores de desplazamiento del paquete. |
|
|
3016
|
+
| `searchText` | `string` | — | Texto que se usa para filtrar opciones cuyo título o contenido es un elemento de React. |
|
|
3017
|
+
| `selected` | `boolean` | — | Selección persistente controlada por el consumidor. |
|
|
3018
|
+
| `selectionMode` | `"single" \| "multiple"` | — | Define si la selección es inexistente, única o múltiple. |
|
|
3019
|
+
| `submenuAccessibilityLabel` | `string` | — | Nombre accesible del acceso al submenú. |
|
|
3020
|
+
| `supportingText` | `string` | — | Ayuda que acompaña al valor cuando no hay error. |
|
|
3021
|
+
| `title` | `ReactNode` | — | Título visible o contenido principal. |
|
|
3022
|
+
| `trailing` | `ReactNode` | — | Slot al final lógico del contenido. |
|
|
3023
|
+
| `trailingText` | `string` | — | Texto auxiliar de la opción, como un atajo. |
|
|
3024
|
+
| `width` | `number` | — | Ancho de la superficie. |
|
|
3025
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
3026
|
+
| `accessibilityState` | `AccessibilityState` | — | Estado semántico del control. |
|
|
3027
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
3028
|
+
| `onPress` | `((e: GestureResponderEvent) => void)` | — | Ejecuta la acción al activar el control. |
|
|
3029
|
+
|
|
3030
|
+
</details>
|
|
3031
|
+
|
|
3032
|
+
**Ejemplo**
|
|
3033
|
+
|
|
3034
|
+
```tsx
|
|
3035
|
+
import { useState } from 'react';
|
|
3036
|
+
import { View } from 'react-native';
|
|
3037
|
+
import { Menu, Button, Text } from 'mobile-design/react-native';
|
|
3038
|
+
|
|
3039
|
+
export default function Example() {
|
|
3040
|
+
const [feedback, setFeedback] = useState('');
|
|
3041
|
+
const [visible, setVisible] = useState(false);
|
|
3042
|
+
|
|
3043
|
+
return (
|
|
3044
|
+
<View style={{ gap: 16 }}>
|
|
3045
|
+
<Menu
|
|
3046
|
+
visible={visible}
|
|
3047
|
+
onDismiss={() => setVisible(false)}
|
|
3048
|
+
anchor={
|
|
3049
|
+
<Button
|
|
3050
|
+
variant="tonal"
|
|
3051
|
+
onPress={() => setVisible(true)}
|
|
3052
|
+
>
|
|
3053
|
+
Opciones
|
|
3054
|
+
</Button>
|
|
3055
|
+
}
|
|
3056
|
+
>
|
|
3057
|
+
<Menu.Item
|
|
3058
|
+
title="Guardar"
|
|
3059
|
+
leadingIcon="bookmark-outline"
|
|
3060
|
+
onPress={() => setFeedback('Guardado')}
|
|
3061
|
+
/>
|
|
3062
|
+
<Menu.Item
|
|
3063
|
+
title="Enviar"
|
|
3064
|
+
leadingIcon="send-outline"
|
|
3065
|
+
onPress={() => setFeedback('Enviar')}
|
|
3066
|
+
/>
|
|
3067
|
+
</Menu>
|
|
3068
|
+
<Text accessibilityLiveRegion="polite">{feedback}</Text>
|
|
3069
|
+
</View>
|
|
3070
|
+
);
|
|
3071
|
+
}
|
|
3072
|
+
```
|
|
3073
|
+
|
|
3074
|
+
#### Dialog y FullScreenDialog
|
|
3075
|
+
|
|
3076
|
+
Presenta información o una tarea que necesita atención antes de volver al contenido anterior.
|
|
3077
|
+
|
|
3078
|
+
- Controla visible y onDismiss. Compón Title, Content y Actions dentro de Dialog.
|
|
3079
|
+
- Usa FullScreenDialog para una tarea extensa y separa guardar de descartar.
|
|
3080
|
+
|
|
3081
|
+
Compón `Dialog.Title`, `Dialog.Icon`, `Dialog.Content`, `Dialog.ScrollArea` y `Dialog.Actions` según la tarea. `Dialog` ya controla su portal. Para medir un origen compartido para la animación de entrada, pasa `transitionOrigin` en las coordenadas de ventana que espera la superficie.
|
|
3082
|
+
|
|
3083
|
+
**Propiedades de `Dialog`**
|
|
3084
|
+
|
|
3085
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
3086
|
+
| --- | --- | --- | --- |
|
|
3087
|
+
| `children` · requerida | `React.ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
3088
|
+
| `visible` · requerida | `boolean` | — | Controla si la superficie o el indicador se presenta. |
|
|
3089
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
3090
|
+
| `dismissable` | `boolean` | `true` | Permite cerrar el diálogo al tocar fuera de la superficie. |
|
|
3091
|
+
| `dismissableBackButton` | `boolean` | — | Permite cerrar el diálogo con la acción Atrás de Android. |
|
|
3092
|
+
| `onClosed` | `(() => void)` | — | Avisa cuando concluye la salida de la superficie. |
|
|
3093
|
+
| `onDismiss` | `(() => void)` | — | Solicita cerrar la superficie. |
|
|
3094
|
+
| `position` | `{ horizontal?: "start" \| "center" \| "end"; vertical?: "top" \| "center" \| "bottom"; }` | — | Posición lógica o compartida de la superficie. |
|
|
3095
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
3096
|
+
| `testID` | `string` | `'mobile-dialog'` | Identificador para automatización en el host. |
|
|
3097
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
3098
|
+
| `transitionOrigin` | `ContainerTransformOrigin` | — | Origen medido para la transición de la superficie. |
|
|
3099
|
+
|
|
3100
|
+
<details>
|
|
3101
|
+
<summary>Configuración complementaria de Dialog y FullScreenDialog</summary>
|
|
3102
|
+
|
|
3103
|
+
**`FullScreenDialog`**
|
|
3104
|
+
|
|
3105
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
3106
|
+
| --- | --- | --- | --- |
|
|
3107
|
+
| `children` · requerida | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
3108
|
+
| `onDismiss` · requerida | `() => void` | — | Solicita cerrar la superficie. |
|
|
3109
|
+
| `title` · requerida | `string` | — | Título visible o contenido principal. |
|
|
3110
|
+
| `visible` · requerida | `boolean` | — | Controla si la superficie o el indicador se presenta. |
|
|
3111
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
3112
|
+
| `backgroundContent` | `ReactNode` | — | Contenido decorativo situado detrás de la cabecera y el contenido del diálogo. |
|
|
3113
|
+
| `closeAccessibilityLabel` | `string` | `'Cerrar diálogo'` | Nombre accesible del cierre. |
|
|
3114
|
+
| `confirmDisabled` | `boolean` | `false` | Bloquea la acción de confirmación del encabezado. |
|
|
3115
|
+
| `confirmLabel` | `string` | `'Guardar'` | Etiqueta de la acción para confirmar. |
|
|
3116
|
+
| `dismissible` | `boolean` | `true` | Permite descartar la superficie con sus gestos y acciones de cierre. |
|
|
3117
|
+
| `onClosed` | `(() => void)` | — | Avisa cuando concluye la salida de la superficie. |
|
|
3118
|
+
| `onConfirm` | `(() => void)` | — | Entrega el borrador validado al confirmar. |
|
|
3119
|
+
| `scrollable` | `boolean` | `true` | Habilita el desplazamiento de la fila o superficie. |
|
|
3120
|
+
| `scrollIndicators` | `ScrollIndicatorOptions` | — | Configura los indicadores de desplazamiento del paquete. |
|
|
3121
|
+
| `testID` | `string` | `'mobile-full-screen-dialog'` | Identificador para automatización en el host. |
|
|
3122
|
+
| `transitionOrigin` | `ContainerTransformOrigin` | — | Origen medido para la transición de la superficie. |
|
|
3123
|
+
|
|
3124
|
+
**`ContainerTransformOrigin`**
|
|
3125
|
+
|
|
3126
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
3127
|
+
| --- | --- | --- | --- |
|
|
3128
|
+
| `height` · requerida | `number` | — | Altura disponible en dp o unidades lógicas del host. |
|
|
3129
|
+
| `width` · requerida | `number` | — | Ancho de la superficie. |
|
|
3130
|
+
| `x` · requerida | `number` | — | Coordenada horizontal del origen medida en la ventana. |
|
|
3131
|
+
| `y` · requerida | `number` | — | Coordenada vertical del origen medida en la ventana. |
|
|
3132
|
+
| `backgroundColor` | `ColorValue` | — | Color de la superficie bajo el campo o contenedor. |
|
|
3133
|
+
| `borderRadius` | `number` | — | Radio inicial de las esquinas en la transición. |
|
|
3134
|
+
| `content` | `ReactNode` | — | Contenido propio dentro de la fila. |
|
|
3135
|
+
|
|
3136
|
+
</details>
|
|
3137
|
+
|
|
3138
|
+
**Ejemplo**
|
|
3139
|
+
|
|
3140
|
+
```tsx
|
|
3141
|
+
import { useState } from 'react';
|
|
3142
|
+
import { View } from 'react-native';
|
|
3143
|
+
import { Button, Dialog, Text } from 'mobile-design/react-native';
|
|
3144
|
+
|
|
3145
|
+
export default function Example() {
|
|
3146
|
+
const [feedback, setFeedback] = useState('');
|
|
3147
|
+
const [visible, setVisible] = useState(false);
|
|
3148
|
+
|
|
3149
|
+
return (
|
|
3150
|
+
<View style={{ gap: 16 }}>
|
|
3151
|
+
<>
|
|
3152
|
+
<Button onPress={() => setVisible(true)}>Eliminar descarga</Button>
|
|
3153
|
+
<Dialog
|
|
3154
|
+
visible={visible}
|
|
3155
|
+
onDismiss={() => setVisible(false)}
|
|
3156
|
+
>
|
|
3157
|
+
<Dialog.Title>¿Eliminar descarga?</Dialog.Title>
|
|
3158
|
+
<Dialog.Content>
|
|
3159
|
+
<Text>Podrás descargarla de nuevo cuando quieras.</Text>
|
|
3160
|
+
</Dialog.Content>
|
|
3161
|
+
<Dialog.Actions>
|
|
3162
|
+
<Button
|
|
3163
|
+
variant="text"
|
|
3164
|
+
onPress={() => setVisible(false)}
|
|
3165
|
+
>
|
|
3166
|
+
Cancelar
|
|
3167
|
+
</Button>
|
|
3168
|
+
<Button
|
|
3169
|
+
variant="text"
|
|
3170
|
+
onPress={() => {
|
|
3171
|
+
setVisible(false);
|
|
3172
|
+
setFeedback('Descarga eliminada');
|
|
3173
|
+
}}
|
|
3174
|
+
>
|
|
3175
|
+
Eliminar
|
|
3176
|
+
</Button>
|
|
3177
|
+
</Dialog.Actions>
|
|
3178
|
+
</Dialog>
|
|
3179
|
+
</>
|
|
3180
|
+
<Text accessibilityLiveRegion="polite">{feedback}</Text>
|
|
3181
|
+
</View>
|
|
3182
|
+
);
|
|
3183
|
+
}
|
|
3184
|
+
```
|
|
3185
|
+
|
|
3186
|
+
#### BottomSheet
|
|
3187
|
+
|
|
3188
|
+
Presenta tareas o información de apoyo con una hoja estándar o modal y posiciones de expansión.
|
|
3189
|
+
|
|
3190
|
+
- BottomSheet compone una superficie estándar o modal con el motor coordinado de gestos y scroll. Controla open/onOpenChange. OnClosed avisa después de retirar la superficie, incluso al cerrar durante una animación.
|
|
3191
|
+
- La estándar comparte la región con el contenido principal y no añade scrim ni bloqueo de foco. La modal bloquea el fondo, tiene nombre de diálogo y scrim al 32%.
|
|
3192
|
+
- Usa GestureHandlerRootView en la raíz de la aplicación. Dentro de la hoja usa BottomSheetScrollView, BottomSheetFlatList o BottomSheetSectionList y BottomSheetTextField para coordinar edición, teclado y gestos.
|
|
3193
|
+
|
|
3194
|
+
Monta `GestureHandlerRootView` como se muestra en el ejemplo de instalación. Usa `BottomSheetTextField` o `BottomSheetTextInput` al editar dentro de la hoja. Mantén los hijos durante la salida si su contenido debe permanecer visible hasta `onClosed`.
|
|
3195
|
+
|
|
3196
|
+
**Propiedades de `BottomSheet`**
|
|
3197
|
+
|
|
3198
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
3199
|
+
| --- | --- | --- | --- |
|
|
3200
|
+
| `onOpenChange` · requerida | `(open: boolean) => void` | — | Solicita abrir o cerrar. Actualiza `open` en la pantalla. |
|
|
3201
|
+
| `open` · requerida | `boolean` | — | Controla si la superficie está abierta. |
|
|
3202
|
+
| `accessibilityLabel` | `string` | `'Hoja inferior'` | Nombre que anuncia la tecnología de asistencia. |
|
|
3203
|
+
| `backgroundContent` | `ReactNode \| ((props: BottomSheetBackgroundProps & { containerHeight: number; }) => ReactNode)` | — | Contenido decorativo recortado detrás del tirador y el contenido desplazable de la hoja. |
|
|
3204
|
+
| `children` | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
3205
|
+
| `contentPanning` | `boolean` | `true` | Permite que el gesto sobre el contenido mueva la hoja. |
|
|
3206
|
+
| `dismissible` | `boolean` | `true` | Permite descartar la superficie con sus gestos y acciones de cierre. |
|
|
3207
|
+
| `draggable` | `boolean` | `true` | Habilita la manipulación por arrastre. |
|
|
3208
|
+
| `index` | `number` | `0` | Índice inicial o controlado de la posición entre `snapPoints` según la composición. |
|
|
3209
|
+
| `keyboardBehavior` | `"interactive" \| "extend" \| "fillParent"` | `'interactive'` | Configura el ajuste de la hoja cuando aparece el teclado. |
|
|
3210
|
+
| `maxWidth` | `number` | `640` | Ancho máximo de la superficie. |
|
|
3211
|
+
| `minimized` | `boolean` | `false` | Solicita la presentación minimizada. |
|
|
3212
|
+
| `onClosed` | `(() => void)` | — | Avisa cuando concluye la salida de la superficie. |
|
|
3213
|
+
| `onIndexChange` | `((index: number) => void)` | — | Avisa del cambio de índice aceptado. |
|
|
3214
|
+
| `scrollable` | `boolean` | `false` | Habilita el desplazamiento de la fila o superficie. |
|
|
3215
|
+
| `showDragHandle` | `boolean` | `true` | Muestra el control de arrastre y cambio de altura. |
|
|
3216
|
+
| `snapPoints` | `(string \| number)[]` | — | Posiciones de reposo de la hoja. Admite puntos en dp o porcentajes según el tipo. |
|
|
3217
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
3218
|
+
| `testID` | `string` | `'mobile-bottom-sheet'` | Identificador para automatización en el host. |
|
|
3219
|
+
| `topInset` | `number` | — | Espacio reservado en el borde superior de la ventana. |
|
|
3220
|
+
| `variant` | `"standard" \| "modal"` | `'modal'` | `standard` comparte el layout y `modal` presenta una hoja superpuesta. |
|
|
3221
|
+
|
|
3222
|
+
<details>
|
|
3223
|
+
<summary>Configuración complementaria de BottomSheet</summary>
|
|
3224
|
+
|
|
3225
|
+
**`BottomSheetScrollView`**
|
|
3226
|
+
|
|
3227
|
+
Recibe las props de scroll de React Native y las opciones de indicador del paquete. `BottomSheetFlatList` conserva el contrato de `FlatList` y `BottomSheetSectionList` el de `SectionList` para listas virtualizadas dentro de la hoja.
|
|
3228
|
+
|
|
3229
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
3230
|
+
| --- | --- | --- | --- |
|
|
3231
|
+
| `children` · requerida | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
3232
|
+
| `contentContainerStyle` | `StyleProp<AnimatedStyle<____ViewStyleProp_Internal \| undefined>>` | — | Estilo del contenedor que agrupa los hijos del área desplazable. Úsalo para añadir relleno alrededor del contenido. |
|
|
3233
|
+
| `horizontal` | `boolean \| SharedValueDisableContravariance<boolean \| undefined>` | — | Distribuye los hijos en una fila horizontal. |
|
|
3234
|
+
|
|
3235
|
+
**`BottomSheetTextFieldProps`**
|
|
3236
|
+
|
|
3237
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
3238
|
+
| --- | --- | --- | --- |
|
|
3239
|
+
| `onChangeText` · requerida | `(value: string) => void` | — | Comunica el nuevo texto para actualizar el valor controlado. |
|
|
3240
|
+
| `value` · requerida | `string` | — | Valor actual controlado por la pantalla. |
|
|
3241
|
+
| `autoGrow` | `boolean` | — | Ajusta la altura al contenido de un campo multilínea. Usa `false` para fijar la altura. |
|
|
3242
|
+
| `backgroundColor` | `ColorValue` | — | Color de la superficie bajo el campo o contenedor. |
|
|
3243
|
+
| `containerStyle` | `StyleProp<ViewStyle>` | — | Estilo adicional del contenedor del campo. |
|
|
3244
|
+
| `counter` | `number \| boolean` | — | Muestra la longitud del texto. Usa `maxLength` para limitar la entrada. |
|
|
3245
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
3246
|
+
| `error` | `boolean` | — | Activa el tratamiento visual y accesible de error. |
|
|
3247
|
+
| `errorText` | `string` | — | Mensaje mostrado en el estado de error. |
|
|
3248
|
+
| `focused` | `boolean` | — | Controla la apariencia de foco de un campo integrado en otro control. El foco de entrada se gestiona por separado. |
|
|
3249
|
+
| `inputStyle` | `StyleProp<TextStyle>` | — | Estilo que recibe la entrada de texto interna. |
|
|
3250
|
+
| `label` | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
3251
|
+
| `leading` | `React.ReactNode` | — | Slot al inicio lógico del contenido. |
|
|
3252
|
+
| `leadingIcon` | `any` | — | Icono al inicio del control. |
|
|
3253
|
+
| `leadingIconAccessibilityLabel` | `string` | — | Nombre accesible para la acción del icono inicial. |
|
|
3254
|
+
| `onLeadingIconPress` | `(() => void)` | — | Callback del icono inicial cuando es una acción independiente. |
|
|
3255
|
+
| `onTrailingIconPress` | `(() => void)` | — | Callback del icono final cuando es una acción independiente. |
|
|
3256
|
+
| `prefix` | `string` | — | Afijo anterior al valor. |
|
|
3257
|
+
| `prefixAccessibilityLabel` | `string` | — | Cómo se anuncia el prefijo. |
|
|
3258
|
+
| `readOnly` | `boolean` | — | Permite mostrar o consultar el valor con la edición bloqueada. |
|
|
3259
|
+
| `suffix` | `string` | — | Afijo posterior al valor. |
|
|
3260
|
+
| `suffixAccessibilityLabel` | `string` | — | Cómo se anuncia el sufijo. |
|
|
3261
|
+
| `supportingText` | `React.ReactNode` | — | Ayuda que acompaña al valor cuando no hay error. |
|
|
3262
|
+
| `trailing` | `React.ReactNode` | — | Slot al final lógico del contenido. |
|
|
3263
|
+
| `trailingIcon` | `any` | — | Icono al final del control. |
|
|
3264
|
+
| `trailingIconAccessibilityLabel` | `string` | — | Nombre accesible para la acción del icono final. |
|
|
3265
|
+
| `variant` | `"outlined" \| "filled"` | — | Tratamiento visual o modalidad del componente. |
|
|
3266
|
+
| `accessibilityHint` | `string` | — | Contexto adicional sobre la acción. |
|
|
3267
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
3268
|
+
| `accessibilityState` | `AccessibilityState` | — | Estado semántico del control. |
|
|
3269
|
+
| `children` | `React.ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
3270
|
+
| `onChange` | `((e: TextInputChangeEvent) => unknown)` | — | Comunica el valor confirmado o el evento de entrada, según el componente. |
|
|
3271
|
+
| `onPress` | `((event: GestureResponderEvent) => unknown)` | — | Ejecuta la acción al activar el control. |
|
|
3272
|
+
|
|
3273
|
+
</details>
|
|
3274
|
+
|
|
3275
|
+
**Ejemplo**
|
|
3276
|
+
|
|
3277
|
+
```tsx
|
|
3278
|
+
import { useState } from 'react';
|
|
3279
|
+
import {
|
|
3280
|
+
BottomSheet,
|
|
3281
|
+
BottomSheetScrollView,
|
|
3282
|
+
Text,
|
|
3283
|
+
Button,
|
|
3284
|
+
} from 'mobile-design/react-native';
|
|
3285
|
+
|
|
3286
|
+
export default function Example() {
|
|
3287
|
+
const [open, setOpen] = useState(false);
|
|
3288
|
+
|
|
3289
|
+
return (
|
|
3290
|
+
<>
|
|
3291
|
+
<Button onPress={() => setOpen(true)}>Ver detalles</Button>
|
|
3292
|
+
<BottomSheet
|
|
3293
|
+
open={open}
|
|
3294
|
+
onOpenChange={setOpen}
|
|
3295
|
+
variant="modal"
|
|
3296
|
+
scrollable
|
|
3297
|
+
snapPoints={['50%', '85%']}
|
|
3298
|
+
accessibilityLabel="Detalles de la colección"
|
|
3299
|
+
>
|
|
3300
|
+
<BottomSheetScrollView contentContainerStyle={{ padding: 24 }}>
|
|
3301
|
+
<Text variant="headlineSmall">Tu colección</Text>
|
|
3302
|
+
<Text>Información adicional de la colección guardada.</Text>
|
|
3303
|
+
<Button
|
|
3304
|
+
variant="text"
|
|
3305
|
+
onPress={() => setOpen(false)}
|
|
3306
|
+
>
|
|
3307
|
+
Cerrar
|
|
3308
|
+
</Button>
|
|
3309
|
+
</BottomSheetScrollView>
|
|
3310
|
+
</BottomSheet>
|
|
3311
|
+
</>
|
|
3312
|
+
);
|
|
3313
|
+
}
|
|
3314
|
+
```
|
|
3315
|
+
|
|
3316
|
+
#### SideSheet
|
|
3317
|
+
|
|
3318
|
+
Muestra una tarea complementaria desde un borde lateral, como parte del layout o en una superficie modal.
|
|
3319
|
+
|
|
3320
|
+
- Controla open/onOpenChange. La estándar ocupa una región junto al contenido. La modal bloquea el fondo hasta cerrarse.
|
|
3321
|
+
- Usa el ancho disponible de tu región para cambiar entre modal compacta y estándar en una región amplia. Mantén valores editados y selecciones por encima de ambas presentaciones.
|
|
3322
|
+
- El título aporta el nombre accesible por defecto. AccessibilityLabel permite un nombre específico. Un header personalizado conserva sus propias acciones de salida.
|
|
3323
|
+
|
|
3324
|
+
En pantallas estrechas abre la hoja modal. En una región amplia puedes montar la estándar como parte del layout. Mantén la selección o los cambios del formulario en el padre para conservarlos al cambiar de presentación.
|
|
3325
|
+
|
|
3326
|
+
**Propiedades de `SideSheet`**
|
|
3327
|
+
|
|
3328
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
3329
|
+
| --- | --- | --- | --- |
|
|
3330
|
+
| `onOpenChange` · requerida | `(open: boolean) => void` | — | Solicita abrir o cerrar. Actualiza `open` en la pantalla. |
|
|
3331
|
+
| `open` · requerida | `boolean` | — | Controla si la superficie está abierta. |
|
|
3332
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
3333
|
+
| `children` | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
3334
|
+
| `detached` | `boolean` | `false` | Separa visualmente la superficie del borde de la ventana. |
|
|
3335
|
+
| `dismissible` | `boolean` | `true` | Permite descartar la superficie con sus gestos y acciones de cierre. |
|
|
3336
|
+
| `draggable` | `boolean` | `true` | Habilita la manipulación por arrastre. |
|
|
3337
|
+
| `edge` | `"end" \| "start"` | `'end'` | Borde lógico desde el que aparece la hoja. |
|
|
3338
|
+
| `elevation` | `0 \| 1 \| 2 \| 3` | — | Nivel de elevación de la superficie. |
|
|
3339
|
+
| `footer` | `ReactNode` | — | Contenido que permanece en el pie. |
|
|
3340
|
+
| `header` | `ReactNode` | — | Contenido que permanece en la cabecera. |
|
|
3341
|
+
| `motion` | `"sheet" \| "drawer"` | `'sheet'` | Perfil o mecanismo de transición del componente. |
|
|
3342
|
+
| `onBackPress` | `(() => void)` | — | Acción que se ejecuta al pedir volver. |
|
|
3343
|
+
| `onClosed` | `(() => void)` | — | Avisa cuando concluye la salida de la superficie. |
|
|
3344
|
+
| `showCloseButton` | `boolean` | `true` | Muestra el control de cierre incorporado. |
|
|
3345
|
+
| `showDivider` | `boolean` | `false` | Muestra la separación visual. |
|
|
3346
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
3347
|
+
| `testID` | `string` | `'mobile-side-sheet'` | Identificador para automatización en el host. |
|
|
3348
|
+
| `title` | `string` | — | Título visible o contenido principal. |
|
|
3349
|
+
| `variant` | `"standard" \| "modal"` | `'modal'` | `standard` acompaña al contenido y `modal` lo superpone. |
|
|
3350
|
+
| `width` | `number` | `360` | Ancho de la superficie. |
|
|
3351
|
+
|
|
3352
|
+
**Ejemplo**
|
|
3353
|
+
|
|
3354
|
+
```tsx
|
|
3355
|
+
import { useState } from 'react';
|
|
3356
|
+
import { SideSheet, Button, Text } from 'mobile-design/react-native';
|
|
3357
|
+
|
|
3358
|
+
export default function Example() {
|
|
3359
|
+
const [open, setOpen] = useState(false);
|
|
3360
|
+
|
|
3361
|
+
return (
|
|
3362
|
+
<>
|
|
3363
|
+
<Button onPress={() => setOpen(true)}>Ver información</Button>
|
|
3364
|
+
<SideSheet
|
|
3365
|
+
open={open}
|
|
3366
|
+
onOpenChange={setOpen}
|
|
3367
|
+
variant="modal"
|
|
3368
|
+
title="Información"
|
|
3369
|
+
>
|
|
3370
|
+
<Text>Contenido complementario de esta pantalla.</Text>
|
|
3371
|
+
</SideSheet>
|
|
3372
|
+
</>
|
|
3373
|
+
);
|
|
3374
|
+
}
|
|
3375
|
+
```
|
|
3376
|
+
|
|
3377
|
+
#### Snackbar
|
|
3378
|
+
|
|
3379
|
+
Confirma el resultado de una acción mediante un mensaje temporal y una acción opcional.
|
|
3380
|
+
|
|
3381
|
+
- Renderiza un único Snackbar dentro de Portal y controla visible/onDismiss. Actualiza su contenido para sustituir información anterior. No apiles instancias.
|
|
3382
|
+
- children contiene un mensaje breve de hasta dos líneas. Action añade una sola acción de texto. ActionOnNewLine coloca una acción larga debajo.
|
|
3383
|
+
- onIconPress añade un cierre opcional. No es necesario para mensajes breves que desaparecen por sí solos. Usa una etiqueta accesible si cambias su icono.
|
|
3384
|
+
- messageKey identifica una notificación nueva aunque repita el mismo texto. Reinicia su tiempo sin desmontar la superficie ni reiniciar la animación de presencia.
|
|
3385
|
+
- bottomOffset reserva el espacio real ocupado por navegación o FAB. El componente añade por separado el área segura y 12 dp de margen inferior.
|
|
3386
|
+
|
|
3387
|
+
Monta un solo `Snackbar` en `Portal` bajo `MobileDesignProvider`. `messageKey` permite volver a mostrar un mensaje idéntico. Usa `bottomOffset` para reservar el espacio de un FAB o una barra inferior.
|
|
3388
|
+
|
|
3389
|
+
**Propiedades de `Snackbar`**
|
|
3390
|
+
|
|
3391
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
3392
|
+
| --- | --- | --- | --- |
|
|
3393
|
+
| `children` · requerida | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
3394
|
+
| `onDismiss` · requerida | `() => void` | — | Solicita cerrar la superficie. |
|
|
3395
|
+
| `visible` · requerida | `boolean` | — | Controla si la superficie o el indicador se presenta. |
|
|
3396
|
+
| `accessibilityHint` | `string` | — | Contexto adicional sobre la acción. |
|
|
3397
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
3398
|
+
| `accessibilityState` | `AccessibilityState` | — | Estado semántico del control. |
|
|
3399
|
+
| `action` | `(Omit<ButtonProps, "children" \| "variant"> & { label: string; })` | — | Configuración de la acción de texto. |
|
|
3400
|
+
| `actionOnNewLine` | `boolean` | `false` | Coloca la acción debajo del mensaje. |
|
|
3401
|
+
| `bottomOffset` | `number` | `0` | Espacio adicional que la aplicación reserva bajo el mensaje. |
|
|
3402
|
+
| `contentStyle` | `StyleProp<ViewStyle>` | — | Estilo del contenido dentro de la superficie. |
|
|
3403
|
+
| `duration` | `number` | `4000` | Tiempo del mensaje en milisegundos. |
|
|
3404
|
+
| `elevation` | `SurfaceElevation` | `3` | Nivel de elevación de la superficie. |
|
|
3405
|
+
| `focusShortcut` | `false \| "Alt+G"` | `'Alt+G'` | Atajo de teclado para llevar el foco al mensaje en navegador. Usa `false` cuando la aplicación ya utilice Alt+G. |
|
|
3406
|
+
| `icon` | `IconSource` | `'close'` | Nombre de icono o elemento de representación admitido por la propiedad. |
|
|
3407
|
+
| `iconAccessibilityLabel` | `string` | `'Cerrar mensaje'` | Nombre accesible del icono cuando actúa como control. |
|
|
3408
|
+
| `inlineFeedback` | `boolean` | `false` | Habilita el cierre automático en navegador. La pantalla debe comunicar también el resultado mediante contenido accesible en línea. |
|
|
3409
|
+
| `maxFontSizeMultiplier` | `number` | — | Límite de escalado del contenido de texto. |
|
|
3410
|
+
| `messageKey` | `string \| number` | — | Identificador que permite mostrar un mensaje nuevo aunque repita texto. |
|
|
3411
|
+
| `mode` | `"flat" \| "elevated"` | — | Tratamiento visual de la superficie del mensaje. |
|
|
3412
|
+
| `nativeID` | `string` | — | Identificador del control para enlazarlo a contenido accesible. |
|
|
3413
|
+
| `onIconPress` | `(() => void)` | — | Acción del icono independiente. |
|
|
3414
|
+
| `style` | `WithAnimatedValue<StyleProp<ViewStyle>>` | — | Estilo de la superficie exterior. |
|
|
3415
|
+
| `testID` | `string` | `'mobile-snackbar'` | Identificador para automatización en el host. |
|
|
3416
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
3417
|
+
| `wrapperStyle` | `StyleProp<ViewStyle>` | — | Estilo del contenedor exterior de posicionamiento. |
|
|
3418
|
+
|
|
3419
|
+
**Ejemplo**
|
|
3420
|
+
|
|
3421
|
+
```tsx
|
|
3422
|
+
import { useState } from 'react';
|
|
3423
|
+
import { View } from 'react-native';
|
|
3424
|
+
import { Snackbar, Portal, Button, Text } from 'mobile-design/react-native';
|
|
3425
|
+
|
|
3426
|
+
export default function Example() {
|
|
3427
|
+
const [visible, setVisible] = useState(false);
|
|
3428
|
+
const [archived, setArchived] = useState(false);
|
|
3429
|
+
|
|
3430
|
+
return (
|
|
3431
|
+
<View style={{ gap: 16 }}>
|
|
3432
|
+
<Text accessibilityLiveRegion="polite">
|
|
3433
|
+
{archived ? 'Colección archivada' : 'Colección disponible'}
|
|
3434
|
+
</Text>
|
|
3435
|
+
<Button
|
|
3436
|
+
onPress={() => {
|
|
3437
|
+
setArchived(true);
|
|
3438
|
+
setVisible(true);
|
|
3439
|
+
}}
|
|
3440
|
+
>
|
|
3441
|
+
Archivar colección
|
|
3442
|
+
</Button>
|
|
3443
|
+
<Portal>
|
|
3444
|
+
<Snackbar
|
|
3445
|
+
visible={visible}
|
|
3446
|
+
onDismiss={() => setVisible(false)}
|
|
3447
|
+
inlineFeedback
|
|
3448
|
+
action={{
|
|
3449
|
+
label: 'Deshacer',
|
|
3450
|
+
onPress: () => {
|
|
3451
|
+
setArchived(false);
|
|
3452
|
+
setVisible(false);
|
|
3453
|
+
},
|
|
3454
|
+
}}
|
|
3455
|
+
>
|
|
3456
|
+
Colección archivada
|
|
3457
|
+
</Snackbar>
|
|
3458
|
+
</Portal>
|
|
3459
|
+
</View>
|
|
3460
|
+
);
|
|
3461
|
+
}
|
|
3462
|
+
```
|
|
3463
|
+
|
|
3464
|
+
#### Tooltip y RichTooltip
|
|
3465
|
+
|
|
3466
|
+
Aclara el propósito de un control mediante una ayuda Plain o aporta contenido y acciones con Rich tooltip.
|
|
3467
|
+
|
|
3468
|
+
- Envuelve un control real con Tooltip para describir una acción sin etiqueta, como Present now o Settings. El control conserva su nombre accesible y su acción normal.
|
|
3469
|
+
- RichTooltip es transitorio por defecto. Aparece con hover, foco o pulsación mantenida. Persistent activa la ayuda que aparece al pulsar o al introducir una función al abrir una página.
|
|
3470
|
+
- Para controlar una introducción usa visible/onDismiss y persistent. El contenido admite texto, enlaces y hasta dos acciones con key. KeepOpen conserva la ayuda después de ejecutar una acción.
|
|
3471
|
+
|
|
3472
|
+
Usa `Tooltip` para explicar un control y `RichTooltip` para un contenido que incluye título o acciones. `persistent` cambia la forma de apertura de la ayuda rica. Conserva una etiqueta accesible en el control aunque tenga tooltip.
|
|
3473
|
+
|
|
3474
|
+
**Propiedades de `RichTooltip`**
|
|
3475
|
+
|
|
3476
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
3477
|
+
| --- | --- | --- | --- |
|
|
3478
|
+
| `anchor` · requerida | `ReactNode` | — | Control o coordenadas que sirven como origen de la superficie. |
|
|
3479
|
+
| `children` · requerida | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
3480
|
+
| `actions` | `readonly RichTooltipAction[]` | `[]` | Acciones relacionadas de la composición. |
|
|
3481
|
+
| `anchorPosition` | `"bottom" \| "top"` | `'bottom'` | Lado preferido respecto del ancla. |
|
|
3482
|
+
| `dismissAccessibilityLabel` | `string` | `'Cerrar ayuda'` | Nombre accesible para cerrar la ayuda. |
|
|
3483
|
+
| `maxWidth` | `number` | `320` | Ancho máximo de la superficie. |
|
|
3484
|
+
| `onDismiss` | `(() => void)` | — | Solicita cerrar la superficie. |
|
|
3485
|
+
| `persistent` | `boolean` | `false` | Cambia la ayuda rica a apertura persistente. |
|
|
3486
|
+
| `scrollIndicators` | `ScrollIndicatorOptions` | — | Configura los indicadores de desplazamiento del paquete. |
|
|
3487
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
3488
|
+
| `testID` | `string` | `'mobile-rich-tooltip'` | Identificador para automatización en el host. |
|
|
3489
|
+
| `title` | `string` | — | Título visible o contenido principal. |
|
|
3490
|
+
| `visible` | `boolean` | — | Controla si la superficie o el indicador se presenta. |
|
|
3491
|
+
|
|
3492
|
+
<details>
|
|
3493
|
+
<summary>Configuración complementaria de Tooltip y RichTooltip</summary>
|
|
3494
|
+
|
|
3495
|
+
**`Tooltip`**
|
|
3496
|
+
|
|
3497
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
3498
|
+
| --- | --- | --- | --- |
|
|
3499
|
+
| `children` · requerida | `React.ReactElement<unknown, string \| React.JSXElementConstructor<any>>` | — | Contenido que se compone dentro del componente. |
|
|
3500
|
+
| `title` · requerida | `string` | — | Título visible o contenido principal. |
|
|
3501
|
+
| `anchorStyle` | `StyleProp<ViewStyle>` | — | Estilo del envoltorio del ancla. |
|
|
3502
|
+
| `enterTouchDelay` | `number` | `500` | Tiempo de pulsación, en milisegundos, antes de mostrar la ayuda. |
|
|
3503
|
+
| `gap` | `4 \| 8` | `4` | Espacio en dp entre elementos o entre el ancla y la ayuda. |
|
|
3504
|
+
| `leaveTouchDelay` | `number` | `1500` | Tiempo, en milisegundos, desde que termina la pulsación hasta que se oculta la ayuda. |
|
|
3505
|
+
| `placement` | `"below" \| "above"` | `'above'` | Posición de apertura respecto del ancla. |
|
|
3506
|
+
| `testID` | `string` | `'mobile-tooltip'` | Identificador para automatización en el host. |
|
|
3507
|
+
| `theme` | `$DeepPartial<Theme>` | — | Ajustes locales sobre el tema efectivo. |
|
|
3508
|
+
| `titleMaxFontSizeMultiplier` | `number` | — | Límite de escalado del tamaño del texto de la ayuda. |
|
|
3509
|
+
|
|
3510
|
+
**`RichTooltipAction`**
|
|
3511
|
+
|
|
3512
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
3513
|
+
| --- | --- | --- | --- |
|
|
3514
|
+
| `key` · requerida | `string` | — | Identificador único y estable dentro del conjunto. |
|
|
3515
|
+
| `label` · requerida | `string` | — | Etiqueta visible que describe la acción u opción. |
|
|
3516
|
+
| `onPress` · requerida | `() => void` | — | Ejecuta la acción al activar el control. |
|
|
3517
|
+
| `disabled` | `boolean` | — | Bloquea la interacción del control. |
|
|
3518
|
+
| `keepOpen` | `boolean` | — | Mantiene la ayuda visible después de ejecutar la acción. |
|
|
3519
|
+
|
|
3520
|
+
</details>
|
|
3521
|
+
|
|
3522
|
+
**Ejemplo**
|
|
3523
|
+
|
|
3524
|
+
```tsx
|
|
3525
|
+
import { useState } from 'react';
|
|
3526
|
+
import { RichTooltip, Button, Text } from 'mobile-design/react-native';
|
|
3527
|
+
|
|
3528
|
+
export default function Example() {
|
|
3529
|
+
const [visible, setVisible] = useState(false);
|
|
3530
|
+
|
|
3531
|
+
return (
|
|
3532
|
+
<RichTooltip
|
|
3533
|
+
persistent
|
|
3534
|
+
visible={visible}
|
|
3535
|
+
onDismiss={() => setVisible(false)}
|
|
3536
|
+
title="Consulta sin conexión"
|
|
3537
|
+
anchor={
|
|
3538
|
+
<Button
|
|
3539
|
+
variant="tonal"
|
|
3540
|
+
onPress={() => setVisible(true)}
|
|
3541
|
+
>
|
|
3542
|
+
Más información
|
|
3543
|
+
</Button>
|
|
3544
|
+
}
|
|
3545
|
+
actions={[
|
|
3546
|
+
{ key: 'done', label: 'Entendido', onPress: () => setVisible(false) },
|
|
3547
|
+
]}
|
|
3548
|
+
>
|
|
3549
|
+
<Text>
|
|
3550
|
+
Guarda un documento para consultarlo aunque no tengas conexión.
|
|
3551
|
+
</Text>
|
|
3552
|
+
</RichTooltip>
|
|
3553
|
+
);
|
|
3554
|
+
}
|
|
3555
|
+
```
|
|
3556
|
+
|
|
3557
|
+
### Carga y progreso
|
|
3558
|
+
|
|
3559
|
+
#### LoadingIndicator y PullToRefresh
|
|
3560
|
+
|
|
3561
|
+
Comunica trabajo indeterminado mediante una secuencia de formas que cambia continuamente.
|
|
3562
|
+
|
|
3563
|
+
- Usa LoadingIndicator para una espera indeterminada entre 200 ms y 5 s. Una respuesta inmediata no necesita indicador. Una tarea más larga usa ProgressIndicator.
|
|
3564
|
+
- variant configura contenedor. Animating pausa el movimiento y visible controla presencia. El estado del trabajo pertenece al host.
|
|
3565
|
+
- El tamaño base es 48 dp, con una figura de 38 dp. Size admite de 24 a 240 dp, conservando la proporción. Reserva los tamaños mayores para ventanas grandes.
|
|
3566
|
+
- Centra el indicador en el espacio que está cargando. Al añadir contenido, colócalo en el espacio nuevo. Usa contained cuando se superpone a contenido y en pull-to-refresh.
|
|
3567
|
+
- Dentro de Button, loading acepta un renderer que recibe size y color. Permite usar LoadingIndicator sin perder el contraste de la acción y bloquea las pulsaciones repetidas.
|
|
3568
|
+
|
|
3569
|
+
Centra el indicador dentro de la región que está cargando. `animating={false}` pausa el movimiento y `visible={false}` oculta la figura. Usa un indicador de progreso si la tarea informa un porcentaje.
|
|
3570
|
+
|
|
3571
|
+
**Propiedades de `LoadingIndicator`**
|
|
3572
|
+
|
|
3573
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
3574
|
+
| --- | --- | --- | --- |
|
|
3575
|
+
| `accessibilityLabel` | `string` | `'Cargando'` | Nombre que anuncia la tecnología de asistencia. |
|
|
3576
|
+
| `animating` | `boolean` | `true` | Controla si el indicador cambia de forma o gira. |
|
|
3577
|
+
| `color` | `ColorValue` | — | Color del elemento o trazo. |
|
|
3578
|
+
| `containerColor` | `ColorValue` | — | Color de la superficie del control. |
|
|
3579
|
+
| `gestureProgress` | `number \| SharedValue<number>` | — | Progreso del gesto de arrastre que transforma la figura. Omítelo mientras se ejecuta la carga. |
|
|
3580
|
+
| `size` | `number` | `48` | Tamaño visual o escala semántica del control. |
|
|
3581
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
3582
|
+
| `testID` | `string` | `'mobile-loading-indicator'` | Identificador para automatización en el host. |
|
|
3583
|
+
| `variant` | `"contained" \| "uncontained"` | `'uncontained'` | Tratamiento visual o modalidad del componente. |
|
|
3584
|
+
| `visible` | `boolean` | `true` | Controla si la superficie o el indicador se presenta. |
|
|
3585
|
+
|
|
3586
|
+
<details>
|
|
3587
|
+
<summary>Configuración complementaria de LoadingIndicator y PullToRefresh</summary>
|
|
3588
|
+
|
|
3589
|
+
**`PullToRefresh`**
|
|
3590
|
+
|
|
3591
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
3592
|
+
| --- | --- | --- | --- |
|
|
3593
|
+
| `onRefresh` · requerida | `() => void` | — | Inicia la actualización al completar el gesto. |
|
|
3594
|
+
| `refreshing` · requerida | `boolean` | — | Estado controlado que permanece activo durante la actualización. |
|
|
3595
|
+
| `accessibilityHint` | `string` | — | Contexto adicional sobre la acción. |
|
|
3596
|
+
| `accessibilityLabel` | `string` | `'Actualizar contenido'` | Nombre que anuncia la tecnología de asistencia. |
|
|
3597
|
+
| `accessibilityState` | `AccessibilityState` | — | Estado semántico del control. |
|
|
3598
|
+
| `children` | `ReactNode` | — | Contenido que se compone dentro del componente. |
|
|
3599
|
+
| `contentContainerStyle` | `____ViewStyleProp_Internal` | — | Estilo del contenedor que agrupa los hijos del área desplazable. Úsalo para añadir relleno alrededor del contenido. |
|
|
3600
|
+
| `enabled` | `boolean` | `true` | Habilita el gesto para actualizar. |
|
|
3601
|
+
| `indicatorMode` | `"overlay" \| "adjacent"` | `'overlay'` | Con `overlay` el indicador se superpone al contenido. Con `adjacent` el contenido se desplaza por debajo del indicador. |
|
|
3602
|
+
| `nativeID` | `string` | — | Identificador del control para enlazarlo a contenido accesible. |
|
|
3603
|
+
| `renderScrollComponent` | `((props: PullToRefreshViewportProps) => ReactNode)` | — | Renderiza una `Animated.FlatList` o `Animated.SectionList` como área desplazable. Pasa a la lista las propiedades de desplazamiento recibidas. |
|
|
3604
|
+
| `scrollIndicators` | `ScrollIndicatorOptions` | — | Configura los indicadores de desplazamiento del paquete. |
|
|
3605
|
+
| `showsHorizontalScrollIndicator` | `boolean` | — | Muestra el indicador de desplazamiento horizontal. |
|
|
3606
|
+
| `showsVerticalScrollIndicator` | `boolean` | — | Muestra el indicador de desplazamiento vertical. |
|
|
3607
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
3608
|
+
| `testID` | `string` | `'mobile-pull-to-refresh'` | Identificador para automatización en el host. |
|
|
3609
|
+
| `threshold` | `number` | `80` | Distancia de arrastre que solicita la actualización. |
|
|
3610
|
+
|
|
3611
|
+
</details>
|
|
3612
|
+
|
|
3613
|
+
**Ejemplo**
|
|
3614
|
+
|
|
3615
|
+
```tsx
|
|
3616
|
+
import { LoadingIndicator } from 'mobile-design/react-native';
|
|
3617
|
+
|
|
3618
|
+
export default function Example() {
|
|
3619
|
+
return (
|
|
3620
|
+
<LoadingIndicator
|
|
3621
|
+
variant="contained"
|
|
3622
|
+
size={48}
|
|
3623
|
+
accessibilityLabel="Cargando tu biblioteca"
|
|
3624
|
+
/>
|
|
3625
|
+
);
|
|
3626
|
+
}
|
|
3627
|
+
```
|
|
3628
|
+
|
|
3629
|
+
#### ProgressIndicator
|
|
3630
|
+
|
|
3631
|
+
Comunica progreso determinado o indeterminado con indicadores lineales y circulares, planos u ondulados.
|
|
3632
|
+
|
|
3633
|
+
- Elige linear o circular. Progress de 0 a 1 comunica avance determinado. Omitir progress y progressSource mantiene el modo indeterminado.
|
|
3634
|
+
- appearance configura flat o wavy. CircularProgressStatus compone progreso y success.
|
|
3635
|
+
- progressSource permite controlar el avance con un valor compartido. Sincroniza progress con valores significativos de la tarea para comunicar también el avance accesible. No es necesario publicar cada fotograma.
|
|
3636
|
+
- Coloca el lineal en el borde del contenido que está cargando, con al menos 4 dp a cada extremo y un ancho mínimo de 40 dp. Centra el circular en el espacio que está cargando o donde aparecerá el contenido nuevo.
|
|
3637
|
+
- El trazo base mide 4 dp y puede configurarse. El circular admite de 24 a 240 dp. Reserva los tamaños mayores para ventanas grandes. El ondulado aumenta la altura del lineal.
|
|
3638
|
+
|
|
3639
|
+
Elige `progress` de 0 a 1 cuando conoces el avance. Si usas `progressSource` para animarlo en UI, publica también hitos accesibles con `progress`. Si no entregas ninguno, el indicador es indeterminado.
|
|
3640
|
+
|
|
3641
|
+
**Propiedades de `ProgressIndicator`**
|
|
3642
|
+
|
|
3643
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
3644
|
+
| --- | --- | --- | --- |
|
|
3645
|
+
| `accessibilityLabel` | `string` | `'Progreso'` | Nombre que anuncia la tecnología de asistencia. |
|
|
3646
|
+
| `animated` | `boolean` | `true` | Con `false` representa el valor actual de forma estática. |
|
|
3647
|
+
| `animationDuration` | `number` | — | Duración de cada ciclo indeterminado. Por defecto son 1750 ms en el indicador lineal y 6000 ms en el circular. |
|
|
3648
|
+
| `appearance` | `"flat" \| "wavy"` | `'flat'` | Tratamiento plano u ondulado del indicador. |
|
|
3649
|
+
| `color` | `ColorValue` | — | Color del elemento o trazo. |
|
|
3650
|
+
| `direction` | `"ltr" \| "rtl"` | — | Dirección de avance del indicador. |
|
|
3651
|
+
| `paused` | `boolean` | `false` | Pausa la animación. |
|
|
3652
|
+
| `progress` | `number` | — | Fracción de avance determinada de 0 a 1. |
|
|
3653
|
+
| `progressSource` | `SharedValue<number>` | — | Valor compartido que conduce el avance visual en el hilo UI. |
|
|
3654
|
+
| `showStopIndicator` | `boolean` | `true` | Muestra la marca de final de pista. |
|
|
3655
|
+
| `showTrack` | `boolean` | `true` | Muestra la pista de fondo. |
|
|
3656
|
+
| `size` | `number` | — | Tamaño visual o escala semántica del control. |
|
|
3657
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
3658
|
+
| `testID` | `string` | `'progress-indicator'` | Identificador para automatización en el host. |
|
|
3659
|
+
| `thickness` | `number` | — | Grosor del trazo en dp. |
|
|
3660
|
+
| `trackColor` | `ColorValue` | — | Color de la pista de fondo. |
|
|
3661
|
+
| `variant` | `"circular" \| "linear"` | `'linear'` | Tratamiento visual o modalidad del componente. |
|
|
3662
|
+
| `waveAmplitude` | `number` | — | Altura de la onda en dp, medida desde su línea media hasta la cresta. |
|
|
3663
|
+
| `wavelength` | `number` | — | Separación espacial de las ondas. |
|
|
3664
|
+
| `waveSpeed` | `number` | — | Velocidad de la onda en dp por segundo. Por defecto avanza una longitud de onda por segundo. Con `0` queda estática. |
|
|
3665
|
+
|
|
3666
|
+
<details>
|
|
3667
|
+
<summary>Configuración complementaria de ProgressIndicator</summary>
|
|
3668
|
+
|
|
3669
|
+
**`CircularProgressStatus`**
|
|
3670
|
+
|
|
3671
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
3672
|
+
| --- | --- | --- | --- |
|
|
3673
|
+
| `status` · requerida | `"progress" \| "success"` | — | Estado actual del control. |
|
|
3674
|
+
| `animated` | `boolean` | `true` | Activa las transiciones de avance y finalización. |
|
|
3675
|
+
| `appearance` | `"flat" \| "wavy"` | `'wavy'` | Tratamiento plano u ondulado del indicador. |
|
|
3676
|
+
| `color` | `ColorValue` | — | Color del elemento o trazo. |
|
|
3677
|
+
| `onSuccessAnimationEnd` | `(() => void)` | — | Avisa cuando concluye la animación de éxito. |
|
|
3678
|
+
| `progress` | `number` | — | Fracción de avance determinada de 0 a 1. |
|
|
3679
|
+
| `progressLabel` | `string` | `'Processing payment…'` | Nombre accesible durante el progreso. |
|
|
3680
|
+
| `size` | `number` | `48` | Tamaño visual o escala semántica del control. |
|
|
3681
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
3682
|
+
| `successLabel` | `string` | `'Payment complete'` | Nombre accesible al completar la tarea. |
|
|
3683
|
+
| `testID` | `string` | `'circular-progress-status'` | Identificador para automatización en el host. |
|
|
3684
|
+
| `thickness` | `number` | `4` | Grosor del trazo en dp. |
|
|
3685
|
+
|
|
3686
|
+
**`ProgressBar`**
|
|
3687
|
+
|
|
3688
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
3689
|
+
| --- | --- | --- | --- |
|
|
3690
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
3691
|
+
| `animated` | `boolean` | — | Con `false` representa el valor actual de forma estática. |
|
|
3692
|
+
| `animationDuration` | `number` | — | Duración de cada ciclo indeterminado. Por defecto son 1750 ms en el indicador lineal y 6000 ms en el circular. |
|
|
3693
|
+
| `appearance` | `"flat" \| "wavy"` | — | Tratamiento plano u ondulado del indicador. |
|
|
3694
|
+
| `color` | `ColorValue` | — | Color del elemento o trazo. |
|
|
3695
|
+
| `direction` | `"ltr" \| "rtl"` | — | Dirección de avance del indicador. |
|
|
3696
|
+
| `indeterminate` | `boolean` | `false` | Activa el avance indeterminado. |
|
|
3697
|
+
| `paused` | `boolean` | — | Pausa la animación. |
|
|
3698
|
+
| `progress` | `number` | `0` | Avance entre 0 y 1 cuando `indeterminate` es falso. |
|
|
3699
|
+
| `progressSource` | `SharedValue<number>` | — | Valor compartido que conduce el avance visual en el hilo UI. |
|
|
3700
|
+
| `showStopIndicator` | `boolean` | — | Muestra la marca de final de pista. |
|
|
3701
|
+
| `showTrack` | `boolean` | — | Muestra la pista de fondo. |
|
|
3702
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
3703
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
3704
|
+
| `thickness` | `number` | — | Grosor del trazo en dp. |
|
|
3705
|
+
| `trackColor` | `ColorValue` | — | Color de la pista de fondo. |
|
|
3706
|
+
| `visible` | `boolean` | `true` | Controla si la superficie o el indicador se presenta. |
|
|
3707
|
+
| `waveAmplitude` | `number` | — | Altura de la onda en dp, medida desde su línea media hasta la cresta. |
|
|
3708
|
+
| `wavelength` | `number` | — | Separación espacial de las ondas. |
|
|
3709
|
+
| `waveSpeed` | `number` | — | Velocidad de la onda en dp por segundo. Por defecto avanza una longitud de onda por segundo. Con `0` queda estática. |
|
|
3710
|
+
|
|
3711
|
+
**`ActivityIndicator`**
|
|
3712
|
+
|
|
3713
|
+
| Propiedad | Tipo | Inicial | Uso |
|
|
3714
|
+
| --- | --- | --- | --- |
|
|
3715
|
+
| `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. |
|
|
3716
|
+
| `animating` | `boolean` | `true` | Controla si el indicador cambia de forma o gira. |
|
|
3717
|
+
| `animationDuration` | `number` | — | Duración de cada ciclo indeterminado. Por defecto son 1750 ms en el indicador lineal y 6000 ms en el circular. |
|
|
3718
|
+
| `appearance` | `"flat" \| "wavy"` | — | Tratamiento plano u ondulado del indicador. |
|
|
3719
|
+
| `color` | `ColorValue` | — | Color del elemento o trazo. |
|
|
3720
|
+
| `direction` | `"ltr" \| "rtl"` | — | Dirección de avance del indicador. |
|
|
3721
|
+
| `hidesWhenStopped` | `boolean` | `true` | Oculta el indicador al dejar de animar. |
|
|
3722
|
+
| `paused` | `boolean` | — | Pausa la animación. |
|
|
3723
|
+
| `showStopIndicator` | `boolean` | — | Muestra la marca de final de pista. |
|
|
3724
|
+
| `showTrack` | `boolean` | — | Muestra la pista de fondo. |
|
|
3725
|
+
| `size` | `number \| "small" \| "large"` | `'small'` | Tamaño visual o escala semántica del control. |
|
|
3726
|
+
| `style` | `StyleProp<ViewStyle>` | — | Estilo de la superficie exterior. |
|
|
3727
|
+
| `testID` | `string` | — | Identificador para automatización en el host. |
|
|
3728
|
+
| `thickness` | `number` | — | Grosor del trazo en dp. |
|
|
3729
|
+
| `trackColor` | `ColorValue` | — | Color de la pista de fondo. |
|
|
3730
|
+
| `waveAmplitude` | `number` | — | Altura de la onda en dp, medida desde su línea media hasta la cresta. |
|
|
3731
|
+
| `wavelength` | `number` | — | Separación espacial de las ondas. |
|
|
3732
|
+
| `waveSpeed` | `number` | — | Velocidad de la onda en dp por segundo. Por defecto avanza una longitud de onda por segundo. Con `0` queda estática. |
|
|
3733
|
+
|
|
3734
|
+
</details>
|
|
3735
|
+
|
|
3736
|
+
**Ejemplo**
|
|
3737
|
+
|
|
3738
|
+
```tsx
|
|
3739
|
+
import { useState } from 'react';
|
|
3740
|
+
import { View } from 'react-native';
|
|
3741
|
+
import { ProgressIndicator, Text, Button } from 'mobile-design/react-native';
|
|
3742
|
+
|
|
3743
|
+
export default function Example() {
|
|
3744
|
+
const [progress, setProgress] = useState(0.4);
|
|
3745
|
+
|
|
3746
|
+
return (
|
|
3747
|
+
<View style={{ gap: 24 }}>
|
|
3748
|
+
<Text>Descarga: {Math.round(progress * 100)} %</Text>
|
|
3749
|
+
<ProgressIndicator
|
|
3750
|
+
variant="linear"
|
|
3751
|
+
appearance="wavy"
|
|
3752
|
+
progress={progress}
|
|
3753
|
+
accessibilityLabel="Descarga de la colección"
|
|
3754
|
+
/>
|
|
3755
|
+
<Button
|
|
3756
|
+
variant="tonal"
|
|
3757
|
+
onPress={() => setProgress((value) => Math.min(1, value + 0.2))}
|
|
3758
|
+
>
|
|
3759
|
+
Avanzar demostración
|
|
3760
|
+
</Button>
|
|
3761
|
+
</View>
|
|
3762
|
+
);
|
|
3763
|
+
}
|
|
3764
|
+
```
|
|
3765
|
+
|
|
3766
|
+
### Primitivas de composición
|
|
3767
|
+
|
|
3768
|
+
| Exportación | Uso |
|
|
3769
|
+
| --- | --- |
|
|
3770
|
+
| `Icon` y `MaterialSymbol` | Renderiza iconos por nombre o solicita explícitamente un glifo del conjunto incluido. El catálogo completo se instala por separado. |
|
|
3771
|
+
| `TouchableRipple` | Compone una superficie interactiva con respuesta de pulsación. Pasa una acción y un nombre accesible cuando el contenido no tenga etiqueta. |
|
|
3772
|
+
| `Avatar.Icon`, `Avatar.Image`, `Avatar.Text` y `Avatar.Button` | Usa `icon`, `source` o `label` para el avatar visual. Envuelve el avatar en `Avatar.Button` con `onPress` y `accessibilityLabel` para abrir un perfil o menú. |
|
|
3773
|
+
| `Portal` | Presenta contenido por encima del layout del padre dentro del mismo proveedor. Las superficies que ya crean su propia ventana o portal no necesitan envolverse para repetir ese comportamiento. |
|
|
3774
|
+
| `ContainerTransformSurface` | Superficie para las composiciones que conservan un origen medido durante su transición. |
|
|
3775
|
+
| `ThemeProvider`, `LocaleProvider`, `useLocale` y `customText` | Primitivas de integración de React Native Paper para tema local, dirección de lectura y variantes de texto personalizadas. |
|
|
3776
|
+
| `mobileDesignCatalog`, `mobileDesignCatalogGroups` y `getMobileDesignComponent` | Metadatos consultables de las familias y grupos. La aplicación decide cómo mostrarlos. |
|