Package Exports

sk-tabs-default
sk-tabs-default/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (sk-tabs-default) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Skinny Widgets Tabs for Default Theme

tabs element

npm i sk-tabs sk-tabs-jquery --save

then add the following to your html

<sk-config
    theme="default"
    base-path="/node_modules/sk-core/src"
    theme-path="/node_modules/sk-theme-default"
></sk-config>
<sk-tabs id="tabs">
    <sk-tab title="foo">
        some foo tab contents
    </sk-tab>
    <sk-tab title="bar">
        some bar tab contents
    </sk-tab>
    <sk-tab title="baz">
        some baz tab contents
    </sk-tab>
</sk-tabs>
<script type="module">
    import { SkTabs } from './node_modules/sk-tabs/index.js';

    customElements.define('sk-tabs', SkTabs);
</script>

attributes

disabled - all tabs disabled

template

id: SkTabsTpl

sk-sl-tabs element

tabs that use slots technology

<sk-config
    theme="antd4"
    base-path="/node_modules/sk-core/src"
    theme-path="/node_modules/sk-theme-antd4"
></sk-config>
<sk-sl-tabs id="slTabs">
  <h2 slot="title" disabled>Title</h2>
  <section>content panel 1</section>
  <h2 slot="title" selected>Title 2</h2>
  <section>content panel 2</section>
  <h2 slot="title">Title 3</h2>
  <section>content panel 3</section>
</sk-sl-tabs>

It is also possible to use sk-tab subelements, but this will add some prerendering to slotted formatting

<sk-sl-tabs id="slTabs">
    <sk-tab title="Tab 1">
        tab 1 contents
    </sk-tab>
    <sk-tab title="Tab 2" open>
        tab 2 contents
    </sk-tab>
    <sk-tab title="Tab 3" disabled>
        tab 3 contents
    </sk-tab>
</sk-sl-tabs>

attributes

disabled - all tabs disabled

template

id: SkSlTabsTpl