[Guía completa de Angular Material] Día 04: MatButton, MatButtonToggle y MatRipple
Hoy vamos a presentar cómo usar los botones de Angular Material (se puede decir que los botones son la base de todas las interfaces interactivas), siempre que se presione el botón, todo puede suceder. Un botón bien diseñado es muy importante. Además de hacer que las cosas sucedan, los usuarios también deben poder conocer claramente el significado detrás del botón. Hoy echemos un vistazo al pensamiento de diseño de los botones en Material Design y cómo lograrlo fácilmente. ¡Estos en Angular Material!
En la guía de diseño de botones de Material Design, los botones se dividen principalmente en tres tipos:
Además de los botones planos para una sensación armoniosa en la pantalla, otros El diseño de los botones es todo Se trata de resaltar su propia existencia, por lo que el diseño también presentará una sensación de sombra para hacerlo más claro visualmente.
En Angular Material, todos los botones se colocan en MatButtonModule, así que recuerde agregar este módulo cuando lo use.
Dado que la existencia de botones en las páginas web es muy significativa, Angular Material debe ser El botón utilizado en el diseño no está encapsulado como un componente, sino que se adjunta a la etiqueta
El botón plano es el estilo de botón más básico. Es muy sencillo de usar. Simplemente agregue mat-button al botón original o una etiqueta. en la pantalla no se sentirá como un botón en absoluto, sino solo como un texto. Sin embargo, cuando el mouse se mueva sobre el botón, verá un fondo más oscuro y, cuando lo presione, se producirá un efecto dominó interactivo. .
Por supuesto, también podemos usar el atributo de color para cambiar el color del botón, y también podemos usar el atributo deshabilitado para evitar que se haga clic en el botón.
El efecto es el siguiente:
En comparación con los botones planos, los botones elevados tendrán un contraste obvio y también tendrán un efecto de sombra más oscuro para resaltar la existencia del botón elevado. necesita agregar mat-raised-button
El efecto es el siguiente:
Agregar un ícono al botón es una cuestión muy simple. Agregar
El efecto es el siguiente:
¿Pero qué pasa si solo quiero el ícono sin texto coincidente?
Resultado:
El problema con esto es que demasiado espacio en blanco a la izquierda y a la derecha parece ser una pérdida de espacio. Después de todo, el botón que solo quiere el icono lo es. ¡normalmente para ahorrar espacio! En este momento, puede usar mat-icon-button específicamente para presentar íconos para resolver este problema:
Resultado:
Parece mucho más simple si desea resaltar este botón. Primero podemos usar mat-raised-button para convertirlo en un botón más obvio y usar mat-icon-button para cambiarlo a un estilo sin espacios en blanco a la izquierda y a la derecha.
Resultado:
Puedes ver el botón. Se han eliminado los espacios en blanco y las esquinas se han redondeado. ¡Solo el botón de Icon se siente bien en esta forma de presentación!
Lo siguiente que debemos introducir es que el valor predeterminado es un botón de acción flotante circular. Usamos la directiva mat-fab:
El efecto es el siguiente:
El tapete en sí debe ser redondo y tener un efecto prominente. El botón completo se verá más grande, pero parecerá demasiado abrupto cuando se use en bloques más pequeños. En este momento, también puedes usar tapete. mini-fab para generar un botón de acción flotante más pequeño
El efecto comparado con el botón original es el siguiente:
El estilo del botón generado por mat-mini-fab es similar al general one La altura del botón será la misma, por lo que parecerá que se usa mat-raised-button más mat-icon-button para tener el mismo efecto, pero la semántica es diferente.
Lo anterior es el uso básico de los botones en Angular Material. No es muy difícil. Consiste principalmente en algunas directivas, que determinan cómo usarlos según diferentes situaciones. que son similares a los botones pero no son botones. Algo llamado cambio de botón.
Los interruptores de botón básicamente no son botones, pero son más similares a las casillas de verificación. Sin embargo, a diferencia de las casillas de verificación, no son controles de formulario y se pueden usar con ngModel. Por lo tanto, no tiene sentido usar un interruptor de un solo botón. , use un interruptor de botón de grupo con una amplia gama de aplicaciones
El mat-button-toggle se coloca en MatButtonToggleModule. Recuerde agregar este módulo antes de usarlo. Después de agregarlo, podemos usarlo directamente en. pantalla
Los resultados son los siguientes:
Puedes ver que cada vez que hagas clic en él, habrá un efecto de cambio. mat-button-toggle Este componente en sí también tiene atributos como marcado, valor, deshabilitado, etc. que se pueden usar. Los mezclaremos en el siguiente grupo de alternancia de botones
mat-button-toggle-. El grupo puede colocar múltiples mat-button-toggle y determinar su valor de acuerdo con el mat-button-toggle seleccionado. Podemos diseñar una pantalla simple de la siguiente manera:
En el programa anterior, el primer párrafo ButtonToggleGroup. use value para establecer el valor correspondiente para cada mat-button-toggle, y configure check="true" para establecer el efecto de selección predeterminado, y deshabilitado para configurar el clic deshabilitado, y luego use la referencia de plantilla Obtenga el valor de ButtonToggleGroup, que es el valor del botón que realmente está activado.
En el segundo párrafo de ButtonToggleGroup, agregamos múltiples para que se pueda verificar el interior de ButtonToggle. Además, agregamos vertical="true" para cambiar la disposición. Sin embargo, no podemos usar directamente buttonToggleGroup.value. al verificar para obtener el valor, por lo que solo puede obtener el estado seleccionado del ButtonToggle dentro.
El efecto es el siguiente:
Con respecto a la configuración de múltiples en ButtonToggleGroup, vale la pena señalar que cuando no se agregan múltiples, podemos acceder directamente al valor para obtener el estado seleccionado. y también admite el uso de ngModel después de agregar varios, ya que no se pasarán datos al valor, ngModel no se puede usar.
Para obtener detalles sobre otras propiedades, consulte el archivo API de ButtonToggle.
Presentamos un documento oficial que no se menciona, pero la aplicación de demostración del código fuente oficial demuestra algo interesante, que es el efecto dominó. Este efecto se usa principalmente en los botones, pero también se puede ver en. muchos otros componentes. Hemos visto rastros de este efecto especial en la introducción, también vimos el efecto especial que se generará después de presionar el botón. De hecho, este efecto especial está escrito como una directiva, lo que nos permite; Úselo en diferentes lugares y ajuste muchos detalles.
Después de agregar MatRippleModule primero, primero hagamos una versión simple, ¡simplemente use un div y agregue la directiva mat-ripple!
Hemos agregado una configuración de clase aquí
La posición y la transición son necesarias. Otros se pueden configurar de acuerdo con la situación. Siempre que exista dicha configuración, se puede configurar de inmediato. ¡Agregue un efecto dominó a nuestra imagen!
Además de la configuración básica, mat-ripple también tiene otros atributos que se pueden configurar para hacer que la presentación en pantalla sea más diferente. Los siguientes son los atributos principales de mat-ripple.
Por ejemplo, en el siguiente código de programa, podemos producir varios puntos de onda rosa en la pantalla que se propagan lentamente.
Los resultados son los siguientes:
También podemos activar directamente la generación de ripples desde el programa, de la siguiente manera:
Los dos primeros parámetros de ripple. launch son puntos de onda que son la posición generada, pero actualmente este cálculo se ejecutará, por lo que al configurar los atributos relevantes en el tercer parámetro, configuramos centrado en verdadero para forzar el punto de inicio desde el punto central. valor de verdadero aquí para representar ondas. El punto no se desvanecerá automáticamente después de generarse. Podemos desvanecer todos los puntos de ondulación mediante fadeOutAll().
El efecto es el siguiente:
¡No es muy interesante!
Hoy presentamos un componente muy práctico: el botón. Se puede decir que el botón es el comienzo de todas las interacciones. A través del botón podemos esperar que suceda algo, y el diseño del botón también es un. La disciplina en Material Design, el conocimiento de cómo elegir entre botones discretos y lujosos, afecta la percepción del usuario de la pantalla.
Además, también introdujimos botones tipo interruptor, que resultan muy prácticos en situaciones concretas.
Finalmente, introdujimos adicionalmente el efecto dominó, que actualmente no está disponible en el archivo. Este efecto se puede ver en muchos componentes, por lo que es normal sacarlo y convertirlo en una directiva independiente. Además, mat-ripple también tiene muchas configuraciones más detalladas para enriquecer el efecto.
Después de presentar varios componentes y funciones prácticas, ¡a partir de mañana comenzaremos a combinar varios componentes y completaremos varias pantallas! !
Código GitHub de hoy: /wellwind/it-ironman-demo-angular-material/tree/day-04-mat-button
Rama: day-04-mat-button