Foundation CSS es un marco front-end gratuito y de código abierto para generar diseños web flexibles. Con una cuadrícula receptiva, componentes de interfaz de usuario HTML y CSS, plantillas y más, es uno de los marcos CSS más poderosos. También contiene una serie de capacidades de extensión de JavaScript que se pueden activar o desactivar. También se renderiza rápidamente en dispositivos móviles gracias a la integración de la utilidad Fastclick.js.
Los paneles fuera del lienzo se colocan fuera de la ventana gráfica y se deslizan cuando están activos. Se puede acceder a este menú fuera del lienzo desde la parte izquierda, derecha, superior o inferior de la pantalla, y se puede superponer, empujar y operar con elementos pegajosos. Estos son patrones de respuesta móvil que se crearon teniendo en cuenta los dispositivos móviles. Esto también se puede usar como una barra lateral en pantallas medianas y de escritorio.
Revelar fuera del lienzo en pantallas más grandes es una función que nos ayuda a administrar la revelación del fuera del lienzo. Aquí podemos usar las clases especificadas para mantener el fuera del lienzo revelado en la pantalla grande o en el tamaño mediano y más allá. Esta característica puede ser útil cuando queremos que la ventana gráfica fuera del lienzo actúe como una barra lateral porque podemos mantener la ventana abierta con la opción desactivada en ciertos tamaños de pantalla.
Foundation CSS Off-canvas Reveal en pantallas más grandes Clases:
- revelar para grande: esta clase se usa para mantener abierta la ventana gráfica fuera del lienzo cuando el tamaño de la pantalla es grande. Se cierra cuando el tamaño de la pantalla es mediano o grande.
- revelar para medio: esta clase se usa para mantener abierta la ventana gráfica fuera del lienzo cuando el tamaño de la pantalla es mediano o grande. Se cierra cuando el tamaño de la pantalla es pequeño.
Sintaxis:
<div class="off-canvas position-left reveal-for-large" data-off-canvas> <!-- The Off-canvas content --> </div>
Ejemplo 1: en el siguiente código, se muestra la clase .reveal-for-large donde la ventana gráfica fuera del lienzo está abierta solo en pantallas de gran tamaño.
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>
<div style="margin: 1rem 5rem;">
<div class = "off-canvas-wrapper">
<div class = "off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class = "off-canvas position-left reveal-for-large"
id = "off_canvas_left" data-off-canvas>
<ul style="margin: 2rem;">
<li>
<a>DSA</a>
</li>
<li>
<a>Algorithms</a>
</li>
<li>
<a>Competitive Programming</a>
</li>
<li>
<a>Java</a>
</li>
<li>
<a>C++</a>
</li>
<li>
<a>Python</a>
</li>
</ul>
</div>
<div class = "off-canvas-content"
data-off-canvas-content>
<div style="margin: 1rem;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>
Foundation CSS Off-canvas
Reveal on Larger Screens
</strong>
</div>
<p style="margin: 1rem;">
In this example we can see the off-canvas
to be open only in large sized screen.
</p>
</div>
<button type = "button"
class = "button"
data-toggle = "off_canvas_left">
Click Here
</button>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo se demuestra el . revelación para clase media donde la ventana gráfica fuera del lienzo está abierta en tamaños de pantalla grandes y medianos.
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>
<div style="margin: 1rem 5rem;">
<div class = "off-canvas-wrapper">
<div class = "off-canvas-wrapper-inner"
data-off-canvas-wrapper>
<div class = "off-canvas position-left
reveal-for-medium"
id = "off_canvas_left" data-off-canvas>
<ul style="margin: 2rem;">
<li>
<a>DSA</a>
</li>
<li>
<a>Algorithms</a>
</li>
<li>
<a>Competitive Programming</a>
</li>
<li>
<a>Java</a>
</li>
<li>
<a>C++</a>
</li>
<li>
<a>Python</a>
</li>
</ul>
</div>
<div class = "off-canvas-content"
data-off-canvas-content>
<div style="margin: 1rem;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>
Foundation CSS Off-canvas
Reveal on Larger Screens
</strong>
</div>
<p style="margin: 1rem;">
In this example we can see
the off-canvas to be open in large
and medium sized screens.
</p>
</div>
<button type = "button"
class = "button"
data-toggle = "off_canvas_left">
Click Here
</button>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Referencia: https://get.foundation/sites/docs/off-canvas.html#reveal-on-larger-screens
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA