Ionic

https://ionicframework.com/docs/api/item

Instalacion
npm install -g @ionic/cli
ionic start myApp tabs

Instalar ionic lab

Ionic serve –lab

CORRER LA APP
https://ionicframework.com/docs/developing/android

Instalar cordova

npm install -g cordova

cordova platform add Android

cordova platform update android --save

ionic cordova prepare android (Prepara para android)

ionic cordova build android (Contruye el proyecto)

cordova platform remove Android (Eliminar plataforma)

Ejecutar en dispositivo móvil

ionic cordova run --list

ionic cordova run android -l

ionic cordova run android --target=9a6b36bc -l

Capacitor
npm install @capacitor/core @capacitor/cli

ionic build
ionic capacitor add Android
ionic capacitor copy

CREAR PAGINAS
ionic g page pages\inicio
CREAR MODULO
ionic g module components
CREAR COMPONENTE (Los componentes son los elementos que se encuentran en común en todas las paginas
ionic g c components/header

NOTA: Para poder utilizar los componentes hay que incluirlo en el modulo general y en el modulo de cada pagina

COMPONENTES
Ion-action-sheet
1- Importar el action sheet en el componente e inyectarlo en el constructor

HTML TS

CSS (Para cambiar color de botón Delete)

global.scss

Ion-alert
HTML TS

Ion-avatar(header)

Ion-avatar(chip)
 Ion-avatar(list)

Ion-button(toolbar)

Ion-button(content)
 Ion-Card

Ion-Checkbox
 Ion-datetime

Ion-datetime(Restricciones)

Ion-datetime(Personalizado)
 Ion-fab

Color-Personalizaso
Para crear un color personalizado hay que agregar
esta sintaxis en el archive variables.scss en a carpeta
theme

Ion-grid ion-row ion-col

 Ion-infinity-scroll
HTML

TS

Ion-input
 Ion-list

Ion-list (Link)

Ion-list (Icono+link)
Slot-> indica la posición del icono
Detail-> Para que aparezca la flecha que indica que es un link
Ion-list-sliding

Ion-list-reorder
 Ion-loading

Ion-menu

Para el menu se crea un componente y se incluye en el app.component.ts

Creando el json con el menu (asset/data/menu.json) y el servicio para cogerlo

 Ion-modal

Pagina del Modal

Pagina que Abre el Modal

 Ion-popover
Componente del Popover

Pagina que levanta el Popover

Ion-progress-bar and range

Ion-refresher

Ion-searchbar
PIPE

Ion-segment

DATA

SERVICE
HTLM TS

Ion-skeleton
 Ion-slide

Ion-split-pane
Hay que poner el mismo componente menu pero en el app.component y agregarle la propiedad autoHide=”false”
 Ion-tabs
Modificar las rutas en el tabs-routing.module.ts

Ruta de Accesso
Ion-toast