Paneles de espectro – Barcelona Geeks

Los paneles Spectre son el contenedor de vista flexible con una sección de contenido de expansión automática. Los paneles son similares al componente de la tarjeta con más flexibilidad. Por ejemplo, se puede utilizar para crear un diseño de conversación.

Para crear un panel, necesitamos agregar un elemento contenedor con la clase del panel . Y agregue elementos secundarios con las clases panel-header , panel-nav , panel-body y/o panel-footer . El cuerpo del panel se puede expandir automáticamente y se puede desplazar verticalmente.

Clase de paneles Spectre:

panel: esta clase se utiliza para crear un contenedor de panel.
panel-header: esta clase se utiliza para establecer la sección del encabezado del panel.
panel-nav: esta clase se utiliza para crear paneles de navegación.
panel-body: esta clase se utiliza para establecer la sección del cuerpo del panel.
panel-footer: esta clase se utiliza para establecer la sección de pie de página del panel.

Sintaxis:

<div class="panel">
  <div class="panel-header">
    <div class="panel-title">..</div>
  </div>
  <div class="panel-nav">
    ...
  </div>
  <div class="panel-body">
    ...
  </div>
  <div class="panel-footer">
    ...
  </div>
</div>

El siguiente ejemplo ilustra los paneles Spectre:

Ejemplo: en este ejemplo, crearemos un panel que contenga todas las secciones de un pie de página como encabezado, navegación, cuerpo y pie de página.

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 Panels Class</strong>
    </center>
    <div class="panel">
    <div class="panel-header">
      <div class="panel-title">
          <i class="icon icon-emoji"></i>
              Geeksforgeeks
      </div>
    </div>
    <div class="panel-nav">
        <strong>About</strong>
    </div>
    <div class="panel-body">
        <p>
            Free Tutorials, Millions of Articles,
            Live, Online and Classroom Courses ,
            Frequent Coding Competitions ,Webinars 
            by Industry Experts, Internship 
            opportunities and Job Opportunities.
        </p>
    </div>
    <div class="panel-footer">
        <p>
            We provide a variety of services for you 
            to learn, thrive and also have fun!
        </p>
    </div>
</div>
</body>
  
</html>

Producción:

Paneles de espectro

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