[Guía completa de Angular Material] Día 04: MatButton, MatButtonToggle y MatRipple
Hoy presentaremos el uso de botones de material Angular. Se puede decir que los botones son la base de todas las interfaces interactivas. Mientras presiones el botón, todo puede suceder. ¡Hoy, echemos un vistazo a cómo pensar en los botones en Material Design y cómo lograr fácilmente estos objetivos de diseño en Angular Material!
En las pautas de diseño de botones de Material Design, hay 3 tipos de botones principales:
Todos los demás botones Todos están diseñados para enfatizar su presencia y, por lo tanto, están diseñados con sombras para hacerlos visualmente más claros. .
En Angular Material, todos los botones se colocan en MatButtonModule, así que recuerde agregar este módulo cuando lo use.
Debido a la importancia de los botones en las páginas web, Angular Material no incluye Botones Empaquetados como componentes. En su lugar, se agregará al botón o etiqueta agt como directiva, y el botón o etiqueta agt original tendrá un estilo de Material Design.
El botón plano es el estilo de botón más básico y se puede usar fácilmente simplemente agregando un botón de tapete al botón o marca original.
En este punto, parecerá que hay No hay ningún botón en la pantalla, solo existe un texto, pero cuando pasas el mouse sobre el botón verás un fondo más oscuro y cuando presionas el botón se crea un efecto dominó interactivo.
Cuando Verá un fondo más oscuro cuando pase el mouse sobre el botón y un efecto dominó interactivo cuando presione el botón.
Por supuesto, también podemos usar el atributo de color para cambiar el color del botón y usar el atributo deshabilitado para deshabilitar el clic en el botón.
Así es como se ve:
Los botones elevados tienen mayor contraste que los botones planos y tienen una sombra más profunda para enfatizar la presencia del botón, lo que requiere agregar un botón elevado tipo tapete
Así es como se ve:
Agregar el ícono al botón en sí es tan simple como agregar
El resultado es:
Pero ¿y si quiero un icono sin texto?
Aquí está el resultado:
El problema con esto es que demasiado espacio en blanco parece una pérdida de espacio; después de todo, los botones que solo requieren íconos generalmente están diseñados para ahorrar espacio. Este problema se puede resolver usando mat-icon-button, que está diseñado para representar íconos:
Resultado:
Parece mucho más simple. Si queremos resaltar un botón, podemos usar mat-raised-button para hacerlo más visible, luego usar mat-icon-button para cambiarlo a un estilo sin espacios en blanco y luego usar mat-icon-button para cambiarlo. a un estilo de espacio en blanco.
Resultado:
Como puedes ver, el espacio en blanco del botón se ha eliminado y las esquinas se han redondeado, lo cual es bueno para un solo botón usando solo un ícono. ¡Buena manera de presentarlo!
A continuación, introduciremos un botón circular de acción flotante predeterminado y usaremos la directiva mat-fab:
Aquí está el resultado:
Una cosa que puedes notar que cuando no especifica un color, mat-fab se comporta igual que el color de acento. Puede ver que la idea detrás del botón de acción flotante en sí es enfatizar su presencia, que es la misma idea que el color de acento, que consiste en enfatizar que hay algo aquí, y hay que admirar la consideración de los materiales de Angular.
El tapete en sí debe ser redondo Para enfatizar el efecto, todo el botón se verá relativamente grande, pero para un bloque relativamente pequeño, usarlo parecerá demasiado abrupto y En este punto, debemos. También puedes usar mat-mini-fab para hacer un botón de acción flotante relativamente pequeño
Comparación con el efecto del botón original
El botón hecho por mat-mini-fab es diferente de Un botón normal tiene la misma altura, por lo que se ve igual que usar un botón elevado más un botón con icono de tapete, pero la semántica es diferente.
Lo anterior es el uso básico de botones en Angular Material, y no es difícil. A continuación, presentaremos algo que es como un botón pero que no es un botón; se llama cambio de botón.
El botón de alternancia básicamente no es un botón, es más como una casilla de verificación y, a diferencia de la casilla de verificación, no es un control de formulario que se pueda usar con ngModel, por lo que usar un solo botón de alternancia no hará nada. en su lugar, tendrás que usar un conjunto de botones, que tendrán una gama más amplia de aplicaciones.
El interruptor de botón de tapete se coloca en la pestaña MatButtons. toggle se coloca en MatButtonToggleModule. Recuerde agregar este módulo antes de usarlo. Después de agregarlo, podemos usarlo directamente en la pantalla.
El efecto es el siguiente:
Puedes. Vea que cada vez que haga clic en él, se producirá un efecto de cambio. El componente mat-button-toggle en sí también tiene propiedades como Comprobado, valor, deshabilitado, etc. Mezclaremos y usaremos estas propiedades en el siguiente grupo de alternancia de botones
El grupo mat-button-toggle puede acomodar múltiples mat-button-toggle y determine sus valores en función del mat-button-toggle seleccionado. Podemos diseñar una pantalla simple de la siguiente manera:
En el programa anterior, en el primer ButtonToggleGroup, usamos value para establecer el valor de cada mat-button-toggle en mat-button-toggle.toggle, y configure check="true" para establecer el efecto de selección preestablecido, configure deshabilitado para deshabilitar el toque y luego obtenga el valor de ButtonToggleGroup a través de la referencia de plantilla, es decir, el valor del botón realmente activado internamente.
En el segundo ButtonToggleGroup, agregamos múltiples para hacer que el ButtonToggle interno sea seleccionable y agregamos vertical="true" para cambiar la alineación, pero no podemos usar buttonToggleGroup.value directamente para obtener el valor del tiempo de selección, por lo que Solo se puede obtener el valor de cada ButtonToggle dentro.
El efecto es el siguiente:
Con respecto a la configuración múltiple en ButtonToggleGroup, vale la pena señalar que en ausencia de múltiples, podemos usar directamente el valor para obtener el estado de selección. y también admite el uso de ngModel; cuando se usa múltiple, no se pasa información en el valor, por lo que se admite el uso de ngModel. Cuando se utiliza la selección múltiple, no se pasa información al valor, por lo que no se puede utilizar ngModel.
Para obtener más información sobre otras propiedades, consulte la documentación de la API ButtonToggle.
Esto es algo interesante. No se menciona en la documentación oficial, pero se demuestra en la aplicación de demostración del código fuente oficial. Este es el efecto dominó. Se usa principalmente para botones. también se puede usar en muchos Como se ve en otros componentes, como vimos en la introducción sobre el efecto que ocurre cuando se presiona el botón, el hecho de que esté escrito como una directiva nos permite usarlo en diferentes lugares y ajustar muchos detalles; .
Primero, después de agregar MatRippleModule, comenzaremos con una versión simple que tomará un div y agregará la directiva mat-ripple.
Hemos agregado una configuración de clase aquí
La posición y la transición son obligatorias, y se pueden configurar otras según la situación. Siempre que exista dicha configuración, puede configurarla de inmediato. en nuestra pantalla ¡Agrega ondas!
Además de las configuraciones básicas, mat-ripple también puede establecer otras propiedades para hacer que la imagen se vea diferente. Estas son las propiedades principales de mat-ripple
Por ejemplo, el siguiente código creará algunas ondas rosadas que se extenderán lentamente por la pantalla.
Los resultados son los siguientes:
También podemos activar directamente la generación de ondas en el programa, como se muestra a continuación:
Los dos primeros parámetros de ripple .launch son ondulaciones La posición generada, pero actualmente este cálculo se desviará, por lo que configuramos las propiedades relevantes en el tercer parámetro y configuramos el centro en verdadero para forzarlo a comenzar desde el centro. Además, agregamos un valor persistente de verdadero, lo que significa que las ondas no se desvanecerán automáticamente después de generarse. Podemos usar fadeOutAll() para atenuar todas las ondas.
Así es como se ve:
¿No es interesante?
Hoy presentamos un componente muy útil: el botón, que es el comienzo de todas las interacciones, a través del cual podemos esperar que suceda algo. La elección entre botones discretos y lujosos afecta la percepción de la pantalla por parte del usuario.
Además, hemos introducido botones de alternancia, que pueden resultar muy útiles en determinadas situaciones.
Finalmente, introdujimos el efecto limp, que actualmente falta en la documentación y se encuentra en muchos componentes, por lo que era natural extraerlo y convertirlo en una directiva separada, pero mat -ripple también tiene muchas configuraciones detalladas para enriquecer los efectos.
Después de cubrir algunos componentes y características útiles, ¡mañana comenzaremos a ensamblarlos para crear una amplia variedad de imágenes!
GitHub: /wellwind/it-ironman-demo-angular-material/tree/day-04-mat-button
Rama: day-04-mat-button.