Vamos a terminar de aprender a usar los elementos de Ionic utilizando los paddings.
Los paddings en Ionic son clases que se pueden utilizar para añadir 10px entre el borde del elemento y su contenido, aunque podemos modificarlo tocando el CSS.
Las distintas clases de paddings en ionic
| Nombre de la clase | Acción |
|---|---|
| padding | Añade relleno a cada lado |
| padding-vertical | Añade el relleno arriba y abajo |
| padding-horizontal | Añade relleno a la izquierda y derecha |
| padding-top | Añade relleno arriba |
| padding-right | Añade relleno a la derecha |
| padding-bottom | Añade relleno a abajo |
| padding-left | Añade relleno de izquierda |
Usando los paddings
Cuando queremos dejar espacio dentro de la caja, entre el borde y el contenido tan solo tenemos que poner la clase que necesitamos para que se dejen 10px en el lugar o lugares que deseemos.
Del mismo modo podemos editar esta distancia modificándola en el CSS, como vamos a ver en el siguiente código, y aunque hay introducido el estilo dentro del código ya sabes que en proyectos reales se debe de añadir en su propio archivo.
<style>
.padding-top{
padding-top: 40px;
}
</style>
<div class = "button button-block padding">Padding</div>
<div class = "button button-block">Sin padding</div>
<div class = "button button-block padding-top">Padding top</div>
Lo que nos da como resultado:
Con esto ya damos por vistos todos los elementos que tiene Ionic y a partir de ahora trabajaremos con los componentes JavaScript.
