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

Uso de componente Slides y opciones avanzadas

23/39
Recursos

Aportes 3

Preguntas 0

Ordenar por:

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

Para los que se le muestra bien los slides prueben con estas opciones:

SlideOps = {
loop: false,
slidesPerView: 4,
slidesPerGroup: 4,
grabCursor: true,
spaceBetween: 30,
speed: 400,
};

IONIC 6

El componente ion-slides va a ser desactivado a partir de Ionic 7 y se recomienda trabajar con Swiper, ver documentación. Les comparto el código usando Swiper:

<ion-content [fullscreen]="true" class="ion-p adding">
  <h1>Artistas swiper</h1>
  <swiper [config]="slideOps" *ngIf="artists.length">
    <ng-template swiperSlide *ngFor="let artstis of artists">
      <div>
      <ion-avatar>
        <img src="https://via.placeholder.com/150" />
        <span>artista</span>
      </ion-avatar>
      </div>
    </ng-template>
  </swiper>
</ion-content>

Slides estilo artista

<h3>home.page.html</h3>
<ion-content padding>
    <h1>Artistas</h1>
    <ion-slides [options]="slideOps" *ngIf="artists.length">
        <ion-slide *ngFor="artist of artists">
            <ion-avatar>
                <img src=""/>
                <span>{{artist.name}}</span>
            </ion-avatar>
        </ion-slide>
    </ion-slides>
</ion-content>
  • *ngIf evalua junto a .lenght si existe al menos 1 para ser true
<h3>home.page.ts</h3>
export class HomePage{
  artists = [{},{},{},{},{}];
  slideOPs = {
      initialSlide: 2,
      slidesPerView: 4,
      centeredSLides: true,
      speed: 400
  };
 constructor(){} 
}
<h3>home.page.scss</h3>
ion-avatar{
    height: 100px;
}