98 |
99 | ```kotlin frame="terminal"
100 | @OptIn(ExperimentalMaterial3Api::class)
101 | @Composable
102 | fun BadgedBoxExample() {
103 | Box(Modifier.size(100.dp), contentAlignment = Alignment.Center) {
104 | BadgedBox(badge = { Badge { Text("8") } }) {
105 | Icon(
106 | Icons.Filled.Favorite,
107 | contentDescription = "Favorite"
108 | )
109 | }
110 | }
111 | }
112 | ```
113 |
114 |
115 |
--------------------------------------------------------------------------------
/src/content/docs/buttons/button.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button
3 | description: Aprende a usar el composable Button en Jetpack Compose.
4 | sidebar:
5 | order: 0
6 | ---
7 |
8 | import { Tabs, TabItem } from '@astrojs/starlight/components';
9 |
10 | [comment]: <> (La ruta siempre será assets/nombeComponente/componente-header.webp)
11 |
12 | | Material| Material 3|
13 | | :----------------: | :------: |
14 | |  |  |
15 |
16 | Los `Button` le dan al usuario la posibilidad de activar/ejecutar acciones predefinidas. Este se trata del botón más sencillo de todos y el que se utiliza por defecto.
17 |
18 | ## Implementación
19 |
20 | ### Definición del componente
21 |
22 | [comment]: <> (Añade un ``TabItem`` por cada tipo de implementación que tenga)
23 |
24 |
25 |
26 |
27 | ```kotlin frame="terminal"
28 | @Composable
29 | fun Button(
30 | onClick: () -> Unit,
31 | modifier: Modifier = Modifier,
32 | enabled: Boolean = true,
33 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
34 | elevation: ButtonElevation? = ButtonDefaults.elevation(),
35 | shape: Shape = MaterialTheme.shapes.small,
36 | border: BorderStroke? = null,
37 | colors: ButtonColors = ButtonDefaults.buttonColors(),
38 | contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
39 | content: @Composable RowScope.() -> Unit
40 | )
41 | ```
42 | Atributo | Descripción
43 | ------ | -----------
44 | onClick | Función lambda que se ejecutará cuando el usuario pulse el botón.
45 | modifier | Modificador que implementará el composable.
46 | enabled | Habilita o deshabilita el botón.
47 | interactionSource | Representa un `stream` de interacciones del botón lo que nos permite modificar su diseño o comportamiento. Por ejemplo que mientras el botón esté pulsado, este encoja.
48 | elevation | Permite modificar la elevación del componente en sus distintos estados con el objeto `ButtonElevation`.
49 | shape | Define la forma del `Button` y su sombra.
50 | border | Borde para el `Button`.
51 | colors | Nos permite modificar el color del fondo del `Button` y el del contenido.
52 | contentPadding | The spacing values to apply internally between the container and the content
53 | content | Contenido a mostrar dentro del `Button`.
54 |
55 |
56 |
57 |
58 | ```kotlin frame="terminal"
59 | @Composable
60 | fun Button(
61 | onClick: () -> Unit,
62 | modifier: Modifier = Modifier,
63 | enabled: Boolean = true,
64 | shape: Shape = ButtonDefaults.shape,
65 | colors: ButtonColors = ButtonDefaults.buttonColors(),
66 | elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
67 | border: BorderStroke? = null,
68 | contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
69 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
70 | content: @Composable RowScope.() -> Unit
71 | )
72 | ```
73 |
74 | Atributo | Descripción
75 | ------ | -----------
76 | onClick | Función lambda que se ejecutará cuando el usuario pulse el botón.
77 | modifier | Modificador que implementará el composable.
78 | enabled | Habilita o deshabilita el botón.
79 | shape | Define la forma del `Button` y su sombra.
80 | colors | Nos permite modificar el color del fondo del `Button` y el del contenido.
81 | elevation | Permite modificar la elevación del componente en sus distintos estados con el objeto `ButtonElevation`.
82 | border | Borde para el `Button`.
83 | contentPadding | The spacing values to apply internally between the container and the content
84 | interactionSource | Representa un `stream` de interacciones del botón lo que nos permite modificar su diseño o comportamiento. Por ejemplo que mientras el botón esté pulsado, este encoja.
85 | content | Contenido a mostrar dentro del `Button`.
86 |
87 |
88 |
89 |
90 | [comment]: <> (No modifiques el tip)
91 |
92 | :::tip[Fuente]
93 | Puedes acceder a la documentación oficial de Google
94 | [desde aquí](https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary).
95 | :::
96 |
97 | ### Ejemplos
98 |
99 |
100 |
101 |
102 |
117 |
118 | ```kotlin frame="terminal"
119 | @Composable
120 | fun ButtonExample() {
121 | Button(onClick = { print("Hello") }) {
122 | Text(text = "Click me")
123 | }
124 | }
125 | ```
126 |
127 |
128 |
--------------------------------------------------------------------------------
/src/content/docs/buttons/elevated-button.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: ElevatedButton
3 | description: Aprende a usar el composable ElevatedButton en Jetpack Compose.
4 | sidebar:
5 | order: 3
6 | ---
7 |
8 | import { Tabs, TabItem } from '@astrojs/starlight/components';
9 |
10 | [comment]: <> (La ruta siempre será assets/nombeComponente/componente-header.webp)
11 |
12 | | Material 3|
13 | | :------: |
14 | |  |
15 |
16 | Los `ElevatedButton` tiene la misma finalidad que los [FilledTonalButton](/buttons/filled-tonal-button/) pero con una pequeña elevación (modificable) para darle algo más de énfasis.
17 |
18 | ## Implementación
19 |
20 | ### Definición del componente
21 |
22 | [comment]: <> (Añade un ``TabItem`` por cada tipo de implementación que tenga)
23 |
24 |
25 |
26 |
27 | ```kotlin frame="terminal"
28 | @Composable
29 | fun ElevatedButton(
30 | onClick: () -> Unit,
31 | modifier: Modifier = Modifier,
32 | enabled: Boolean = true,
33 | shape: Shape = ButtonDefaults.elevatedShape,
34 | colors: ButtonColors = ButtonDefaults.elevatedButtonColors(),
35 | elevation: ButtonElevation? = ButtonDefaults.elevatedButtonElevation(),
36 | border: BorderStroke? = null,
37 | contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
38 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
39 | content: @Composable RowScope.() -> Unit
40 | )
41 | ```
42 |
43 | Atributo | Descripción
44 | ------ | -----------
45 | onClick | Función lambda que se ejecutará cuando el usuario pulse el botón.
46 | modifier | Modificador que implementará el composable.
47 | enabled | Habilita o deshabilita el botón.
48 | shape | Define la forma del `Button` y su sombra.
49 | colors | Nos permite modificar el color del fondo del `Button` y el del contenido.
50 | elevation | Permite modificar la elevación del componente en sus distintos estados con el objeto `ButtonElevation`.
51 | border | Borde para el `Button`.
52 | contentPadding | The spacing values to apply internally between the container and the content
53 | interactionSource | Representa un `stream` de interacciones del botón lo que nos permite modificar su diseño o comportamiento. Por ejemplo que mientras el botón esté pulsado, este encoja.
54 | content | Contenido a mostrar dentro del `Button`.
55 |
56 |
57 |
58 |
59 | [comment]: <> (No modifiques el tip)
60 |
61 | :::tip[Fuente]
62 | Puedes acceder a la documentación oficial de Google
63 | [desde aquí](https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary).
64 | :::
65 |
66 | ### Ejemplos
67 |
68 |
69 |
70 |
71 |
72 |
73 | ```kotlin frame="terminal"
74 | @Composable
75 | fun ElevatedButtonExample() {
76 | ElevatedButton(onClick = { print("Hello") }) {
77 | Text(text = "Click me")
78 | }
79 | }
80 | ```
81 |
82 |
83 |
--------------------------------------------------------------------------------
/src/content/docs/buttons/extended-floating-action-button.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: ExtendedFloatingActionButton
3 | description: Aprende a usar el composable ExtendedFloatingActionButton en Jetpack Compose.
4 | sidebar:
5 | order: 8
6 | ---
7 |
8 | import { Tabs, TabItem } from '@astrojs/starlight/components';
9 |
10 | [comment]: <> (La ruta siempre será assets/nombeComponente/componente-header.webp)
11 |
12 | | Material| Material 3|
13 | | :----------------: | :------: |
14 | |  |  |
15 |
16 | Los `ExtendedFloatingActionButton` representan la acción más importante de la pantalla. Como norma general están situados en la parte inferior derecha. A diferencia de los otros [FloatingActionButtons](/buttons/floating-action-button/) este componente está destinado a tener un texto además de un icono.
17 |
18 | ## Implementación
19 |
20 | ### Definición del componente
21 |
22 | [comment]: <> (Añade un ``TabItem`` por cada tipo de implementación que tenga)
23 |
24 |
25 |
26 |
27 | ```kotlin frame="terminal"
28 | @Composable
29 | fun ExtendedFloatingActionButton(
30 | text: @Composable () -> Unit,
31 | onClick: () -> Unit,
32 | modifier: Modifier = Modifier,
33 | icon: @Composable (() -> Unit)? = null,
34 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
35 | shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
36 | backgroundColor: Color = MaterialTheme.colors.secondary,
37 | contentColor: Color = contentColorFor(backgroundColor),
38 | elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation()
39 | )
40 | ```
41 | Atributo | Descripción
42 | ------ | -----------
43 | text | Composable que mostrará al lado izquierdo del botón (En teoría debería ser un [Text](/texts/text/) pero vale cualquiera).
44 | onClick | Función lambda que se ejecutará cuando el usuario pulse el botón.
45 | modifier | Modificador que implementará el composable.
46 | icon | Composable que mostrará al lado derecho del botón (En teoría debería ser un [Icon](/images/icon/) pero vale cualquiera).
47 | interactionSource | Representa un `stream` de interacciones del botón lo que nos permite modificar su diseño o comportamiento. Por ejemplo que mientras el botón esté pulsado, este encoja.
48 | shape | Define la forma del `FloatingActionButton` y su sombra.
49 | backgroundColor | El color del fondo del componente.
50 | contentColor | Color del contenido.
51 | elevation | Permite modificar la elevación del componente en sus distintos estados con el objeto `FloatingActionButtonElevation`.
52 |
53 |
54 |
55 |
56 | ```kotlin frame="terminal"
57 | @Composable
58 | fun ExtendedFloatingActionButton(
59 | onClick: () -> Unit,
60 | modifier: Modifier = Modifier,
61 | shape: Shape = FloatingActionButtonDefaults.extendedFabShape,
62 | containerColor: Color = FloatingActionButtonDefaults.containerColor,
63 | contentColor: Color = contentColorFor(containerColor),
64 | elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
65 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
66 | content: @Composable RowScope.() -> Unit,
67 | )
68 | ```
69 |
70 | Atributo | Descripción
71 | ------ | -----------
72 | onClick | Función lambda que se ejecutará cuando el usuario pulse el botón.
73 | modifier | Modificador que implementará el composable.
74 | shape | Define la forma del `FloatingActionButton` y su sombra.
75 | containerColor | El color del fondo del componente.
76 | contentColor | Color del contenido.
77 | elevation | Permite modificar la elevación del componente en sus distintos estados con el objeto `FloatingActionButtonElevation`.
78 | interactionSource | Representa un `stream` de interacciones del botón lo que nos permite modificar su diseño o comportamiento. Por ejemplo que mientras el botón esté pulsado, este encoja.
79 | content | Contenido a mostrar dentro del `ExtendedFloatingActionButton`. El contenido tiene un `RowScope` lo que significa que todo lo que añadas aquí estará en una fila, por eso es muy importante el orden.
80 |
81 |
82 |
83 |
84 | [comment]: <> (No modifiques el tip)
85 |
86 | :::tip[Fuente]
87 | Puedes acceder a la documentación oficial de Google
88 | [desde aquí](https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary).
89 | :::
90 |
91 | ### Ejemplos
92 |
93 |
94 |
95 |
96 |
111 |
112 | ```kotlin frame="terminal"
113 | @Composable
114 | fun ExtendedFloatingActionButtonExample() {
115 | ExtendedFloatingActionButton(onClick = { print("Hello") }) {
116 | Text(text ="Extended FAB")
117 | Icon(Icons.Filled.Favorite, "Floating action button.")
118 | }
119 | }
120 | ```
121 |
122 |
123 |
--------------------------------------------------------------------------------
/src/content/docs/buttons/filled-tonal-button.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: FilledTonalButton
3 | description: Aprende a usar el composable FilledTonalButton en Jetpack Compose.
4 | sidebar:
5 | order: 1
6 | ---
7 |
8 | import { Tabs, TabItem } from '@astrojs/starlight/components';
9 |
10 | [comment]: <> (La ruta siempre será assets/nombeComponente/componente-header.webp)
11 |
12 | | Material 3|
13 | | :------: |
14 | |  |
15 |
16 | Los `FilledTonalButton` están definidos para acciones de importancia intermedia, entre los [Button](/buttons/button/) y los [OutlinedButton](/buttons/outlined-button/). Como norma general estos botones utilizarán de la gama de colores la parte secundaria, es decir, colores que no llamen tanto la atención como los primarios.
17 |
18 | ## Implementación
19 |
20 | ### Definición del componente
21 |
22 | [comment]: <> (Añade un ``TabItem`` por cada tipo de implementación que tenga)
23 |
24 |
25 |
26 |
27 | ```kotlin frame="terminal"
28 | @Composable
29 | fun FilledTonalButton(
30 | onClick: () -> Unit,
31 | modifier: Modifier = Modifier,
32 | enabled: Boolean = true,
33 | shape: Shape = ButtonDefaults.filledTonalShape,
34 | colors: ButtonColors = ButtonDefaults.filledTonalButtonColors(),
35 | elevation: ButtonElevation? = ButtonDefaults.filledTonalButtonElevation(),
36 | border: BorderStroke? = null,
37 | contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
38 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
39 | content: @Composable RowScope.() -> Unit
40 | )
41 | ```
42 |
43 | Atributo | Descripción
44 | ------ | -----------
45 | onClick | Función lambda que se ejecutará cuando el usuario pulse el botón.
46 | modifier | Modificador que implementará el composable.
47 | enabled | Habilita o deshabilita el botón.
48 | shape | Define la forma del `Button` y su sombra.
49 | colors | Nos permite modificar el color del fondo del `Button` y el del contenido.
50 | elevation | Permite modificar la elevación del componente en sus distintos estados con el objeto `ButtonElevation`.
51 | border | Borde para el `Button`.
52 | contentPadding | The spacing values to apply internally between the container and the content
53 | interactionSource | Representa un `stream` de interacciones del botón lo que nos permite modificar su diseño o comportamiento. Por ejemplo que mientras el botón esté pulsado, este encoja.
54 | content | Contenido a mostrar dentro del `Button`.
55 |
56 |
57 |
58 |
59 | [comment]: <> (No modifiques el tip)
60 |
61 | :::tip[Fuente]
62 | Puedes acceder a la documentación oficial de Google
63 | [desde aquí](https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary).
64 | :::
65 |
66 | ### Ejemplos
67 |
68 |
69 |
70 |
71 |
72 |
73 | ```kotlin frame="terminal"
74 | @Composable
75 | fun FilledTonalButtonExample() {
76 | FilledTonalButton(onClick = { print("Hello") }) {
77 | Text(text = "Click me")
78 | }
79 | }
80 | ```
81 |
82 |
83 |
--------------------------------------------------------------------------------
/src/content/docs/buttons/floating-action-button.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: FloatingActionButton
3 | description: Aprende a usar el composable FloatingActionButton en Jetpack Compose.
4 | sidebar:
5 | order: 5
6 | ---
7 |
8 | import { Tabs, TabItem } from '@astrojs/starlight/components';
9 |
10 | [comment]: <> (La ruta siempre será assets/nombeComponente/componente-header.webp)
11 |
12 | | Material| Material 3|
13 | | :----------------: | :------: |
14 | |  |  |
15 |
16 | Los `FloatingActionButton` representan la acción más importante de la pantalla. Como norma general solo contienen un icono y están situados en la parte inferior derecha.
17 |
18 | ## Implementación
19 |
20 | ### Definición del componente
21 |
22 | [comment]: <> (Añade un ``TabItem`` por cada tipo de implementación que tenga)
23 |
24 |
25 |
26 |
27 | ```kotlin frame="terminal"
28 | @Composable
29 | fun FloatingActionButton(
30 | onClick: () -> Unit,
31 | modifier: Modifier = Modifier,
32 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
33 | shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
34 | backgroundColor: Color = MaterialTheme.colors.secondary,
35 | contentColor: Color = contentColorFor(backgroundColor),
36 | elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
37 | content: @Composable () -> Unit
38 | )
39 | ```
40 | Atributo | Descripción
41 | ------ | -----------
42 | onClick | Función lambda que se ejecutará cuando el usuario pulse el botón.
43 | modifier | Modificador que implementará el composable.
44 | interactionSource | Representa un `stream` de interacciones del botón lo que nos permite modificar su diseño o comportamiento. Por ejemplo que mientras el botón esté pulsado, este encoja.
45 | shape | Define la forma del `FloatingActionButton` y su sombra.
46 | backgroundColor | El color del fondo del componente.
47 | contentColor | Color del contenido.
48 | elevation | Permite modificar la elevación del componente en sus distintos estados con el objeto `FloatingActionButtonElevation`.
49 | content | Contenido a mostrar dentro del `FloatingActionButton`.
50 |
51 |
52 |
53 |
54 | ```kotlin frame="terminal"
55 | @Composable
56 | fun FloatingActionButton(
57 | onClick: () -> Unit,
58 | modifier: Modifier = Modifier,
59 | shape: Shape = FloatingActionButtonDefaults.shape,
60 | containerColor: Color = FloatingActionButtonDefaults.containerColor,
61 | contentColor: Color = contentColorFor(containerColor),
62 | elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
63 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
64 | content: @Composable () -> Unit,
65 | )
66 | ```
67 |
68 | Atributo | Descripción
69 | ------ | -----------
70 | onClick | Función lambda que se ejecutará cuando el usuario pulse el botón.
71 | modifier | Modificador que implementará el composable.
72 | shape | Define la forma del `FloatingActionButton` y su sombra.
73 | containerColor | El color del fondo del componente.
74 | contentColor | Color del contenido.
75 | elevation | Permite modificar la elevación del componente en sus distintos estados con el objeto `FloatingActionButtonElevation`.
76 | interactionSource | Representa un `stream` de interacciones del botón lo que nos permite modificar su diseño o comportamiento. Por ejemplo que mientras el botón esté pulsado, este encoja.
77 | content | Contenido a mostrar dentro del `FloatingActionButton`.
78 |
79 |
80 |
81 |
82 | [comment]: <> (No modifiques el tip)
83 |
84 | :::tip[Fuente]
85 | Puedes acceder a la documentación oficial de Google
86 | [desde aquí](https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary).
87 | :::
88 |
89 | ### Ejemplos
90 |
91 |
92 |
93 |
94 |
109 |
110 | ```kotlin frame="terminal"
111 | @Composable
112 | fun FloatingActionButtonExample() {
113 | FloatingActionButton(onClick = { print("Hello") }) {
114 | Icon(Icons.Filled.Favorite, "Floating action button.")
115 | }
116 | }
117 | ```
118 |
119 |
120 |
--------------------------------------------------------------------------------
/src/content/docs/buttons/icon-button.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: IconButton
3 | description: Aprende a usar el composable IconButton en Jetpack Compose.
4 | ---
5 |
6 | import { Tabs, TabItem } from '@astrojs/starlight/components';
7 |
8 | [comment]: <> (La ruta siempre será assets/nombeComponente/componente-header.webp)
9 |
10 | Material | Material3
11 | ------ | -----------
12 | ![Imagen del componente [IconButton]](../../../assets/buttons/iconbutton/iconbutton-m-default.webp)|![Imagen del componente [IconButton]](../../../assets/buttons/iconbutton/iconbutton-m3-default.webp)|
13 |
14 | El componente `IconButton` permite que un ícono actúe como un `Button`, ejecuta una acción cuando el usuario hace click en este componente. Es usado cuando se requiere un botón compacto, como en `TopAppBar`.
15 |
16 | ## Implementación
17 |
18 | ### Definición del componente
19 |
20 | [comment]: <> (Añade un ``TabItem`` por cada tipo de implementación que tenga)
21 |
22 |
23 |
24 |
25 | ```kotlin frame="terminal"
26 | @Composable
27 | fun IconButton(
28 | onClick: () -> Unit,
29 | modifier: Modifier = Modifier,
30 | enabled: Boolean = true,
31 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
32 | content: @Composable () -> Unit
33 | )
34 | ```
35 |
36 | Atributo | Descripción
37 | ------ | -----------
38 | onClick | Función lambda que es llamada cuando el botón es presionado.
39 | modifier | Modificador que implementará el composable (_Opcional_).
40 | enabled | Controla el estado del componente. Sí el valor es falso, entonces el componente no responderá a la acción de click, también se mostrará como deshabilitado visualmente.
41 | interactionSource | Representa una serie de interacciones para este componente. Se puede crear un objeto personalizado a través de `remember { MutableInteractionSource() }`.
42 | content | Contenido que almacenará el `IconButton`, comúnmente es un `Icon`.
43 |
44 |
45 |
46 |
47 | ```kotlin frame="terminal"
48 | @Composable
49 | fun IconButton(
50 | onClick: () -> Unit,
51 | modifier: Modifier = Modifier,
52 | enabled: Boolean = true,
53 | colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
54 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
55 | content: @Composable () -> Unit
56 | )
57 | ```
58 |
59 | Atributo | Descripción
60 | ------ | -----------
61 | onClick | Función lambda que es llamada cuando el botón es presionado.
62 | modifier | Modificador que implementará el composable (_Opcional_).
63 | enabled | Controla el estado del componente. Sí el valor es falso, entonces el componente no responderá a la acción de click, también se mostrará como deshabilitado visualmente.
64 | colors | Contiene información sobre el color del `IconButton` a través de diferentes estados. Por defecto usa `IconButtonDefaults.iconButtonColors()`.
65 | interactionSource | Representa una serie de interacciones para este componente. Se puede crear un objeto personalizado a través de `remember { MutableInteractionSource() }`.
66 | content | Contenido que almacenará el `IconButton`, comúnmente es un `Icon`.
67 |
68 |
69 |
70 |
71 | [comment]: <> (No modifiques el tip)
72 |
73 | :::tip[Fuente]
74 | Puedes acceder a la documentación oficial de Google
75 | [desde aquí](https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary).
76 | :::
77 |
78 | ### Ejemplos
79 |
80 |
81 |
82 |
83 |
108 |
109 | ```kotlin frame="terminal"
110 | import androidx.compose.material.icons.Icons
111 | import androidx.compose.material.icons.filled.Home
112 | import androidx.compose.material3.Icon
113 | import androidx.compose.material3.IconButton
114 | import androidx.compose.material3.IconButtonDefaults
115 |
116 | @Composable
117 | fun MyIconButton() {
118 | IconButton(
119 | onClick = { /*TODO*/ },
120 | modifier = Modifier.size(70.dp),
121 | colors = IconButtonDefaults.iconButtonColors(
122 | containerColor = Color.LightGray,
123 | contentColor = Color.Red
124 | )
125 | ) {
126 | Icon(imageVector = Icons.Filled.Home, contentDescription = "Home")
127 | }
128 | }
129 | ```
130 |
131 |
132 |
--------------------------------------------------------------------------------
/src/content/docs/buttons/large-floating-action-button.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: LargeFloatingActionButton
3 | description: Aprende a usar el composable LargeFloatingActionButton en Jetpack Compose.
4 | sidebar:
5 | order: 7
6 | ---
7 |
8 | import { Tabs, TabItem } from '@astrojs/starlight/components';
9 |
10 | [comment]: <> (La ruta siempre será assets/nombeComponente/componente-header.webp)
11 |
12 | | Material 3|
13 | | :------: |
14 | |  |
15 |
16 | El componente `LargeFloatingActionButton` sigue las mismas reglas e implimentaciones que [FloatingActionButton](/buttons/floating-action-button/) pero el botón como tal es más grande.
17 |
18 | ## Implementación
19 |
20 | ### Definición del componente
21 |
22 | [comment]: <> (Añade un ``TabItem`` por cada tipo de implementación que tenga)
23 |
24 |
25 |
26 |
27 | ```kotlin frame="terminal"
28 | @Composable
29 | fun LargeFloatingActionButton(
30 | onClick: () -> Unit,
31 | modifier: Modifier = Modifier,
32 | shape: Shape = FloatingActionButtonDefaults.largeShape,
33 | containerColor: Color = FloatingActionButtonDefaults.containerColor,
34 | contentColor: Color = contentColorFor(containerColor),
35 | elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
36 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
37 | content: @Composable () -> Unit,
38 | )
39 | ```
40 |
41 | Atributo | Descripción
42 | ------ | -----------
43 | onClick | Función lambda que se ejecutará cuando el usuario pulse el botón.
44 | modifier | Modificador que implementará el composable.
45 | shape | Define la forma del `FloatingActionButton` y su sombra.
46 | containerColor | El color del fondo del componente.
47 | contentColor | Color del contenido.
48 | elevation | Permite modificar la elevación del componente en sus distintos estados con el objeto `FloatingActionButtonElevation`.
49 | interactionSource | Representa un `stream` de interacciones del botón lo que nos permite modificar su diseño o comportamiento. Por ejemplo que mientras el botón esté pulsado, este encoja.
50 | content | Contenido a mostrar dentro del `FloatingActionButton`.
51 |
52 |
53 |
54 |
55 | [comment]: <> (No modifiques el tip)
56 |
57 | :::tip[Fuente]
58 | Puedes acceder a la documentación oficial de Google
59 | [desde aquí](https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary).
60 | :::
61 |
62 | ### Ejemplos
63 |
64 |
65 |
66 |
67 |
68 |
69 | ```kotlin frame="terminal"
70 | @Composable
71 | fun LargeFloatingActionButtonExample() {
72 | LargeFloatingActionButton(onClick = { print("Hello") }) {
73 | Icon(Icons.Filled.Favorite, "Floating action button.")
74 | }
75 | }
76 | ```
77 |
78 |
79 |
--------------------------------------------------------------------------------
/src/content/docs/buttons/outlined-button.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: OutlinedButton
3 | description: Aprende a usar el composable OutlinedButton en Jetpack Compose.
4 | sidebar:
5 | order: 2
6 | ---
7 |
8 | import { Tabs, TabItem } from '@astrojs/starlight/components';
9 |
10 | [comment]: <> (La ruta siempre será assets/nombeComponente/componente-header.webp)
11 |
12 | | Material| Material 3|
13 | | :----------------: | :------: |
14 | |  |  |
15 |
16 | Los `OutlinedButton` son [botones](/buttons/button/) con un diseño menos llamativo ya que están diseñados para acciones importantes pero que no son TAN importantes como la acción primaria.
17 |
18 | ## Implementación
19 |
20 | ### Definición del componente
21 |
22 | [comment]: <> (Añade un ``TabItem`` por cada tipo de implementación que tenga)
23 |
24 |
25 |
26 |
27 | ```kotlin frame="terminal"
28 | @Composable
29 | fun OutlinedButton(
30 | onClick: () -> Unit,
31 | modifier: Modifier = Modifier,
32 | enabled: Boolean = true,
33 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
34 | elevation: ButtonElevation? = null,
35 | shape: Shape = MaterialTheme.shapes.small,
36 | border: BorderStroke? = ButtonDefaults.outlinedBorder,
37 | colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
38 | contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
39 | content: @Composable RowScope.() -> Unit
40 | )
41 | ```
42 | Atributo | Descripción
43 | ------ | -----------
44 | onClick | Función lambda que se ejecutará cuando el usuario pulse el botón.
45 | modifier | Modificador que implementará el composable.
46 | enabled | Habilita o deshabilita el botón.
47 | interactionSource | Representa un `stream` de interacciones del botón lo que nos permite modificar su diseño o comportamiento. Por ejemplo que mientras el botón esté pulsado, este encoja.
48 | elevation | Permite modificar la elevación del componente en sus distintos estados con el objeto `ButtonElevation`.
49 | shape | Define la forma del `Button` y su sombra.
50 | border | Borde para el `Button`.
51 | colors | Nos permite modificar el color del fondo del `Button` y el del contenido.
52 | contentPadding | The spacing values to apply internally between the container and the content
53 | content | Contenido a mostrar dentro del `Button`.
54 |
55 |
56 |
57 |
58 | ```kotlin frame="terminal"
59 | @Composable
60 | fun OutlinedButton(
61 | onClick: () -> Unit,
62 | modifier: Modifier = Modifier,
63 | enabled: Boolean = true,
64 | shape: Shape = ButtonDefaults.outlinedShape,
65 | colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
66 | elevation: ButtonElevation? = null,
67 | border: BorderStroke? = ButtonDefaults.outlinedButtonBorder,
68 | contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
69 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
70 | content: @Composable RowScope.() -> Unit
71 | )
72 | ```
73 |
74 | Atributo | Descripción
75 | ------ | -----------
76 | onClick | Función lambda que se ejecutará cuando el usuario pulse el botón.
77 | modifier | Modificador que implementará el composable.
78 | enabled | Habilita o deshabilita el botón.
79 | shape | Define la forma del `Button` y su sombra.
80 | colors | Nos permite modificar el color del fondo del `Button` y el del contenido.
81 | elevation | Permite modificar la elevación del componente en sus distintos estados con el objeto `ButtonElevation`.
82 | border | Borde para el `Button`.
83 | contentPadding | The spacing values to apply internally between the container and the content
84 | interactionSource | Representa un `stream` de interacciones del botón lo que nos permite modificar su diseño o comportamiento. Por ejemplo que mientras el botón esté pulsado, este encoja.
85 | content | Contenido a mostrar dentro del `Button`.
86 |
87 |
88 |
89 |
90 | [comment]: <> (No modifiques el tip)
91 |
92 | :::tip[Fuente]
93 | Puedes acceder a la documentación oficial de Google
94 | [desde aquí](https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary).
95 | :::
96 |
97 | ### Ejemplos
98 |
99 |
100 |
101 |
102 |
141 |
142 | ```kotlin frame="terminal"
143 | enum class ProgrammingLanguage {
144 | Java,
145 | Kotlin,
146 | Dart,
147 | Swift
148 | }
149 |
150 | @Composable
151 | fun RadioButtonListExample() {
152 | val programmingLanguageList = listOf(Java, Kotlin, Dart, Swift)
153 | var selectedLanguage by remember { mutableStateOf(Kotlin) }
154 | Column(Modifier.padding(6.dp)) {
155 | programmingLanguageList.forEach { language ->
156 | Row(Modifier.padding(6.dp), verticalAlignment = Alignment.CenterVertically) {
157 | RadioButton(
158 | selected = selectedLanguage == language,
159 | onClick = { selectedLanguage = language }
160 | )
161 | Text(text = language.name, color = Color.White)
162 | }
163 | }
164 | }
165 | }
166 | ```
167 |
168 |
169 |
--------------------------------------------------------------------------------
/src/content/docs/buttons/small-floating-action-button.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: SmallFloatingActionButton
3 | description: Aprende a usar el composable SmallFloatingActionButton en Jetpack Compose.
4 | sidebar:
5 | order: 6
6 | ---
7 |
8 | import { Tabs, TabItem } from '@astrojs/starlight/components';
9 |
10 | [comment]: <> (La ruta siempre será assets/nombeComponente/componente-header.webp)
11 |
12 | | Material 3|
13 | | :------: |
14 | |  |
15 |
16 | El componente `SmallFloatingActionButton` sigue las mismas reglas e implimentaciones que [FloatingActionButton](/buttons/floating-action-button/) pero con un diseño algo más pequeño.
17 |
18 | ## Implementación
19 |
20 | ### Definición del componente
21 |
22 | [comment]: <> (Añade un ``TabItem`` por cada tipo de implementación que tenga)
23 |
24 |
25 |
26 |
27 | ```kotlin frame="terminal"
28 | @Composable
29 | fun SmallFloatingActionButton(
30 | onClick: () -> Unit,
31 | modifier: Modifier = Modifier,
32 | shape: Shape = FloatingActionButtonDefaults.smallShape,
33 | containerColor: Color = FloatingActionButtonDefaults.containerColor,
34 | contentColor: Color = contentColorFor(containerColor),
35 | elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
36 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
37 | content: @Composable () -> Unit,
38 | )
39 | ```
40 |
41 | Atributo | Descripción
42 | ------ | -----------
43 | onClick | Función lambda que se ejecutará cuando el usuario pulse el botón.
44 | modifier | Modificador que implementará el composable.
45 | shape | Define la forma del `FloatingActionButton` y su sombra.
46 | containerColor | El color del fondo del componente.
47 | contentColor | Color del contenido.
48 | elevation | Permite modificar la elevación del componente en sus distintos estados con el objeto `FloatingActionButtonElevation`.
49 | interactionSource | Representa un `stream` de interacciones del botón lo que nos permite modificar su diseño o comportamiento. Por ejemplo que mientras el botón esté pulsado, este encoja.
50 | content | Contenido a mostrar dentro del `FloatingActionButton`.
51 |
52 |
53 |
54 |
55 | [comment]: <> (No modifiques el tip)
56 |
57 | :::tip[Fuente]
58 | Puedes acceder a la documentación oficial de Google
59 | [desde aquí](https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary).
60 | :::
61 |
62 | ### Ejemplos
63 |
64 |
65 |
66 |
67 |
68 |
69 | ```kotlin frame="terminal"
70 | @Composable
71 | fun SmallFloatingActionButtonExample() {
72 | SmallFloatingActionButton(onClick = { print("Hello") }) {
73 | Icon(Icons.Filled.Favorite, "Floating action button.")
74 | }
75 | }
76 | ```
77 |
78 |
79 |
--------------------------------------------------------------------------------
/src/content/docs/buttons/text-button.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: TextButton
3 | description: Aprende a usar el composable TextButton en Jetpack Compose.
4 | sidebar:
5 | order: 4
6 | ---
7 |
8 | import { Tabs, TabItem } from '@astrojs/starlight/components';
9 |
10 | [comment]: <> (La ruta siempre será assets/nombeComponente/componente-header.webp)
11 |
12 | | Material| Material 3|
13 | | :----------------: | :------: |
14 | |  |  |
15 |
16 | Los `TextButton` están destinados a las acciones con menos prioridad en las vistas.
17 |
18 | ## Implementación
19 |
20 | ### Definición del componente
21 |
22 | [comment]: <> (Añade un ``TabItem`` por cada tipo de implementación que tenga)
23 |
24 |
25 |
26 |
27 | ```kotlin frame="terminal"
28 | @Composable
29 | fun TextButton(
30 | onClick: () -> Unit,
31 | modifier: Modifier = Modifier,
32 | enabled: Boolean = true,
33 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
34 | elevation: ButtonElevation? = null,
35 | shape: Shape = MaterialTheme.shapes.small,
36 | border: BorderStroke? = null,
37 | colors: ButtonColors = ButtonDefaults.textButtonColors(),
38 | contentPadding: PaddingValues = ButtonDefaults.TextButtonContentPadding,
39 | content: @Composable RowScope.() -> Unit
40 | )
41 | ```
42 | Atributo | Descripción
43 | ------ | -----------
44 | onClick | Función lambda que se ejecutará cuando el usuario pulse el botón.
45 | modifier | Modificador que implementará el composable.
46 | enabled | Habilita o deshabilita el botón.
47 | interactionSource | Representa un `stream` de interacciones del botón lo que nos permite modificar su diseño o comportamiento. Por ejemplo que mientras el botón esté pulsado, este encoja.
48 | elevation | Permite modificar la elevación del componente en sus distintos estados con el objeto `ButtonElevation`.
49 | shape | Define la forma del `Button` y su sombra.
50 | border | Borde para el `Button`.
51 | colors | Nos permite modificar el color del fondo del `Button` y el del contenido.
52 | contentPadding | The spacing values to apply internally between the container and the content
53 | content | Contenido a mostrar dentro del `Button`.
54 |
55 |
56 |
57 |
58 | ```kotlin frame="terminal"
59 | @Composable
60 | fun TextButton(
61 | onClick: () -> Unit,
62 | modifier: Modifier = Modifier,
63 | enabled: Boolean = true,
64 | shape: Shape = ButtonDefaults.textShape,
65 | colors: ButtonColors = ButtonDefaults.textButtonColors(),
66 | elevation: ButtonElevation? = null,
67 | border: BorderStroke? = null,
68 | contentPadding: PaddingValues = ButtonDefaults.TextButtonContentPadding,
69 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
70 | content: @Composable RowScope.() -> Unit
71 | )
72 | ```
73 |
74 | Atributo | Descripción
75 | ------ | -----------
76 | onClick | Función lambda que se ejecutará cuando el usuario pulse el botón.
77 | modifier | Modificador que implementará el composable.
78 | enabled | Habilita o deshabilita el botón.
79 | shape | Define la forma del `Button` y su sombra.
80 | colors | Nos permite modificar el color del fondo del `Button` y el del contenido.
81 | elevation | Permite modificar la elevación del componente en sus distintos estados con el objeto `ButtonElevation`.
82 | border | Borde para el `Button`.
83 | contentPadding | The spacing values to apply internally between the container and the content
84 | interactionSource | Representa un `stream` de interacciones del botón lo que nos permite modificar su diseño o comportamiento. Por ejemplo que mientras el botón esté pulsado, este encoja.
85 | content | Contenido a mostrar dentro del `Button`.
86 |
87 |
88 |
89 |
90 | [comment]: <> (No modifiques el tip)
91 |
92 | :::tip[Fuente]
93 | Puedes acceder a la documentación oficial de Google
94 | [desde aquí](https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary).
95 | :::
96 |
97 | ### Ejemplos
98 |
99 |
100 |
101 |
102 |
117 |
118 | ```kotlin frame="terminal"
119 | @Composable
120 | fun TextButtonExample() {
121 | TextButton(onClick = { print("Hello") }) {
122 | Text(text = "Click me")
123 | }
124 | }
125 | ```
126 |
127 |
128 |
--------------------------------------------------------------------------------
/src/content/docs/cards/ElevatedCard.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: ElevatedCard
3 | description: Aprende a usar el elevatedCard en Jetpack Compose.
4 | ---
5 | import { Tabs, TabItem } from '@astrojs/starlight/components';
6 |
7 | | Material 3|
8 | | :----------------: |
9 | | |
10 |
11 | Las tarjetas elevadas contienen contenidos y acciones que relacionan información sobre un tema. Tienen una sombra que las separa más del fondo que las tarjetas con relleno, pero menos que las tarjetas con contorno.
12 |
13 | ## Implementación
14 |
15 | ### Defenición del componente
16 |
17 |
18 |
19 |
20 | ```kotlin frame="terminal"
21 | @Composable
22 | fun ElevatedCard(
23 | onClick: () -> Unit,
24 | modifier: Modifier = Modifier,
25 | enabled: Boolean = true,
26 | shape: Shape = CardDefaults.elevatedShape,
27 | colors: CardColors = CardDefaults.elevatedCardColors(),
28 | elevation: CardElevation = CardDefaults.elevatedCardElevation(),
29 | interactionSource: MutableInteractionSource? = null,
30 | content: @Composable ColumnScope.() -> Unit
31 | )
32 | ```
33 |
34 | Atributo | Descripción
35 | ------ | -----------
36 | onClick | cuando se hace clic en esta tarjeta
37 | modifier | el [Modificador] que se aplicará a esta tarjeta
38 | enabled | controla el estado activado de esta tarjeta. Cuando es falso, este componente no responderá a la entrada del usuario, y aparecerá visualmente desactivado y deshabilitado para los servicios de accesibilidad.
39 | shape | define la forma del contenedor y la sombra de esta tarjeta (cuando se utiliza [elevación])
40 | colors | [CardColors] que se utilizará para resolver el color o colores utilizados para esta tarjeta en diferentes estados. Véase [CardDefaults.elevatedCardElevation].
41 | elevation | [CardElevation] utilizado para resolver la elevación de esta tarjeta en diferentes estados. Esto controla el tamaño de la sombra debajo de la tarjeta. Además, cuando el color del contenedor es [ColorScheme.surface], controla la cantidad de color primario aplicado como superposición. Véase también: [Superficie].
42 | interactionSource | una [MutableInteractionSource] opcional para observar y emitir [Interaction]s para esta tarjeta. Puede utilizarlo para cambiar la apariencia de la tarjeta o previsualizarla en diferentes estados. Tenga en cuenta que si se proporciona null, las interacciones seguirán ocurriendo internamente.
43 |
44 |
45 |
46 |
47 | [comment]: <> (No modifiques el tip)
48 | :::tip[Fuente]
49 | Puedes acceder a la documentación oficial de Google
50 | [desde aquí](https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary).
51 | :::
52 |
53 | ### Ejemplo
54 |
55 |
56 |
57 |
58 |
59 |
60 | ``` kotlin frame="terminal"
61 | @Composable
62 | fun ElevatedCardExample() {
63 | ElevatedCard(
64 | elevation = CardDefaults.cardElevation(
65 | defaultElevation = 6.dp
66 | ),
67 | modifier = Modifier
68 | .size(width = 240.dp, height = 100.dp)
69 | ) {
70 | Text(
71 | text = "Elevated",
72 | modifier = Modifier
73 | .padding(16.dp),
74 | textAlign = TextAlign.Center,
75 | )
76 | }
77 | }
78 | ```
79 |
80 |
81 |
--------------------------------------------------------------------------------
/src/content/docs/cards/card-outlined.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: OutlinedCard
3 | description: Aprende a usar el OutlinedCard en Jetpack Compose.
4 | sidebar:
5 | order: 0
6 | ---
7 | import { Tabs, TabItem } from '@astrojs/starlight/components';
8 |
9 | [comment]: <> (La ruta siempre será assets/nombeComponente/componente-header.webp)
10 |
11 | | Material 3|
12 | | :----------------: |
13 | | |
14 |
15 | La `OutlinedCard` es similar a `Card`, pero en lugar de tener un fondo sólido, tiene solo un contorno o borde alrededor del contenedor. No tiene sombreado por defecto y al igual que `Card`, puede contener otros elementos en su interior, como texto, imágenes, etc.
16 |
17 | ## Implementación
18 |
19 | ### Defenición del componente
20 |
21 |
22 |
23 |
24 | ```kotlin frame="terminal"
25 | @Composable
26 | fun OutlinedCard(
27 | modifier: Modifier,
28 | shape: Shape = CardDefaults.outlinedShape,
29 | colors: CardColors = CardDefaults.outlinedCardColors(),
30 | elevation: CardElevation = CardDefaults.outlinedCardElevation(),
31 | border: BorderStroke = CardDefaults.outlinedCardBorder(),
32 | content: @Composable ColumnScope.() -> Unit
33 | ): Unit
34 | ```
35 | Atributo | Descripción
36 | ------ | -----------
37 | modifier | Modificador que implementará el composable.
38 | shape | Define la forma del `OutlinedCard` y su sombra.
39 | colors | Define el color del `OutlinedCard`, los colores del contenido, el color del `OutlinedCard` y su contenido cuando estan desactivado.
40 | elevation | Permite modificar la elevación del componente en sus distintos estados.
41 | border | Permite especificar el trazo con el que dibujar el borde.
42 | content | Contenido a mostrar en el `OutlinedCard`.
43 |
44 |
45 |
46 |
47 | [comment]: <> (No modifiques el tip)
48 |
49 | :::tip[Fuente]
50 | Puedes acceder a la documentación oficial de Google
51 | [desde aquí](https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary).
52 | :::
53 |
54 | ### Ejemplo
55 |
56 |
57 |
58 |
59 |
60 |
61 | ``` kotlin frame="terminal"
62 | @Composable
63 | fun OutlinedCardExample() {
64 | OutlinedCard(
65 | colors = CardDefaults.cardColors(
66 | containerColor = MaterialTheme.colorScheme.surface,
67 | ),
68 | border = BorderStroke(1.dp, MaterialTheme.colorScheme.primary),
69 | modifier = Modifier
70 | .size(width = 240.dp, height = 100.dp)
71 | ) {
72 | Icon(
73 | imageVector = Icons.Outlined.AutoAwesome,
74 | contentDescription = "example",
75 | modifier = Modifier.padding(start = 8.dp, top = 8.dp)
76 | )
77 | Text(
78 | text = "Outlined",
79 | modifier = Modifier
80 | .padding(start = 8.dp, top = 8.dp),
81 | textAlign = TextAlign.Center,
82 | )
83 | }
84 | }
85 | ```
86 |
87 |
--------------------------------------------------------------------------------
/src/content/docs/cards/card.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Card
3 | description: Aprende a usar el composable Card en Jetpack Compose.
4 | ---
5 |
--------------------------------------------------------------------------------
/src/content/docs/carousel/horizontalMultiBrowseCarousel.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: HorizontalMultiBrowseCarousel
3 | description: Nuevo elemento para mostrar múltiples ítems
4 | ---
5 |
6 | | Material 3 |
7 | | :----------------------------------------------------------------------------------------------------------------------------------------------: |
8 | |  |
9 |
10 | ## Implementación
11 |
12 | A partir de la versión `1.3.0` de _compose_ podemos hacer uso del `HorizontalMultiBrowseCarousel`, un nuevo elemento que permite tener un carrusel con múltiples ítems. Este componente resalta algunos elementos con mayor tamaño.
13 |
14 | ### Definición del componente
15 |
16 | ```kotlin frame="terminal"
17 | @ExperimentalMaterial3Api
18 | @Composable
19 | fun HorizontalMultiBrowseCarousel(
20 | state: CarouselState,
21 | preferredItemWidth: Dp,
22 | modifier: Modifier = Modifier,
23 | itemSpacing: Dp = 0.dp,
24 | flingBehavior: TargetedFlingBehavior =
25 | CarouselDefaults.singleAdvanceFlingBehavior(state = state),
26 | minSmallItemWidth: Dp = CarouselDefaults.MinSmallItemSize,
27 | maxSmallItemWidth: Dp = CarouselDefaults.MaxSmallItemSize,
28 | contentPadding: PaddingValues = PaddingValues(0.dp),
29 | content: @Composable CarouselItemScope.(itemIndex: Int) -> Unit
30 | )
31 | ```
32 |
33 | | Atributo | Descripción |
34 | | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
35 | | state | CarouselState. Se utiliza para controlar el estado del componente. |
36 | | preferredItemWidth | Es el ancho aproximado que deben tener los ítems completamente desplegados. Este ancho se ajustará según el espacio disponible y los demás elementos. El componente ajusta primero los ítems más comprimidos (estos se pueden ajustar con las propiedades de minSmallItemWidth y maxSmallItemWidth), y luego los "medianos". |
37 | | modifier | Modificador que aplicará al composable. |
38 | | itemSpacing | Es el espacio que existirá entre cada ítem. |
39 | | flingBehavior | TargetedFlingBehavior. Es la clase que define el comportamiento del desplazamiento. |
40 | | minSmallItemWidth | El ancho mínimo permitido para los ítems que visualmente están comprimidos. |
41 | | maxSmallItemWidth | El ancho máximo permitido para los ítems que visualmente están comprimidos. |
42 | | contentPadding | Es el espacio que se agregará alrededor del contenido, puede ser usado para agregar espacio antes del primer ítem y después del último. |
43 |
44 | #### CarouselState
45 |
46 | ```kotlin frame="terminal"
47 | @ExperimentalMaterial3Api
48 | @Composable
49 | fun rememberCarouselState(
50 | initialItem: Int = 0,
51 | itemCount: () -> Int,
52 | )
53 | ```
54 |
55 | | Atributo | Descripción |
56 | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
57 | | initialItem | Es el número del ítem en el que comenzará el carrusel. |
58 | | itemCount | Función lambda que devuelve el número total de ítems que tendrá el carrusel. Es una función para soportar casos donde se agreguen más ítems al carrusel. |
59 |
60 | ### Ejemplos
61 |
62 | 
63 |
64 | Demostración de un HorizontalMultiBrowseCarousel
65 |
66 | ```kotlin frame="terminal"
67 | @ExperimentalMaterial3Api
68 | @Composable
69 | fun CarouselHorizontalExample() {
70 | val state = rememberCarouselState(itemCount = { 5 }, initialItem = 0)
71 |
72 | Column(verticalArrangement = Arrangement.Center) {
73 | HorizontalMultiBrowseCarousel(
74 | state = state,
75 | preferredItemWidth = 250.dp,
76 | modifier = Modifier.height(200.dp),
77 | itemSpacing = 10.dp
78 | ) { page ->
79 | Box(
80 | modifier =
81 | Modifier
82 | .padding(10.dp)
83 | .background(Color.Blue)
84 | .fillMaxSize()
85 | .aspectRatio(0.5f),
86 | contentAlignment = Alignment.Center
87 | ) {
88 | Text(text = page.toString(), fontSize = 32.sp, color = Color.White)
89 | }
90 | }
91 | }
92 | }
93 | ```
94 |
--------------------------------------------------------------------------------
/src/content/docs/carousel/horizontalUncontainedCarousel.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: HorizontalUncontainedCarousel
3 | description: Nuevo elemento para mostrar múltiples ítems
4 | ---
5 |
6 | | Material 3 |
7 | | :---------------------------------------------------------------------------------------------------------------------------------------------: |
8 | |  |
9 |
10 | ## Implementación
11 |
12 | A partir de la versión `1.3.0` de _compose_ podemos hacer uso del `HorizontalUncontainedCarousel`, un nuevo elemento que permite tener un carrusel con múltiples ítems.
13 |
14 | ### Definición del componente
15 |
16 | ```kotlin frame="terminal"
17 | @ExperimentalMaterial3Api
18 | @Composable
19 | fun HorizontalUncontainedCarousel(
20 | state: CarouselState,
21 | itemWidth: Dp,
22 | modifier: Modifier = Modifier,
23 | itemSpacing: Dp = 0.dp,
24 | flingBehavior: TargetedFlingBehavior = CarouselDefaults.noSnapFlingBehavior(),
25 | contentPadding: PaddingValues = PaddingValues(0.dp),
26 | content: @Composable CarouselItemScope.(itemIndex: Int) -> Unit
27 | )
28 | ```
29 |
30 | | Atributo | Descripción |
31 | | -------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
32 | | state | CarouselState. Se utiliza para controlar el estado del componente. |
33 | | itemWidth | El ancho de cada ítem del carrusel. |
34 | | modifier | Modificador que aplicará al composable. |
35 | | itemSpacing | Es el espacio que existirá entre cada ítem. |
36 | | flingBehavior | TargetedFlingBehavior. Es la clase que define el comportamiento del desplazamiento. |
37 | | contentPadding | Es el espacio que se agregará alrededor del contenido. Puede ser usado para agregar espacio antes del primer ítem y después del último. |
38 |
39 | #### CarouselState
40 |
41 | ```kotlin frame="terminal"
42 | @ExperimentalMaterial3Api
43 | @Composable
44 | fun rememberCarouselState(
45 | initialItem: Int = 0,
46 | itemCount: () -> Int,
47 | )
48 |
49 | ```
50 |
51 | ### Ejemplos
52 |
53 | 
54 |
55 | Demostración de un HorizontalUncontainedCarousel
56 |
57 | ```kotlin frame="terminal"
58 | HorizontalUncontainedCarousel(
59 | state = state,
60 | itemWidth = 250.dp,
61 | itemSpacing = 10.dp,
62 | modifier = Modifier.height(300.dp)
63 | ) { page ->
64 | Box(
65 | modifier =
66 | Modifier
67 | .padding(10.dp)
68 | .background(Color.Blue)
69 | .fillMaxSize()
70 | .height(100.dp),
71 | contentAlignment = Alignment.Center
72 | ) {
73 | Text(text = page.toString(), fontSize = 32.sp, color = Color.White)
74 | }
75 | }
76 | ```
77 |
--------------------------------------------------------------------------------
/src/content/docs/checkbox/checkbox.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Checkbox
3 | description: Aprende a usar el composable Checkbox en Jetpack Compose.
4 | sidebar:
5 | badge:
6 | text: Nuevo
7 | variant: tip
8 | ---
9 |
10 | import { Tabs, TabItem } from "@astrojs/starlight/components";
11 |
12 | | Material| Material 3|
13 | | :----------------: | :------: |
14 | |  |  |
15 |
16 | Los `checkbox` permiten a los usuarios seleccionar uno o más elementos de un conjunto. Los `checkbox` pueden activar o desactivar una opción.
17 |
18 | Utilice los `checkbox` para:
19 |
20 | - Seleccione una o más opciones de una lista
21 | - Presentar una lista que contenga subselecciones
22 | - Activar o desactivar un elemento en un entorno de escritorio
23 |
24 | ## Implementación
25 |
26 | ### Definición del componente
27 |
28 |
29 |
30 |
31 | ```kotlin frame="terminal"
32 | @Composable
33 | fun Checkbox(
34 | checked: Boolean,
35 | onCheckedChange: ((Boolean) -> Unit)?,
36 | modifier: Modifier = Modifier,
37 | enabled: Boolean = true,
38 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
39 | colors: CheckboxColors = CheckboxDefaults.colors()
40 | ): Unit
41 | ```
42 | Atributo | Descripción
43 | ------ | -----------
44 | checked | Si este `checkbox` está marcado o desactivado.
45 | onCheckedChange | devolución de llamada que se invocará cuando se haga clic en el `checkbox`, por lo tanto, se solicita el cambio de estado comprobado. Si es nulo, es pasivo y depende completamente de un componente de nivel superior para controlar el estado "comprobado".
46 | modifier | Modificador a aplicar a este `checkbox`.
47 | enabled | si el componente está habilitado o atenuado.
48 | interactionSource | MutableInteractionSource que representa el flujo de interacciones para este `checkbox`. Puede crear y pasar su propio MutableInteractionSource recordado si desea observar las interacciones y personalizar la apariencia / comportamiento de este `checkbox` en diferentes interacciones.
49 | colors | Colores del `checkbox` que se utilizarán para determinar el color de la marca de verificación / casilla / borde en diferentes estados. Consulte CheckboxDefaults.colors.
50 |
51 |
52 |
53 |
54 |
55 | ```kotlin frame="terminal"
56 | @Composable
57 | fun Checkbox(
58 | checked: Boolean,
59 | onCheckedChange: ((Boolean) -> Unit)?,
60 | modifier: Modifier = Modifier,
61 | enabled: Boolean = true,
62 | colors: CheckboxColors = CheckboxDefaults.colors(),
63 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
64 | ): Unit
65 | ```
66 | Atributo | Descripción
67 | ------ | -----------
68 | checked | Si este `checkbox` está marcado o desactivado.
69 | onCheckedChange | Se llama cuando se hace clic en este `checkbox`. Si es nulo, este `checkbox` no será interactivo, a menos que otra cosa controle sus eventos de entrada y actualice su estado.
70 | modifier | Modificador a aplicar a este `checkbox`.
71 | enabled | Controla el estado habilitado de este `checkbox`. Cuando es false, este componente no responderá a la entrada del usuario y aparecerá visualmente deshabilitado y deshabilitado para los servicios de accesibilidad.
72 | colors | Colores del `checkbox` que se usarán para resolver los colores utilizados para este `checkbox` en diferentes estados. Consulte CheckboxDefaults.colors.
73 | interactionSource | la MutableInteractionSource representa la secuencia de interacciones para este `checkbox`. Puede crear y pasar su propia instancia recordada para observar las interacciones y personalizar la apariencia / comportamiento de este `checkbox` en diferentes estados.
74 |
75 |
76 |
77 |
78 | :::tip[Fuente]
79 | Puedes acceder a la documentación oficial del componente
80 | [desde aquí (M2)](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#Checkbox(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.material.CheckboxColors))
81 | o [desde aquí (M3)](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#Checkbox(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.CheckboxColors,androidx.compose.foundation.interaction.MutableInteractionSource)).
82 | :::
83 |
84 | ### Ejemplos
85 |
86 |
87 |
88 |
89 |
107 |
108 | ```kotlin "androidx.compose.material3.Checkbox" title="CheckboxM3Default" frame="terminal"
109 | import androidx.compose.material3.Checkbox
110 | @Composable
111 | fun CheckboxDefault() {
112 | val checkedState = remember { mutableStateOf(true) }
113 | Checkbox(
114 | checked = checkedState.value,
115 | onCheckedChange = { checkedState.value = it }
116 | )
117 | }
118 | ```
119 |
120 |
121 |
--------------------------------------------------------------------------------
/src/content/docs/chips/assist-chip.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: AssistChip
3 | description: Aprende a usar el composable AssistChip en Jetpack Compose.
4 | ---
5 |
6 | import { Tabs, TabItem } from '@astrojs/starlight/components';
7 |
8 | [comment]: <> (La ruta siempre será assets/nombeComponente/componente-header.webp)
9 |
10 | | Material 3|
11 | | :------: |
12 | |  |
13 |
14 | El componente `AssistChip` tiene como propósito principal orientar al usuario mientras realiza una tarea en la interfaz. Su apariencia se caracteriza por ser temporal y surge en respuesta a las acciones del usuario. Un ejemplo típico de uso incluye guiar al usuario a lo largo de un flujo de trabajo o proporcionar información relevante en un contexto específico. En resumen, el AssistChip mejora la experiencia del usuario al ofrecer orientación y respuesta contextual durante la interacción.
15 |
16 | ## Implementación
17 |
18 | ### Definición del componente
19 |
20 | [comment]: <> (Añade un ``TabItem`` por cada tipo de implementación que tenga)
21 |
22 |
23 |
24 |
25 | ```kotlin frame="terminal"
26 | @ExperimentalMaterial3Api
27 | @Composable
28 | @ComposableInferredTarget
29 | public fun AssistChip(
30 | onClick: () -> Unit,
31 | label: @Composable () -> Unit,
32 | modifier: Modifier,
33 | enabled: Boolean,
34 | leadingIcon: @Composable() (() -> Unit)?,
35 | trailingIcon: @Composable() (() -> Unit)?,
36 | shape: Shape,
37 | colors: ChipColors,
38 | elevation: ChipElevation?,
39 | border: ChipBorder?,
40 | interactionSource: MutableInteractionSource
41 | ): Unit
42 | ```
43 |
44 | Atributo | Descripción
45 | ------ | -----------
46 | onClick | Se llama cuando se hace clic en el chip.
47 | label | El contenido del chip definido como un composable.
48 | modifier | Modificador que se aplicará al chip.
49 | enabled | Cuando está deshabilitado, el chip no responderá a la entrada del usuario. También aparecerá visualmente deshabilitado y desactivado para los servicios de accesibilidad.
50 | leadingIcon | Icono opcional que se mostrará al principio del chip, antes del texto de contenido.
51 | trailingIcon | Icono opcional que se mostrará al final del chip, después del texto de contenido.
52 | shape | La forma del chip, que puede ser un rectángulo, un círculo, etc.
53 | colors | ChipColors que se utilizarán para determinar el color de fondo y contenido para este chip en diferentes estados. Consulta ChipDefaults.chipColors.
54 | elevation | La elevación del chip, que afecta su sombra.
55 | border | Borde que se dibujará alrededor del chip. Pasa null aquí para no tener borde.
56 | interactionSource | La MutableInteractionSource representa el flujo de interacciones para este chip. Puedes crear y pasar tu propia MutableInteractionSource si deseas observar interacciones y personalizar la apariencia/comportamiento de este componente en diferentes interacciones.
57 |
58 |
59 |
60 |
61 | [comment]: <> (No modifiques el tip)
62 |
63 | :::tip[Fuente]
64 | Puedes acceder a la documentación oficial de AssistChip de material 3:
65 | [desde aquí ](https://developer.android.com/jetpack/compose/components/chip?hl=es-419#assist)
66 | :::
67 |
68 | ### Ejemplo de Assist Chip
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 | ```kotlin frame="terminal"
77 | @OptIn(ExperimentalMaterial3Api::class)
78 | @Composable
79 | fun exampleAssistChip() {
80 | AssistChip(
81 | modifier = Modifier.padding(20.dp),
82 | onClick = { Log.d("Assist chip", "Hi from assist chip") },
83 | label = { Text("Doc de Asistencia") },
84 | )
85 | }
86 | ```
87 |
88 |
89 |
--------------------------------------------------------------------------------
/src/content/docs/chips/filter-chip.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: FilterChip
3 | description: Aprende a usar el composable FilterChip en Jetpack Compose.
4 | ---
5 |
6 | import { Tabs, TabItem } from '@astrojs/starlight/components';
7 |
8 | [comment]: <> (La ruta siempre será assets/nombeComponente/componente-header.webp)
9 |
10 | | Material 3|
11 | | :------: |
12 | |  |
13 |
14 | El componente `FilterChip` tiene como propósito permitir a los usuarios refinar el contenido de un conjunto de opciones según sus preferencias. En términos de interactividad, los usuarios pueden seleccionar o deseleccionar estas opciones según sus necesidades. Además, algunas de estas opciones pueden incluir un ícono de marca de verificación para indicar su selección. Un ejemplo práctico de uso sería emplear este componente para filtrar resultados en una lista o conjunto de datos, ofreciendo a los usuarios la capacidad de personalizar y enfocar la información según sus criterios específicos.
15 |
16 | ## Implementación
17 |
18 | ### Definición del componente
19 |
20 | [comment]: <> (Añade un ``TabItem`` por cada tipo de implementación que tenga)
21 |
22 |
23 |
24 |
25 | ```kotlin frame="terminal"
26 | @ExperimentalMaterial3Api
27 | @Composable
28 | @ComposableInferredTarget
29 | public fun FilterChip(
30 | selected: Boolean,
31 | onClick: () -> Unit,
32 | label: @Composable () -> Unit,
33 | modifier: Modifier,
34 | enabled: Boolean,
35 | leadingIcon: @Composable() (() -> Unit)?,
36 | trailingIcon: @Composable() (() -> Unit)?,
37 | shape: Shape,
38 | colors: SelectableChipColors,
39 | elevation: SelectableChipElevation?,
40 | border: SelectableChipBorder?,
41 | interactionSource: MutableInteractionSource
42 | ): Unit
43 | ```
44 |
45 | Atributo | Descripción
46 | ------ | -----------
47 | selected | Indica si el chip está seleccionado o no.
48 | onClick | Se llama cuando se hace clic en el chip.
49 | label | El contenido del chip definido como un composable.
50 | modifier | Modificador que se aplicará al chip.
51 | enabled | Cuando está deshabilitado, el chip no responderá a la entrada del usuario. También aparecerá visualmente deshabilitado y desactivado para los servicios de accesibilidad.
52 | leadingIcon | Icono opcional que se mostrará al principio del chip, antes del texto de contenido.
53 | trailingIcon | Icono opcional que se mostrará al final del chip, después del texto de contenido.
54 | shape | La forma del chip, que puede ser un rectángulo, un círculo, etc.
55 | colors | `SelectableChipColors` que se utilizarán para determinar el color de fondo y contenido para este chip en diferentes estados. Consulta `ChipDefaults.selectableChipColors`.
56 | elevation | La elevación del chip, que afecta su sombra en estados seleccionados.
57 | border | Borde que se dibujará alrededor del chip en estados seleccionados. Pasa null aquí para no tener borde.
58 | interactionSource | La `MutableInteractionSource` representa el flujo de interacciones para este chip. Puedes crear y pasar tu propia `MutableInteractionSource` si deseas observar interacciones y personalizar la apariencia/comportamiento de este componente en diferentes interacciones.
59 |
60 |
61 |
62 |
63 | [comment]: <> (No modifiques el tip)
64 |
65 | :::tip[Fuente]
66 | Puedes acceder a la documentación oficial de FilterChip de material 3:
67 | [desde aquí](https://developer.android.com/jetpack/compose/components/chip?hl=es-419#filter).
68 | :::
69 |
70 | ### Ejemplo de Filter Chip
71 |
72 |
73 |
74 |
75 |
76 |
77 | ```kotlin frame="terminal"
78 | @OptIn(ExperimentalMaterial3Api::class)
79 | @Composable
80 | fun exampleFilterChip() {
81 | FilterChip(
82 | modifier = Modifier.padding(20.dp),
83 | onClick = { Log.d("Filter chip", "Hi from filter chip") },
84 | label = { Text("Doc de filtrado") },
85 | selected = true
86 | )
87 | }
88 | ```
89 |
90 |
91 |
--------------------------------------------------------------------------------
/src/content/docs/chips/input-chip.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: InputChip
3 | description: Aprende a usar el composable InputChip en Jetpack Compose.
4 | ---
5 |
6 | import { Tabs, TabItem } from '@astrojs/starlight/components';
7 |
8 | [comment]: <> (La ruta siempre será assets/nombeComponente/componente-header.webp)
9 |
10 | | Material 3|
11 | | :------: |
12 | |  |
13 |
14 | El `inputChip` tiene como propósito representar la información proporcionada por el usuario de manera concisa y visualmente clara. Su contenido puede consistir en un ícono acompañado de texto descriptivo. En términos de funcionalidad, brinda al usuario la opción de eliminar el chip, generalmente a través de un botón "X", lo que permite una gestión fácil y rápida de las selecciones. Un ejemplo común de uso incluye la visualización de las selecciones de un menú o la etiquetación de contenido, proporcionando una manera efectiva de mostrar y gestionar la información proporcionada por el usuario de manera compacta y accesible.
15 |
16 | ## Implementación
17 |
18 | ### Definición del componente
19 |
20 | [comment]: <> (Añade un ``TabItem`` por cada tipo de implementación que tenga)
21 |
22 |
23 |
24 |
25 | ```kotlin frame="terminal"
26 | @ExperimentalMaterial3Api
27 | @Composable
28 | @ComposableInferredTarget
29 | public fun InputChip(
30 | selected: Boolean,
31 | onClick: () -> Unit,
32 | label: @Composable () -> Unit,
33 | modifier: Modifier,
34 | enabled: Boolean,
35 | leadingIcon: @Composable() (() -> Unit)?,
36 | avatar: @Composable() (() -> Unit)?,
37 | trailingIcon: @Composable() (() -> Unit)?,
38 | shape: Shape,
39 | colors: SelectableChipColors,
40 | elevation: SelectableChipElevation?,
41 | border: SelectableChipBorder?,
42 | interactionSource: MutableInteractionSource
43 | ): Unit
44 | ```
45 |
46 | Atributo | Descripción
47 | ------ | -----------
48 | selected | Indica si el chip está seleccionado o no.
49 | onClick | Se llama cuando se hace clic en el chip.
50 | label | El contenido del chip definido como un composable.
51 | modifier | Modificador que se aplicará al chip.
52 | enabled | Cuando está deshabilitado, el chip no responderá a la entrada del usuario. También aparecerá visualmente deshabilitado y desactivado para los servicios de accesibilidad.
53 | leadingIcon | Icono opcional que se mostrará al principio del chip, antes del texto de contenido.
54 | avatar | Avatar opcional que se mostrará en el chip.
55 | trailingIcon | Icono opcional que se mostrará al final del chip, después del texto de contenido.
56 | shape | La forma del chip, que puede ser un rectángulo, un círculo, etc.
57 | colors | SelectableChipColors que se utilizarán para determinar el color de fondo y contenido para este chip en diferentes estados. Consulta ChipDefaults.selectableChipColors.
58 | elevation | La elevación del chip, que afecta su sombra en estados seleccionados.
59 | border | Borde que se dibujará alrededor del chip en estados seleccionados. Pasa null aquí para no tener borde.
60 | interactionSource | La MutableInteractionSource representa el flujo de interacciones para este chip. Puedes crear y pasar tu propia MutableInteractionSource si deseas observar interacciones y personalizar la apariencia/comportamiento de este componente en diferentes interacciones.
61 |
62 |
63 |
64 |
65 | [comment]: <> (No modifiques el tip)
66 |
67 | :::tip[Fuente]
68 | Puedes acceder a la documentación oficial de InputChip de material 3:
69 | [desde aquí](https://developer.android.com/jetpack/compose/components/chip?hl=es-419#input).
70 | :::
71 |
72 | ### Ejemplo de Input Chip
73 |
74 |
75 |
76 |
77 |
78 |
79 | ```kotlin frame="terminal"
80 | @OptIn(ExperimentalMaterial3Api::class)
81 | @Composable
82 | fun exampleInputChip() {
83 | val isChipEnable by remember { mutableStateOf(true) }
84 |
85 | InputChip(
86 | modifier = Modifier.padding(20.dp),
87 | onClick = { Log.d("Input chip", "Hi from input chip") },
88 | label = { Text("Doc de Entrada") },
89 | selected = isChipEnable
90 | )
91 | }
92 | ```
93 |
94 |
95 |
--------------------------------------------------------------------------------
/src/content/docs/chips/suggestion-chip.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: SuggestionChip
3 | description: Aprende a usar el composable SuggestionChip en Jetpack Compose.
4 | ---
5 |
6 | import { Tabs, TabItem } from '@astrojs/starlight/components';
7 |
8 | [comment]: <> (La ruta siempre será assets/nombeComponente/componente-header.webp)
9 |
10 | | Material 3|
11 | | :------: |
12 | |  |
13 |
14 | El `SuggestionChip` tiene como propósito facilitar a los usuarios la refinación del contenido de un conjunto de opciones. Estos chips son interactivos, permitiendo a los usuarios seleccionar o deseleccionar las sugerencias según sus preferencias. Algunos SuggestionChips pueden incluir un ícono de marca de verificación, proporcionando una indicación visual clara de la selección realizada. Un caso típico de uso sería emplear estos chips para filtrar resultados en una lista o conjunto de datos, ofreciendo a los usuarios sugerencias contextuales y la capacidad de personalizar la información que desean ver.
15 |
16 | ## Implementación
17 |
18 | ### Definición del componente
19 |
20 | [comment]: <> (Añade un ``TabItem`` por cada tipo de implementación que tenga)
21 |
22 |
23 |
24 |
25 | ```kotlin frame="terminal"
26 | @ExperimentalMaterial3Api
27 | @Composable
28 | @ComposableInferredTarget
29 | public fun SuggestionChip(
30 | selected: Boolean,
31 | onClick: () -> Unit,
32 | label: @Composable () -> Unit,
33 | modifier: Modifier,
34 | enabled: Boolean,
35 | leadingIcon: @Composable() (() -> Unit)?,
36 | trailingIcon: @Composable() (() -> Unit)?,
37 | shape: Shape,
38 | colors: SelectableChipColors,
39 | elevation: SelectableChipElevation?,
40 | border: SelectableChipBorder?,
41 | interactionSource: MutableInteractionSource
42 | ): Unit
43 | ```
44 |
45 | Atributo | Descripción
46 | ------ | -----------
47 | selected | Indica si el chip está seleccionado o no.
48 | onClick | Se llama cuando se hace clic en el chip.
49 | label | El contenido del chip definido como un composable.
50 | modifier | Modificador que se aplicará al chip.
51 | enabled | Cuando está deshabilitado, el chip no responderá a la entrada del usuario. También aparecerá visualmente deshabilitado y desactivado para los servicios de accesibilidad.
52 | leadingIcon | Icono opcional que se mostrará al principio del chip, antes del texto de contenido.
53 | trailingIcon | Icono opcional que se mostrará al final del chip, después del texto de contenido.
54 | shape | La forma del chip, que puede ser un rectángulo, un círculo, etc.
55 | colors | `SelectableChipColors` que se utilizarán para determinar el color de fondo y contenido para este chip en diferentes estados. Consulta `ChipDefaults.selectableChipColors`.
56 | elevation | La elevación del chip, que afecta su sombra en estados seleccionados.
57 | border | Borde que se dibujará alrededor del chip en estados seleccionados. Pasa null aquí para no tener borde.
58 | interactionSource | La `MutableInteractionSource` representa el flujo de interacciones para este chip. Puedes crear y pasar tu propia `MutableInteractionSource` si deseas observar interacciones y personalizar la apariencia/comportamiento de este componente en diferentes interacciones.
59 |
60 |
61 |
62 |
63 | [comment]: <> (No modifiques el tip)
64 |
65 | :::tip[Fuente]
66 | Puedes acceder a la documentación oficial de SuggestionChip de material 3:
67 | [desde aquí](https://developer.android.com/jetpack/compose/components/chip?hl=es-419#suggestion).
68 | :::
69 |
70 | ### Ejemplo de Filter Chip
71 |
72 |
73 |
74 |
75 |
10 |
11 | Jetpack Compose es la nueva forma de crear vistas en Android utilizando únicamente Kotlin. Se trata de un kit de herramientas que nos permitirá compilar UIs nativas de una forma sencilla y rápida. Bajo la premisa de menos código y más potencia Google nos recomienda Jetpack Compose como la forma más optima para trabajar con vistas en Android.
12 |
13 | ## Listado de componentes
14 |
15 |
16 |
21 |
26 |
31 |
36 |
41 |
46 |
51 |
56 |
61 |
66 |
71 |
76 |
81 |
86 |
91 |
96 |
101 |
106 |
111 |
116 |
121 |
126 |
127 |
--------------------------------------------------------------------------------
/src/content/docs/index.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: OpenCompose
3 | description: La mayor base de datos de `composables` de habla hispana por y para la comunidad.
4 | template: splash
5 | hero:
6 | tagline: La mayor base de datos de @Composables de habla hispana por y para la comunidad.
7 | image:
8 | file: ../../assets/opencomposelogo.png
9 | actions:
10 | - text: ¡Ir a la documentación!
11 | link: /home/guide/
12 | icon: right-arrow
13 | variant: primary
14 | ---
15 |
16 | import { Card, CardGrid } from "@astrojs/starlight/components";
17 |
18 | ## Next steps
19 |
20 |
21 |
22 |
23 | Decenas de `Composables` preparados y configurados para que mejores tus
24 | proyectos.
25 |
26 |
27 |
28 | Puedes añadir más ejemplos, componentes o vistas completas. ¡Colaboremos entre
29 | todos para tener la mejor documentación de habla hispana!
30 |
31 |
32 |
33 | Entra al Discord de la comunidad.
34 |
35 |
36 |
37 | Suscríbete a
38 | [AristiDevs](https://www.youtube.com/channel/UCIjEgHA1vatSR2K4rfcdNRg?sub_confirmation=1)
39 | para más contenido y apoyar el proyecto.
40 |
41 |
42 |
--------------------------------------------------------------------------------
/src/content/docs/lists/lazy-row.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: LazyRow
3 | description: Aprende a usar el composable LazyRow en Jetpack Compose.
4 | ---
5 |
6 | import { Tabs, TabItem } from '@astrojs/starlight/components';
7 |
8 | | Material |
9 | | :----------------: |
10 | |  |
11 |
12 |
13 | El `LazyRow` es un componente que crea y dispone los elementos que están visibles en el viewport del mismo, produciendo un desplazamiento horizontal, este sigue los principios de un `RecyclerView`
14 | los cuales son --reciclar-- los elementos individuales, reutilizar la vista para los elementos nuevos que se desplazaron y permitir mostrarlos.
15 |
16 | El primer `LazyRow` estable se añadió en la versión 1.2 de Jetpack Compose, antes de este existió el `ScrollableRow` pero este ha sido removido de toda documentación oficial
17 | por el mismo motivo de incentivar/obligar el uso de su reemplazo `LazyRow`, previo a 1.2 existen referencias de este como un componente en desarrollo, cabe mencionar que `LazyRow` no pertenece a **material.io** por lo que sus variantes han sido las funciones de extensión que este permite
18 | y ciertas mejoras en su comportamiento/procesamiento, para saber más sobre por qué `ScrollableRow` fue reemplazado por `LazyRow` visita el commit ofical de AOSP [aquí.](https://android-review.googlesource.com/c/platform/frameworks/support/+/1530328)
19 |
20 | ## Implementación
21 |
22 | ### Definición del componente
23 |
24 | El componente se ha mantenido igual desde su versión en Jetpack Compose [1.2](https://developer.android.com/jetpack/androidx/releases/compose-foundation?hl=es-419#1.2.0)
25 |
26 |
27 |
28 |
29 | ```kotlin frame="terminal"
30 | @Composable
31 | fun LazyRow(
32 | modifier: Modifier = Modifier,
33 | state: LazyListState = rememberLazyListState(),
34 | contentPadding: PaddingValues = PaddingValues(0.dp),
35 | reverseLayout: Boolean = false,
36 | horizontalArrangement: Arrangement.Horizontal = if (!reverseLayout) Arrangement.Start else Arrangement.End,
37 | verticalAlignment: Alignment.Vertical = Alignment.Top,
38 | flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
39 | userScrollEnabled: Boolean = true,
40 | content: LazyListScope.() -> Unit
41 | )
42 | ```
43 |
44 | Atributo | Descripción
45 | ------ | -----------
46 | modifier | Modificador que implementará el composable (_Opcional_).
47 | state | Un objeto de estado que puede ser alojado para controlar y observar el desplazamiento (_Opcional_).
48 | contentPadding | Añade un espaciado de manera interna a lo largo de los lados del componente (_Opcional_).
49 | reverseLayout | Invertir la dirección de desplazamiento y diseño. Cuando es verdadero, los elementos se presentan en orden inverso (_Opcional_).
50 | horizontalArrangement | La disposición horizontal de los componentes hijos, permitiendo agregar espacios (_Opcional_).
51 | verticalAlignment | Aliniar los elementos verticalment (_Opcional_).
52 | flingBehavior | Lógica para personalizar el comportamiento del desplazamiento (_Opcional_).
53 | userScrollEnabled | Permite el desplazamiento a través de los gestos del usuario o las acciones de accesibilidad (_Opcional_).
54 | content | El contenido de la lista.
55 |
56 |
57 |
58 |
59 | :::tip[Fuente]
60 | Puedes acceder a la documentación oficial de Google
61 | [desde aquí](https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/package-summary#LazyRow(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,kotlin.Function1)).
62 | :::
63 |
64 | ### Ejemplos
65 | Existen tres formas para añadir elementos en `LazyRow` mediante sus funciones de extensión:
66 |
67 |
68 |
69 |
70 | ##### LazyRow con item
71 |
72 | Usando `item` para definir el elemento que será renderizarado en la pantalla, puedes declarar elemento por elemento simplemente instanciando un nuevo `item` en el contenido de `LazyRow`.
73 |
74 |
77 |
78 | ```kotlin frame="terminal"
79 | LazyRow(
80 | modifier = Modifier.padding(top = 16.dp)
81 | ) {
82 | contacts.forEach {
83 | item(it){
84 | Avatar(name = it, isFriend = Random.nextBoolean())
85 | }
86 | }
87 | }
88 | ```
89 |
90 | ##### LazyRow con items
91 |
92 | Con `items` debes definir el número total de elementos, consecuentemente la invocación lambda proporcionará el index de cada elemento con el nombre de `it`,
93 | esto parece ser lo mismo que un forEach como el ejemplo anterior pero difieren en sintaxis y método de iteración, el forEach itera directamente sobre los elementos de la lista mientras que `items` es más conciso y se basa en índices.
94 |
95 |
98 |
99 | ```kotlin frame="terminal"
100 | LazyRow(
101 | modifier = Modifier.padding(top = 16.dp)
102 | ) {
103 | items(contacts.size) { it ->
104 | Avatar(name = contacts[it] + it, isFriend = Random.nextBoolean())
105 | }
106 | }
107 | ```
108 |
109 | ##### LazyRow con itemsIndexed
110 |
111 | El uso de `itemsIndexed` permite acceder tanto al índice como al valor de cada elemento directamente dentro de la función Composable, lo que brinda más flexibilidad en la creación de elementos según la posición dentro de la lista.
112 |
113 |
116 |
117 | ```kotlin frame="terminal"
118 | LazyRow(
119 | modifier = Modifier.padding(top = 16.dp)
120 | ) {
121 | itemsIndexed(contacts) { index, contact ->
122 | Avatar(name = contact, isFriend = index % 2 == 0)
123 | }
124 | }
125 | ```
126 |
127 | :::note[Nota]
128 | Puedes combinar el uso de `item`, `items` e `itemsIndexed`, ¡En la misma `LazyRow`!
129 | :::
130 |
131 |
132 |
133 | :::tip[Fuente]
134 | Para saber más de estas funciones de extensión no dudes visitar la documentacion oficial [aquí](https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/package-summary#extension-functions)
135 | :::
--------------------------------------------------------------------------------
/src/content/docs/lists/list-item.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: List item
3 | description: El componente List item es un componente de Jetpack Compose que se utiliza para representar un elemento de una lista. Puede ser utilizado en cualquier tipo de lista, ya sea una lista vertical o horizontal.
4 | ---
5 |
6 |
7 | import { Tabs, TabItem } from "@astrojs/starlight/components";
8 |
9 | | Material| Material 3|
10 | | :----------------: | :------: |
11 | |
12 |
13 | El componente `ListItem` es un componente de `Jetpack Compose` que se utiliza para representar un elemento de una lista. Puede ser utilizado en cualquier tipo de lista, ya sea una lista vertical o horizontal.
14 |
15 | Cada elemento de la lista se muestra como una entidad independiente, con su propio conjunto de atributos, como texto, iconos e imágenes.
16 |
17 | Las listas tienden a tener una estructura más jerárquica, donde cada elemento de la lista ocupa su propio espacio y tiene el mismo peso visual.
18 | ## Implementación
19 |
20 | ### Definición del componente:
21 |
22 |
23 |
24 | ```kotlin frame="terminal"
25 | @Composable
26 | fun ListItem(
27 | text: String,
28 | modifier: Modifier = Modifier,
29 | onClick: () -> Unit = {},
30 | )
31 | ```
32 | #### Los parámetros del componente en Material son los siguientes:
33 | En Material, el componente List item se implementa como un componente independiente. Tiene los siguientes atributos:
34 |
35 | Atributo | Descripción
36 | ------ | -----------
37 | text | El texto que se mostrará en el elemento de la lista.
38 | modifier | El modifier que se aplicará al elemento de la lista.
39 | onClick | Una función que se ejecutará cuando el elemento de la lista sea tocado.
40 |
41 |
42 |
43 |
44 |
45 | En Material 3 los `ListItem` son increíblemente fácil e intuitivos. Para comenzar, deberás agregar la `dependencia` Material 3 a tu proyecto y luego simplemente agregar un componente `ListItem`.
46 |
47 | Uno de los principales beneficios de utilizar ListItem en Material 3 es que es increíblemente fácil de usar y personalizar. Esto lo convierte en un componente ideal para desarrolladores que desean crear listas hermosas y funcionales sin perder demasiado tiempo en la personalización.
48 |
49 | ```kotlin frame="terminal"
50 | @Composable
51 | fun ListItem(
52 | text: String,
53 | modifier: Modifier = Modifier,
54 | isChecked: Boolean,
55 | onClick: () -> Unit = {},
56 | )
57 |
58 | ```
59 | #### Los parámetros del componente en Material 3 son los siguientes:
60 |
61 | Atributo | Descripción
62 | ------ | -----------
63 | text | El texto que se mostrará en el elemento de la lista.
64 | modifier | El modifier que se aplicará al elemento de la lista.
65 | isChecked | Un booleano que indica si el elemento de la lista está seleccionado.
66 | onClick | Una función que se ejecutará cuando el elemento de la lista sea tocado.
67 |
68 |
69 |
70 |
71 |
72 |
73 | :::tip[Fuente]
74 | Puedes acceder a la documentación oficial de Google
75 | [desde aquí](https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary).
76 | :::
77 |
78 | ### Ejemplos
79 |
80 |
81 |
82 |
83 |
105 | ```kotlin frame="terminal"
106 | @Composable
107 | fun ItemMaterial3() {
108 | ListItem(
109 | headlineContent = { Text("Item de tres lineas") },
110 | overlineContent = { Text("OVERLINE") },
111 | supportingContent = { Text("Aris el mejor") },
112 | leadingContent = {
113 | Icon(
114 | Icons.Filled.Favorite,
115 | contentDescription = "Icono de corazon",
116 | )
117 | },
118 | trailingContent = { Text("JetpackCompose.Pro") }
119 | )
120 | }
121 | ```
122 |
123 | Utilizar ListItem en Material 3 es una excelente adición al desarrollo de aplicaciones de Android, ya que proporciona una forma sencilla y optimizada de crear listas además de LazyColumn o LazyRow.
124 |
125 | Este nuevo componente es fácil de usar y personalizar, incluso podríamos utilizarlo como un `scaffold` u otro tipo de layout dedicado a otros componentes.
126 |
127 | PD: ¡No tiene que usarse exclusivamente en un ListItem!
128 |
129 |
130 |
131 |
--------------------------------------------------------------------------------
/src/content/docs/menus/dropdown-menu-item.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: DropdownMenuItem
3 | description: Aprende a usar el composable DropdownMenuItem en Jetpack Compose.
4 | sidebar:
5 | order: 0
6 | ---
7 |
8 | import { Tabs, TabItem } from '@astrojs/starlight/components';
9 |
10 | | Material| Material 3|
11 | | :----------------: | :------: |
12 | ![Imagen del componente - Material [DropdownMenuItem]](../../../assets/menus/dropdownMenuItem/DropdownMenuItem-Material.png)|![Imagen del componente - Material 3 [DropdownMenu]](../../../assets/menus/dropdownMenuItem/DropdownMenuItem-Material3.png)
13 |
14 | DropdownMenuItem es un composable que representa un ítem dentro de un menú desplegable en Jetpack Compose. Es útil para mostrar una lista de opciones que el usuario puede seleccionar.
15 | ## Implementación
16 | ### Definición del componente
17 |
18 |
19 |
20 |
21 |
22 | ```kotlin frame="terminal"
23 | @Composable
24 | fun DropdownMenuItem(
25 | onClick: () -> Unit,
26 | modifier: Modifier = Modifier,
27 | enabled: Boolean = true,
28 | contentPadding: PaddingValues = MenuDefaults.ItemContentPadding,
29 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
30 | content: @Composable RowScope.() -> Unit
31 | )
32 | ```
33 | #### Los parámetros del componente en Material son los siguientes:
34 |
35 | Atributo | Descripción
36 | ------ | -----------
37 | onClick | Lambda que se invoca cuando se hace clic en el ítem.
38 | modifier | Modificador que implementará el composable.
39 | enabled | Indica si el ítem está habilitado para interacción.
40 | contentPadding | Espaciado interno alrededor del contenido del ítem.
41 | interactionSource | Fuente de interacción para manejar las interacciones del usuario.
42 | content | Contenido composable que se mostrará dentro del ítem.
43 |
44 |
45 |
46 |
47 | ```kotlin frame="terminal"
48 | @Composable
49 | fun DropdownMenuItem(
50 | text: @Composable () -> Unit,
51 | onClick: () -> Unit,
52 | modifier: Modifier = Modifier,
53 | leadingIcon: (@Composable () -> Unit)? = null,
54 | trailingIcon: (@Composable () -> Unit)? = null,
55 | enabled: Boolean = true,
56 | colors: MenuItemColors = MenuDefaults.itemColors(),
57 | contentPadding: PaddingValues = MenuDefaults.DropdownMenuItemContentPadding,
58 | interactionSource: MutableInteractionSource? = null
59 | )
60 | ```
61 | #### Los parámetros del componente DropdownMenu:
62 |
63 | Atributo | Descripción
64 | ------ | -----------
65 | text | texto del elemento del menú
66 | onClick | Lambda que se invoca cuando se hace clic en el ítem.
67 | modifier | Modificador que implementará el composable.
68 | leadingIcon | Icono inicial opcional que se mostrará al principio del texto del elemento.
69 | trailingIcon | Icono final opcional que se mostrará al final del texto del elemento. Esta ranura de icono final también puede aceptarse Textpara indicar un método abreviado de teclado.
70 | enabled | Controla el estado habilitado de este elemento de menú. Cuando sea así false, este componente no responderá a la entrada del usuario y aparecerá visualmente deshabilitado y deshabilitado para los servicios de accesibilidad.
71 | colors | MenuItemColorsque se utilizará para resolver los colores utilizados para este elemento de menú en diferentes estados. Ver MenuDefaults.itemColors.
72 | contentPadding | El espaciado aplicado al contenido de este elemento de menú.
73 | interactionSource | Un elevador opcional MutableInteractionSourcepara observar y emitir Interactionmensajes para este elemento del menú. Puede usar esto para cambiar la apariencia del elemento del menú o obtener una vista previa del elemento del menú en diferentes estados. Tenga en cuenta que, si nullse proporciona, las interacciones seguirán sucediendo internamente.
74 |
75 |
76 |
77 |
78 |
79 | [comment]: <> (No modifiques el tip)
80 |
81 | :::tip[Fuente]
82 | Puedes acceder a la documentación oficial de Google
83 | [desde aquí](https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary).
84 | :::
85 |
86 | ### Ejemplo de uso
87 |
88 |
89 |
90 |
91 |
92 |
126 |
127 | ```kotlin frame="terminal"
128 | var expanded by remember { mutableStateOf(false) }
129 |
130 | Box(modifier = Modifier.fillMaxSize().wrapContentSize(Alignment.TopStart)) {
131 | IconButton(onClick = { expanded = true }) {
132 | Icon(Icons.Default.MoreVert, contentDescription = "Localized description")
133 | }
134 | DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
135 | DropdownMenuItem(
136 | text = { Text("Edit") },
137 | onClick = { /* Handle edit! */ },
138 | leadingIcon = { Icon(Icons.Outlined.Edit, contentDescription = null) }
139 | )
140 | DropdownMenuItem(
141 | text = { Text("Settings") },
142 | onClick = { /* Handle settings! */ },
143 | leadingIcon = { Icon(Icons.Outlined.Settings, contentDescription = null) }
144 | )
145 | HorizontalDivider()
146 | DropdownMenuItem(
147 | text = { Text("Send Feedback") },
148 | onClick = { /* Handle send feedback! */ },
149 | leadingIcon = { Icon(Icons.Outlined.Email, contentDescription = null) },
150 | trailingIcon = { Text("F11", textAlign = TextAlign.Center) }
151 | )
152 | }
153 | }
154 | ```
155 |
156 |
157 |
158 |
159 |
--------------------------------------------------------------------------------
/src/content/docs/pickers/time-picker.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Time Picker
3 | description: Aprende a usar el composable Time Picker en Jetpack Compose.
4 | ---
5 | import { Tabs, TabItem } from '@astrojs/starlight/components';
6 |
7 |
8 | [comment]: <> (La ruta siempre será assets/nombeComponente/componente-header.webp)
9 |
10 | | Material3 |
11 | |-----------|
12 | |  |
13 |
14 | `Timepicker` ayuda a los usuarios a seleccionar un hora, o establecer una hora determinada.
15 |
16 | Muestra un selector que permite al usuario seleccionar la hora. Suscríbete a las actualizaciones a través de `TimePickerState`.
17 |
18 | ## Implementación
19 |
20 | ### Definición del componente
21 |
22 | [comment]: <> (Añade un ``TabItem`` por cada tipo de implementación que tenga)
23 |
24 |
25 |
26 |
27 | ```kotlin frame="terminal"
28 | @Composable
29 | @ExperimentalMaterial3Api
30 | fun TimePicker(
31 | state: TimePickerState,
32 | modifier: Modifier = Modifier,
33 | colors: TimePickerColors = TimePickerDefaults.colors(),
34 | layoutType: TimePickerLayoutType = TimePickerDefaults.layoutType(),
35 | )
36 | ```
37 |
38 | #### Parametros
39 |
40 | | Nombre| Descripción |
41 | |----------|----------|
42 | | state | Estado para este componente, permite suscribirse a cambios de `TimePickerState.hour` y `TimePickerState.minute`, y establecer la hora por defecto para este componente. |
43 | | modifiers| Modificador que va a ser aplicado a este componente |
44 | | colors | Colores `TimePickerColors` que seran usados para resolver los colores de este timepicker en diferentes estados. |
45 | |layoutType| Los diferentes `TimePickerLayoutType` soportados por este time picker, cambiara la posicion y tamaño de diferentes componentes de el timepicker |
46 |
47 |
48 |
49 |
50 |
51 |
52 | [comment]: <> (No modifiques el tip)
53 |
54 | :::tip[Fuente]
55 | Puedes acceder a la documentación oficial de Google
56 | [desde aquí](https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary).
57 | :::
58 |
59 | ### Ejemplos
60 |
61 |
62 |
63 |
64 | 
65 |
66 | ```kotlin frame="terminal"
67 | @Composable
68 | @ExperimentalMaterial3Api
69 | fun MyTimePicker(){
70 | val state = rememberTimePickerState()
71 | TimePicker(
72 | state = state,
73 | modifier = Modifier.padding(15.dp),
74 | colors = TimePickerDefaults.colors(),
75 | layoutType = TimePickerDefaults.layoutType()
76 | )
77 | Text(text = "Hora seleccionada H:M = ${state.hour} : ${state.minute}")
78 | }
79 | ```
80 |
81 |
82 |
--------------------------------------------------------------------------------
/src/content/docs/previews/preview.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Preview
3 | description: Aprende a personalizar la vista previa de tus componentes en Compose.
4 | ---
5 | import { Tabs, TabItem } from '@astrojs/starlight/components';
6 |
7 | Las `previews` son una característica de Jetpack Compose que te permite visualizar y probar tus composables directamente en Android Studio sin tener que ejecutar la aplicación completa. Esto facilita el desarrollo y la iteración rápida.
8 |
9 | ## Implementación
10 |
11 | ### Definición
12 |
13 | ```kotlin frame="terminal"
14 | @Preview(
15 | val name: String,
16 | val group: String,
17 | val apiLevel: Int,
18 | val widthDp: Int,
19 | val heightDp: Int,
20 | val locale: String,
21 | val fontScale: Float,
22 | val showSystemUi: Boolean,
23 | val showBackground: Boolean,
24 | val uiMode: Int,
25 | val device: String,
26 | val wallpaper: Int
27 | )
28 | @Composable
29 | fun MyComponent() { ... }
30 | ```
31 |
32 | Atributo | Descripción
33 | ------ | -----------
34 | name | El nombre que se mostrará en Android Studio para identificar la vista previa.
35 | group | Grupo al que pertenece la vista previa. Ayuda a organizar y agrupar vistas previas relacionadas.
36 | apiLevel | Nivel de la API de Android para el cual se debe renderizar la vista previa.
37 | widthDp | Ancho en píxeles de la vista previa. (No confundir con el ancho del componente)
38 | heightDp | Altura en píxeles de la vista previa. (No confundir con el alto del componente)
39 | locale | Configuración regional (idioma) para la vista previa.
40 | fontScale | Escala del tamaño de fuente para la vista previa.
41 | showSystemUi | Indica si se deben mostrar los elementos de la interfaz de usuario del sistema.
42 | showBackground | Indica si se debe mostrar el fondo de la vista previa.
43 | uiMode | Modo de interfaz de usuario para la vista previa (ej. Modo Oscuro).
44 | device | Dispositivo en el que se representa la vista previa
45 | wallpaper | Recurso de fondo de pantalla a utilizar en la vista previa.
46 |
47 | :::tip[Fuente]
48 | Puedes acceder a la documentación oficial de Google
49 | [desde aquí](https://developer.android.com/jetpack/compose/tooling/previews?hl=es-419).
50 | :::
51 |
52 | ### Ejemplos
53 | ```kotlin frame="terminal"
54 | @Preview(
55 | name = "MyComposable Preview",
56 | group = "MyGroup",
57 | apiLevel = Build.VERSION_CODES.O,
58 | widthDp = 360,
59 | heightDp = 640,
60 | locale = "en_US",
61 | fontScale = 1.2f,
62 | showBackground = true,
63 | wallpaper = R.drawable.wallpaper_preview
64 | )
65 | @Composable
66 | fun MyCompose() {
67 | // Tu código Compose aquí
68 | }
69 | ```
70 |
71 | :::note[Limitaciones]
72 | Si tu componente recibe parametros dentro de la funciòn no podra ser pre-visualizada, pero si deseas ver una vista previa de tu componente, crea una función test que mande los parametros al componente que deseas visualizar.
73 | :::
74 |
75 | ```kotlin frame="terminal"
76 | @Composable
77 | fun MyText( name: String ) {
78 | Text("Hola $name")
79 | }
80 |
81 | @Preview
82 | @Composable
83 | fun MyTextTest() {
84 | MyText("usuario")
85 | }
86 | ```
87 |
--------------------------------------------------------------------------------
/src/content/docs/progress-indicator/linear-progress-indicator.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Linear Progress Indicator
3 | description: Es una barra horizontal que se llena de izquierda a derecha.
4 | ---
5 |
6 |
7 | import { Tabs, TabItem } from '@astrojs/starlight/components';
8 |
9 | [comment]: <> (La ruta siempre será assets/nombeComponente/componente-header.webp)
10 |
11 | | Material | Material3 |
12 | |-----------|-----------|
13 | |  |  |
14 |
15 | Es una barra horizontal que se llena de izquierda a derecha.
16 | Los indicadores de progreso muestran visualmente el estado de una operación. Usan el movimiento para llamar la atención del usuario sobre qué tan cerca se encuentra el proceso (por ejemplo, cargar o procesar datos).
17 |
18 | También pueden indicar que el procesamiento se está llevando a cabo, sin hacer referencia a qué tan cerca está de completarse.
19 |
20 | ## Implementación
21 |
22 | ### Definición del componente
23 |
24 | [comment]: <> (Añade un `TabItem` por cada tipo de implementación que tenga)
25 |
26 |
27 |
28 |
29 | ```kotlin frame="terminal"
30 | @Composable
31 | fun LinearProgressIndicator(
32 | progress: @FloatRange(from = 0.0, to = 1.0) Float,
33 | modifier: Modifier = Modifier,
34 | color: Color = MaterialTheme.colors.primary,
35 | backgroundColor: Color = color.copy(alpha = IndicatorBackgroundOpacity),
36 | strokeCap: StrokeCap = StrokeCap.Butt
37 | )
38 | ```
39 | | Atributo | Descripción |
40 | |---------------|---------------|
41 | | progress | Es el progreso de este indicador, donde "0.0" representa ningún progreso y "1.0" representa el progreso completo. Los valores fuera de este rango son forzados a entrar en el rango. |
42 | | modifier | Modificador que implementará el composable. |
43 | | color | Color del indicador. |
44 | | backgroundColor | Color del fondo detras del indicador, visible cuando el progreso aun no ha rellenado el area del indicador. |
45 | | strokeCap | Capa para usar en los extremos del indicador. |
46 |
47 |
48 |
49 | ```kotlin frame="terminal"
50 | @Composable
51 | fun LinearProgressIndicator(
52 | progress: @FloatRange(from = 0.0, to = 1.0) Float,
53 | modifier: Modifier ,
54 | color: Color ,
55 | trackColor: Color ,
56 | strokeCap: StrokeCap
57 | )
58 | ```
59 | | Atributo | Descripción |
60 | |---------------|---------------|
61 | | progress | Es el progreso actual que muestra el indicador. Pasa un Float entre "0.0" y "1.0". |
62 | | modifier | Modificador que implementará el composable. |
63 | | color | Es el color del indicador real. Es decir, la parte del componente que refleja el progreso y que abarca por completo el componente cuando se completa el progreso. |
64 | | trackColor | El color del recorrido sobre el que se dibuja el indicador. |
65 | | strokeCap | Capa de trazado para usar en los extremos del indicador. |
66 |
67 |
68 |
69 | [comment]: <> (No modifiques el tip)
70 |
71 | :::tip[Fuente]
72 | Puedes acceder a la documentación oficial de Google
73 | [desde aquí](https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary).
74 | :::
75 |
76 | ### Ejemplos
77 |
78 |
79 |
80 | #### Indeterminados
81 | Se realiza la animación de forma continua sin tener en cuenta el progreso.
82 |
83 | 
84 | ```kotlin frame="terminal"
85 | @Composable
86 | fun IndeterminateInidicator() {
87 | Text("Indicador Indeterminado")
88 | Spacer(modifier = Modifier.height(30.dp))
89 | LinearProgressIndicator()
90 | }
91 | ```
92 | #### Determinados
93 | Muestra exactamente cuánto progreso se realizó.
94 | | Inicio | Cambio |
95 | |---------|---------|
96 | |  |  |
97 | ```kotlin frame="terminal"
98 | @Composable
99 | fun MyIndicator(){
100 | var progress by remember { mutableStateOf(0.1f) }
101 | val animatedProgress by animateFloatAsState(
102 | targetValue = progress,
103 | animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec, label = "label"
104 | )
105 | LinearProgressIndicator(progress = progress)
106 | Spacer(modifier = Modifier.height(30.dp))
107 | OutlinedButton(
108 | onClick = {
109 | if (progress < 1f) progress += 0.1f
110 | }
111 | ) {
112 | Text("Incrementar")
113 | }
114 | }
115 | ```
116 |
117 |
118 | #### Indeterminados
119 | Se realiza la animación de forma continua sin tener en cuenta el progreso.
120 |
121 | 
122 | ```kotlin frame="terminal"
123 | @Composable
124 | fun IndeterminateIndicator() {
125 | Text("Indicador Indeterminado")
126 | LinearProgressIndicator()
127 | }
128 | ```
129 | #### Determinados
130 | Muestra exactamente cuánto progreso se realizó.
131 | | Inicio | Cambio |
132 | |---------|---------|
133 | |  |  |
134 | ```kotlin frame="terminal"
135 | @Composable
136 | fun DeterminateLinearProgressIniciador() {
137 | var progress by remember { mutableStateOf(0.1f) }
138 | val animatedProgress = animateFloatAsState(
139 | targetValue = progress,
140 | animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec
141 | ).value
142 | Column(horizontalAlignment = Alignment.CenterHorizontally) {
143 | Spacer(modifier = Modifier.height(30.dp))
144 | Text("Determinado LinearProgressIndicator con botones")
145 | LinearProgressIndicator(progress = progress)
146 | Spacer(modifier = Modifier.height(30.dp))
147 | OutlinedButton(
148 | onClick = {
149 | if (progress < 1f) progress += 0.1f
150 | }) {
151 | Text("Incrementar")
152 | }
153 | OutlinedButton(
154 | onClick = {
155 | if (progress > 0f) progress -= 0.1f
156 | }
157 | ) {
158 | Text("Decrementar")
159 | }
160 | }
161 | }
162 | ```
163 |
164 |
--------------------------------------------------------------------------------
/src/content/docs/reference/example.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Example Reference
3 | description: A reference page in my new Starlight docs site.
4 | ---
5 |
6 | Reference pages are ideal for outlining how things work in terse and clear terms.
7 | Less concerned with telling a story or addressing a specific use case, they should give a comprehensive outline of what your documenting.
8 |
9 | ## Further reading
10 |
11 | - Read [about reference](https://diataxis.fr/reference/) in the Diátaxis framework
12 |
--------------------------------------------------------------------------------
/src/content/docs/sliders/section-slider.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Range Slider
3 | description: Aprende a usar el composable SectionSlider en Jetpack Compose.
4 | ---
5 |
6 | import { Tabs, TabItem } from '@astrojs/starlight/components';
7 |
8 | | Material| Material 3|
9 | | :----------------: | :------: |
10 | ![Imagen del componente - Material [RangeSlider]](../../../assets/sliders/range-sliders/range-slider.png)|![RangeSlider - Material 3 [RangeSliderM3]](../../../assets/sliders/range-sliders/range-slider-material3.png)
11 |
12 | El componente `RangeSlider` en Jetpack Compose es un control deslizante que permite a los usuarios seleccionar un rango de valores dentro de un intervalo definido. Es particularmente útil para casos donde se requiere especificar un rango, como en filtros de precios, selección de tiempo, o cualquier situación donde se necesite definir un mínimo y un máximo.
13 |
14 | ## Implementación
15 |
16 | ### Definición del componente
17 |
18 |
19 |
20 |
21 |
22 | ```kotlin frame="terminal"
23 | @Composable
24 | fun RangeSlider(
25 | value: ClosedFloatingPointRange,
26 | onValueChange: (ClosedFloatingPointRange) -> Unit,
27 | valueRange: ClosedFloatingPointRange = 0f..1f,
28 | steps: Int = 0,
29 | enabled: Boolean = true,
30 | colors: SliderColors = SliderDefaults.colors()
31 | )
32 | ```
33 | #### Los parámetros del componente en Material son los siguientes:
34 |
35 | Atributo | Descripción
36 | ------ | -----------
37 | `valueRange` | Define el rango de valores que el slider puede tomar. En este caso, va desde 0 hasta 100.
38 | `value` | Una tupla que representa los valores mínimos y máximos del rango seleccionado actualmente por el usuario.
39 | `onValueChange` | Un callback que se llama cuando el usuario desliza el control deslizante para cambiar los valores seleccionados.
40 | `steps` | Define el número de pasos discretos entre los valores mínimos y máximos del rango.
41 | `enabled` | Define si el slider está habilitado o no.
42 | `colors` | Los colores del slider en diferentes estados.
43 | `onValueChangeFinished` | Un callback opcional que se llama cuando el usuario finaliza de cambiar los valores.
44 |
45 |
46 |
47 |
48 |
49 | ```kotlin frame="terminal"
50 | @Composable
51 | fun RangeSlider(
52 | value: ClosedFloatingPointRange,
53 | onValueChange: (ClosedFloatingPointRange) -> Unit,
54 | valueRange: ClosedFloatingPointRange = 0f..1f,
55 | steps: Int = 0,
56 | enabled: Boolean = true,
57 | colors: SliderColors = SliderDefaults.colors()
58 | )
59 | ```
60 | #### Los parámetros del componente DropdownMenu:
61 |
62 | Atributo | Descripción
63 | ------ | -----------
64 | `valueRange` | Define el rango de valores que el slider puede tomar. En este caso, va desde 0 hasta 100.
65 | `value` | Una tupla que representa los valores mínimos y máximos del rango seleccionado actualmente por el usuario.
66 | `onValueChange` | Un callback que se llama cuando el usuario desliza el control deslizante para cambiar los valores seleccionados.
67 | `steps` | Define el número de pasos discretos entre los valores mínimos y máximos del rango.
68 | `enabled` | Define si el slider está habilitado o no.
69 | `colors` | Los colores del slider en diferentes estados.
70 | `onValueChangeFinished` | Un callback opcional que se llama cuando el usuario finaliza de cambiar los valores.
71 |
72 |
73 |
74 |
75 |
76 | [comment]: <> (No modifiques el tip)
77 |
78 | :::tip[Fuente]
79 | Puedes acceder a la documentación oficial de Google
80 | [desde aquí](https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary).
81 | :::
82 |
83 | ### Ejemplos
84 |
85 |
86 |
87 |
88 |
89 |
![Imagen del componente - Material [RangeSlider]](../../../assets/sliders/range-sliders/range-slider.png)
![RangeSlider - Material 3 [RangeSliderM3]](../../../assets/sliders/range-sliders/range-slider-material3.png)
117 |
118 | ```kotlin frame="terminal"
119 | @Composable
120 | fun RangeSliderExample() {
121 | var sliderPosition by remember { mutableStateOf(0f..100f) }
122 |
123 | Column(
124 | modifier = Modifier.padding(16.dp),
125 | horizontalAlignment = Alignment.CenterHorizontally
126 | ) {
127 | Text(text = "Selected range: ${sliderPosition.start} - ${sliderPosition.endInclusive}")
128 | RangeSlider(
129 | value = sliderPosition,
130 | onValueChange = { sliderPosition = it },
131 | onValueChangeFinished = {
132 | // Acción adicional después de que el usuario ha terminado de cambiar el valor
133 | },
134 | valueRange = 0f..100f,
135 | steps = 10,
136 | enabled = true,
137 | colors = SliderDefaults.colors()
138 | )
139 | }
140 | }
141 | ```
142 |
143 |
144 |
145 |
146 |
--------------------------------------------------------------------------------
/src/content/docs/sliders/slider.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Slider
3 | description: A guide in my new Starlight docs site.
4 | ---
--------------------------------------------------------------------------------
/src/content/docs/switch/switch.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Switch
3 | description: Aprende a usar el composable Switch en Jetpack Compose.
4 | sidebar:
5 | badge:
6 | text: Nuevo
7 | variant: tip
8 | ---
9 |
10 | import { Tabs, TabItem } from "@astrojs/starlight/components";
11 |
12 | 
13 |
14 | El componente `Switch` permite a los usuarios alternar entre dos estados: **marcado** y **desmarcado**. Se puede usar un interruptor (`Switch`) para permitir que el usuario realice por ejemplo, alguna de las siguientes acciones:
15 |
16 | - Activar o desactivar un parámetro de configuración.
17 | - Habilitar o inhabilitar una función en la app.
18 | - Seleccionar una opción.
19 |
20 | El componente tiene dos partes: el círculo(*Thumb*) y la pista(*Track*). El círculo es la parte arrastrable del interruptor, y la pista es el fondo. El usuario puede arrastrar el pulgar hacia la izquierda o la derecha para cambiar el estado del interruptor. También pueden presionar el interruptor y lograr el mismo resultado.
21 |
22 | ![Estructura del Switch [Switch]](../../../assets/switch/switch-structure.webp)
23 |
24 | ## Implementación
25 |
26 | ### Definición del componente
27 |
28 |
29 |
30 |
31 |
32 | ```kotlin frame="terminal"
33 | @Composable
34 | Switch(
35 | checked: Boolean,
36 | onCheckedChange: ((Boolean) -> Unit)?,
37 | modifier: Modifier = Modifier,
38 | enabled: Boolean = true,
39 | interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
40 | colors: SwitchColors = SwitchDefaults.colors()
41 | )
42 | ```
43 |
44 | - **checked**: Es el estado inicial del interruptor.
45 | - **onCheckedChange**: Es una devolución de llamada a la que se llama cuando cambia el estado del interruptor.
46 | - **modifier**: Modificador que implementará el composable (_Opcional_).
47 | - **enabled**: Indica si el interruptor está habilitado o inhabilitado.
48 | - **interactionSource**: Usa esta opción para personalizar el color de la ruta y el círculo. _(Representa un flujo de interacciones correspondientes a eventos emitidos por un componente)_
49 | - **colors**: Los colores que se usaron para el cambio.
50 |
51 |
52 |
53 |
54 |
55 | ```kotlin frame="terminal"
56 | @Composable
57 | Switch(
58 | checked: Boolean,
59 | onCheckedChange: ((Boolean) -> Unit)?,
60 | modifier: Modifier,
61 | thumbContent: (@Composable () -> Unit)?,
62 | enabled: Boolean,
63 | colors: SwitchColors,
64 | interactionSource: MutableInteractionSource
65 | )
66 | ```
67 |
68 | - **checked**: Es el estado inicial del interruptor.
69 | - **onCheckedChange**: Es una devolución de llamada a la que se llama cuando cambia el estado del interruptor.
70 | - **modifier**: Modificador que implementará el composable (_Opcional_).
71 | - **thumbContent**: Úsalo para personalizar la apariencia del círculo cuando está marcado.
72 | - **enabled**: Indica si el interruptor está habilitado o inhabilitado.
73 | - **colors**: Los colores que se usaron para el cambio.
74 | - **interactionSource**: Usa esta opción para personalizar el color de la ruta y el círculo. _(Representa un flujo de interacciones correspondientes a eventos emitidos por un componente)_
75 |
76 |
77 |
78 |
79 |
80 | :::tip[Fuente]
81 | Puedes acceder a la documentación oficial del componente
82 | [desde aquí](https://developer.android.com/jetpack/compose/components/switch?hl=es-419).
83 | :::
84 |
85 | ### Ejemplos
86 |
87 |
88 |
89 |
90 |
91 | ```kotlin "androidx.compose.material.Switch" title="SwitchM2Default" frame="terminal"
92 | import androidx.compose.material.Switch
93 | @Composable
94 | fun SwitchDefault() {
95 | val checkedState = remember { mutableStateOf(true) }
96 | Switch(
97 | checked = checkedState.value,
98 | onCheckedChange = { checkedState.value = it }
99 | )
100 | }
101 | ```
102 |
103 |
163 |
164 | */}
165 |
166 |
167 | :::note
168 | Puedes pasar cualquier elemento componible para el parámetro `thumbContent` (Material 3) a fin de crear una miniatura personalizada:
169 |