ak-tabs v4.0.6
Tabs
A tab is a simple graphical element that allows to contain multiple panels within a single window, and provides an easy way to switch between panels of similar content.
Try it out
Interact with a live demo of the ak-tabs component with code examples.
Installation
npm install ak-tabs
Using the component
HTML
The ak-tabs
package exports the Tabs Skate component.
Import the component in your JS resource:
bundle.js
import Tabs from 'ak-tabs';
Now you can use the defined tag in your HTML markup, for example:
index.html
<html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<!-- ... -->
<ak-tabs>
<ak-tabs-tab label="My first tab">
<p>Hello world!</p>
</ak-tabs-tab>
</ak-tabs>
</body>
React
This is a standard web component, if you want to use it in your React app, use the Skate.js React integration.
import Tabs from 'ak-tabs';
import reactify from 'skatejs-react-integration';
const ReactComponent = reactify(Tabs, {});
ReactDOM.render(<ReactComponent />, container);
Classes
Members
Functions
Tabs
Kind: global class
new Tabs()
The Tabs element. Container to manage and display Tab elements.
JS Example
import Tabs from 'ak-tabs';
HTML Example
<ak-tabs>
<ak-tabs-tab label="Introduction" selected>
<h1>Hello world</h1>
<p>This is my first tab. Click the 'Content' label above to view the second tab.</p>
</ak-tabs-tab>
<ak-tabs-tab label="Content">
<h1>Tab 2</h1>
<p>This is my second tab.</p>
</ak-tabs-tab>
</ak-tabs>
Tab
Kind: global class
Properties
- tab.label : string
- tab.selected : Boolean
Events
new Tab()
The Tab element, managed and displayed as children of the Tabs element.
JS Example
import { Tab } from 'ak-tabs';
const myTab = new Tab();
myTabs.appendChild(myTab);
HTML Example
<ak-tabs>
<ak-tabs-tab label="My tab" selected>
<h1>Hello world</h1>
<p>This is my first tab.</p>
</ak-tabs-tab>
</ak-tabs>
tab.label : string
The label to display in the tab navigation bar.
Kind: instance property of Tab
JS Example
const myTab = new Tab();
myTab.label = 'My label';
tab.selected : Boolean
Whether the tab is selected. Only one tab can be selected at a time. Selecting a tab will deselect any selected sibling tabs.
Kind: instance property of Tab
JS Example
const myTab = new Tab();
myTab.selected = true;
"tab-change"
Fired when a tab is initialised or a property has changed.
Kind: event emitted by Tab
JS Example
import { events } from 'ak-tabs';
const { tabChange: tabChangeEvent } = events;
myTab.addEventListener(tabChangeEvent, (e) => {
console.log(`The {e.target.label} tab was changed.`);
});
_classnames
Kind: global variable
Jsx: vdom
definition
Kind: global variable
Jsx: vdom
showVisibleTabs(tabsEl)
Show visible tabs by calling calculateVisibleTabs and hiding tabs which do not fit in the container and should not be displayed.
Kind: global function
Param |
---|
tabsEl |
Support and feedback
We're here to help!
Let us know what you think of our components and docs, your feedback is really important for us.
Community support
Ask a question in our forum.
Check if someone has already asked the same question before.
Create a support ticket
Are you in trouble? Let us know!
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago