Progreso de la interfaz de usuario de Blaze

Posted on by Rudeus Greyrat

Blaze UI es unmarco de código abierto de CSS . Es un kit de herramientas de interfaz de usuario liviano que proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Puede funcionar con cualquier framework que exista. Puede adaptarse a cualquier ecosistema. Todos los diseños o CSS son móviles primero y, por lo tanto, receptivos. Su proyecto está disponible en código abierto, por lo que una gran comunidad lo mantiene.

Blaze UI Progress se usa para mostrar el progreso de un evento, como cargar o descargar un archivo. Es una barra de progreso personalizable que puede tener diferentes colores y diferentes estilos según los atributos.

Tipos de progreso de la interfaz de usuario de Blaze:

  • Simple: Esta es una barra de progreso simple. Puede tener diferentes colores.
  • Apilada: esta barra de progreso puede contener dos o más barras de progreso en su interior. La barra de progreso en su interior es una barra de progreso individual y puede contener diferentes colores.
  • Colores y tamaños: esta barra de progreso se puede colorear y también podemos cambiar el tamaño de la barra.
  • Redondeado: la barra de progreso también puede tener esquinas redondeadas. Esta es una barra de progreso, ya sea simple o apilada, que puede tener esquinas redondeadas.

Atributos de progreso de la interfaz de usuario de Blaze: 

  • tipo: Esto establece el color de la barra de progreso.
  • redondeado: Esto establece las esquinas redondeadas si es verdadero.
  • valor: Esto toma la cantidad de progreso realizado.
  • min: Es el valor mínimo de la barra de progreso.
  • max: Es el valor máximo de la barra de progreso.
  • tamaño: Esto establece el tamaño de la barra de progreso: Los diferentes tamaños son los siguientes:
    • extra pequeño
    • pequeña
    • medio
    • largo
    • extragrande
    • súper
  • color: El color de la barra de progreso se puede cambiar. Aquí están los diferentes colores:
    • defecto
    • c-progress__bar–marca
    • c-progress__bar–info
    • c-progress__bar–advertencia
    • c-progress__bar–éxito
    • c-progress__bar-error

Sintaxis:

<blaze-progress size="medium" rounded>
  <blaze-progress-bar value="50" type="info">
    50%
  </blaze-progress-bar>
</blaze-progress>

Ejemplo 1: En el siguiente ejemplo, tenemos una barra de progreso en la que podemos cambiar el valor usando los dos botones debajo de ella.

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> GeeksforGeeks | BlazeUI </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
  
    <script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
    <script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
    </script>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>
  
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">
                    GeeksforGeeks
                </h1>
            </div>
            <strong> Blaze UI Progress </strong>
            <br> <br>
  
            <blaze-progress size="medium" rounded>
                <blaze-progress-bar value="50" type="info">
                    <span id="value"> 50% </span>
                </blaze-progress-bar>
            </blaze-progress>
            <br>
  
            <div style="justify-content: space-evenly; 
                        display: flex;">
                <button onclick="changeValue(10)" 
                        class="c-button c-button--success">
                    Add 10
                </button>
  
                <button onclick="changeValue(-10)" 
                        class="c-button c-button--error">
                    Subtract 10
                </button>
            </div>
        </center>
    </div>
  
    <script>
        const changeValue = (value) => {
            let current = parseInt($('blaze-progress-bar').attr('value'))
            $('blaze-progress-bar').attr('value', current + value)
            $('#value').html(`${current + value}%`)
        }
    </script>
</body>
  
</html>

Producción:

Progreso de la interfaz de usuario de Blaze

Ejemplo 2: En el siguiente ejemplo, cambiaremos el tamaño de la barra de progreso usando botones.

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> GeeksforGeeks | BlazeUI </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
  
    <script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
    <script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
    </script>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>
  
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">
                    GeeksforGeeks
                </h1>
            </div>
            <strong> Blaze UI Progress </strong>
            <br> <br>
  
            <blaze-progress size="medium" rounded>
                <blaze-progress-bar value="50" type="info">
                    <span id="value"> 50% </span>
                </blaze-progress-bar>
            </blaze-progress>
            <br>
  
            <div style="justify-content: space-evenly; 
                        display: flex;">
                <button onclick="changeValue(10)" 
                        class="c-button u-xsmall 
                               c-button--success">
                    Add 10
                </button>
  
                <button onclick="changeValue(-10)" 
                        class="c-button u-xsmall 
                               c-button--error">
                    Subtract 10
                </button>
            </div>
            <br>
  
            <div style="justify-content: space-evenly; 
                        display: flex;">
                <button onclick="changeSize('xsmall')" 
                        class="c-button u-xsmall 
                               c-button--brand">
                    XSMALL
                </button>
  
                <button onclick="changeSize('small')" 
                        class="c-button u-xsmall 
                               c-button--brand">
                    SMALL
                </button>
  
                <button onclick="changeSize('medium')" 
                        class="c-button u-xsmall 
                               c-button--brand">
                    MEDIUM
                </button>
  
                <button onclick="changeSize('large')" 
                        class="c-button u-xsmall 
                               c-button--brand">
                    LARGE
                </button>
  
                <button onclick="changeSize('xlarge')" 
                        class="c-button u-xsmall 
                               c-button--brand">
                    XLARGE
                </button>
  
                <button onclick="changeSize('super')" 
                        class="c-button u-xsmall 
                               c-button--brand">
                    SUPER
                </button>
            </div>
            <br>
        </center>
    </div>
  
    <script>
        const changeValue = (value) => {
            let current = parseInt($('blaze-progress-bar').attr('value'))
            $('blaze-progress-bar').attr('value', current + value)
            $('#value').html(`${current + value}%`)
        }
        const changeSize = (size) => {
            $('blaze-progress').attr('size', size)
        }
    </script>
