From f121fd3488d600f59d2009d2a741c32fd6aba722 Mon Sep 17 00:00:00 2001 From: Javier Date: Wed, 24 Jan 2024 16:53:32 -0300 Subject: [PATCH 01/10] Agregar slider.md y slider-header.webp --- src/assets/sliders/slider-header.webp | Bin 0 -> 2860 bytes src/content/docs/sliders/slider.md | 94 +++++++++++++++++++++++++- 2 files changed, 91 insertions(+), 3 deletions(-) create mode 100644 src/assets/sliders/slider-header.webp diff --git a/src/assets/sliders/slider-header.webp b/src/assets/sliders/slider-header.webp new file mode 100644 index 0000000000000000000000000000000000000000..dfdf3568d5a5f608acab908a7c36e8fe6ab306df GIT binary patch literal 2860 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 (La ruta siempre será assets/nombeComponente/componente-header.webp) + +![Imagen del componente slider](../../../assets/sliders/slider-header.webp) + +Un Jetpack Compose Slider es un componente que permite al usuario seleccionar un valor continuo entre dos extremos. El valor seleccionado se puede usar para controlar una función en la aplicación. + +## Implementación + +### Definición del componente + +[comment]: <> (Añade un ``TabItem`` por cada tipo de implementación que tenga) + + + + +```kotlin frame="terminal" +@Composable +fun SliderComposable() { +// DOS OPCIONES DE VARIABLES PARA QUE FUNCIONE: + var sliderStepPosition by remember { mutableFloatStateOf(0f) } + //var sliderStepPosition by remember { mutableStateOf(0f) } + Column { + Slider( + value = sliderStepPosition, + onValueChange = { sliderStepPosition = it }, + steps = 7, + valueRange = 0f..10f, + colors = SliderDefaults.colors( + thumbColor = MaterialTheme.colorScheme.primary, + activeTrackColor = MaterialTheme.colorScheme.primary, + inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer, + ) + ) + } +} +``` + +- value: Valor actual del Slider (inicializado en 0f en este caso). +- onValueChange: Cuando el valor del Slider cambia actualiza sliderStepPosition (var sliderStepPosition by remember). +- steps: Divide el rango de valores en pequeños puntos visibles en la barra, permitiendo solo valores específicos. +- valueRange: Establece el rango de valores inicial y final. +- colors (Personaliza los colores del Slider) +- - thumbColor: Color del círculo que se arrastra para ajustar el valor. + - activeTrackColor: Color de la parte activa de la barra del Slider. + - inactiveTrackColor: Color de la parte inactiva de la barra. + + + + +[comment]: <> (No modifiques el tip) + +:::tip[Fuente] +Puedes acceder a la documentación oficial de Google +[desde aquí](https://developer.android.com/jetpack/compose/components/slider?hl=en). +::: + +### Ejemplos + + + + +```kotlin frame="terminal" +@Composable +fun SliderComposableEjemplo1() { +// DOS OPCIONES DE VARIABLES PARA QUE FUNCIONE: + var sliderStepPosition by remember { mutableFloatStateOf(0f) } + //var sliderStepPosition by remember { mutableStateOf(0f) } + Column { + Slider( + value = sliderStepPosition, + onValueChange = { sliderStepPosition = it }, + colors = SliderDefaults.colors( + thumbColor = MaterialTheme.colorScheme.secondary, + activeTrackColor = MaterialTheme.colorScheme.secondary, + inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer, + ), + steps = 3, + valueRange = 0f..10f + ) + } +} +``` + + + From 42e7a65e386029e9cac4381ea6c44bb4fb096851 Mon Sep 17 00:00:00 2001 From: Javier Date: Wed, 24 Jan 2024 16:55:14 -0300 Subject: [PATCH 02/10] Agregar slider.md y slider-header.webp --- src/content/docs/sliders/slider.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/content/docs/sliders/slider.md b/src/content/docs/sliders/slider.md index 8646d40..c49259f 100644 --- a/src/content/docs/sliders/slider.md +++ b/src/content/docs/sliders/slider.md @@ -41,7 +41,6 @@ fun SliderComposable() { } } ``` - - value: Valor actual del Slider (inicializado en 0f en este caso). - onValueChange: Cuando el valor del Slider cambia actualiza sliderStepPosition (var sliderStepPosition by remember). - steps: Divide el rango de valores en pequeños puntos visibles en la barra, permitiendo solo valores específicos. @@ -51,7 +50,6 @@ fun SliderComposable() { - activeTrackColor: Color de la parte activa de la barra del Slider. - inactiveTrackColor: Color de la parte inactiva de la barra. - [comment]: <> (No modifiques el tip) @@ -87,6 +85,4 @@ fun SliderComposableEjemplo1() { } } ``` - - - + \ No newline at end of file From eef7c607eea4f776c71e17f8a5ffecdd3164d8e4 Mon Sep 17 00:00:00 2001 From: Javier Date: Sun, 4 Feb 2024 16:46:03 -0300 Subject: [PATCH 03/10] slider.mdx --- src/content/docs/sliders/{slider.md => slider.mdx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/content/docs/sliders/{slider.md => slider.mdx} (100%) diff --git a/src/content/docs/sliders/slider.md b/src/content/docs/sliders/slider.mdx similarity index 100% rename from src/content/docs/sliders/slider.md rename to src/content/docs/sliders/slider.mdx From 89f6a324df28ecdd7ef58dc893e13657e1c51392 Mon Sep 17 00:00:00 2001 From: Javier Date: Wed, 7 Feb 2024 15:56:39 -0300 Subject: [PATCH 04/10] slider.mdx --- src/content/docs/sliders/slider.mdx | 30 +++++++++++++---------------- 1 file changed, 13 insertions(+), 17 deletions(-) diff --git a/src/content/docs/sliders/slider.mdx b/src/content/docs/sliders/slider.mdx index c49259f..2349cb1 100644 --- a/src/content/docs/sliders/slider.mdx +++ b/src/content/docs/sliders/slider.mdx @@ -15,7 +15,6 @@ Un Jetpack Compose Slider es un componente que permite al usuario seleccionar un ### Definición del componente -[comment]: <> (Añade un ``TabItem`` por cada tipo de implementación que tenga) @@ -41,18 +40,20 @@ fun SliderComposable() { } } ``` -- value: Valor actual del Slider (inicializado en 0f en este caso). -- onValueChange: Cuando el valor del Slider cambia actualiza sliderStepPosition (var sliderStepPosition by remember). -- steps: Divide el rango de valores en pequeños puntos visibles en la barra, permitiendo solo valores específicos. -- valueRange: Establece el rango de valores inicial y final. -- colors (Personaliza los colores del Slider) -- - thumbColor: Color del círculo que se arrastra para ajustar el valor. - - activeTrackColor: Color de la parte activa de la barra del Slider. - - inactiveTrackColor: Color de la parte inactiva de la barra. +Atributo | Descripción +------ | ----------- +value | Valor actual del Slider (inicializado en 0f en este caso). +onValueChange | Cuando el valor del Slider cambia actualiza sliderStepPosition (var sliderStepPosition by remember). +steps | Divide el rango de valores en pequeños puntos visibles en la barra, permitiendo solo valores específicos. +valueRange | Establece el rango de valores inicial y final. +colors (Personaliza los colores del Slider) +thumbColor | Color del círculo que se arrastra para ajustar el valor. +activeTrackColor | Color de la parte activa de la barra del Slider. +inactiveTrackColor | Color de la parte inactiva de la barra. - -[comment]: <> (No modifiques el tip) + + :::tip[Fuente] Puedes acceder a la documentación oficial de Google @@ -60,10 +61,6 @@ Puedes acceder a la documentación oficial de Google ::: ### Ejemplos - - - - ```kotlin frame="terminal" @Composable fun SliderComposableEjemplo1() { @@ -84,5 +81,4 @@ fun SliderComposableEjemplo1() { ) } } -``` - \ No newline at end of file +``` \ No newline at end of file From d3c2a062ef1671961223cb7d02ceb4d2d79f2b14 Mon Sep 17 00:00:00 2001 From: Javier Date: Tue, 13 Feb 2024 14:15:40 -0300 Subject: [PATCH 05/10] 20230213 slider --- src/assets/sliders/slider-header-material-3.png | Bin 0 -> 4097 bytes .../sliders/slider-header-material.png.png | Bin 0 -> 4890 bytes src/assets/sliders/slider-header.webp | Bin 2860 -> 0 bytes src/content/docs/sliders/slider.mdx | 10 +++++++--- 4 files changed, 7 insertions(+), 3 deletions(-) create mode 100644 src/assets/sliders/slider-header-material-3.png create mode 100644 src/assets/sliders/slider-header-material.png.png delete mode 100644 src/assets/sliders/slider-header.webp diff --git a/src/assets/sliders/slider-header-material-3.png b/src/assets/sliders/slider-header-material-3.png new file mode 100644 index 0000000000000000000000000000000000000000..c213182d884119b48de1ce84a33493ab37896e85 GIT binary patch literal 4097 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 B6+r+1 literal 0 HcmV?d00001 diff --git a/src/assets/sliders/slider-header.webp b/src/assets/sliders/slider-header.webp deleted file mode 100644 index dfdf3568d5a5f608acab908a7c36e8fe6ab306df..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2860 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 (La ruta siempre será assets/nombeComponente/componente-header.webp) -![Imagen del componente slider](../../../assets/sliders/slider-header.webp) -Un Jetpack Compose Slider es un componente que permite al usuario seleccionar un valor continuo entre dos extremos. El valor seleccionado se puede usar para controlar una función en la aplicación. +| Material| Material 3| +| :----------------: | :------: | +| ![Imagen del componente Button - Material](../../../assets/sliders/slider-header.webp) | ![Imagen del componente Button - Material 3](../../../assets/sliders/slider-header.webp) | + + +Un ```Slider``` es un componente que permite al usuario seleccionar un valor continuo entre dos extremos. El valor seleccionado se puede usar para controlar una función en la aplicación. ## Implementación From 8084267b75e45b6c26d82d345ab0c3d3b4f0fff2 Mon Sep 17 00:00:00 2001 From: Javier Date: Tue, 13 Feb 2024 14:30:25 -0300 Subject: [PATCH 06/10] 20230213 slider --- src/content/docs/sliders/slider.mdx | 160 +++++++++++++++++++--------- 1 file changed, 110 insertions(+), 50 deletions(-) diff --git a/src/content/docs/sliders/slider.mdx b/src/content/docs/sliders/slider.mdx index 54f51cf..744bd53 100644 --- a/src/content/docs/sliders/slider.mdx +++ b/src/content/docs/sliders/slider.mdx @@ -1,88 +1,148 @@ --- title: slider description: Aprende a usar el composable slider en Jetpack Compose. +sidebar: + order: 0 --- import { Tabs, TabItem } from '@astrojs/starlight/components'; [comment]: <> (La ruta siempre será assets/nombeComponente/componente-header.webp) - | Material| Material 3| | :----------------: | :------: | -| ![Imagen del componente Button - Material](../../../assets/sliders/slider-header.webp) | ![Imagen del componente Button - Material 3](../../../assets/sliders/slider-header.webp) | - +| ![Imagen del componente Button - Material](../../../assets/buttons/sliders/slider-header-material.png) | ![Imagen del componente Button - Material 3](../../../assets/sliders/slider-header-material-3.png) | -Un ```Slider``` es un componente que permite al usuario seleccionar un valor continuo entre dos extremos. El valor seleccionado se puede usar para controlar una función en la aplicación. +Los `slider` es un componente que permite al usuario seleccionar un valor continuo entre dos extremos. El valor seleccionado se puede usar para controlar una función en la aplicación. ## Implementación ### Definición del componente +[comment]: <> (Añade un ``TabItem`` por cada tipo de implementación que tenga) ```kotlin frame="terminal" @Composable -fun SliderComposable() { -// DOS OPCIONES DE VARIABLES PARA QUE FUNCIONE: - var sliderStepPosition by remember { mutableFloatStateOf(0f) } - //var sliderStepPosition by remember { mutableStateOf(0f) } - Column { - Slider( - value = sliderStepPosition, - onValueChange = { sliderStepPosition = it }, - steps = 7, - valueRange = 0f..10f, - colors = SliderDefaults.colors( - thumbColor = MaterialTheme.colorScheme.primary, - activeTrackColor = MaterialTheme.colorScheme.primary, - inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer, - ) - ) - } -} +fun Slider( + value: Float, + onValueChange: (Float) -> Unit, + modifier: Modifier = Modifier, + enabled: Boolean = true, + valueRange: ClosedFloatingPointRange = 0f..1f, + steps: Int = 0, + onDragStarted: () -> Unit = {}, + onDragStopped: () -> Unit = {}, + colors: SliderColors = SliderDefaults.colors(), + trackShape: Shape = SliderDefaults.trackShape, + thumbShape: Shape = SliderDefaults.thumbShape, + tickShape: Shape = SliderDefaults.tickShape, + tickPositions: List = emptyList(), + tickLabelFormatter: (Float) -> String = { it.toString() }, + label: @Composable (Float) -> Unit = {}, +) ``` Atributo | Descripción ------ | ----------- -value | Valor actual del Slider (inicializado en 0f en este caso). -onValueChange | Cuando el valor del Slider cambia actualiza sliderStepPosition (var sliderStepPosition by remember). -steps | Divide el rango de valores en pequeños puntos visibles en la barra, permitiendo solo valores específicos. -valueRange | Establece el rango de valores inicial y final. -colors (Personaliza los colores del Slider) -thumbColor | Color del círculo que se arrastra para ajustar el valor. -activeTrackColor | Color de la parte activa de la barra del Slider. -inactiveTrackColor | Color de la parte inactiva de la barra. +value | Valor actual del slider. +onValueChange | Función lambda que se ejecutará cuando el usuario cambie el valor del slider. +modifier | Modificador que implementará el composable. +enabled | Habilita o deshabilita el slider. +valueRange | Rango de valores que el usuario puede seleccionar. +steps | Número de pasos discretos en los que se puede mover el slider. +onDragStarted | Función lambda que se ejecutará cuando el usuario comience a arrastrar el thumb del slider. +onDragStopped | Función lambda que se ejecutará cuando el usuario detenga el arrastre del thumb del slider. +colors | Permite modificar los colores del slider. +trackShape | Define la forma de la pista del slider. +thumbShape | Define la forma del thumb del slider. +tickShape | Define la forma de las marcas del slider. +tickPositions | Lista de posiciones de las marcas del slider. +tickLabelFormatter | Función lambda que formatea el texto de las marcas del slider. +label | Función lambda que muestra una etiqueta junto al slider. + + +```kotlin frame="terminal" +@Composable +fun Slider( + value: Float, + onValueChange: (Float) -> Unit, + modifier: Modifier = Modifier, + enabled: Boolean = true, + valueRange: ClosedFloatingPointRange = 0f..1f, + steps: Int = 0, + onDragStarted: () -> Unit = {}, + onDragStopped: () -> Unit = {}, + colors: SliderColors = SliderDefaults.colors(), + trackShape: Shape = SliderDefaults.trackShape, + thumbShape: Shape = SliderDefaults.thumbShape, + tickShape: Shape = SliderDefaults.tickShape, + tickPositions: List = emptyList(), + tickLabelFormatter: (Float) -> String = { it.toString() }, + label: @Composable (Float) -> Unit = {}, +) +``` + +Atributo | Descripción +------ | ----------- +value | Valor actual del slider. +onValueChange | Función lambda que se ejecutará cuando el usuario cambie el valor del slider. +modifier | Modificador que implementará el composable. +enabled | Habilita o deshabilita el slider. +valueRange | Rango de valores que el usuario puede seleccionar. +steps | Número de pasos discretos en los que se puede mover el slider. +onDragStarted | Función lambda que se ejecutará cuando el usuario comience a arrastrar el thumb del slider. +onDragStopped | Función lambda que se ejecutará cuando el usuario detenga el arrastre del thumb del slider. +colors | Permite modificar los colores del slider. +trackShape | Define la forma de la pista del slider. +thumbShape | Define la forma del thumb del slider. +tickShape | Define la forma de +[comment]: <> (No modifiques el tip) + :::tip[Fuente] Puedes acceder a la documentación oficial de Google -[desde aquí](https://developer.android.com/jetpack/compose/components/slider?hl=en). +[desde aquí](https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary). ::: -### Ejemplos +### Ejemplos + + + + +
![Imagen del componente Button - Material](../../../assets/buttons/button/button-header-material.png)
+ +```kotlin frame="terminal" +@Composable +fun SliderExample() { + var sliderValue by remember { mutableStateOf(0.5f) } + Slider( + value = sliderValue, + onValueChange = { sliderValue = it }, + ) +} +``` + + + + +
![Imagen del componente Button - Material 3](../../../assets/buttons/button/button-header-material-3.png)
+ ```kotlin frame="terminal" @Composable -fun SliderComposableEjemplo1() { -// DOS OPCIONES DE VARIABLES PARA QUE FUNCIONE: - var sliderStepPosition by remember { mutableFloatStateOf(0f) } - //var sliderStepPosition by remember { mutableStateOf(0f) } - Column { - Slider( - value = sliderStepPosition, - onValueChange = { sliderStepPosition = it }, - colors = SliderDefaults.colors( - thumbColor = MaterialTheme.colorScheme.secondary, - activeTrackColor = MaterialTheme.colorScheme.secondary, - inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer, - ), - steps = 3, - valueRange = 0f..10f - ) - } +fun SliderExample() { + var sliderValue by remember { mutableStateOf(0.5f) } + + Slider( + value = sliderValue, + onValueChange = { sliderValue = it }, + ) } -``` \ No newline at end of file +```x + + \ No newline at end of file From 70d4a492dffca2562e2ba6bccf82390897ae91bb Mon Sep 17 00:00:00 2001 From: Javier Date: Tue, 13 Feb 2024 14:31:19 -0300 Subject: [PATCH 07/10] 20230213 slider --- src/content/docs/sliders/slider.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/sliders/slider.mdx b/src/content/docs/sliders/slider.mdx index 744bd53..ebacc09 100644 --- a/src/content/docs/sliders/slider.mdx +++ b/src/content/docs/sliders/slider.mdx @@ -143,6 +143,6 @@ fun SliderExample() { onValueChange = { sliderValue = it }, ) } -```x +``` \ No newline at end of file From 1dfebc97429c40e39b409a815bcee565de891002 Mon Sep 17 00:00:00 2001 From: Javier <153746688+JahsoftWr@users.noreply.github.com> Date: Tue, 13 Feb 2024 15:28:43 -0300 Subject: [PATCH 08/10] Update slider.mdx --- src/content/docs/sliders/slider.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/docs/sliders/slider.mdx b/src/content/docs/sliders/slider.mdx index ebacc09..8d1285e 100644 --- a/src/content/docs/sliders/slider.mdx +++ b/src/content/docs/sliders/slider.mdx @@ -11,7 +11,7 @@ import { Tabs, TabItem } from '@astrojs/starlight/components'; | Material| Material 3| | :----------------: | :------: | -| ![Imagen del componente Button - Material](../../../assets/buttons/sliders/slider-header-material.png) | ![Imagen del componente Button - Material 3](../../../assets/sliders/slider-header-material-3.png) | +| ![Imagen del componente Button - Material](../../../assets/buttons/sliders/slider-header-material.png) | ![Imagen del componente Button - Material 3](../../../assets/sliders/slider-header-material-3.png) | Los `slider` es un componente que permite al usuario seleccionar un valor continuo entre dos extremos. El valor seleccionado se puede usar para controlar una función en la aplicación. @@ -145,4 +145,4 @@ fun SliderExample() { } ``` - \ No newline at end of file + From 74e5181aec5d5c7d790e7ea07245a2d472c3fbc9 Mon Sep 17 00:00:00 2001 From: Javier <153746688+JahsoftWr@users.noreply.github.com> Date: Tue, 13 Feb 2024 20:18:27 -0300 Subject: [PATCH 09/10] Update slider.mdx --- src/content/docs/sliders/slider.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/docs/sliders/slider.mdx b/src/content/docs/sliders/slider.mdx index 8d1285e..7532cca 100644 --- a/src/content/docs/sliders/slider.mdx +++ b/src/content/docs/sliders/slider.mdx @@ -11,7 +11,7 @@ import { Tabs, TabItem } from '@astrojs/starlight/components'; | Material| Material 3| | :----------------: | :------: | -| ![Imagen del componente Button - Material](../../../assets/buttons/sliders/slider-header-material.png) | ![Imagen del componente Button - Material 3](../../../assets/sliders/slider-header-material-3.png) | +| ![Imagen del componente Button - Material](../../../assets/sliders/slider-header-material.png) | ![Imagen del componente Button - Material 3](../../../assets/sliders/slider-header-material-3.png) | Los `slider` es un componente que permite al usuario seleccionar un valor continuo entre dos extremos. El valor seleccionado se puede usar para controlar una función en la aplicación. @@ -115,7 +115,7 @@ Puedes acceder a la documentación oficial de Google -
![Imagen del componente Button - Material](../../../assets/buttons/button/button-header-material.png)
+
![Imagen del componente Button - Material](../../../assets/sliders/slider-header-material.png)
```kotlin frame="terminal" @Composable @@ -131,7 +131,7 @@ fun SliderExample() { -
![Imagen del componente Button - Material 3](../../../assets/buttons/button/button-header-material-3.png)
+
![Imagen del componente Button - Material 3](../../../assets/sliders/slider-header-material-3.png)
```kotlin frame="terminal" @Composable From 8f0e9fde21fbde0c8e4566c3baa5b3bc13479ec9 Mon Sep 17 00:00:00 2001 From: Javier <153746688+JahsoftWr@users.noreply.github.com> Date: Mon, 19 Feb 2024 11:25:30 -0300 Subject: [PATCH 10/10] Rename slider-header-material.png.png to slider-header-material.png --- ...-material.png.png => slider-header-material.png} | Bin 1 file changed, 0 insertions(+), 0 deletions(-) rename src/assets/sliders/{slider-header-material.png.png => slider-header-material.png} (100%) diff --git a/src/assets/sliders/slider-header-material.png.png b/src/assets/sliders/slider-header-material.png similarity index 100% rename from src/assets/sliders/slider-header-material.png.png rename to src/assets/sliders/slider-header-material.png