Tarjetas de interfaz de usuario de Blaze

Posted on by Rudeus Greyrat

Blaze UI es un marco 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.

Las tarjetas Blaze UI son contenedores simples que se utilizan para contener algunos detalles en su interior. Tiene un diseño minimalista que divide las secciones de datos en la página web. Las tarjetas contienen un encabezado, cuerpo y pie de página.

Atributos de las tarjetas Blaze UI: 

  • blaze-card : Este elemento crea una tarjeta.
  • blaze-card-header : Este estilo es el encabezado de la tarjeta.
  • blaze-card-body : este elemento se diseña como el contenido del cuerpo de la tarjeta.
  • blaze-card-footer: este elemento se aplica como el pie de página de la tarjeta.

Tipos de tarjetas de interfaz de usuario de Blaze:

  • Tarjetas simples: este tipo de tarjetas son tarjetas básicas y tienen un encabezado, cuerpo y pie de página.
  • Separador : En este tipo de tarjeta, podemos crear el separador entre el contenido de las tarjetas.
  • Colores : las tarjetas pueden tener diferentes colores en diferentes partes, como el encabezado y el cuerpo pueden tener colores en ellas.
  • Pie de página de bloque: en este tipo, el pie de página de la tarjeta empuja los botones hacia el borde inferior sin dejar margen.
  • Elementos de la tarjeta : la tarjeta puede contener elementos que pueden separarse de otros elementos en la tarjeta.
  • Elementos agrupados : la tarjeta puede categorizar elementos en grupos para crear elementos agrupados.

Sintaxis : cree una tarjeta de interfaz de usuario Blaze de la siguiente manera:

<blaze-card>
  <blaze-card-header>
    <!-- Heading -->
  </blaze-card-header>
  <blaze-card-body>
    <!-- Paragraph -->
  </blaze-card-body>
  <blaze-card-footer>
    <!-- Footer -->
  </blaze-card-footer>
</blaze-card>

Ejemplo 1: En el siguiente ejemplo, tenemos una tarjeta simple con algunos detalles.

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 Cards</strong>
        <br />
        <br />
      </center>
  
      <blaze-card>
        <blaze-card-header>
          <h2>Welcome to GeeksforGeeks</h2>
        </blaze-card-header>
        <blaze-card-body>
          <p>
            <b>Some tutorials are:-</b>
          </p>
  
          <ul>
            <li>Data Structures</li>
            <li>Algorithms</li>
            <li>Machine Learning</li>
          </ul>
        </blaze-card-body>
        <blaze-card-footer>
          <p class="u-paragraph">
            A computer science portal for geeks.
          </p>
        </blaze-card-footer>
      </blaze-card>
    </div>
    <script></script>
  </body>
</html>

Producción:

 

Ejemplo 2: En el siguiente ejemplo, tenemos una tarjeta de estilo que contendrá los detalles.

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 Cards</strong>
        <br />
        <br />
      </center>
      <blaze-card>
        <div class="c-card__item c-card__item--brand">
          <h2>Welcome to GeeksforGeeks</h2>
        </div>
        <div class="c-card__item c-card__item--warning">
          <p>
            <b>Some tutorials are:-</b>
          </p>
  
          <ul>
            <li>Data Structures</li>
            <li>Algorithms</li>
            <li>Machine Learning</li>
          </ul>
        </div>
        <div class="c-card__item c-card__item--success">
          <p class="u-paragraph">
            A computer science portal for geeks.
          </p>
        </div>
      </blaze-card>
    </div>
    <script></script>
  </body>
</html>

Producción:

 

Ejemplo 3: En el siguiente ejemplo, tenemos elementos de tarjeta y elementos de tarjeta agrupados con un divisor en la tarjeta.

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 Cards</strong>
        <br />
        <br />
      </center>
      <div class="c-card c-card--grouped">
        <div class="c-card__item c-card__item--brand">
          <h2>Welcome to GeeksforGeeks</h2>
        </div>
        <div class="c-card__item">Data Structures</div>
        <div class="c-card__item">Algorithms</div>
        <div role="separator" class=
          "c-card__item c-card__item--divider">
          Programming Languages
        </div>
        <div class="c-card__item">Java</div>
        <div class="c-card__item">C++</div>
        <div class="c-card__item">Python3</div>
      </div>
      <div class="c-card__item c-card__item--success">
        <p class="u-paragraph">
          A computer science portal for geeks.
        </p>
      </div>
    </div>
    <script></script>
  </body>
</html>

Producción:

 

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

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 *