From f121fd3488d600f59d2009d2a741c32fd6aba722 Mon Sep 17 00:00:00 2001 From: Javier Date: Wed, 24 Jan 2024 16:53:32 -0300 Subject: [PATCH 1/6] 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 2/6] 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 5c24e54b887b4ebcaa26f8c25433415d399f5ddf Mon Sep 17 00:00:00 2001 From: Javier Date: Thu, 25 Jan 2024 12:59:19 -0300 Subject: [PATCH 3/6] Cambie slider.md a 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 b295e33e107ae9f03ef66f08b8831d7dfb43ffaa Mon Sep 17 00:00:00 2001 From: Javier Date: Thu, 25 Jan 2024 13:16:29 -0300 Subject: [PATCH 4/6] Cambie slider.md a slider.mdx y deje slider.md --- src/content/docs/sliders/slider.md | 80 +++++++++++++++++++++++++++++ src/content/docs/sliders/slider.mdx | 5 ++ 2 files changed, 85 insertions(+) create mode 100644 src/content/docs/sliders/slider.md diff --git a/src/content/docs/sliders/slider.md b/src/content/docs/sliders/slider.md new file mode 100644 index 0000000..66b8ae8 --- /dev/null +++ b/src/content/docs/sliders/slider.md @@ -0,0 +1,80 @@ +--- +title: slider (Control deslizante) +description: Aprende a usar el composable slider en Jetpack Compose. +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +[comment]: <> (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 + ) + } +} +``` + \ No newline at end of file diff --git a/src/content/docs/sliders/slider.mdx b/src/content/docs/sliders/slider.mdx index c49259f..77d3477 100644 --- a/src/content/docs/sliders/slider.mdx +++ b/src/content/docs/sliders/slider.mdx @@ -21,6 +21,7 @@ Un Jetpack Compose Slider es un componente que permite al usuario seleccionar un ```kotlin frame="terminal" + @Composable fun SliderComposable() { // DOS OPCIONES DE VARIABLES PARA QUE FUNCIONE: @@ -40,7 +41,9 @@ 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. @@ -65,6 +68,7 @@ Puedes acceder a la documentación oficial de Google ```kotlin frame="terminal" + @Composable fun SliderComposableEjemplo1() { // DOS OPCIONES DE VARIABLES PARA QUE FUNCIONE: @@ -85,4 +89,5 @@ fun SliderComposableEjemplo1() { } } ``` + \ No newline at end of file From fb382464b292ca1860a3985ebcdea16a5c316201 Mon Sep 17 00:00:00 2001 From: Javier <153746688+JahsoftWr@users.noreply.github.com> Date: Fri, 26 Jan 2024 13:09:32 -0300 Subject: [PATCH 5/6] Delete src/content/docs/sliders/slider.md --- src/content/docs/sliders/slider.md | 80 ------------------------------ 1 file changed, 80 deletions(-) delete mode 100644 src/content/docs/sliders/slider.md diff --git a/src/content/docs/sliders/slider.md b/src/content/docs/sliders/slider.md deleted file mode 100644 index 66b8ae8..0000000 --- a/src/content/docs/sliders/slider.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: slider (Control deslizante) -description: Aprende a usar el composable slider en Jetpack Compose. ---- - -import { Tabs, TabItem } from '@astrojs/starlight/components'; - -[comment]: <> (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 - ) - } -} -``` - \ No newline at end of file From 2a91ef300729680d76d1d8b1c8cf55d4e71b63df Mon Sep 17 00:00:00 2001 From: Javier Date: Fri, 26 Jan 2024 13:17:00 -0300 Subject: [PATCH 6/6] slider.md Borrado --- src/content/docs/sliders/slider.md | 80 ------------------------------ 1 file changed, 80 deletions(-) delete mode 100644 src/content/docs/sliders/slider.md diff --git a/src/content/docs/sliders/slider.md b/src/content/docs/sliders/slider.md deleted file mode 100644 index 66b8ae8..0000000 --- a/src/content/docs/sliders/slider.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: slider (Control deslizante) -description: Aprende a usar el composable slider en Jetpack Compose. ---- - -import { Tabs, TabItem } from '@astrojs/starlight/components'; - -[comment]: <> (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 - ) - } -} -``` - \ No newline at end of file