¬ŅQu√© es Ionic?

1

Requisitos del curso y presentación del proyecto

2

¬ŅQu√© hay de nuevo en Ionic 4?

3

¬ŅQu√© ha cambiado en Ionic?

4

Instalación de Ionic y templates básicos

5

Instalación de Capacitor y uso en Android Studio

6

Uso de Capacitor y xCode

7

Sincronizando nuestro proyecto con los emuladores

Componentes b√°sicos de Ionic

8

El componente Slides

9

CSS y Custom Properties de los componentes de Ionic

10

Slides din√°micos

11

Angular Router e Ionic Storage

12

Controlar la navegación con Guards

13

Utilidades de CSS con Ionic

14

Crear una p√°gina de login

15

Validar inputs del formulario de login

16

Envío del formulario

17

Servicio para validar credenciales

18

Agregar Guards a nuestro login

19

Crear una p√°gina de registro

20

Navegación entre login y registro

21

Agregar un men√ļ con el componente Menu

22

Dar funcionalidad y estilos al men√ļ

23

Uso de componente Slides y opciones avanzadas

Consumo y manejo de informacion con Ionic

24

Consumiendo un API para llenar información de nuestros artistas

25

P√°gina completa con artistas, canciones y √°lbums

26

El componente Modal y el Modal Controller

27

Llenar de contenido el Modal

28

Componente Footer y funcionalidad del Modal

29

Construyendo nuestro reproductor

30

Lógica de nuestro reproductor

31

RETO: Vista de √°lbums

Acceso al hardware

32

Usar la cámara a través de Capacitor

33

Corrección de errores y afinando detalles

34

Mejorando nuestra p√°gina de Settings con CSS

35

P√°gina Sports y Angular Maps

36

Crear la p√°gina Sport

37

RETO: Buscador din√°mico en Sports

38

Llevar nuestra aplicación a producción con Android

39

Llevar nuestra aplicación a producción con iOS y cierre del curso

A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Curso de Ionic 4

Curso de Ionic 4

Sebastián Gómez

Sebastián Gómez

CSS y Custom Properties de los componentes de Ionic

9/39
Recursos

Aportes 10

Preguntas 2

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

Huy por fin aprendí como utilizar los css q están al final de la explicación de los componentes jajajaajja, la buena pa ti profe.

Detalles que hacen la diferencia!

En React el CSS lo he modificado:

ion-slide>ion-icon.close {
    float: right;
    color: var(--ion-color-primary);
    font-size: 48px;
}

Porque la importación y llamado de los iconos es diferente y no se puede usar el selector de atributos ^-^

import {
  play,
  close
} from 'ionicons/icons';

<IonIcon icon={close} class="close"></IonIcon>

Interesante como unos signos hacen la diferencia en la presentación del app

Un truco que he usado para crear mas colores de los que tiene por default variables.css es dentro del bloque :root duplico la estructura del color cambiando los hexadecimales por los valores personalizados que me da el color generator y al final le coloco la etiqueta de mi color para crear la variable

/** Custom colors **/

    --ion-color-botonblue: #158BD4;
    --ion-color-botonblue-rgb: 21,139,212;
    --ion-color-botonblue-contrast: #ffffff;
    --ion-color-botonblue-contrast-rgb: 255,255,255;
    --ion-color-botonblue-shade: #127abb;
    --ion-color-botonblue-tint: #2c97d8;

Luego, después de que cierra el bloque de :root, creo una clase con el mismo nombre de la variable y coloco los diferentes estilos usando mis variables personalizadas:

.ion-color-botonblue{
  --ion-color-base: var(--ion-color-botonblue) !important;
  --ion-color-base-rgb: var(--ion-color-botonblue-rgb) !important;
  --ion-color-contrast: var(--ion-color-botonblue-contrast) !important;
  --ion-color-contrast-rgb: var(--ion-color-botonblue-contrast-rgb) !important;
  --ion-color-shade: var(--ion-color-botonblue-shade) !important;
  --ion-color-tint: var(--ion-color-botonblue-tint) !important;
}

De esta forma ya puedo usar el color directamente en el atributo ‚Äúcolor‚ÄĚ de un componente ejemplo:

<ion-button color="botonblue">Primary</ion-button>

La ventaja es que ya tiene todas las variaciones que se necesita, como el contraste.

Ionic usa SASS por defecto (no debería), puedes ver el curso https://platzi.com/cursos/sass/

Yo centre mi imagen de esta manera.
ion-slide > img {
max-height: 50%;
max-width: 60%;
margin: 60px 0;
margin-left: 50px;
margin-right: auto;
//display:block;

}

Messirve.

Excelente clases, aun que si se utiliza scss, se podria crear una hoja con variables, que tan conveniente seria?