Pasos de espectro – Barcelona Geeks

Spectre Steps se utiliza para diseñar una barra de progreso que consiste, como habrás visto en las plataformas de compras o en los portales de empleo de cualquier empresa. En la plataforma de compras, el estado de la compra se muestra en las barras de pasos. Y en las plataformas de trabajo, los pasos de su entrevista se muestran con la ayuda de este componente.

Para crear pasos, debe agregar un elemento contenedor con la clase de paso . Y agregue elementos secundarios con la clase step-item . El elemento de paso con la clase activa se resaltará e indicará el estado actual de progreso.

Clase de pasos de espectro:

paso: Esta clase se utiliza para crear el contenedor de pasos.
step-item: esta clase se utiliza para crear elementos de paso.

Sintaxis:

<ul class="step">
  <li class="step-item">
    <a href="#" class="tooltip">...</a>
  </li>
  <li class="step-item active">
    <a href="#" class="tooltip">...</a>
  </li>
    ...
</ul>

El siguiente ejemplo ilustra los pasos de Spectre:

Ejemplo: En este ejemplo, crearemos pasos que incluyen 4 pasos y activaremos el segundo paso usando la clase de paso y el elemento de paso será verde si el contenido es verde.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>SPECTRE Steps Class</title>
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <strong>SPECTRE Steps Class</strong>
        <br><br>
        <ul class="step">
          <li class="step-item">
            <a href="#" class="tooltip text-success"
               data-tooltip="Scruting Resume">
              Resume Submitted
            </a>
          </li>
          <li class="step-item active">
            <a href="#" class="tooltip"
               data-tooltip="Test of Skills">
              Technical Round 1
            </a>
          </li>
          <li class="step-item">
            <a href="#" class="tooltip"
               data-tooltip="Test of Skills">
              Technical Round 2
            </a>
          </li>
          <li class="step-item">
            <a href="#" class="tooltip"
               data-tooltip="HR Discussion">
              Managerial Round
            </a>
          </li>
        </ul>
    </center>
</body>
 
</html>

Producción:

Pasos de espectro

Referencia: https://picturepan2.github.io/spectre/components/steps.html

Publicación traducida automáticamente

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

HTML

Deja una respuesta Cancelar la respuesta