</body>
  
</html>

Producción:

Progreso de la interfaz de usuario de Blaze

Ejemplo 3 : En el siguiente ejemplo, tenemos una barra de progreso apilada con una esquina redondeada. Incluso podemos alternar la esquina redondeada de la barra de progreso con el botón.

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> GeeksforGeeks | BlazeUI </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
  
    <script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
    <script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
    </script>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>
  
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">
                    GeeksforGeeks
                </h1>
            </div>
            <strong>
                Blaze UI Progress
            </strong>
            <br /> <br />
  
            <button onclick="toggleRounded()" 
                    class="c-button">
                Toggle Rounded
            </button>
            <br /> <br />
  
            <blaze-progress size="100" 
                            rounded="true">
                <blaze-progress-bar value="20">
                    20%
                </blaze-progress-bar>
                <blaze-progress-bar value="8" 
                                    type="brand">
                    8%
                </blaze-progress-bar>
                <blaze-progress-bar value="30" 
                                    type="info">
                    30%
                </blaze-progress-bar>
                <blaze-progress-bar value="12" 
                                    type="warning">
                    12%
                </blaze-progress-bar>
                <blaze-progress-bar value="15" 
                                    type="success">
                    15%
                </blaze-progress-bar>
                <blaze-progress-bar value="15" 
                                    type="error">
                    15%
                </blaze-progress-bar>
            </blaze-progress>
        </center>
    </div>
  
    <script>
        const toggleRounded = () => {
            let curr = $('blaze-progress').attr('rounded')
            $('blaze-progress')
             .attr('rounded', curr === 'true' ? 'false' : 'true')
        }
    </script>
</body>
  
</html>

Producción:

 

Ejemplo 4 : en el siguiente ejemplo, tenemos una barra de progreso cuyo valor podemos reducir o aumentar, así como cambiar el color de la barra de progreso.

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> GeeksforGeeks | BlazeUI </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
  
    <script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
    <script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
    </script>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>
  
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">
                    GeeksforGeeks
                </h1>
            </div>
            <strong>
                Blaze UI Progress
            </strong>
            <br /> <br />
  
            <blaze-progress size="medium" rounded>
                <blaze-progress-bar value="50" type="info">
                    <span id="value"> 50% </span>
                </blaze-progress-bar>
            </blaze-progress>
            <br />
  
            <div style="justify-content: space-evenly; display: flex;">
                <button onclick="changeValue(10)" 
                        class="c-button c-button--success">
                    Add 10
                </button>
  
                <button onclick="changeValue(-10)" 
                        class="c-button c-button--error">
                    Subtract 10
                </button>
            </div>
            <br />
  
            <div>
                <button onclick="changeColour('')" 
                        class="c-button">
                    Default
                </button>
                <button onclick="changeColour('brand')" 
                        class="c-button c-button--brand">
                    Brand
                </button>
                <button onclick="changeColour('info')" 
                        class="c-button c-button--info">
                    Info
                </button>
                <button onclick="changeColour('warning')" 
                        class="c-button c-button--warning">
                    Warning
                </button>
                <button onclick="changeColour('success')" 
                        class="c-button c-button--success">
                    Success
                </button>
                <button onclick="changeColour('error')" 
                        class="c-button c-button--error">
                    Error
                </button>
            </div>
        </center>
    </div>
  
    <script>
        const changeValue = (value) => {
            let current = parseInt($('blaze-progress-bar').attr('value'))
            $('blaze-progress-bar').attr('value', current + value)
            $('#value').html(`${current + value}%`)
        }
        const changeColour = (value) => {
            $('blaze-progress-bar').attr('type', value)
        }
    </script>
</body>
  
</html>

Producción:

 

Referencia: https://www.blazeui.com/components/progress/

Publicación traducida automáticamente

Artículo escrito por manavsarkar07 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 *