From 172e34ad667153f571532a830a4d0cd084af260a Mon Sep 17 00:00:00 2001 From: Yuri Montero Cano Date: Thu, 5 Mar 2026 22:11:02 +0100 Subject: [PATCH 1/2] Add PreviewParameter docs and example image Add a new Spanish documentation page for PreviewParameter (src/content/docs/previews/preview-paramenter.mdx) with explanations, Kotlin examples demonstrating @PreviewParameter and a PreviewParameterProvider (including custom display names), and a link to the official Android docs. Also add the example image used by the doc at src/assets/previews/preview-parameter/preview-parameter-example.png. --- .../preview-parameter-example.png | Bin 0 -> 9162 bytes .../docs/previews/preview-paramenter.mdx | 91 ++++++++++++++++++ 2 files changed, 91 insertions(+) create mode 100644 src/assets/previews/preview-parameter/preview-parameter-example.png create mode 100644 src/content/docs/previews/preview-paramenter.mdx diff --git a/src/assets/previews/preview-parameter/preview-parameter-example.png b/src/assets/previews/preview-parameter/preview-parameter-example.png new file mode 100644 index 0000000000000000000000000000000000000000..27d277e87f3fd7b8fa2762dd3fa32b9c505b2eff GIT binary patch literal 9162 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 literal 0 HcmV?d00001 diff --git a/src/content/docs/previews/preview-paramenter.mdx b/src/content/docs/previews/preview-paramenter.mdx new file mode 100644 index 0000000..535f9fc --- /dev/null +++ b/src/content/docs/previews/preview-paramenter.mdx @@ -0,0 +1,91 @@ +--- +title: PreviewParameter +description: Aprende a personalizar la vista previa de tus componentes en Compose. +--- + +A menudo surge la necesidad de pasar un gran conjunto de datos a la vista previa componible. Para ello, basta con pasar datos de muestra a una función de vista previa componible añadiendo un parámetro con la anotación `@PreviewParameter`. + +## Implementación + +### Definición + +```kotlin frame="terminal" +@Preview(showBackground = true) +@Composable +fun myContentPreview( + @PreviewParameter(StateProvider::class, limit = 2) state: State +) { + myContent(state, {}) +} +``` + +Para proporcionar los datos de muestra, crea una clase que implemente `PreviewParameterProvider y muestre los datos de muestra como una secuencia. + +```kotlin frame="terminal" +class StateProvider : PreviewParameterProvider { + + override val values = sequenceOf( + State(isChecked = true), + State(isChecked = false) + ) +} +``` +Se renderizará una vista previa por elemento de datos en la secuencia: + +![Imagen del ejemplo de PreviewParameter](../../../assets/previews/preview-parameter/preview-parameter-example.png) + +:::tip[Fuente] +Puedes acceder a la documentación oficial de Google +[desde aquí](https://developer.android.com/develop/ui/compose/tooling/previews?hl=es-419#preview-data). +::: + +### Ejemplos + +Las vistas previas que usan `@PreviewParameter` se nombran de forma predeterminada con el índice del parámetro y el nombre de la propiedad (usuario 0, usuario 1, usuario 2, etcétera), lo que puede dificultar su diferenciación. Para mejorar la claridad de la vista previa, puedes proporcionar nombres visibles personalizados para cada vista previa anulando `getDisplayName()` en tu `PreviewParameterProvider. Esto ayuda a distinguir entre diferentes variaciones de datos o estados de la IU. Por ejemplo, puedes etiquetar las vistas previas según los datos de entrada: + +```kotlin frame="terminal" +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.size +import androidx.compose.material3.Switch +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.tooling.preview.PreviewParameter +import androidx.compose.ui.tooling.preview.PreviewParameterProvider +import androidx.compose.ui.unit.dp + +data class State(val isChecked: Boolean) + +@Composable +fun myContent(state: State, onCheckedChange: (boolean: Boolean) -> Unit) { + Box( + modifier = Modifier.size(128.dp) + ) { + Switch( + checked = state.isChecked, + onCheckedChange = { onCheckedChange(it) } + ) + } +} + +@Preview(showBackground = true) +@Composable +fun myContentPreview( + @PreviewParameter(StateProvider::class, limit = 2) state: State +) { + myContent(state, {}) +} + +class StateProvider : PreviewParameterProvider { + private val stateList = listOf( + State(isChecked = true), + State(isChecked = false) + ) + + override val values = stateList.asSequence() + + override fun getDisplayName(index: Int): String { + return stateList[index].isChecked.toString() + } +} +``` From 98c60df936019e47eb0d92183c764c2ae02beaed Mon Sep 17 00:00:00 2001 From: Yuri Montero Cano Date: Mon, 9 Mar 2026 10:11:22 +0100 Subject: [PATCH 2/2] Fix preview-parameter filename and text Rename src/content/docs/previews/preview-paramenter.mdx to preview-parameter.mdx to correct a typo, and update the example wording to reference the default preview names as "state 0, state 1..." instead of "usuario 0...". No functional changes; clarifies documentation wording. --- .../previews/{preview-paramenter.mdx => preview-parameter.mdx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/content/docs/previews/{preview-paramenter.mdx => preview-parameter.mdx} (85%) diff --git a/src/content/docs/previews/preview-paramenter.mdx b/src/content/docs/previews/preview-parameter.mdx similarity index 85% rename from src/content/docs/previews/preview-paramenter.mdx rename to src/content/docs/previews/preview-parameter.mdx index 535f9fc..8849b69 100644 --- a/src/content/docs/previews/preview-paramenter.mdx +++ b/src/content/docs/previews/preview-parameter.mdx @@ -41,7 +41,7 @@ Puedes acceder a la documentación oficial de Google ### Ejemplos -Las vistas previas que usan `@PreviewParameter` se nombran de forma predeterminada con el índice del parámetro y el nombre de la propiedad (usuario 0, usuario 1, usuario 2, etcétera), lo que puede dificultar su diferenciación. Para mejorar la claridad de la vista previa, puedes proporcionar nombres visibles personalizados para cada vista previa anulando `getDisplayName()` en tu `PreviewParameterProvider. Esto ayuda a distinguir entre diferentes variaciones de datos o estados de la IU. Por ejemplo, puedes etiquetar las vistas previas según los datos de entrada: +Las vistas previas que usan `@PreviewParameter` se nombran de forma predeterminada con el índice del parámetro y el nombre de la propiedad (state 0, state 1, state 2, etcétera), lo que puede dificultar su diferenciación. Para mejorar la claridad de la vista previa, puedes proporcionar nombres visibles personalizados para cada vista previa anulando `getDisplayName()` en tu `PreviewParameterProvider. Esto ayuda a distinguir entre diferentes variaciones de datos o estados de la IU. Por ejemplo, puedes etiquetar las vistas previas según los datos de entrada: ```kotlin frame="terminal" import androidx.compose.foundation.layout.Box