Los componentes UI / UX en Angular, se conocen como Materiales angulares. Ellosayudar a las aplicaciones angulares a realizar eficientemente . Sin embargo, si aún no los conoce, aquí hay un artículo para ayudarlo a aprender los materiales angulares en detalle. Además, tPara obtener un conocimiento profundo de Angular, considere inscribirse en ' de Edureka.
En este artículo, repasaré los siguientes temas:
- Introducción a los materiales angulares
- Instalación de material angular
- Componentes de material angular
- CDK de material angular
Introducción a los materiales angulares
Materiales se introdujeron como un lenguaje de diseño desarrollado por Google en 2014. Diseño de materiales es una herramientapara frameworks de front-end, lo que le ayuda con visual , movimiento y Interacción diseño. También le ayuda a adaptarse a diferentes dispositivos y diferentes tamaños de pantalla. Primero, se etiquetó en AngularJS para hacer estas aplicaciones más atractivo y realizar Más rápido . Luego, Google reescribió completamente el código desde cero y eliminó JS, es decir, , y lo nombré en septiembre de 2016. Más tarde, Google etiquetó Material Design como Angular, que utiliza y lo denominó Materiales angulares.
Materiales angulares o componentes de interfaz de usuario (UI) le ayudan a diseñar su aplicación en un estructurado conducta. Atraen usuarios y lo hacen más fácil de acceder los elementos o los componentes presentes en su aplicación. También ayudan a diseñar sus aplicaciones de una manera atractiva, con estilos y formas . Estos componentes ayudan a hacer su aplicación más consistente , rápido , versátil e incluso diseño sensible sitios web.
Instalación de material angular
Ahora, comencemos con un tutorial rápido sobre cómo instalar Angular Materials. Lo primero es lo primero, asegúrese de tener Angular instalado en su sistema. Si no está familiarizado con Angular, consulte el enlace en . Una vez que tenga todo configurado, puede agregar materiales angulares a su proyecto usando el siguiente comando:
de add @ angular / material
Primero, le pedirá que elija un nombre de tema prediseñado o un tema personalizado.
Debe elegir el tema prediseñado 'Indigo / Pink', que es el tema predeterminado para diseñar su aplicación. También puede elegir el tema 'Personalizado' para que pueda personalizar sus archivos de tema que incluyen todos los estilos comunes.
A continuación, le pedirá que configure HammerJS . HammerJS es una biblioteca popular, utilizada principalmente en aplicaciones Angular. Agrega soporte para gestos táctiles como Swipe, Pan, Pinch, Rotate y muchos más, especialmente en aplicaciones móviles.
Puede elegir 'Sí' o 'No'. HammerJS puede ser útil cuando usa su aplicación en teléfonos móviles. Como los teléfonos móviles ofrecen pantallas táctiles, estos gestos son más útiles y pueden verse de moda en su aplicación móvil.
Después de elegir su opción, a continuación, se le pedirá que configure Animaciones del navegador para material angular.
Debe elegir 'Sí' para poder utilizar animaciones en su aplicación. Las animaciones angulares hacen que su aplicación sea más divertida y fácil de usar. Esto puede mejorar su aplicación y la experiencia del usuario, lo que atrae la atención de los usuarios.
Posteriormente, esto instalará Angular Materials en su aplicación.
Componentes de material angular
Como se mencionó anteriormente, los componentes de material angular no son más que UI / UX Componentes de diseño. Contienen una variedad de componentes como controles de formulario, navegación, botones e indicadores, ventanas emergentes y muchos más. Estos componentes le ayudan a implementar patrones de acuerdo con la especificación de Material Design.
Continuando, veamos algunos ejemplos de cómo implementar estos componentes en su aplicación angular.
Navegación
Primero, discutiré los componentes en Navigation.
- Barra de herramientas
Debe escribir el siguiente código en el app.component.html archivo para utilizar el componente de la barra de herramientas en su aplicación.
Angular Material Tutorial es un contenedor de material angular que se utiliza para encabezados y títulos. El color del El contenedor se puede cambiar utilizando el color propiedad.De forma predeterminada, las barras de herramientas utilizan un color de fondo neutro basado en el tema actual, es decir, claro u oscuro.Puede elegir tres temas predeterminados que son: 'primario' , 'acento' o 'advertir' .Para utilizar esta barra de herramientas, primero debe importarla en app.module.ts archivo de materiales angulares usando el siguiente comando:
importar {MatToolbarModule} desde '@ angular / material'Más tarde, también debe agregar este módulo en el importaciones: [] sección ubicada en el app.module.ts archivo.
importaciones: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],
Para Mat-Toolbar, debe agregar ' MatToolbarModule ”.
Ahora, proporcionemos su proyecto con el siguiente comando:
de servir -o
Esto abrirá su proyecto en el navegador predeterminado de su sistema como se muestra a continuación:
Si desea cambiar el color de la barra de herramientas según su elección, puede hacerlo con la ayuda de la hoja de estilo CSS. Dejame mostrarte un ejemplo.
Primero, necesitas borrar color propiedad de contenedor y luego, escriba lo siguiente CSS código en el app.component.css archivo.
mat-toolbar {background-color: / * color-of-your-choice * / color: / * text-color * /}Ahora, sirva su proyecto para ver el resultado.
- Menú
A continuación, hablaré del componente de menú. Necesita escribir el siguiente código en su app.component.html archivo.
Angular Material Tutorial Ayuda de configuración de menúAgreguemos un poco de estilo en el Menú botón. Necesita escribir el siguiente código en su app.component.css archivo.
.space {flex: 1 1 auto} .btns {width: 100px height: 40px font-size: large border-radius: 10px border: 3px solid # 113c89 background-color: lightcoral}class = 'espacio' se utiliza para agregar espacio entre el 'Nombre de la barra de herramientas' y la 'Opción de menú'.
En caso de que no esté familiarizado con la hoja de estilo CSS, puede consultar nuestro blog en para profundizar.
Al igual que la barra Google, para usar y contenedores, debe seguir el mismo procedimiento anterior para importar MatMenuModule y MatButtonModule de angular material y agregarlos en importaciones: [] sección ubicada en app.module.ts archivo.
Sirva su proyecto ahora para mostrar el resultado.
Controles de formulario
Ahora, discutiré los componentes en Control de formularios.
- Campo de formulario
Como sugiere el nombre, Form-Field se utiliza para las entradas proporcionadas por el usuario. Se usa más comúnmente para el registro de un usuario, en una aplicación o un sitio web.
Debe escribir el siguiente código en el app.component.html archivo para usar el componente Form-Field en su aplicación.
Controles de formulario
Nombre
Como de costumbre, necesita importar MatFormFieldModule y MatInputModule y agregarlos en importaciones: [] sección ubicada en el app.module.ts archivo. El código anterior se usa generalmente para ingresar nombres como 'Nombre', 'Apellido', etc. Incluso puede usar Validadores y hacer que un campo sea obligatorio. Por ejemplo, puede usarlo para el campo Correo electrónico. Puede ocultar o mostrar el texto de las contraseñas. Para su referencia, consulte el siguiente código:
Ingrese su correo electrónico {{getErrorMessage ()}} Ingrese su contraseña {{¿ocultar? 'visibilidad_off': 'visibilidad'}}En tus app.component.css archivo, debe agregar el siguiente código:
.example-container {padding-left: 50px}Ahora, en tu app.component.ts archivo, necesita importar FormControl y Validadores de @ angulares / formas directorio.
importar {FormControl, Validators} desde '@ angular / forms'Incluso debe agregar el texto para mostrar un error dentro de la siguiente clase.
exportar clase AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('required')? 'Debe ingresar un valor': this.email.hasError ('email')? 'No es un correo electrónico válido': ''} hide = true}En referencia al procedimiento anterior, debe escribir el siguiente código en su app.module.ts archivo para importar los módulos necesarios.
importar {FormsModule, ReactiveFormsModule} desde '@ angular / forms' importar {MatIconModule} desde '@ angular / material'Más tarde, debe agregar estos módulos en importaciones: [] sección.
- Boton de radio
Los botones de opción se utilizan generalmente para elegir entre las diferentes opciones. Puede consultar el siguiente código como referencia.
Xa app.component.html archivo,
Género
Macho femenino
Xa app.component.css archivo,
mat-radio-button {Padding-left: 50px}Ahora, necesita importar MatRadioModule y agregarlo importaciones: [] sección ubicada en el app.module.ts archivo.
Más tarde, debe servir su proyecto para mostrar el resultado.
Continuando, hablaré sobre Angular Material CDK.
CDK de material angular
CDK, también conocido como Kit de desarrollo de componentes , es una biblioteca de comportamientos predefinidos en Angular Material, que es un conjunto de herramientas que implementan patrones de interacción y características de la aplicación . No tiene ningún estilo específico para Material Design. Veamos un ejemplo de CDK.
- Campo de texto
El componente Campo de texto proporciona utilidades para trabajar con campos de entrada de texto. Puede utilizar componentes CDK en el campo de texto para cambiar el tamaño de las entradas. Veamos un ejemplo de cómo implementarlo.
Xa app.component.html archivo,
CDK de material angular
Tamaño de fuente 10px 12px 14px 16px 18px 20px Tamaño automático del área de texto
Para el app.component.ts archivo, primero debe importar los componentes necesarios.
importar {CdkTextareaAutosize} desde '@ angular / cdk / text-field' importar {NgZone, ViewChild} desde '@ angular / core' importar {take} desde 'rxjs / operator'Ahora, debe escribir el siguiente código dentro de la clase.
java addactionlistener (esto)
export class AppComponent {constructor (private _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}A continuación, debe importar MatSelectModule y agregarlo importaciones: [] sección ubicada en el app.module.ts archivo.
Finalmente, debe servir su proyecto para mostrar el resultado.
Esta no es la conclusión y hay varios otros componentes en Angular Materials. Puede consultarlos desde el sitio web oficial de material angular.
Con esto me gustaría terminar mi blog. Espero que tengas claros los fundamentos de Angular Material.Si tiene alguna duda o consulta sobre este artículo, no dude en publicarla en la sección de comentarios a continuación.
Si desea aprender todo lo que acaba de aprender de este blog y más sobre Angular y orientar su carrera hacia un desarrollador angular competente, luego considere inscribirse en nuestro ' .
Tienes una pregunta para nosotros? Menciónelo en la sección de comentarios de este blog de “Material angular” y nos comunicaremos con usted lo antes posible.