Cómo usar estilos CSS y referenciar recursos
Clase 22 de 57 • Curso de Ionic Avanzado 2017
Contenido del curso
Estructura de nuestra App con Ionic
- 4
Arquitectura de una app en Ionic
03:55 min - 5
Proyecto: Platzinger App
15:43 min - 6
Repositorio del curso
00:11 min - 7
Qué son pages y cómo generar las primeras de nuestra app
17:29 min - 8
Navegación básica entre pages
12:58 min - 9
Reto: Página “Acerca de” accesible desde el menú lateral
00:10 min - 10
Tomando los conceptos compartidos de Angular y Ionic
01:52 min
Basics de Angular y TypeScript
- 11
Aclaraciones Ionic vs Angular
01:03 min - 12
Cómo usar tipos de datos con typescript
11:08 min - 13
Qué son e implementando interfaces de TypeScript
09:52 min - 14
NgFor aplicado en la lista de usuarios
06:43 min - 15
NgIf aplicado en la lista de usuarios
05:59 min - 16
Navegación con parámetros
07:27 min - 17
Accediendo a nuestros usuarios con conversation.ts
06:21 min - 18
Creando un servicio de usuarios e inyectando el servicio en nuestros pages
08:45 min - 19
Pipes en TypeScript (Date, Number, Json)
07:53 min - 20
Creando nuestro propio 'Pipe' para buscar entre nuestros contactos
11:56 min - 21
Reto: Mostrar un icono diferente según el status del usuario
00:16 min
Agregando estilos con CSS a nuestra aplicación
- 22
Cómo usar estilos CSS y referenciar recursos
Viendo ahora - 23
Implementando estilos en la pantalla de login
13:27 min - 24
Implementando estilos en la pantalla de home
12:02 min - 25
Implementando estilos en la pantalla de conversación
12:28 min - 26
Usando ngStyle y ngClass para añadir estilos dinámicos
10:44 min - 27
Cambiar icono según status
08:16 min
Acceso a datos remotos
- 28
Información importante antes de continuar
01:16 min - 29
¿Qué es Firebase?
03:56 min - 30
Reemplazo del servicio de usuarios por un servicio dinámico con conexión a Firebase
20:40 min - 31
Login/Registro de usuarios con email y password
13:49 min - 32
Login/Registro de usuarios con Facebook
22:06 min - 33
Implementando Log Out
08:59 min - 34
Creando un CRUD implementando un API REST HTTP (con diversos backends)
02:11 min
Opciones y Acceso Nativo
- 35
Crear page de Perfil
08:14 min - 36
Editar datos básicos del perfil de usuario
19:35 min - 37
Configurando Android Studio
22:04 min - 38
Capturar fotos de cámara y álbum
19:19 min - 39
Preparando aplicación para recibir fotos desde la cámara y galería del Android
09:00 min - 40
Guardando y asignando una foto de perfil al usuario desde la cámara
15:49 min - 41
Preparando aplicación para utilizar geolocalización
14:29 min - 42
Conectándonos al API de Google
12:41 min
Conversación
Amigos
- 47
Planeación previa para la característica / Cómo generaremos las solicitudes
02:56 min - 48
Enviando una solicitud de amistad
17:17 min - 49
Revisando solicitudes de amistad
10:50 min - 50
Aceptando solicitudes de amistad
18:44 min - 51
Mostrando sólo amigos
06:34 min - 52
Componentes anidados (con paso de parámetros)
12:13 min
Deploy
Contenido Bonus
Resumen
Nuestra aplicación contara con algunas imágenes y sonidos los cuales encontraras en el sistema de archivos, estos archivos los copiaras dentro de la carpeta de src/assets.
Vamos a darle estilos a nuestra aplicación empezando por la pantalla de Login, para poder recargar nuestra aplicación sin tener que estar moviéndonos cada vez de la pantalla de Home a la pantalla de Login realizaremos un cambio por el momento a nuestra rootPage dentro del archivo app.component.ts.
Entre algunos componentes que nos brinda Ionic se encuentra el ion-row y ion_col, estos componentes parten la interfaz en filas y columnas respectivamente haciendo que el espaciado y distribución de elementos en nuestra aplicación sea más fácil. ion-row te permite usar 12 columnas dentro de cada fila.
Como podemos ver en la documentación oficial, los inputs en Ionic se pueden repartir a lo largo de un ion-list y cada input dentro de un ion-item. Los inputs en Ionic cuentan con diferentes tipos y es necesario usar el tipo adecuado para cada input pues el teclado del celular cambiara acorde al input.