Usage no npm install needed!

<script type="module">
  import chameleonDsTabs from 'https://cdn.skypack.dev/@chameleon-ds/tabs';
</script>

README

Chameleon Tabs

import { html } from "@open-wc/demoing-storybook";
import "./chameleon-tab.js";
import "./chameleon-tabs.js";

export default {
  title: "Components|Navigation/Tabs",
  component: "chameleon-tabs",
  options: { selectedPanel: "storybookjs/docs/panel" },
};

Properties

chameleon-tabs

Property Name	Type(s)	Default Value	Description
`urlRewrite`	Boolean	`true`	Automatically rewrite URL with tab index information when true
`selected`	Number	`0`	The selected tab's index

Examples

Default

export const Default = () => html`
  <chameleon-tabs selected="0">
    <chameleon-tab>
      Tab One
    </chameleon-tab>
    <chameleon-tab>
      Tab Two
    </chameleon-tab>
    <chameleon-tab>
      Tab Three
    </chameleon-tab>
  </chameleon-tabs>
`;