La interfaz de usuario semántica es un marco de interfaz de usuario basado en el preprocesador CSS menos y jQuery . Se utiliza para crear experiencias web hermosas y receptivas utilizando los elementos y módulos que vienen incluidos.
Se utiliza un módulo de acordeón para brindar a los usuarios la capacidad de alternar la visualización de secciones de contenido. En un momento específico, solo se puede ampliar una sección de contenido.
En este artículo, veremos la variación del fluido de acordeón de la interfaz de usuario semántica. Un acordeón fluido ocupa todo el ancho de su contenedor principal.
Clases de variación de fluido de acordeón de interfaz de usuario semántica:
- fluid: esta clase se usa en el módulo de acordeón para tomar todo el ancho de su contenedor.
Sintaxis:
<div class="ui styled fluid accordion">
...
</div>
Ejemplo 1: El siguiente ejemplo muestra el uso de la clase de fluido en el módulo de acordeón para tomar el ancho completo de un contenedor.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Accordion Fluid Variation</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<style>
.ui.container>.header {
text-align: center;
}
h3 {
margin-top: 0px;
}
.ui.ui.container>p {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div class="header">
<h1 class="ui green header">GeeksforGeeks</h1>
<h3>Semantic-UI - Accordion Fluid Variation</h3>
</div>
<p><b>Without <i>fluid</i> class:</b></p>
<div class="ui accordion styled">
<div class="active title">
<i class="dropdown icon"></i>
What is GeeksforGeeks?
</div>
<div class="active content">
<p>
GeeksforGeeks is a computer science portal for
GeeksforGeeks where you can find articles on
various topics of computer science subjects.
</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
Does GeeksforGeeks provide courses?
</div>
<div class="content">
<p>
Yes. GeeksforGeeks provide courses on may
subjects like DSA, Competitive Programming,
GATE CSE, etc.
</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
Can I submit my articles on GeeksforGeeks?
</div>
<div class="content">
<p>
Yes. You can visit <a href=
"https://write.geeksforgeeks.org">
https://write.geeksforgeeks.org</a> to
submit your articles on geeksforgeeks.
</p>
</div>
</div>
<p><b>With <i>fluid</i> class:</b></p>
<div class="ui accordion styled fluid">
<div class="active title">
<i class="dropdown icon"></i>
What is GeeksforGeeks?
</div>
<div class="active content">
<p>
GeeksforGeeks is a computer science portal
for GeeksforGeeks where you can find articles
on various topics of computer science subjects.
</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
Does GeeksforGeeks provide courses?
</div>
<div class="content">
<p>
Yes. GeeksforGeeks provide courses on may
subjects like DSA, Competitive Programming,
GATE CSE, etc.
</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
Can I submit my articles on GeeksforGeeks?
</div>
<div class="content">
<p>
Yes. You can visit <a href=
"https://write.geeksforgeeks.org">
https://write.geeksforgeeks.org</a> to
submit your articles on geeksforgeeks.
</p>
</div>
</div>
</div>
<script>
$('.ui.accordion').accordion();
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra el acordeón fluido con un fondo oscuro, es decir, un acordeón invertido.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Accordion Fluid Variation</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<style>
.ui.container>.header {
text-align: center;
}
h3 {
margin-top: 0px;
}
</style>
</head>
<body>
<div class="ui container">
<div class="header">
<h1 class="ui header green">GeeksforGeeks</h1>
<h3>Semantic UI - Accordion Fluid Variation</h3>
</div>
<div class="ui segment inverted">
<div class="ui accordion fluid inverted">
<div class="active title">
<i class="dropdown icon"></i>
What is GeeksforGeeks?
</div>
<div class="active content">
<p>
GeeksforGeeks is a computer science
portal for GeeksforGeeks where you
can find articles on various
topics of computer science subjects.
</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
Does GeeksforGeeks provide courses?
</div>
<div class="content">
<p>
Yes. GeeksforGeeks provide courses
on may subjects like DSA,
Competitive Programming, GATE CSE, etc.
</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
Can I submit my articles on GeeksforGeeks?
</div>
<div class="content">
<p>
Yes. You can visit <a href=
"https://write.geeksforgeeks.org">
https://write.geeksforgeeks.org</a> to
submit your articles on geeksforgeeks.
</p>
</div>
</div>
</div>
</div>
<script>
$('.ui.accordion').accordion();
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/modules/accordion.html#fluid