Padding y Márgenes

Clase 22 de 36 • Curso Básico de Ionic 2018

Rafael Eldanoy Ensuncho Bechara

student•

<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>

Nathaly Stefani Riaño Bejarano

student•

¿Cómo se puede cambiar en la etiqueta el valor del padding o del margin?

Diego Forero

Team Platzi•

En el archivo src/theme/variables.scss modificas los valores de $content-padding y $content-margin

Nathaly Stefani Riaño Bejarano

student•

Gracias Gollum!

Platzi Team

student•

¿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>

CIRO VLADIMIR ARREOLA CAMACHO

student•

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 ;)

david.nieto

student•

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

Jorge Hernandez Rozo

student•

Los valores de margin y padding no los puedo cambiar manualmente para ciertos objetos en especifico ? o solo los establecidos globalmente ?

Irving Sarmiento

student•

Si puedes cambiar los padding o margin desde el archivo de estilos global en src/app/app.scss

CIRO VLADIMIR ARREOLA CAMACHO

student•

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 ;)

Carlos Uriel de Jesus Sánchez González

student•

<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/

Silvia Valdespino Gutierrez

student•

hay un video-curso de segmentos?

Juan Guillermo Perez Cardozo

student•

Entendido muy parecido a los atributos usados en html / css

Cristian Florez

student•

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

Padding y Márgenes

Introducción

Aprende sobre Ionic con los cursos actualizados

Introducción al Curso de Ionic

Pre-Requisitos para este curso de Ionic

Treasure Hunting GeoCatching

Instalación y overview de Ionic CLI

Preparación de entorno de desarrollo en Mac

Preparación de entorno de desarrollo en Windows

Preparación de entorno de desarrollo en Linux

Aspectos Básicos

Crear una Aplicación

Corriendo Aplicación en el Browser

Estructura de Archivos

Estructura de una vista de Ionic

Navegación

Creando un nuevo page

Navegar a un page

Navegación por Tabs

Parámetros de navegación

Navegación hacia atrás

Navegación raíz

Estilos (Theming)

Introducción a estilos

Colores Personalizados

Alineación y transformación de texto

Padding y Márgenes

CRUD en Ionic y Firebase

Generar proyecto e instalar dependencias

Agregar y configurar AngularFire

Agregar servicio de acceso a datos

Crear una lista con array estático

Crear una vista para agregar records

Agregar la habilidad de ver records

Crear lista dinámica y agregar la habilidad de editar records

Agregar la habilidad de eliminar records

Implementando Login con Facebook

Deployment

Correr aplicaciones en emulador

Correr aplicación en dispositivos Android

Correr aplicación en dispositivos iOS

Publicando nuestra aplicación en Android y iOS stores

Conclusiones del curso