Primer CSS es un framework CSS gratuito y de código abierto. Se basa en los sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Creado con el sistema de diseño de GitHub, es altamente reutilizable y flexible.
Las pestañas Primer CSS se utilizan para separar dos o más listas y hacerlas visibles si se selecciona la pestaña respectiva. Las pestañas se pueden colocar en el SelectMenu desde donde se pueden seleccionar los elementos.
Primer clases de pestañas CSS:
- SelectMenu-tabs: esta clase se usa para crear pestañas y colocarlas en el elemento de navegación .
Sintaxis: Cree pestañas en el menú de selección de la siguiente manera.
<nav class="SelectMenu-tabs">
<button class="SelectMenu-tab"
aria-selected="true">...</button>
<button class="SelectMenu-tab">...</button>
</nav>
Ejemplo 1: En el siguiente ejemplo, tenemos pestañas con elementos en el menú y podemos alternar entre ellos para ver los diferentes elementos.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<div class="o-container" style="padding:1em;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Primer CSS Tabs</strong>
<br /><br />
</center>
<div class="SelectMenu">
<div class="SelectMenu-modal">
<header class="SelectMenu-header">
<h3 class="SelectMenu-title">
GeeksforGeeks
</h3>
</header>
<nav class="SelectMenu-tabs">
<button id="ds" onclick="changeTab('ds')"
class="SelectMenu-tab"
aria-selected="true">
Data Structures
</button>
<button id="algo" onclick="changeTab('algo')"
class="SelectMenu-tab" aria-selected="">
Algorithms
</button>
</nav>
<div id="dslist" class="SelectMenu-list">
<button class="SelectMenu-item"
role="menuitem">Stack</button>
<button class="SelectMenu-item"
role="menuitem">Queue</button>
<button class="SelectMenu-item"
role="menuitem">Array</button>
</div>
<div id="algolist" class="SelectMenu-list"
hidden="true">
<button class="SelectMenu-item" role="menuitem">
Selection Sort
</button>
<button class="SelectMenu-item" role="menuitem">
Greedy Algorithm
</button>
<button class="SelectMenu-item" role="menuitem">
Dijkstra's Algorithm
</button>
</div>
</div>
</div>
</div>
<script>
const changeTab = (elem) => {
$('.SelectMenu-tab').attr('aria-selected', 'false')
$(`#${elem}`).attr('aria-selected', 'true')
$('.SelectMenu-list').removeAttr('hidden')
if (elem === 'ds') $(`#algolist`).attr('hidden', 'true')
else $(`#dslist`).attr('hidden', 'true')
}
</script>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo, el menú de selección aparece en forma de una ventana emergente cuando se hace clic en el botón Abrir en la página web.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<div class="o-container" style="padding:1em;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Primer CSS Tabs</strong>
<br /><br />
</center>
<details class="details-reset details-overlay" open>
<summary class="btn" aria-haspopup="true">
Choose tutorials
</summary>
<div class="SelectMenu">
<div class="SelectMenu-modal">
<header class="SelectMenu-header">
<h3 class="SelectMenu-title">
GeeksforGeeks
</h3>
</header>
<nav class="SelectMenu-tabs">
<button id="ds" onclick="changeTab('ds')"
class="SelectMenu-tab"
aria-selected="true">
Data Structures
</button>
<button id="algo" onclick="changeTab('algo')"
class="SelectMenu-tab" aria-selected="">
Algorithms
</button>
</nav>
<div id="dslist" class="SelectMenu-list">
<button class="SelectMenu-item"
role="menuitem">Stack</button>
<button class="SelectMenu-item"
role="menuitem">Queue</button>
<button class="SelectMenu-item"
role="menuitem">Array</button>
</div>
<div id="algolist" class="SelectMenu-list" hidden="true">
<button class="SelectMenu-item" role="menuitem">
Selection Sort
</button>
<button class="SelectMenu-item" role="menuitem">
Greedy Algorithm
</button>
<button class="SelectMenu-item" role="menuitem">
Dijkstra's Algorithm
</button>
</div>
</div>
</div>
</details>
</div>
<script>
const changeTab = (elem) => {
$('.SelectMenu-tab').attr('aria-selected', 'false')
$(`#${elem}`).attr('aria-selected', 'true')
$('.SelectMenu-list').removeAttr('hidden')
if (elem === 'ds') $(`#algolist`).attr('hidden', 'true')
else $(`#dslist`).attr('hidden', 'true')
}
</script>
</body>
</html>
Producción:
Referencia: https://primer.style/css/components/select-menu/#tabs
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA