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.
Kitchen Sink tiene los elementos básicos para funcionar bien en nuestros sitios web y aplicaciones . El Panel desplegable es la clase en Foundation que se usa para mostrar el contenido cuando se hace clic en el elemento o se alterna para mostrar u ocultar el contenido.
Foundation CSS Kitchen Sink Dropdown Panel clase:
- panel desplegable: se utiliza para crear el panel desplegable con la función de alternar.
Sintaxis:
<button class="button" type="button"
data-toggle="example-dropdown">
Dropdown pane
</button>
<div class="dropdown-pane"
id="example-dropdown" data-dropdown>
...
</div>
Ejemplo 1: este ejemplo ilustra la implementación del panel desplegable en Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
crossorigin="anonymous">
</script>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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"
integrity=
"sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw=="
crossorigin="anonymous">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Kitchen Sink Dropdown pane</h3>
<button class="button"
type="button"
data-toggle="example-dropdown">
Dropdown Pane
</button>
<div class="dropdown-pane"
id="example-dropdown" data-dropdown>
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles
</p>
</div>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Panel desplegable
Ejemplo 2: este ejemplo describe el panel desplegable múltiple que tiene la opción de alternar para representar los datos en Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
crossorigin="anonymous">
</script>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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"
integrity=
"sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw=="
crossorigin="anonymous">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Kitchen Sink Dropdown pane</h3>
<button class="success button"
type="button"
data-toggle="example1-dropdown">
Dropdown Pane 1
</button>
<div class="dropdown-pane"
id="example1-dropdown" data-dropdown>
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles
</p>
</div>
<button class="alert button"
type="button"
data-toggle="example2-dropdown">
Dropdown Pane 2
</button>
<div class="dropdown-pane"
id="example2-dropdown" data-dropdown>
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles
</p>
</div>
<button class="secondary button"
type="button"
data-toggle="example3-dropdown">
Dropdown Pane 3
</button>
<div class="dropdown-pane"
id="example3-dropdown" data-dropdown>
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles
</p>
</div>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Panel desplegable múltiple
Referencia: https://get.foundation/sites/docs/kitchen-sink.html#dropdown-pane
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA