Los plegables son elementos de acordeón que le permiten expandir o contraer el contenido cuando los toca y son útiles para proporcionar una presentación compacta del contenido. Permite ocultar el contenido que no es inmediatamente relevante para el usuario. Aquí está la sintaxis de un plegable simple:
<ul class=”collapsible”>
<li>
<div class=”collapsible-header”><i class=”material-icons”>filter_drama</i>First</div>
<div class=”collapsible-body” ><span>GeeksforGeeks</span></div>
</li>
<li>
<div class=”collapsible-header”><i class=”material-icons”>lugar</i>Segundo</div>
<div class=”cuerpo plegable”><span>GeeksforGeeks</span></div>
</li>
<li>
<div class=”encabezado-retráctil”><i class=”iconos-materiales”>whatshot </i>Tercero</div>
<div class=”cuerpo plegable”><span>GeeksforGeeks</span></div>
</li>
</ul>
Las siguientes son las clases plegables proporcionadas por materialise con su propósito:
- La clase colapsable se usa para identificar un elemento como un componente colapsable.
- La clase de encabezado plegable se usa para establecer la etiqueta div como encabezado de sección.
- La clase de cuerpo plegable se usa para establecer la etiqueta div como contenido de una sección.
- La clase ampliable permite que varias secciones permanezcan abiertas a la vez. Este es un comportamiento predeterminado.
- La clase popout se usa para hacer la sección emergente.
- La clase de acordeón permite que solo una sección permanezca abierta a la vez.
- La clase activa permite que se abra la sección actual antes de seleccionarla.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script type = "text/javascript"
src =
"https://code.jquery.com/jquery-2.1.1.min.js">
</script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport"
content="width=device-width,
initial-scale=1.0"/>
<style>
.card-panel{
border: thin solid green;
}
</style>
</head>
<body class="container">
<h3>Collapsible in Materialize:</h3>
<div class="card-panel">
<h4>Simple Collapsible</h4>
<ul class="collapsible"
data-collapsible="accordion">
<li>
<div class="collapsible-header">
<i class="material-icons">
favorite</i>
First Option
</div>
<div class="collapsible-body">
<p>GeeksforGeeks</p>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">history</i>
Second Option
</div>
<div class="collapsible-body">
<p>GeeksforGeeks</p>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">
home</i>Third Option
</div>
<div class="collapsible-body">
<p>GeeksforGeeks</p></div>
</li>
</ul>
</div>
<div class="card-panel">
<h4>Expandable Collapsible</h4>
<ul class="collapsible"
data-collapsible="expandable">
<li>
<div class="collapsible-header">
<i class="material-icons">favorite
</i>First Option</div>
<div class="collapsible-body">
<p>GeeksforGeeks</p></div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">
history</i>Second Option</div>
<div class="collapsible-body">
<p>GeeksforGeeks</p></div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">
whatshot</i>Third Option</div>
<div class="collapsible-body">
<p>GeeksforGeeks</p></div>
</li>
</ul>
</div>
<div class="card-panel">
<h4>Pop-out Collapsible</h4>
<ul class="collapsible popout"
data-collapsible="accordion">
<li>
<div class="collapsible-header">
<i class="material-icons">
favorite</i>First Option</div>
<div class="collapsible-body">
<p>GeeksforGeeks</p></div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">history
</i>Second Option</div>
<div class="collapsible-body">
<p>GeeksforGeeks</p></div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">whatshot
</i>Third Option</div>
<div class="collapsible-body">
<p>GeeksforGeeks</p></div>
</li>
</ul>
</div>
<div class="card-panel">
<h4>Pre-selected Collapsible</h4>
<ul class="collapsible" data-collapsible="expandable">
<li>
<div class="collapsible-header active">
<i class="material-icons">
favorite</i>First Option</div>
<div class="collapsible-body">
<p>GeeksforGeeks</p></div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">history
</i>Second Option</div>
<div class="collapsible-body">
<p>GeeksforGeeks</p></div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">whatshot
</i>Third Option</div>
<div class="collapsible-body">
<p>GeeksforGeeks</p></div>
</li>
</ul>
</div>
<!-- Compiled and minified JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por tanvi_gupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA