Caja de desplazamiento fuera del lienzo de Foundation CSS

Posted on by Rudeus Greyrat

Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.  

Los paneles fuera del lienzo se colocan fuera de la ventana gráfica y se deslizan hacia adentro cuando se activan. Estos menús fuera del lienzo pueden abrirse desde la izquierda, derecha, arriba o abajo, superponerse a nuestro contenido, empujar nuestro contenido y pueden funcionar con elementos pegajosos. Estos son patrones móviles receptivos principalmente para pantallas móviles. Esto también se puede usar como una barra lateral en pantallas medianas y de escritorio.

El cuadro de desplazamiento fuera del lienzo es útil para colocar elementos desplazables dentro de un fuera del lienzo. 

Clases de cuadro de desplazamiento fuera del lienzo de Foundation CSS:

  • off-canvas: esta clase crea un contenedor fuera del lienzo.
  • data-off-canvas-scrollbox: Contiene elementos desplazables dentro del lienzo.
  • off-canvas-content: El contenido principal de tu página estará en este contenedor.
  • botón: Esto crea un botón que se puede usar para abrir o cerrar el panel.

Sintaxis:

<div class="off-canvas position-class" id="" 
    data-off-canvas data-off-canvas-scrollbox>
       <!-- menu or off-canvas content -->
</div>

<div class="off-canvas-content" 
    data-off-canvas-content>
       <!-- page content  -->
</div>

Nota:

  • El atributo data-off-canvas se debe agregar al contenedor fuera del lienzo.
  • El atributo id del lienzo fuera del lienzo es único, por lo que puede ser objetivo del desenstringdor de clic de un botón.
  • El atributo data-off-canvas-content debe agregarse al contenedor de contenido fuera del lienzo que consiste en el contenido de la página.
  • El atributo data-open o data-toggle se agrega a cualquier elemento para abrir un panel fuera del lienzo cuando se hace clic en él.
  • El valor de los atributos data-open o data-toggle debe ser igual a la identificación única del contenedor fuera del lienzo.
  • El atributo de cierre de datos se usa para cerrar un panel fuera del lienzo.
  • El valor predeterminado de un contenedor fuera del lienzo es position: fixed .

Ejemplo 1: este es un ejemplo básico que ilustra el cuadro de desplazamiento fuera del lienzo del lado izquierdo creado con Foundation CSS.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Off-canvas Scrollbox</title>
  
    <!-- 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>
  
    <style>
        body {
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <strong>Foundation CSS Off-canvas Scrollbox</strong>
  
    <div class="off-canvas-wrapper">
        <div class="off-canvas-content" 
            data-off-canvas-content style="min-height:300px;">
            <div class="grid-x">
                <div class="cell">
                    <button type="button" class="button" 
                        data-toggle="offCanvasScrollbox">
                        Open Off-canvas
                    </button> <br /><br />
                </div>
            </div>
  
            <div class="off-canvas-absolute position-left" 
                id="offCanvasScrollbox" data-off-canvas
                data-content-scroll="false">
                <div style="padding:0 1rem;">
                    <article data-off-canvas-scrollbox 
                        style="max-height:290px; 
                            overflow:auto; padding:0.5rem 0;
                                margin-bottom:1rem; 
    box-shadow:inset 0 -10px 10px -10px rgba(0,0,0,0.65);">
                        <p>List 1</p>
                        <ul>
                            <li>Item 01</li>
                            <li>Item 02</li>
                            <li>Item 03</li>
                            <li>Item 04</li>
                            <li>Item 05</li>
                            <li>Item 06</li>
                            <li>Item 07</li>
                            <li>Item 08</li>
                            <li>Item 09</li>
                            <li>Item 10</li>
                        </ul>
                    </article>
                    <article style="max-height:290px; 
                        overflow:auto; padding:0.5rem 0; 
                           margin-bottom:1rem; 
box-shadow:inset 0 -10px 10px -10px rgba(0,0,0,0.65);">
                        <p>List 2</p>
                        <ul>
                            <li>Item 01</li>
                            <li>Item 02</li>
                            <li>Item 03</li>
                            <li>Item 04</li>
                            <li>Item 05</li>
                            <li>Item 06</li>
                            <li>Item 07</li>
                            <li>Item 08</li>
                            <li>Item 09</li>
                            <li>Item 10</li>
                        </ul>
                    </article>
                    <article style="padding:0.5rem 0;">
                        <p>List 3</p>
                        <ul>
                            <li>Item 01</li>
                            <li>Item 02</li>
                            <li>Item 03</li>
                            <li>Item 04</li>
                            <li>Item 05</li>
                            <li>Item 06</li>
                            <li>Item 07</li>
                            <li>Item 08</li>
                            <li>Item 09</li>
                            <li>Item 10</li>
                        </ul>
                    </article>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Producción:

 

Ejemplo 2: este es un ejemplo básico que ilustra el cuadro de desplazamiento fuera del lienzo del lado derecho creado con Foundation CSS.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Off-canvas Scrollbox</title>
    <!-- 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>
  
    <style>
        body {
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <strong>Foundation CSS Off-canvas Scrollbox</strong>
  
    <div class="off-canvas-wrapper">
        <div class="off-canvas-content" 
            data-off-canvas-content style="min-height:300px;">
            <div class="grid-x">
                <div class="cell">
                    <button type="button" class="button" 
                        data-toggle="offCanvasScrollbox">
                        Open Off-canvas
                    </button>
                </div>
            </div>
            <div class="off-canvas-absolute position-right" 
                id="offCanvasScrollbox" data-off-canvas
                data-content-scroll="false">
                <div style="padding: 0 1rem;">
                    <article data-off-canvas-scrollbox 
                        style="max-height:290px; overflow:auto; 
                        padding:0.5rem 0; margin-bottom:1rem; 
    box-shadow:inset 0 -10px 10px -10px rgba(0,0,0,0.65);">
                        <p>List 1</p>
                        <ul>
                            <li>Item 01</li>
                            <li>Item 02</li>
                            <li>Item 03</li>
                            <li>Item 04</li>
                            <li>Item 05</li>
                            <li>Item 06</li>
                            <li>Item 07</li>
                            <li>Item 08</li>
                            <li>Item 09</li>
                            <li>Item 10</li>
                        </ul>
                    </article>
                    <article style="max-height:290px;
                        overflow:auto; padding:0.5rem 0; 
                        margin-bottom: 1rem; 
box-shadow:inset 0 -10px 10px -10px rgba(0,0,0,0.65);">
                        <p>List 2</p>
                        <ul>
                            <li>Item 01</li>
                            <li>Item 02</li>
                            <li>Item 03</li>
                            <li>Item 04</li>
                            <li>Item 05</li>
                            <li>Item 06</li>
                            <li>Item 07</li>
                            <li>Item 08</li>
                            <li>Item 09</li>
                            <li>Item 10</li>
                        </ul>
                    </article>
                    <article style="padding:0.5rem 0;">
                        <p>List 3</p>
                        <ul>
                            <li>Item 01</li>
                            <li>Item 02</li>
                            <li>Item 03</li>
                            <li>Item 04</li>
                            <li>Item 05</li>
                            <li>Item 06</li>
                            <li>Item 07</li>
                            <li>Item 08</li>
                            <li>Item 09</li>
                            <li>Item 10</li>
                        </ul>
                    </article>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Producción:

 

Referencia: https://get.foundation/sites/docs/off-canvas#off-canvas-scrollbox

Publicación traducida automáticamente

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