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.
La interfaz de usuario semántica ofrece un componente de pestaña para que los usuarios agrupen diferentes categorías de contenido, mostrando solo una categoría de contenido a la vez. Las otras opciones se muestran en cuadros alineados en una fila. Los usuarios pueden hacer clic en cualquiera de las opciones para ver esa opción. Hay diferentes estados de las pestañas de la IU semántica.
Clase de estados de la pestaña de IU semántica:
- Activo: esta clase se utiliza para establecer el estado de la pestaña como «activo». Si el contenido de la pestaña es estático o ya está cargado, el contenido se puede etiquetar con la clase activa .
- Cargando: esta clase se utiliza para establecer el estado de la pestaña como «cargando». Aparecerá un cargador si el contenido está etiquetado con clase de carga . Loader indica que la carga de contenido está en curso.
Sintaxis:
<div class="ui ...tab segment loading"> .... </div>
Nota: El desarrollador puede usar la clase de estado de pestaña en la sintaxis según sea necesario.
El siguiente ejemplo ilustrará los estados de la pestaña de la interfaz de usuario semántica:
Ejemplo 1: este ejemplo demuestra el estado activo de la interfaz de usuario semántica utilizando la clase activa . Por defecto, la pestaña 1 está activa como se ve en la imagen de abajo. Los usuarios pueden hacer clic en las otras pestañas para convertirlo en un estado activo y ver sus datos respectivos.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<br/>
<div class="ui container">
<h2 class="header ui green">
GeeksforGeeks
</h2>
<strong>Semantic UI Tab Active State</strong>
<div class="ui top attached tabular menu">
<div class="active item" data-tab="first">Tab</div>
<div class="item" data-tab="second">Tab 2</div>
<div class="item" data-tab="third">Tab 3</div>
</div>
<div class="ui bottom attached active tab segment"
data-tab="first">
<p>Sample data 1:</p>
<p>
As the placement season is back,
GeeksforGeeks is here to help you
crack the interview. We have selected
some most commonly asked and MUST DO
practice problems to crack Product-based
Company Interviews.
You can also take part in our mock placement
contests which will help you learn different
topics and practice at the same time, simulating
the feeling of a real placement test environment.
</p>
</div>
<div class="ui bottom attached tab segment"
data-tab="second">
<p>Sample data 2:</p>
<p>
As the placement season is back,
GeeksforGeeks is here to help you
crack the interview. We have selected
some most commonly asked and MUST DO
practice problems to crack Product-based
Company Interviews.
You can also take part in our mock placement
contests which will help you learn different
topics and practice at the same time, simulating
the feeling of a real placement test environment.
</p>
</div>
<div class="ui bottom attached tab segment"
data-tab="third">
<p>Sample data 3:</p>
<p>
As the placement season is back,
GeeksforGeeks is here to help you
crack the interview. We have selected
some most commonly asked and MUST DO
practice problems to crack Product-based
Company Interviews.
You can also take part in our mock placement
contests which will help you learn different
topics and practice at the same time, simulating
the feeling of a real placement test environment.
</p>
</div>
</div>
<script>
$('.menu .item').tab();
</script>
</body>
</html>
Producción:
Estados de la pestaña de la interfaz de usuario semántica
Ejemplo 2: este ejemplo demuestra el estado de carga de la interfaz de usuario semántica mediante la clase de carga .
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"
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="header ui green">
GeeksforGeeks
</h2>
<strong>Semantic UI Tab Loading State</strong>
<div class="ui top attached tabular menu">
<div class="active item">Tab</div>
</div>
<div class="ui bottom attached loading tab segment">
<p>Loading of content is complete</p>
<br>
</div>
</div>
<script>
$('.menu .item').tab();
</script>
</body>
</html>
Producción:
Estados de la pestaña de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/tab.html
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA