@ussebastian/kitdigital
Version:
Kit Digital de la Universidad San Sebastián
130 lines (124 loc) • 4.92 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.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.html</h3>
</header>
<div id="viewer" class="container my-40" style="border: 1px solid var(--border)">
<div class="uss-tabs mt-24 px-32">
<!-- puede ser visible o no, pero debe existir -->
<h3 id="tablist-1">Label del tab</h3>
<div role="tablist" aria-labelledby="tablist-1" class="uss-tabs__tablist">
<button
class="uss-tabs__tab"
id="tab-1"
type="button"
role="tab"
aria-selected="true"
aria-controls="tabpanel-1"
>
<span>Maria Ahlefeldt</span>
</button>
<button
class="uss-tabs__tab"
id="tab-2"
type="button"
role="tab"
aria-selected="false"
aria-controls="tabpanel-2"
tabindex="-1"
>
<span>Carl Andersen</span>
</button>
<button
class="uss-tabs__tab"
id="tab-3"
type="button"
role="tab"
aria-selected="false"
aria-controls="tabpanel-3"
tabindex="-1"
>
<span>Ida da Fonseca</span>
</button>
<button
class="uss-tabs__tab"
id="tab-4"
type="button"
role="tab"
aria-selected="false"
aria-controls="tabpanel-4"
tabindex="-1"
>
<span>Peter Müller</span>
</button>
</div>
<div id="tabpanel-1" role="tabpanel" aria-labelledby="tab-1" class="uss-tabs__tabpanel">
<p>
<!-- <a href="https://en.wikipedia.org/wiki/Maria_Theresia_Ahlefeldt">Maria Theresia Ahlefeldt</a> -->
(16 January 1755 – 20 December 1810) was a Danish, (originally German), composer. She is known
as the first female composer in Denmark. Maria Theresia composed music for several ballets,
operas, and plays of the royal theatre. She was given good critic as a composer and described
as a “<span lang="da">virkelig Tonekunstnerinde</span>” ('a True Artist of Music').
</p>
</div>
<div id="tabpanel-2" role="tabpanel" aria-labelledby="tab-2" class="uss-tabs__tabpanel is-hidden">
<p>
<a href="https://en.wikipedia.org/wiki/Joachim_Andersen_(composer)">Carl Joachim Andersen</a>
(29 April 1847 – 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen,
son of the flutist Christian Joachim Andersen. Both as a virtuoso and as composer of flute
music, he is considered one of the best of his time. He was considered to be a tough leader
and teacher and demanded as such a lot from his orchestras but through that style he reached a
high level.
</p>
</div>
<div id="tabpanel-3" role="tabpanel" aria-labelledby="tab-3" class="uss-tabs__tabpanel is-hidden">
<p>
<a href="https://en.wikipedia.org/wiki/Ida_Henriette_da_Fonseca">Ida Henriette da Fonseca</a>
(July 27, 1802 – July 6, 1858) was a Danish opera singer and composer. Ida Henriette da
Fonseca was the daughter of Abraham da Fonseca (1776–1849) and Marie Sofie Kiærskou
(1784–1863). She and her sister Emilie da Fonseca were students of Giuseppe Siboni, choir
master of the Opera in Copenhagen. She was given a place at the royal Opera alongside her
sister the same year she debuted in 1827.
</p>
</div>
<div id="tabpanel-4" role="tabpanel" aria-labelledby="tab-4" class="uss-tabs__tabpanel is-hidden">
<p>
<a href="https://en.wikipedia.org/wiki/Peter_Lange-M%C3%BCller">Peter Erasmus Lange-Müller</a>
(1 December 1850 – 26 February 1926) was a Danish composer and pianist. His compositional
style was influenced by Danish folk music and by the work of Robert Schumann; Johannes Brahms;
and his Danish countrymen, including J.P.E. Hartmann.
</p>
</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>