Skip to content

Tabs - Web Component ​

Browser support ​

Detected engine: Β 

  • Chromium

  • Webkit

  • Gecko

Parameters ​

The Web component uses the <z-tabs> tag:

The parametrization of the component can be done with the following custom HTML params:

NameTypeDescription
tabsobject[]Array of tabs.
value
(optional)
numberIndex of the active tab.

The available slots for the component are:

NameTagsDescription
tab-<number>span

tabs ​

The tabs attribute is an array of objects with the following properties:

  • name (string): The name of the tab.
  • content (string): The content of the tab.

value ​

The value attribute is the index of the tab that is currently active.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.4.5/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.5/@zurich/web-components/tabs.js"></script>
Code
html
<z-tabs tabs='[
    {"name":"Maria Ahlefeldt","content":"Maria Theresia Ahlefeldt (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 β€œ virkelig Tonekunstnerinde ” (a True Artist of Music)."},
    {"name":"Carl Andersen","content":"Carl Joachim Andersen (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"},
    {"name":"Ida da Fonseca","content":"Ida Henriette da Fonseca (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."},
    {"name":"Peter MΓΌller", "content":"Peter Erasmus Lange-MΓΌller (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."}
    ]' />
</z-tabs>