\

Usage

``html



`

Add slot="tab_tip" and section elements side by side
`html

Tab 1


Tab 1 Content

Tab 2


Tab 2 Content



`

or group tab tips first and then all the sections
`html

Tab 1
Tab 2

Tab 1 Content

Tab 2 Content

`

To locate the tab tips on the side, add attribute side to the ts-tabs root element.

To start with 2nd tab as active, add active=2 to the ts-tabs tag.

$3


- Getter active for active tab index (1-based; null if none active)
- Setter active= for new active tab index (1-based), without triggering events
- Getter tabPanels the DOM elements for the tab panels (not the tab tips)
- tabPanel(idx) returns panel at position idx (1-based)
- tabTip(idx) returns tab tip at position idx (1-based)

$3

Events are not trigged if tabs are set progarmatically via active=.

Both events have event.details which is an Object with keys:
- old the tab idx of the deactivating tab; null at initial activation
- new the tab idx of the newly activating tab

#### beforeActivate(CustomEvent)
triggered immediately before a tab is activated.

The event can be canceled to prevent the tab from activating, except when the initial tab is about to be shown.

#### activate(CustomEvent)
triggered after a tab has been activated.

$3


just add class gray_theme, or see .gray_theme section in CSS for example.

Tooling configs

For most of the tools, the configuration is in the package.json to minimize the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.




Local Demo with web-dev-server

`bash
npm install
npm start
`

To run a local development server that serves the basic demo located in demo/index.html




Publish to NPM

`bash
npm login
npm run deploy
``