Semantic UI es un marco de código abierto que proporciona pestañas fáciles de usar para crear excelentes interfaces de usuario para sitios web. Es muy similar a los usos de arranque para crear sitios web increíbles. Utiliza una clase para agregar estilos a diferentes elementos de la estructura de la página HTML. Una pestaña es una sección oculta de contenido que se puede ver haciendo clic en ella. Puede tener cualquier número de pestañas dependiendo de la necesidad.
Ejemplo: El siguiente ejemplo demuestra el uso de pestañas de IU semánticas.
$('.menu .item').tab();
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px" class="ui container">
<h2>Tabs</h2>
<h2>Hello welcome to geeksforgeeks</h2>
<div class="ui top attached tabular menu">
<a class="active item" data-tab="first">Home</a>
<a class="item" data-tab="second">What we do</a>
<a class="item" data-tab="third">Jobs</a>
</div>
<div class="ui bottom attached
active tab segment" data-tab="first">
Welcome to geeksforgeeks.
</div>
<div class="ui bottom attached
tab segment" data-tab="second">
Provide tutorials for learning.
</div>
<div class="ui bottom attached
tab segment" data-tab="third">
Email your resume at careers@geeksforgeeks.org
</div>
</div>
<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>
<script>
$('.menu .item').tab();
</script>
</body>
</html>
Producción:
Ejemplo: El siguiente ejemplo muestra un grupo de pestañas múltiples.
html
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px"
class="ui container">
<h2>Tabs</h2>
<h2>Hello, welcome to geeksforgeeks</h2>
<div id="context1">
<div class="ui secondary menu">
<a class="item" data-tab="first">
Data Structure
</a>
<a class="item active" data-tab=
"second">Web Programming
</a>
<a class="item" data-tab="third">
Basic Programming
</a>
</div>
<div class="ui tab segment" data-tab="first">
<div class="ui top attached tabular menu">
<a class="active item" data-tab=
"first/a">Array</a>
<a class="item" data-tab=
"first/b">Link-List</a>
<a class="item" data-tab=
"first/c">Tree</a>
</div>
<div class="ui bottom attached active tab
segment" data-tab="first/a">
Collection of data under similar
data type with contiguous memory.
</div>
<div class="ui bottom attached tab
segment" data-tab="first/b">
Collection of data with
dynamic memory allocation
</div>
<div class="ui bottom attached
tab segment" data-tab="first/c">
Tree like structure to store data
</div>
</div>
<div class="ui tab segment active"
data-tab="second">
<div class="ui top attached
tabular menu">
<a class="item" data-tab=
"second/a">Django</a>
<a class="item" data-tab=
"second/b">NodeJS</a>
<a class="item active"
data-tab="second/c">Laraval</a>
</div>
<div class="ui bottom attached
tab segment" data-tab="second/a">
Python Framework
</div>
<div class="ui bottom attached tab
segment" data-tab="second/b">
JavaScript Framework
</div>
<div class="ui bottom attached tab
segment active" data-tab="second/c">
PHP framework
</div>
</div>
<div class="ui tab segment" data-tab="third">
<div class="ui top attached tabular menu">
<a class="item" data-tab="third/a">C</a>
<a class="item" data-tab="third/b">C++</a>
<a class="item" data-tab="third/c">Java</a>
</div>
<div class="ui bottom attached tab
segment" data-tab="third/a">
The most basic programming language.
</div>
<div class="ui bottom attached tab
segment" data-tab="third/b">
C language with object oriented feature
</div>
<div class="ui bottom attached tab
segment" data-tab="third/c">
Java is most popular enterprise
programming language.
</div>
</div>
</div>
</div>
<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>
<script>
$('.menu .item').tab();
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA