Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
Las variaciones de acordeón de la interfaz de usuario semántica se utilizan para crear acordeones con diferentes variaciones. El acordeón de interfaz de usuario semántica ofrece las siguientes variaciones.
Clase de variación de acordeón de interfaz de usuario semántica:
- fluido : esta clase se usa para crear un acordeón que puede ocupar el ancho de su contenedor.
- invertido : esta clase se usa para formatear para que aparezca en fondos oscuros.
Sintaxis:
<div class="ui fluid accordion"> .... </div>
Ejemplo 1: el siguiente código demuestra la variación de acordeón fluido de la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<style>
button {
width: 170px;
}
.accordion {
width: 600px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<strong>Semantic UI Variations Accordion</strong>
</center>
<br><br>
<strong>Accordion Variations:</strong>
<div class="ui styled fluid accordion">
<div class="active title">
<i class="dropdown icon"></i>
GeeksforGeeks
</div>
<div class="active content">
<p>
GeeksforGeeks is a computer science portal.
It is the best platform to lean programming.
</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
Semantic UI
</div>
<div class="content">
<p>
Semantic UI is a modern framework used in
developing seamless designs for the website,
It gives the user a lightweight experience
with its components. It uses the predefined
CSS and jQuery to incorporate in different
frameworks.
</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
HTML
</div>
<div class="content">
<p>
HTML stands for HyperText Markup Language.
It is used to design web pages using markup
language.
</p>
</div>
</div>
</body>
</html>
Producción:
Variaciones de acordeón de la interfaz de usuario semántica
Ejemplo 2: el siguiente código demuestra la variación de acordeón invertido de la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<style>
body
{
margin-left:10px;
margin-right:10px;
}
button {
width: 170px;
}
.accordion {
width: 600px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<strong>Semantic UI Inverted accordion variation</strong>
</center>
<br><br>
<strong>Inverted Accordion Variant:</strong>
<div class="ui inverted segment">
<div class="ui inverted accordion">
<div class="active title">
<i class="dropdown icon"></i>
GeeksforGeeks
</div>
<div class="active content">
<p>
GeeksforGeeks is a computer science portal.
It is the best platform to lean programming.
</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
Semantic UI
</div>
<div class="content">
<p>...</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
HTML
</div>
<div class="content">
<p>...</p>
</div>
</div>
</div>
</body>
</html>
Producción:
Variaciones de acordeón de la interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/modules/accordion.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA