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:
Con esto ya damos por vistos todos los elementos que tiene Ionic y a partir de ahora trabajaremos con los componentes JavaScript.