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. Utiliza una clase para agregar CSS a los elementos.
El acordeón es la interfaz de usuario interactiva que nos permite alternar la visualización de secciones como ocultar y mostrar.
Código jQuery:
$('.ui.accordion').accordion();
Ejemplo 1: Este ejemplo usa Semantic-UI para crear un acordeón.
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Accordion</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div style="margin-top: 20px" class="ui container">
<div class="ui accordion">
<div class="active title">
<i class="dropdown icon"></i>
What is Geeksforgeeks?
</div>
<div class="active content">
<p>
Geeksforgeeks is a platform where
you can find solution to any king
of computer science related problem
</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
What is Internshala?
</div>
<div class="content">
<p>
It's an online platform which
provide opportunity for student
to get internship.
</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
What is Semantic-ui:
</div>
<div class="content">
<p>
It's a really cool framework
by which you can do cool stuff
</p>
</div>
</div>
</div>
<script>
$('.ui.accordion').accordion();
</script>
</body>
</html>
Producción:
Pero el resultado del ejemplo anterior parece tan simple. Para que se vea realmente genial como todo esto en un cuadro cuadrado, solo agrega una clase con estilo como ‘acordeón con estilo de interfaz de usuario’.
Ejemplo 2: Este ejemplo usa Semantic-UI para crear un acordeón con estilo.
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Accordion</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div style="margin-top: 20px" class="ui container">
<div class="ui accordion">
<div class="active title">
<i class="dropdown icon"></i>
What is Geeksforgeeks?
</div>
<div class="active content">
<p>
Geeksforgeeks is a platform where
you can find solution to any king
of computer science related problem
</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
What is Internshala?
</div>
<div class="content">
<p>
It's an online platform which
provide opportunity for student
to get internship.
</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
What is Semantic-ui:
</div>
<div class="content">
<p>
It's a really cool framework
by which you can do cool stuff
</p>
</div>
</div>
</div>
<script>
$('.ui.accordion').accordion();
</script>
</body>
</html>
Producción:
Ejemplo 3: Este ejemplo usa Semantic-UI para crear un acordeón anidado.
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Nested Accordion</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div style="margin-top: 20px" class="ui container">
<div class="ui styled accordion">
<div class="active title">
<i class="dropdown icon"></i>
Geeksforgeeks Articles
</div>
<div class="active content">
Data Structure
<div class="accordion">
<div class="active title">
<i class="dropdown icon"></i>
Link-List
</div>
<div class="active content">
<p>Types of Link-List</p>
<div class="accordion">
<div class="title">
<i class="dropdown icon"></i>
Singly Link-List
</div>
<div class="content">
It contain data part and next pointer.
</div>
<div class="title">
<i class="dropdown icon"></i>
Doubly Link-List
</div>
<div class="content">
It contain data part, next and prev pointer.
</div>
</div>
</div>
<div class="title">
<i class="dropdown icon"></i>
Tree
</div>
<div class="content">
Binary Tree
</div>
</div>
</div>
<div class="title">
<i class="dropdown icon"></i>
Geekforgeeks Courses
</div>
<div class="content">
<p>Courses</p>
<div class="accordion">
<div class="active title">
<i class="dropdown icon"></i>
Web Technologies
</div>
</div>
</div>
</div>
</div>
<script>
$('.ui.accordion').accordion();
</script>
</body>
</html>
Producción:
Ejemplo 4: Este ejemplo usa Semantic-UI para crear un menú de acordeón. Aquí usaremos la casilla de verificación y el botón de opción.
Código jQuery:
$('.ui.accordion').accordion();
$('.ui.radio.checkbox').checkbox();
$('.ui.checkbox').checkbox();
Código completo:
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Accordion Menu</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div style="margin-top: 20px" class="ui container">
<div class="ui vertical accordion menu">
<div class="item">
<a class="active title">
<i class="dropdown icon"></i>
Choose Test
</a>
<div class="active content">
<div class="ui form">
<div class="grouped fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio"
name="test" value="ds">
<label>Data Structure</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio"
name="test" value="web">
<label>Web Technology</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="test"
value="programming">
<label>Programming</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<a class="title">
<i class="dropdown icon"></i>
Level (Atleast 1)
</a>
<div class="content">
<div class="ui form">
<div class="grouped fields">
<div class="field">
<div class="ui checkbox">
<input type="checkbox"
name="easy">
<label>Easy</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox"
name="intermediate">
<label>Intermediate</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox"
name="diff">
<label>Difficult</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$('.ui.accordion').accordion();
$('.ui.radio.checkbox').checkbox();
$('.ui.checkbox').checkbox();
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA