Semantic UI es el marco de código abierto que utilizó CSS y jQuery para hacer que nuestros sitios web se vean hermosos y receptivos. Tiene clases predefinidas como bootstrap para usar para hacer que nuestro sitio web sea más interactivo. Tiene algunos componentes semánticos preconstruidos y podemos usar estos componentes para crear un sitio web receptivo. La pestaña Semantic-UI es una sección oculta de contenido que se puede activar haciendo clic en ella. La pestaña oculta puede ser visible usando la clase activa . Solo el contenido de una pestaña es visible a la vez y podemos crear cualquier cantidad de pestañas. En este artículo, discutiremos el tipo de pestaña en la interfaz de usuario semántica.
Tipos de pestañas de interfaz de usuario semántica:
- tab: esta clase se utiliza para crear la pestaña.
Sintaxis:
<div class="ui top attached tabular menu"> .... </div> <div class="ui bottom attached tab segment"> .... </div>
Ejemplo 1: el siguiente código demuestra el tipo de pestaña de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Tab Type</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> </head> <body> <div class="ui container center aligned"> <h2 class="ui green header"> GeeksforGeeks </h2> <h3> Semantic-UI Tab Type </h3> </div> <br> <div class="ui top attached tabular menu"> <div class="active item" data-tab="tab1"> GeeksforGeeks </div> </div> <div class="ui bottom attached active tab segment" data-tab="tab1"> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and articles. </p> </div> </body> </html>
Producción:
Tipo de pestaña de interfaz de usuario semántica
Ejemplo 2: el siguiente código demuestra el tipo de pestaña de interfaz de usuario semántica usando más pestañas.
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>
<div class="ui container center aligned">
<h2 class="ui green header"> GeeksforGeeks </h2>
<h3> Semantic-UI Tab Type </h3>
</div> <br>
<div class="ui top attached tabular menu">
<div class="active item"
data-tab="tab1">
Tab1
</div>
<div class="item"
data-tab="tab2">
Tab2
</div>
<div class="item"
data-tab="tab3">
Tab3
</div>
</div>
<div class="ui bottom attached active tab segment"
data-tab="tab1">
<p>
A Computer Science portal for geeks.
</p>
</div>
<div class="ui bottom attached tab segment"
data-tab="tab2">
<p>
GeeksforGeeks
</p>
</div>
<div class="ui bottom attached tab segment"
data-tab="tab3">
<p>
GeeksforGeeks.org
</p>
</div>
<script>
$('.menu .item').tab();
</script>
</body>
</html>
Producción:
Tipo de pestaña de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/tab.html#tab
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA