La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar en diferentes marcos.
En este artículo, aprenderemos sobre los diferentes tipos de acordeones disponibles en Semantic UI. Tener un tipo diferente de acordeón es bueno para cualquier desarrollador. El tipo de acordeón se utiliza para especificar el tipo de acordeón utilizado para la condición particular. Hay 2 tipos de acordeón en la interfaz de usuario de Semántica que se describen a continuación.
Tipo de acordeón:
- Acordeón: Este es un acordeón estándar con una función de contracción básica para representar el contenido, sin ningún tipo de decoración o estilo.
- Acordeón de estilo: Este es un acordeón de estilo que contiene las diferentes clases predefinidas que se pueden utilizar para decorar el acordeón. Un acordeón con estilo agrega formato básico.
Sintaxis:
<div class="ui accordion"> Content </div>
Comprenderemos la implementación de los tipos de acordeón de interfaz de usuario semántica a través de los ejemplos.
Ejemplo 1: Este ejemplo ilustra el tipo de acordeón estándar de interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Accordion Types</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 class="ui text container">
<h1 class="ui green header center aligned">
GeeksforGeeks
</h1>
<h3 class="ui header center aligned">
Semantic UI Accordion Types
</h3>
<h4>Accordion:</h4>
<div class="ui 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>
</div>
<script>
$('.ui.accordion').accordion();
</script>
</body>
</html>
Producción:
Tipo de acordeón estándar de interfaz de usuario semántica.
Ejemplo 2 : este ejemplo ilustra el tipo de acordeón con estilo de interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Accordion Types</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 class="ui text container">
<h1 class="ui green header center aligned">
GeeksforGeeks
</h1>
<h3 class="ui header center aligned">
Semantic UI Accordion Types
</h3>
<h4>Style Accordion:</h4>
<div class="ui styled 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>
</div>
<script>
$('.ui.accordion').accordion();
</script>
</body>
</html>
Producción:
Tipo de acordeón con estilo de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/accordion.html#accordion
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA