This module contains the standalone (vanilla) script, a Vue component, and a React component.
- rewrite in typescript?
- split the stylesheet (to create a base + different "skins")
import * as Tabpanelwidget from "tabpanelwidget"
import "tabpanelwidget/dist/tabpanelwidget.min.css"
// find all .tpw-widget in page and install them
Tabpanelwidget.autoinstall()
// or specify element to install (and uninstall)
const el = document.querySelector('#my-element')
// keep in mind install completes asynchronously so uninstall is returned by promise
const uninstall = await Tabpanelwidget.install(el)
// or worse, can use a callback as second arg (make sure you don't call uninstall before it's set in this case):
// let uninstall; Tabpanelwidget.install(el, _uninstall => (uninstall = _uninstall))
// later...
if (uninstall) uninstall()<script>
import VueTabpanelwidget from "tabpanelwidget/vue"
import "tabpanelwidget/dist/tabpanelwidget.min.css"
Vue.use(VueTabpanelwidget)
// or Vue.component("Tabpanelwidget", VueTabpanelwidget)
// or in component, components: { VueTabpanelwidget, ... }<Tabpanelwidget :heading="2" :mode="accordion" :selected-idxs="[1]" :tabs="['a', 'b', 'c']" rtl animate skin="pills" icon-style="fancy" centered disconnected icons-at-the-end rounded>
<template v-slot:panel-0="">
override content for panel 0
</template>
</Tabpanelwidget>import ReactTabpanelwidget from "tabpanelwidget/react"
import "tabpanelwidget/dist/tabpanelwidget.min.css"
<ReactTabpanelwidget heading={2} mode={'accordion'} selected-idxs={[1]} rtl animate skin={'pills'} icon-style={'fancy'} centered disconnected icons-at-the-end rounded>
<ReactTabpanelwidget.Heading>heading 1</ReactTabpanelwidget.Heading>
<ReactTabpanelwidget.Panel>panel 1</ReactTabpanelwidget.Panel>
</ReactTabpanelwidget>Download the latest release of tabpanelwidget-x.x.x.zip which includes:
- The minified Script
- The minified Polyfill
- A stylesheet (.scss) that contains "variables"
- A minified stylesheet that is the output of the above file
Wrap your headings and their relevant content inside a div (or else) to which you apply the class tpw-widget.
Note: If you are using a Definition List, then simply apply that class to the dl itself.
<!-- .tpw-widget -->
<!-- This wrapper can be anything (article/div/dl/whatever) -->
<div class="tpw-widget">
<!--
You CAN use any (and as many) headings (h2/h3/h4/h5/h6)
You MUST use the SAME heading level throughout a Widget
You CAN use a <dl> but it has to be made of dt/dd pairs
-->
<h3 class="tpw-selected">Lorem</h3>
<!--
There is no wrapper requirement. Anything may go in between
the headings. The script wraps that content inside two divs
The class (optional) dictates which panel should be visible
-->
<h3>Ipsum</h3>
...
<h3>Dolor</h3>
...
<h3>Sit Amet</h3>
...
</div>
<!-- /.tpw-widget -->Include the stylesheet in the <head> of your document:
<link href="/PATH_TO_FILE/tabpanelwidget.min.css" rel="stylesheet" />Include this before </body>:
<script src="/PATH_TO_FILE/tabpanelwidget.min.js"></script>
<script>
// remove this if you do not want to serve the polyfill
if (!window.ResizeObserver) {
const script = document.createElement("script")
script.src = "/PATH_TO_FILE/tabpanelwidget-polyfill.min.js"
document.head.appendChild(src)
}
// Instantiate TabPanelWidget
Tabpanelwidget.autoinstall();
</script>Or you may choose to load all files from CDN:
<link href="//cdn.jsdelivr.net/npm/[email protected]/dist/tabpanelwidget.min.css" rel="stylesheet" /><script src="//cdn.jsdelivr.net/npm/[email protected]/dist/tabpanelwidget.min.js"></script>
<script>
// remove this if you do not want to serve the polyfill
if (!window.ResizeObserver) {
const script = document.createElement("script")
script.src = "//cdn.jsdelivr.net/npm/[email protected]/dist/tabpanelwidget-polyfill.min.js"
document.head.appendChild(src)
}
// Instantiate TabPanelWidget
Tabpanelwidget.autoinstall();
</script>The above will attach the script to all containers with the class tpw-widget.
Note: The above examples use version 1.0.0 but you should link to the latest version on CDN
Coming soon...
Coming soon...
"Out-of-the-box", the Widget will appear as shown in the Demo section of TabPanelWidget.com but a few classes gives you different options.
All classes are meant to be applied to the Widget (the wrapper) with the exception of tpw-selected which, applied to a "heading" (or multiple headings in the case of an Accordion), will let you arbitrary choose which panel(s) to open by default (the one(s) associated with that/those heading(s)).
tabpanelwidget.min.css is the output of tabpanelwidget.scss. The latter contains variables that will let you customize the Widget's tabs, its headers, and its panels (their color, background, border, border-radius, padding, margin, etc.).
The comments in the SCSS file contain a great deal of information, make sure to check them out!.
Install dependencies and then opens index.html with vite (hot reload, etc.)
% npm install
% npm run devVarious build scripts, for example:
% npm run build:css
% npm run build:jsTo release new version of npm package:
% npx release-itTo check things post release (open index.html without vite),
% open index.html
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent