Foundation CSS Off-canvas Paneles Múltiples

Posted on by Rudeus Greyrat

Foundation CSS es un marco front-end para crear diseños web flexibles que son gratuitos y de código abierto. Es uno de los marcos CSS más potentes, con una cuadrícula receptiva, componentes de interfaz de usuario HTML y CSS, plantillas y más que funcionan en todas las plataformas. También tiene una serie de capacidades opcionales de extensión de JavaScript. Gracias a la integración de la utilidad Fastclick.js, también se procesa rápidamente en dispositivos móviles.

Cuando están activos, los paneles fuera del lienzo se colocan fuera de la ventana gráfica y la diapositiva. Se puede acceder a este menú fuera del lienzo desde la izquierda, la derecha, la parte superior o la parte inferior de la pantalla, y se puede superponer, empujar y operar con elementos pegajosos. Estos son patrones de respuesta móvil diseñados principalmente para dispositivos móviles. En pantallas medianas y de escritorio, esto también se puede utilizar como barra lateral.

Los paneles múltiples nos permiten agregar múltiples paneles fuera del lienzo a una página web. Podemos agregar los paneles en los lados superior, inferior, izquierdo y derecho de la página web o del contenedor fuera del lienzo .

Clases de paneles múltiples de Foundation CSS:

No hay una clase específica para tener varias clases. Simplemente podemos agregar paneles en cualquier dirección, como izquierda, derecha, abajo o arriba. Usaremos las clases direccionales básicas fuera del lienzo y fuera del lienzo.

  • off-canvas: esta clase crea un contenedor fuera del lienzo.
  • off-canvas-content: El contenido principal de tu página se mantendrá en este contenedor.
  • off-canvas-wrapper: esta clase se usa para envolver el contenido dentro de la ventana gráfica fuera del lienzo.
  • position-left: la ventana gráfica se abre desde el lado izquierdo con esta clase.
  • position-right: la ventana gráfica se abre desde el lado derecho con esta clase.
  • position-top: la ventana gráfica se abre desde el lado superior con esta clase.
  • position-bottom: la ventana gráfica se abre desde la parte inferior con esta clase.

Atributo de paneles múltiples de Foundation CSS:

  • data-off-canvas: este atributo es responsable de representar el contenido.

Sintaxis:

<div class="off-canvas position-class"
     id="" data-off-canvas>
    <--One panel goes here-->
</div>
<div class="off-canvas position-class" 
     id="" data-off-canvas>
    <--Another panel goes here-->
</div>
<div class="off-canvas-content" data-off-canvas-content>
    <!-- The page content goes here -->
</div>

Ejemplo 1: El ejemplo de código muestra cómo podemos agregar dos paneles al mismo tiempo. Uno arriba y otro abajo usando las clases direccionales.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
  
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green;">
          GeeksforGeeks
         </h1>
        <strong>
              Foundation CSS Off-canvas Multiple Panels
          </strong>
    </center>
    <div style="margin: 2% 30%;">
        <button type="button" 
                class="button"
                data-toggle="offCanvasTopSplit1"
                style="margin-left: 4rem;">
            Open top Panel
        </button>
        <button type="button" 
                class="button"
                data-toggle="offCanvasBottomSplit2"
                style="margin-left: 12rem;">
            Open bottom Panel
        </button>
        <div class="grid-x grid-margin-x">
            <div class="cell small-6">
                <div class="off-canvas-wrapper">
                    <div class="off-canvas-absolute position-top"
                        id="offCanvasTopSplit1" data-off-canvas>
                        <p>I am inside Top off-canvas</p>
                    </div>
                    <div class="off-canvas-content"
                        style="min-height: 300px;"
                        data-off-canvas-content>
                    </div>
                </div>
            </div>
            <div class="cell small-6">
                <div class="off-canvas-wrapper">
                    <div class="off-canvas-absolute position-bottom"
                        id="offCanvasBottomSplit2" data-off-canvas>
                        <p>I am inside Bottom off-canvas</p>
                    </div>
                    <div class="off-canvas-content"
                        style="min-height: 300px;"
                            data-off-canvas-content>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Producción:

 

Ejemplo 2: El ejemplo de código muestra cómo podemos agregar tres paneles al mismo tiempo. Uno en la parte superior y en los lados izquierdo o derecho usando las clases direccionales.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
  
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green;">
              GeeksforGeeks
          </h1>
        <strong>
              Foundation CSS Off-canvas Multiple Panels
          </strong>
    </center>
    <div style="margin:2% 30%;">
        <button type="button" 
                class="button"
                data-toggle="offCanvasLeftSplit1">
            Open Left Panel
        </button>
        <button type="button" 
                class="button"
                data-toggle="offCanvasTopSplit2"
                style="margin-left: 5rem;">
            Open Top Panel
        </button>
        <button type="button" 
                class="button"
                data-toggle="offCanvasRightSplit3"
                style="margin-left: 5rem;">
            Open Right Panel
        </button>
        <div class="grid-x grid-margin-x"
             style="width:50rem;">
            <div class="cell small-6" 
                 style="margin-left:-4rem;">
                <div class="off-canvas-wrapper">
                    <div class="off-canvas-absolute position-left"
                         id="offCanvasLeftSplit1" data-off-canvas>
                        <p>I am inside left off-canvas</p>
                    </div>
                    <div class="off-canvas-content"
                         style="min-height:300px;"
                         data-off-canvas-content>
                    </div>
                </div>
            </div>
            <div class="cell small-6" 
                 style="margin-left:-14rem;width:14rem;">
                <div class="off-canvas-wrapper">
                    <div class="off-canvas-absolute position-top"
                        id="offCanvasTopSplit2" data-off-canvas>
                        <p>I am inside Top off-canvas</p>
                    </div>
                    <div class="off-canvas-content"
                        style="min-height:300px;"
                        data-off-canvas-content>
                    </div>
                </div>
            </div>
            <div class="cell small-6" 
                 style="margin-left:-15rem;">
                <div class="off-canvas-wrapper">
                    <div class="off-canvas-absolute position-right"
                         id="offCanvasRightSplit3" data-off-canvas>
                        <p>I am inside right off-canvas</p>
                    </div>
                    <div class="off-canvas-content"
                         style="min-height:300px;"
                        data-off-canvas-content>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Producción:

 

Referencia: https://get.foundation/sites/docs/off-canvas.html#multiple-panels

Publicación traducida automáticamente

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