Rafael Eldanoy Ensuncho Bechara
Nathaly Stefani Riaño Bejarano
Diego Forero
Nathaly Stefani Riaño Bejarano
Platzi Team
CIRO VLADIMIR ARREOLA CAMACHO
david.nieto
Jorge Hernandez Rozo
Irving Sarmiento
CIRO VLADIMIR ARREOLA CAMACHO
Carlos Uriel de Jesus Sánchez González
Silvia Valdespino Gutierrez
Juan Guillermo Perez Cardozo
Cristian Florez
<p padding>Texto cualquiera</p> <p padding-left>Texto cualquiera</p> <p padding-right>Texto cualquiera</p> <p padding-bottom>Texto cualquiera</p> <p padding-top>Texto cualquiera</p> margin <p margin>Texto cualquiera</p> <p margin-left>Texto cualquiera</p> <p margin-right>Texto cualquiera</p> <p margin-bottom>Texto cualquiera</p> <p margin-top>Texto cualquiera</p>
¿Cómo se puede cambiar en la etiqueta el valor del padding o del margin?
En el archivo src/theme/variables.scss modificas los valores de $content-padding y $content-margin
Gracias Gollum!
¿Cómo puedo agregar padding personalizado a distintas etiquetas?
Ejemplo:
<p text-wrap padding-left:10> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
puedes crear tu clase personalizada en el archivo global.scss
.padding-left-small { padding-left: 10px; } .padding-left-medium { padding-left: 20px; } .padding-left-large { padding-left: 30px; }
y tu html
<p text-wrap class="padding-left-small"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
o incluso puedes agregar los estilos en línea
<p text-wrap style="padding-left: 10px;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
recuerda que, al final, ionic es html ;)
padding para versiones recientes: https://ionicframework.com/docs/layout/css-utilities#element-padding
margin para versiones recientes: https://ionicframework.com/docs/layout/css-utilities#element-margin
Los valores de margin y padding no los puedo cambiar manualmente para ciertos objetos en especifico ? o solo los establecidos globalmente ?
Si puedes cambiar los padding o margin desde el archivo de estilos global en src/app/app.scss
puedes crear tu clase personalizada en el archivo global.scss
.padding-left-small { padding-left: 10px; } .padding-left-medium { padding-left: 20px; } .padding-left-large { padding-left: 30px; }
y tu html
<p text-wrap class="padding-left-small"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
o incluso puedes agregar los estilos en línea
<p text-wrap style="padding-left: 10px;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
recuerda que, al final, ionic es html ;)
<p padding>Texto cualquiera</p> <p padding-left>Texto cualquiera</p> <p padding-right>Texto cualquiera</p> <p padding-bottom>Texto cualquiera</p> <p padding-top>Texto cualquiera</p> <p margin>Texto cualquiera</p> <p margin-left>Texto cualquiera</p> <p margin-right>Texto cualquiera</p> <p margin-bottom>Texto cualquiera</p> <p margin-top>Texto cualquiera</p> https://ionicframework.com/docs/theming/overriding-ionic-variables/
hay un video-curso de segmentos?
Entendido muy parecido a los atributos usados en html / css
No me funciono la propiedad padding, buscando un poco en la info de ionic actualizada tenemos que poner la clase en class: https://ionicframework.com/docs/layout/css-utilities#content-space
