Panel de ejemplo de interfaz de usuario de Blaze

Posted on by Rudeus Greyrat

Blaze UI es un conjunto de herramientas de interfaz de usuario de código abierto y sin marco que proporciona una base sólida para crear rápidamente sitios web con una base escalable y estable. Responde porque todos los componentes fueron construidos para operar en cualquier tamaño de pantalla.

Estamos utilizando el marco de Blaze UI para crear un tablero que mostrará todos nuestros datos en nuestro sitio web. Tiene un diseño receptivo y es fácil de crear utilizando las clases de marcos de interfaz de usuario de Blaze.

Clases de panel de ejemplo de interfaz de usuario de Blaze:

  • c-card : esta clase de interfaz de usuario de Blaze pertenece a la categoría de tarjetas de las bibliotecas que se utilizan para crear tarjetas en nuestra página web.
  • o-grid : esta clase de interfaz de usuario de Blaze se incluye en la categoría de cuadrícula de las bibliotecas que se utiliza para crear cuadrículas para establecer el elemento de la página en el orden correcto y receptivo.
  • u-gradient-text : esta clase se utiliza para crear un degradado de color horizontal en el texto.
  • o-grid__cell : es otra categoría de la cuadrícula que se utiliza para fijar el ancho de una cuadrícula en una fila.
  • u-xlarge : estas clases son clases de encabezado que hacen que el texto esté en negrita y más grande en la fuente.
  • c-table : esta clase de interfaz de usuario de Blaze se encuentra en la categoría Table de las bibliotecas que se utilizan para crear tablas en nuestra página web.

Sintaxis:

<div class="c-card">
    <div class="o-grid ...">
        <div class="o-grid__cell ...">
            ....
        </div>
    </div>
</div>
<div class="o-grid ...">
    <div class="o-grid__cell ...">
        <div class="c-card ...">
            ....
        </div>
    </div>
    <div class="o-grid__cell ...">
        <div class="c-card ...">
            ...
        </div>
        <div class="c-card ...">
            ....
        </div>
    </div>
</div>

Ejemplo 1: el siguiente código muestra el panel de ejemplo de la interfaz de usuario de Blaze: 

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
                "width=device-width, initial-scale=1.0">
    <title>DashBoard</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
</head>
  
<body>
    <div class="c-card">
        <div class="o-grid o-grid--no-gutter 
                    o-grid--small-full c-card__body">
            <div class="o-grid__cell o-grid__cell--width 
                        u-centered">
                <div class="u-gradient-text 
                            u-gradient-text--success u-large">
                    GeeksForGeeks
                </div>
                <div class="c-card__item c-card__item--success">
                    DashBoard
                </div>
            </div>
        </div>
    </div>
    <div class="o-grid o-grid--wrap o-grid--small-full 
                u-letter-box-medium">
        <div class="o-grid__cell o-grid__cell--width-50">
            <div class="c-card c-card--accordion">
                <button role="heading" aria-expanded="true" 
                        class="c-card__control">
                    Most Popular Posts
                </button>
                <section class="c-card__item c-card__item--pane">
                    <br>
                    <div class="o-grid o-grid--not-gutter 
                                o-grid--center">
                        <a hre class="o-grid__cell">
                            <span
                                class="u-xlarge">
https://www.geeksforgeeks.org/what-is-the-function-of-the-xs-grid-class-in-bootstrap/
                            </span>
                        </a>
                        <div class="o-grid__cell u-right 
                                    u-gradient-text u-gradient-text--warning">
                            1
                        </div>
                    </div>
                    <br>
                    <div class="o-grid o-grid--not-gutter o-grid--center">
                        <a hre class="o-grid__cell">
                            <span class="u-xlarge">
                                https://www.geeksforgeeks.org/blaze-ui-grid/
                            </span>
                        </a>
                        <div class="o-grid__cell u-right u-gradient-text 
                                    u-gradient-text--warning">
                            2
                        </div>
                    </div>
                    <br>
                    <div class="o-grid o-grid--not-gutter o-grid--center">
                        <a hre class="o-grid__cell">
                            <span class="u-xlarge">
                                https://www.geeksforgeeks.org/primer-css-flexbox/
                            </span>
                        </a>
                        <div class="o-grid__cell u-right u-gradient-text 
                                    u-gradient-text--warning">
                            3
                        </div>
                    </div>
                    <br>
                </section>
            </div>
        </div>
        <div class="o-grid__cell o-grid__cell--width-50">
            <div class="c-card c-card--accordion">
                <button role="heading" aria-expanded="true" 
                        class="c-card__control">
                    Status of Posts
                </button>
                <section class="c-card__item c-card__item--pane">
                    <table class="c-table c-table--striped">
                        <tbody class="c-table__body">
                            <tr class="c-table__row">
                                <td class="c-table__cell">
                                    Data Structure
                                </td>
                                <td class="c-table__cell">
                                    100+ posts
                                </td>
                                <td class="c-table__cell">
                                    <span class="u-gradient-text 
                                                 u-gradient-text--error">
                                        100+ Contributer
                                    </span>
                                </td>
                            </tr>
                            <tr class="c-table__row">
                                <td class="c-table__cell">
                                    Algorithm
                                </td>
                                <td class="c-table__cell">
                                    100+ posts
                                </td>
                                <td class="c-table__cell">
                                    50+ Contributer
                                </td>
                            </tr>
                            <tr class="c-table__row">
                                <td class="c-table__cell">
                                    Interview Experience
                                </td>
                                <td class="c-table__cell">
                                    30+ posts
                                </td>
                                <td class="c-table__cell">
                                    40+ contributer
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </section>
            </div>
            <div class="c-card c-card--accordion">
                <button role="heading" aria-expanded="true" 
                        class="c-card__control">
                    Top Contests
                </button>
                <section class="c-card__item c-card__item--pane">
                    <div class="c-card u-small">
                        <div class="c-card__item c-card__item--success">
                            <h2 class="c-heading u-centered">
                                DSA Internship Hiring Challenge 
                                For Freshers By GeeksforGeeks
                            </h2>
                        </div>
                    </div>
                    <div class="c-card u-small">
                        <div class="c-card__item c-card__item--success">
                            <h2 class="c-heading u-centered">
                                DSA Placement Hiring Challenge 
                                For Freshers By GeeksforGeeks</h2>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</body>
  
