[Angular] Angular6 Material2 encapsula el cuadro de aviso de mensaje

Angular Material Material Design, nombre chino: Material Design Language, es un nuevo lenguaje de diseño lanzado por Google, que Google dice está diseñado para ofrecer una "apariencia y sensación" más coherente y amplia para teléfonos móviles, tabletas, ordenadores de sobremesa y "otras plataformas". Según Google, Material Design se basa en el "toque real, inspirado en el estudio del papel y la tinta", y permite a los usuarios "entender las señales visuales usadas para reemplazar el mundo real" "sin ir en contra de los principios de la mecánica". Además, los principios básicos de luz, superficie y movimiento son clave para representar cómo los objetos se mueven, interactúan y existen en el espacio en relación entre sí. Efectos realistas de luz y sombra muestran las uniones entre bloques, dividen espacios y marcan partes móviles. Para una introducción más detallada, por favor visite la página web oficial de MaterialEl inicio de sesión del hipervínculo es visible.。 Angular Material es un conjunto de frameworks de interfaz de usuario Angular2+ perfectamente implementados por el equipo de Angular basándose en la especificación Material, la dirección oficial del sitio web:El inicio de sesión del hipervínculo es visible. Este artículo utiliza el componente MatSnackBar de Angular Material para encapsular una caja de alerta, primero veamos los renders: Paso 1: Instalar El inicio de sesión es visible. Paso 2: Configurar la animación Una vez instalado el paquete de animaciones, importa el BrowserAnimationsModule en tu aplicación para habilitar el soporte de animación. app.module.ts importación de la siguiente manera: El inicio de sesión es visible. Paso 3: Importar el tema Incluir temas es necesario para aplicar todos los estilos básicos y de temas a tu aplicación. Para empezar con temas predefinidos, incluye uno de los temas predefinidos de Angular Material a nivel global en tu aplicación. Si usas la CLI de Angular, puedes configurarlaa styles.scss： El inicio de sesión es visible. Si túNo utilizadoAngular CLI, entonces<link>puede pasarTus elementos contienen index.html temáticos predefinidos. Paso 4: Empieza a encapsular la caja de alertas Introduce el directorio /app/services a través del comando cmd cd, y puedes modificar el directorio según tu propio proyecto y ejecutar el comando Create Service: El inicio de sesión es visible. El código ts es el siguiente: El inicio de sesión es visible. Paso 5: Configurar la caja de prompts al estilo CSS En el proyectostyles.scssAl final del archivo, añade el siguiente estilo, que puede modificarse según tu situación real. El código es el siguiente: El inicio de sesión es visible. Paso 6: Usa la caja de alertas Tomo la interfaz de inicio de sesión como ejemplo y la importo en login.module.tsServicio de alertayMódulo MatSnackBarMóduloMódulos componentes, de los siguientes modos: El inicio de sesión es visible. Utilizado en login.component.ts componente, el código es el siguiente: El inicio de sesión es visible. Documentación de la API de componentes de MatSnackBar:El inicio de sesión del hipervínculo es visible. (Fin)

Puntuación

Número de participantes1	MB+1	contribuir+1	Colapso razón
kil	+ 1	+ 1	Me ayudó mucho

Ver todas las valoraciones