# Tabpanelwidget This module contains the [standalone (vanilla) script](#vanilla), a [Vue component](#vue), and a [React component](#react). ## TODO - [ ] port to mitosis - [ ] split the stylesheet (to create a base + different "skins") ## TOC * [Vanilla](#vanilla) * [Vue](#vue) * [React](#react) * ["Old School"](#old-school) * [Usage](#usage) * [Development](#development) ### Vanilla ```js 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 ```js ``` Or you may choose to load all files from CDN: ```html ``` ```html ``` 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 ## Usage ### Classes "*Out-of-the-box*", the Widget will appear as shown in the [Demo section](https://tabpanelwidget.com/#demos) of TabPanelWidget.com but a [few classes](https://github.com/tabpanelwidget/tabpanelwidget/wiki#tpw-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)). ### Data attributes These attributes are meant to make the widget "bookmark-friendly". This means users will be able to bookmark a page, or share a URL, and have the state of the panels saved at the same time . * `data-tpw-id`: the value of this attribute must be unique * `data-tpw-hist`: if the value of this attribute is **push** (i.e. `data-tpw-hist="push"`) then using the browser's forward/back buttons will navigate through the panels as they have been opened and closed by the user. ### "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](https://github.com/tabpanelwidget/tabpanelwidget/blob/master/src/tabpanelwidget.scss) 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.) ```bash % npm install % npm run dev ``` Various build scripts, for example: ```bash % npm run build:css % npm run build:js ``` To release new version of npm package: ```bash % npx release-it ``` To check things post release (open index.html without vite), ```bash % open index.html ```