Serie de tutoriales de Ionic 5 | Parte 3 Componentes de Ionic UI | Por Neeraj Dana | Diciembre de 2021
Hola a todos, en este blog de hoy, veremos algunos de los componentes de IU más importantes de ionic, que se utilizan en casi todas las aplicaciones. Hoy en día, la mayoría de las aplicaciones quieren una excelente interfaz de usuario para hacer que la interfaz de usuario sea más atractiva y atraer a los usuarios para que interactúen con ella. Así que hoy nos centraremos en los botones, la tarjeta, la lista, la entrada de formularios y otros componentes.
Entonces, antes de comenzar, deja Te dejo entender la teoría del diseño de UI. (UI) El diseño gira en torno a visualizar lo que los clientes podrían necesitar hacer y garantizar que la interfaz tenga componentes de fácil acceso, comprensión y uso para fomentar estas actividades. La interfaz de usuario combina las ideas de planificación de conexiones, estructura visual y diseño de datos.
Algunos puntos dorados del diseño de la interfaz de usuario.
1) Crea una interfaz de usuario para controlar a los usuarios
La atractiva interfaz de usuario permite a los usuarios controlarse a sí mismos, lo que básicamente significa que si su interfaz de usuario no es buena, los usuarios pueden perder el interés en unos días.
s Pero la interfaz de usuario es más informativa y atractiva, incluso si no usan ninguna aplicación, los usuarios continuarán usando la aplicación.
2) Comodidad del producto
El nivel de comodidad al usar la aplicación hace que los usuarios se interesen más en la aplicación.Si su nivel de aplicación es tuff o hay demasiadas cosas que no sabe o comprende, los usuarios se molestarán. Entonces necesitas trabajar duro.
3) tiempo de carga de la aplicación
Cuanto mayor es la carga de la aplicación, más usuarios pierden interés en la aplicación. Necesitamos hacer nuestra aplicación cada vez más rápida para que la aplicación responda rápidamente al usuario para que el usuario no pierda interés en la aplicación.
Así que ahora pasemos a los componentes iónicos. Ionic ha creado componentes que se pueden mostrar de forma hermosa en todos los dispositivos móviles y plataformas, y casi puede encontrar la mayoría de ellos en la documentación allí. Composición iónica.
1) Botón
Abra el archivo home.page.html en /src/app/home Y borrar div Traer identificación container Ahora déjame mostrarte los diferentes tipos de botones disponibles en el marco iónico.
a) Forma de botón iónico
Normal
Round
b) Ancho del botón de iones
Normal
Block (with border full width)
Full (without border full width)
c) Tamaño del botón de iones
Small
Normal
Large
d) Color del botón de iones
Primary
Secondary
Warning
Danger
Success
e) Estilo de botón iónico
Clear
Default
Outline
Solid
2) interfaz de usuario de la tarjeta Ioinc
a) Tarjeta Ion Simple
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto
inventore sapiente ipsum quis velit voluptates libero quisquam
distinctio eligendi laudantium ut, placeat sint porro accusamus earum,molestias quam fugit ipsa!
b) Tarjeta de imagen de iones
>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto
inventore sapiente ipsum quis velit voluptates libero quisquam
distinctio eligendi laudantium ut, placeat sint porro accusamus earum,
molestias quam fugit ipsa!
c) Tarjeta de iones con botones de operación
>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto
inventore sapiente ipsum quis velit voluptates libero quisquam
distinctio eligendi laudantium ut, placeat sint porro accusamus earum,
molestias quam fugit ipsa!
Learn More
3) Lista
a) Lista simple de iones
Pokémon Yellow
Mega Man X
The Legend of Zelda
Pac-Man
Super Mario World
b) Lista iónica con avatar
/>
Pokémon Yellow
/>
Mega Man X
/>
The Legend of Zelda
/>
Pac-Man
/>
Super Mario World
c) Acción de lista de iones
Item
Delete
Unread
Item
Delete
Unread
Item
Delete
Unread
Item
Delete
Unread
4) forma iónica
a) Entrada del formulario de inicio de sesión
Básicamente, el formulario de inicio de sesión aquí se compone de correo electrónico y contraseña, por lo que crearemos un formulario de inicio de sesión simple con entradas y botones.
página de inicio de sesión
Para generar una página en iónico, debe escribir ionic g page login Esto generará el inicio de sesión de la página y cargará esta página de inicio de sesión en la página inicial, al igual que cuando se inicia la aplicación, se debe iniciar sesión en la primera pantalla y luego debemos hacer algunos cambios app-routing.module.ts El archivo existe en src/app
Después de generar la página de inicio de sesión, su archivo inicial app-routing.module.ts Se ve como esto
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';const routes: Routes = [
{
path: 'home',
loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
},
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'login',
loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
Necesitas cambiar la parte anterior aquí
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
A esto
{
path: '',
redirectTo: 'login',
pathMatch: 'full'
},
Ahora, cuando vuelva a cargar el archivo guardado y vuelva a cargar el navegador, inicialmente abrirá la página de inicio de sesión y presentaremos el enrutamiento en detalle en el próximo blog.
Cambiar archivo ahora Página de inicio de sesión.html Diseñe la interfaz de usuario de inicio de sesión en src / app / login
Login .container {
Password
Forgot Password ?
Login
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;& ion-item {
width: 100%;
}
}
Este es el contenido de este blog, porque aprenderemos más componentes cuando demostremos la aplicación en el próximo blog.
Nuestro próximo blog utilizará la aplicación iónica para construir la interfaz de usuario, básicamente diseñar a código.
Manténganse al tanto.
