Direcciones 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 cuando se activan. Este menú fuera del lienzo puede abrirse desde la izquierda, derecha, arriba o abajo, superponer nuestro contenido, empujar nuestro contenido y puede trabajar 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.

Las indicaciones permiten que un contenedor fuera del lienzo requiera una clase de posicionamiento para determinar qué lado de la ventana gráfica se abre desde la izquierda, la derecha, la parte superior o la inferior.

Foundation CSS Off-canvas Directions Classes:

  • position-left: esta clase abre la ventana gráfica desde el lado izquierdo.
  • position-right: esta clase abre la ventana gráfica desde el lado derecho.
  • position-top: esta clase abre la ventana gráfica desde la parte superior.
  • position-bottom: esta clase abre la ventana gráfica desde la parte inferior.

Sintaxis:

<div class="off-canvas position-class" id="" data-off-canvas>
    <!-- Your menu or Off-canvas content goes here -->
</div>
<div class="off-canvas-content" data-off-canvas-content>
    <!-- Your page content lives here -->
</div>

Nota:

  1. El atributo data-off-canvas se debe agregar al contenedor fuera del lienzo.
  2. El atributo id del lienzo fuera del lienzo es único, por lo que puede ser objetivo del desenstringdor de clic de un botón.
  3. El atributo data-off-canvas-content debe agregarse al contenedor de contenido fuera del lienzo que consiste en el contenido de la página.
  4. 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.
  5. El valor de los atributos data-open o data-toggle debe ser igual a la identificación única del contenedor fuera del lienzo.
  6. El atributo de cierre de datos se usa para cerrar un panel fuera del lienzo.
  7. El valor predeterminado de un contenedor fuera del lienzo es position: fixed .

Ejemplo 1: este es un ejemplo básico que ilustra las clases de direcciones izquierda y derecha fuera del lienzo creadas con Foundation CSS.

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 Directions Classes</strong>
    </center>
    <div style="margin: 2% 30%;">
        <button type="button" class="button"
                data-toggle="offCanvasLeftSplit1">
          Open Left
        </button>
        <button type="button" class="button"
                data-toggle="offCanvasRightSplit2">
          Open Right
        </button>
        <div class="grid-x grid-margin-x">
            <div class="cell small-6">
                <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>
                        <!-- Your page content lives here -->
                    </div>
                </div>
            </div>
            <div class="cell small-6">
                <div class="off-canvas-wrapper">
                    <div class="off-canvas-absolute position-right" 
                         id="offCanvasRightSplit2" 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>
                        <!-- Your page content lives here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Producción:

Ejemplo 2: este es un ejemplo básico que ilustra las clases de direcciones fuera del lienzo superior e inferior realizadas con Foundation CSS.

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 Directions Classes</strong>
    </center>
    <div style="margin: 2% 40%;">
        <button type="button" class="button" 
                data-toggle="offCanvasTopSplit">
          Open Top
        </button>
        <button type="button" class="button"
                data-toggle="offCanvasBottomSplit">
          Open Bottom
        </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="offCanvasTopSplit" data-off-canvas>
                        <span>Top</span>
                        <button class="close-button" 
                                aria-label="Close menu"
                                type="button" data-close>
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="off-canvas-content"
                         style="min-height: 300px;" 
                         data-off-canvas-content>
                        <!-- Your page content lives here -->
                    </div>
                </div>
            </div>
            <div class="cell small-6">
                <div class="off-canvas-wrapper">
                    <div class="off-canvas-absolute position-bottom"
                         id="offCanvasBottomSplit" data-off-canvas>
                        <button class="close-button"
                                aria-label="Close menu" 
                                type="button" data-close>
                            <span aria-hidden="true">×</span>
                        </button>
                        <span>Bottom</span>
                    </div>
                    <div class="off-canvas-content" 
                         style="min-height: 300px;"
                         data-off-canvas-content>
                        <!-- Your page content lives here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Producción:

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

Publicación traducida automáticamente

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