Blaze UI es un kit de herramientas de interfaz de usuario de código abierto gratuito que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y mantenible. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las características nativas del navegador, no en una biblioteca o marco por separado. Nos ayuda a crear un sitio web escalable y receptivo de manera rápida y eficiente con un estilo consistente.
El elemento Blaze UI Card muestra el contenido del sitio de manera similar a un naipe que usa las clases BlazeUI. En este artículo, discutiremos las variaciones de color de las tarjetas Blaze UI.
Para crear una variación de color de la tarjeta Blaze UI, usamos el modificador de color deseado junto con la clase de tarjeta. Hay cinco modificadores de color predefinidos en la interfaz de usuario de Blaze que son los siguientes.
Modificadores de color en la interfaz de usuario de Blaze:
- –marca: esta clase crea un fondo de color gris oscuro para la tarjeta.
- –info: Esta clase crea un fondo de color azul para la tarjeta.
- –advertencia: Esta clase crea un fondo de color amarillo para la tarjeta.
- –success: Esta clase crea un fondo de color verde para la tarjeta.
- –error: Esta clase crea un fondo de color rojo para la tarjeta.
Sintaxis:
<div class="c-card> <div c-card__item c-card__item--brand">...</div> ... </div>
Ejemplo 1: este ejemplo demuestra las variaciones de color de la tarjeta de interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Blaze UI</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <center> <h1 style="color:green">GeeksforGeeks</h1> <strong>Blaze UI Card Colors</strong> <br> <div class="c-card" style="max-width:300px;"> <div class="c-card__item c-card__item--brand"> This is card with brand color. </div> </div> <div class="c-card" style="max-width:300px;"> <div class="c-card__item c-card__item--info"> This is card with info color. </div> </div> <div class="c-card" style="max-width:300px;"> <div class="c-card__item c-card__item--warning"> This is card with warning color. </div> </div> <div class="c-card" style="max-width:300px;"> <div class="c-card__item c-card__item--success"> This is card with success color. </div> </div> <div class="c-card" style="max-width:300px;"> <div class="c-card__item c-card__item--error"> This is card with error color. </div> </div> </center> </body> </html>
Producción:
Ejemplo 2: este ejemplo muestra una variación de color en diferentes partes de la misma tarjeta en la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Blaze UI</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <center> <h1 style="color:green">GeeksforGeeks</h1> <strong>Blaze UI Card Colors</strong> </br></br> <div class="c-card" style="max-width:300px;"> <div class="c-card__item c-card__item--brand"> Header brand color </div> <div class="c-card__item c-card__item--info"> <p class="c-paragraph"> info color </p> </div> <div class="c-card__item c-card__item--warning"> Warning Color </div> <div class="c-card__item c-card__item--success"> <p class="c-paragraph"> Success Color </p> </div> <div class="c-card__item c-card__item--error"> Error color </div> </div> </center> </body> </html>
Producción:
Referencia: https://www.blazeui.com/components/cards/
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA