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.
El tipo de acordeón se utiliza para especificar el tipo de acordeón utilizado para la condición particular. El tipo de estilo de acordeón de interfaz de usuario semántica se utiliza para agregar formato básico al elemento de acordeón.
Tipo de estilo de acordeón de interfaz de usuario semántica Clase utilizada:
- estilizado: se utiliza para agregar formato básico al elemento acordeón.
Sintaxis:
<div class="ui styled accordion">
....
</div
Ejemplo 1: en este ejemplo, describiremos el tipo de estilo de acordeón de interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Accordion Styled Type</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 Styled Type
</h3>
<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:
Ejemplo 2: En este ejemplo, describiremos el tipo de estilo de acordeón de interfaz de usuario semántica con variaciones invertidas.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Accordion Styled Type</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 Styled Type
</h3>
<div class="ui inverted styled 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 learn 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>
</div>
<script>
$('.ui.accordion').accordion();
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/modules/accordion.html#styled
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA