Manejando los paddings en Ionic

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:

paddins-in-ionic

 

Con esto ya damos por vistos todos los elementos que tiene Ionic y a partir de ahora trabajaremos con los componentes JavaScript.