La interfaz de usuario semántica es un marco de código abierto que ofrece una variedad de componentes para hacer que su interfaz de usuario sea más significativa. Uno de ellos es “Acordeón”.
La interfaz de usuario semántica tiene un componente de acordeón para mostrar diferentes secciones de contenido. Los usuarios también pueden mostrar los acordeones sobre un fondo oscuro. Veamos esta variación de un acordeón.
Variación invertida del acordeón de la interfaz de usuario semántica : si desea mostrar el acordeón sobre un fondo negro, puede utilizar un acordeón invertido. Una sola sección o un grupo de secciones que muestren contenido relacionado se pueden mostrar en un fondo oscuro. Crearemos una interfaz de usuario para mostrar la variación invertida del acordeón.
Clase de variación invertida de acordeón de interfaz de usuario semántica:
- invertido: esta clase se usa para hacer que el acordeón esté invertido (en cuanto al color).
Sintaxis:
<div class="ui inverted segment">
<div class="ui inverted accordion">
<div class="title">......</div>
<div class="content">.....</div>
....
</div>
</div>
Para alternar entre ocultar y mostrar secciones, usamos la siguiente sintaxis:
<script>
$('.ui.accordion').accordion();
</script>
Ejemplo 1: estos ejemplos demuestran la variación invertida de acordeón mediante el uso de clases invertidas .
HTML
<!DOCTYPE html>
<html>
<head>
<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"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<br /><br />
<div class="ui container">
<h2 class="ui header green">GeeksforGeeks</h2>
<b>
<p>Semantic UI Accordion Inverted Variation</p>
</b>
<hr><br />
<div class="ui inverted segment">
<div class="ui inverted accordion">
<p>Geeks for Geeks Self-Paced Courses</p>
<div class="active title">
<i class="dropdown icon"></i>
Data Structures and Algorithms - Self Paced
</div>
<div class="active content">
<p>
Most popular course on DSA trusted by
over 50,000 students! Built with years
of experience by industry experts and
gives you a complete package of video
lectures, practice problems, quizzes,
discussion forums and contests. Start
Today!
</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
Amazon SDE Preparation Test Series
</div>
<div class="content">
<p>
A test series that will help you prepare
for coding interviews for Amazon and
other product-based companies.Programming
questions similar to those asked in
real-time Amazon interviews.The perfect
test series to practice and test your
skills!
</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
Complete Interview Preparation - Self Paced
</div>
<div class="content">
<p>
An interview-centric course designed to
prepare you for the role of SDE for both
product and service based companies.
A placement preparation pack built with
years of expertise. Prepare C++, Java,
DSA, CS Theory concepts and much more!
</p>
</div>
</div>
</div>
</div>
<script>
$('.ui.accordion').accordion();
</script>
</body>
</html>
Salida: Puede ver el acordeón en el fondo oscuro como se muestra en la imagen a continuación. Todo el contenido del acordeón está en el fondo oscuro ya que el acordeón está etiquetado con clase invertida.
Variación invertida de acordeón
Ejemplo 2:
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>
<br /><br />
<div class="ui container">
<h2 class="ui header green">GeeksforGeeks</h2>
<b>
<p>Semantic UI Accordion Inverted Variation</p>
</b>
<hr><br />
<div class="ui inverted segment">
<div class="ui inverted accordion">
<div class="item">
<a class="active title">
<i class="dropdown icon"></i>
Choose Your favourite coding language
</a>
<div class="active content">
<div class="ui inverted form">
<div class="grouped fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio"
name="test" value="ds">
<label>C++</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio"
name="test" value="web">
<label>Java</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="test"
value="programming">
<label>Python</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$('.ui.accordion').accordion();
$('.ui.radio.checkbox').checkbox();
</script>
</body>
</html>
Salida: Puede ver el acordeón en el fondo oscuro como se muestra en la imagen a continuación.
acordeón invertido
Referencia: https://semantic-ui.com/modules/accordion.html#inverted
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA