@ussebastian/kitdigital
Version:
Kit Digital de la Universidad San Sebastián
113 lines (108 loc) • 3.6 kB
HTML
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="/css/main.css" />
<title>Component: docs/components/content/tabs-react.html</title>
</head>
<body>
<header style="border-bottom: 1px solid var(--border)" class="p-20">
<div class="d-flex justify-content-between">
<a href="/" class="uss-btn uss-btn--tertiary">
<i class="uss-icon uss-icon--sm ri-home-line"></i>Volver al inicio</a
>
<div>
<button id="_uss-btn-toggle-container" class="uss-btn uss-btn--size-sm uss-btn--tertiary">
[ Toggle .container ]
</button>
</div>
</div>
<h3 class="p-0">docs/components/content/tabs-react.html</h3>
</header>
<div id="viewer" class="container my-40" style="border: 1px solid var(--border)">
<div class="uss-tabs">
<h3 id="uss-tab-[j1myc8]" class="uss-sr-only">Tab component</h3>
<div class="uss-tabs__tablist" role="tablist" aria-labelledby="uss-tab-[j1myc8]">
<button
class="uss-tabs__tab"
id="tab-1"
type="button"
role="tab"
aria-selected="true"
aria-controls="tabpanel-1"
title="Tab #1"
>
<span>Tab #1</span>
</button>
<button
class="uss-tabs__tab"
id="tab-2"
type="button"
role="tab"
aria-selected="false"
aria-controls="tabpanel-2"
title="Tab #2"
tabindex="-1"
>
<span>Tab #2</span>
</button>
<button
class="uss-tabs__tab"
id="tab-3"
type="button"
role="tab"
aria-selected="false"
aria-controls="tabpanel-3"
title="Tab #3"
tabindex="-1"
>
<span>Tab #3</span>
</button>
</div>
<div class="uss-tabs__tabpanel" aria-labelledby="tab-1" role="tabpanel" id="tabpanel-1">
<div>
<h4>Contenido del Tab #1</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt accusantium sequi alias
possimus facere. Ea incidunt illo delectus ratione praesentium veritatis vel magni minus,
labore molestias veniam neque! Tenetur, vero.
</p>
</div>
</div>
<div class="uss-tabs__tabpanel is-hidden" aria-labelledby="tab-2" role="tabpanel" id="tabpanel-2">
<div>
<h4>Contenido del Tab #2</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt accusantium sequi alias
possimus facere. Ea incidunt illo delectus ratione praesentium veritatis vel magni minus,
labore molestias veniam neque! Tenetur, vero.
</p>
</div>
</div>
<div class="uss-tabs__tabpanel is-hidden" aria-labelledby="tab-3" role="tabpanel" id="tabpanel-3">
<div>
<h4>Contenido del Tab #3</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt accusantium sequi alias
possimus facere. Ea incidunt illo delectus ratione praesentium veritatis vel magni minus,
labore molestias veniam neque! Tenetur, vero.
</p>
</div>
</div>
</div>
</div>
</body>
<script type="module" src="/js/main.js"></script>
<script>
const button = document.getElementById('_uss-btn-toggle-container');
button.addEventListener('click', () => {
const viewer = document.getElementById('viewer');
viewer.classList.toggle('container');
});
</script>
</html>