</html>

Producción:

Ejemplo de panel 

Ejemplo 2: el siguiente código muestra el panel de ejemplo de la interfaz de usuario de Blaze con marco móvil 

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
                "width=device-width, initial-scale=1.0">
    <title>DashBoard</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
</head>
  
<body>
    <div class="c-card">
        <div class="o-grid o-grid--no-gutter 
                    o-grid--small-full c-card__body">
            <div class="o-grid__cell o-grid__cell--width 
                        u-centered">
                <div class="u-gradient-text 
                            u-gradient-text--warning u-large">
                    GeeksForGeeks
                </div>
                <div class="c-card__item c-card__item--light">
                    DashBoard
                </div>
            </div>
        </div>
    </div>
    <div class="o-grid o-grid--wrap o-grid--small-full 
                u-letter-box-medium">
        <div class="o-grid__cell o-grid__cell--width-50">
            <div class="c-card c-card--accordion">
                <button role="heading" aria-expanded="true" 
                        class="c-card__control">
                    Most Popular Questions
                </button>
                <section class="c-card__item c-card__item--pane">
                    <br>
                    <div class="o-grid o-grid--not-gutter 
                                o-grid--center">
                        <a hre class="o-grid__cell">
                            <span class="u-xlarge">
                                bipartite-graph
                            </span>
                        </a>
                        <div class="o-grid__cell u-right u-gradient-text 
                                    u-gradient-text--warning">
                            1
                        </div>
                    </div>
                    <br>
                    <div class="o-grid o-grid--not-gutter 
                                o-grid--center">
                        <a hre class="o-grid__cell">
                            <span class="u-xlarge">
                                check-for-bst
                            </span>
                        </a>
                        <div class="o-grid__cell u-right 
                            u-gradient-text u-gradient-text--warning">
                            2
                        </div>
                    </div>
                    <br>
                </section>
            </div>
            <br>
        </div>
        <div class="o-grid__cell o-grid__cell--width-50">
            <div class="c-card c-card--accordion">
                <button role="heading" aria-expanded="true" 
                        class="c-card__control">
                    Data
                </button>
                <section class="c-card__item c-card__item--pane">
                    <table class="c-table c-table--striped">
                        <tbody class="c-table__body">
                            <tr class="c-table__row">
                                <td class="c-table__cell">
                                    Interviews
                                </td>
                                <td class="c-table__cell">
                                    100+
                                </td>
                                <td class="c-table__cell">
                                    <span class="u-gradient-text 
                                                 u-gradient-text--error">
                                        1000+ Contributer
                                    </span>
                                </td>
                            </tr>
                            <tr class="c-table__row">
                                <td class="c-table__cell">
                                    Submissions
                                </td>
                                <td class="c-table__cell">
                                    10000+
                                </td>
                                <td class="c-table__cell">
                                    50+ Contributer
                                </td>
                            </tr>
                            <tr class="c-table__row">
                                <td class="c-table__cell">
                                    Correct Submissions
                                </td>
                                <td class="c-table__cell">
                                    3000+
                                </td>
                                <td class="c-table__cell">
                                    40+ Contributer
                                </td>
                            </tr>
                            <tr class="c-table__row">
                                <td class="c-table__cell">
                                    Runtime Error
                                </td>
                                <td class="c-table__cell">
                                    10000+
                                </td>
                                <td class="c-table__cell">
                                    <span class="u-gradient-text 
                                          u-gradient-text--error">
                                        50+ Contributer
                                    </span>
                                </td>
                            </tr>
                            <tr class="c-table__row">
                                <td class="c-table__cell">
                                    Compile time error
                                </td>
                                <td class="c-table__cell">
                                    1000+
                                </td>
                                <td class="c-table__cell">
                                    <span class="u-gradient-text 
                                          u-gradient-text--error">
                                        100+ Contributer
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </section>
            </div>
        </div>
        <div class="o-grid__cell o-grid__cell--width-100">
            <div class="c-card c-card--accordion">
                <button role="heading" aria-expanded="true" 
                        class="c-card__control">
                    Top Contests
                </button>
                <section class="c-card__item c-card__item--pane">
                    <div class="c-card u-small">
                        <div class="c-card__item 
                                    c-card__item--warning">
                            <h2 class="c-heading u-centered">
                                DSA Contest Lists
                            </h2>
                        </div>
                    </div>
                    <div class="c-card u-small">
                        <div class="c-card__item 
                                    c-card__item--warning">
                            <h2 class="c-heading u-centered">
                                Algorithm Contest Lists
                            </h2>
                        </div>
                    </div>
                    <div class="c-card u-small">
                        <div class="c-card__item 
                                    c-card__item--warning">
                            <h2 class="c-heading u-centered">
                                Top Hackethons
                            </h2>
                        </div>
                    </div>
                    <div class="c-card u-small">
                        <div class="c-card__item 
                                    c-card__item--warning">
                            <h2 class="c-heading u-centered">
                                Webinars
                            </h2>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</body>
  
</html>

Producción:

 

Referencia: https://www.blazeui.com/examples/dashboard/

Publicación traducida automáticamente

Artículo escrito por nitinpatelco20b540 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *