wow-tabs

The last tabs implementation you'll ever need.

Usage no npm install needed!

<script type="module">
  import wowTabs from 'https://cdn.skypack.dev/wow-tabs';
</script>

README

<wow-tabs>

Published on webcomponents.org

The last tabs you'll ever need. <wow-tabs> makes it easy to define ...

<wow-tabs position="top">
  <wow-panel title="First">Some text</wow-panel>
  <wow-panel title="Second">More text</wow-panel>
</wow-tabs>

API

<wow-tabs>

The wow-tabs element creates tabs with nested <wow-panel>, with each panel accounting for 1 tab. When a tab is selected its associated panel is displayed.

position

The position attribute controls where the tabs are positioned next to the panel content. Possible values are:

  • left positions the tabs to the left of the content.
  • top positions the tabs above the content.
  • bottom positions the tabs below the content.
  • right positions the tabs to the right of the content.
<wow-tabs position="right">
  <wow-panel title="One">The is the first panel</wow-panel>
  <wow-panel title="Two">This is the second panel</wow-panel>
</wow-tabs>

<wow-panel>

A wow-panel is a section of content that will be displayed when its associated tab is selected. Any HTML can be contained within a wow-panel.

title

The title attribute specifies the title of the tab.

<wow-panel title="First">...</wow-panel>

Image of wow-tabs

License

BSD 2 Clause