---
# System prepended metadata

title: '[CSA0X] Divide y venceras con `Divider`'
tags: [blog, compose, csa]

---

# [CSA0X] Divide y venceras con `Divider`

###### tags: `blog`, `compose`, `csa`

## La función `Divider`

Es bastante habitual en los diseños Material la inclusión de líneas que hacen de separadores de secciones de la vista. Para realizar esto en Compose, tenemos la función `Divider`.

```kotlin=
@Composable
fun Divider(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.onSurface.copy(alpha = DividerAlpha),
    thickness: Dp = 1.dp,
    startIndent: Dp = 0.dp
)
```

- **modifier**: Modificador aplicado al divisor
- **color**: Color del divisor
- **thickness**: Grosor del divisor
- **startIndent**: Sangría del divisor

Poner un divisor es tan sencillo como llamar a la función `Divider` sin parámetros.

```kotlin=
Column {
    Text(text = "Hola")
    Divider()
    Text(text = "Mundo")
}
```

![Divider example](https://i.imgur.com/iKgIQ4a.png)

Si lo queremos de un color diferente a la paleta del tema podemos indicarlo in situ:

```kotlin=
Column {
    Text(text = "Hola")
    Divider(color = "Color.Red")
    Text(text = "Mundo")
}
```
![Divider red example](https://i.imgur.com/AldEjrd.png)


Y el grosor diferente al por defecto:

```kotlin=
Column {
    Text(text = "Hola")
    Divider(color = Color.Red, thickness = 12.dp)
    Text(text = "Mundo")
}
```

![Divider red big example](https://i.imgur.com/bDqI5K0.png)


O la sangría:

```kotlin=
Column {
    Text(text = "Hola")
    Divider(color = Color.Red, thickness = 12.dp, startIndent = 8.dp)
    Text(text = "Mundo")
}
```

![Divider red big with indent example](https://i.imgur.com/rBZVz5R.png)

