Tabpanelwidget
This module contains the standalone (vanilla) script, a Vue component, and a React component.
TODO
- [ ] rewrite in typescript?
- [ ] split the stylesheet (to create a base + different "skins")
TOC
- Vanilla
- Vue
- React
- "Old School"
- [ ] Angular
- [ ] Ember
- Usage
- Development
Vanilla
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()Vue
<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>React
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>Old School
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
Setup
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/tabpanelwidget@1.0.0/dist/tabpanelwidget.min.css" rel="stylesheet" /><script src="//cdn.jsdelivr.net/npm/tabpanelwidget@1.0.0/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/tabpanelwidget@1.0.0/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
Angular
Coming soon...
Ember
Coming soon...
Usage
Classes
"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)).
"Variables"
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!.
Development
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