Pestañas de espectro – Barcelona Geeks

Spectre Tabs se usa para crear pestañas para mostrar contenido en la página. Es una especie de enrutamiento a un componente diferente sin redirigir a una página diferente. Las pestañas permiten cambiar rápidamente entre diferentes vistas. Las pestañas son el componente crucial en Spectre, puede usar íconos, marcar cualquier cosa en las pestañas.

Para crear una pestaña, debe agregar un elemento contenedor con la clase de pestaña . Y agregue elementos secundarios con la clase de elemento de pestaña . Puede agregar la clase tab-block para una pestaña de ancho completo. Se resaltará el elemento de pestaña o su hijo <a> con la clase activa.

Clase de pestañas Spectre:

pestaña: esta clase se utiliza para crear un componente de pestaña.
tab-item: esta clase se utiliza para configurar el elemento de la pestaña.
tab-block: esta clase se usa para hacer que la pestaña sea una pestaña de ancho completo.

Sintaxis:

<ul class="tab tab-block">
    <li class="tab-item ">
            <a href="#">...</a>
    </li>
    ...
</ul>

El siguiente ejemplo ilustra las pestañas de Spectre:

Ejemplo:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <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 Tabs Class</strong>
        <br><br>
    </center>
    <strong>Normal Tabs:</strong>
    <ul class="tab tab-block">
      <li class="tab-item">
        <a href="#">HTML</a>
      </li>
      <li class="tab-item">
        <a href="#">CSS</a>
      </li>
      <li class="tab-item">
        <a href="#">JS</a>
      </li>
      <li class="tab-item">
        <a href="#" class="active">Spectre</a>
      </li>
    </ul>
    <br><br>
    <strong>Badge & Action Tabs:</strong>
    <ul class="tab tab-block">
      <li class="tab-item">
        <a href="#" class="badge" data-badge="9">
          Notification
        </a>
      </li>
      <li class="tab-item active">
        <a href="#">
          Music
        <i class="icon icon-cross"></i>
        </a>
      </li>
    </ul>
</body>
 
</html>

Producción:

Pestañas de espectro

Referencia: https://picturepan2.github.io/spectre/components/tabs.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