❤
npm
Sign UpSign In

This package has been deprecated

Author message:

This package has been deprecated. Please use the '@atlaskit' scoped packages instead. See https://atlaskit.atlassian.com for more information

ak-tabs
TypeScript icon, indicating that this package has built-in type declarations

4.0.6 • Public • Published

AtlasKit component registry Commitizen friendly semantic-release Report an issue Ask in our forum

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.

Example tabs

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

Tabs
Tab

Members

_classnames
definition

Functions

showVisibleTabs(tabsEl)

Show visible tabs by calling calculateVisibleTabs and hiding tabs which do not fit in the container and should not be displayed.

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

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!

Readme

Keywords

Package Sidebar

Install

npm i ak-tabs

Repository

bitbucket.org/atlassian/atlaskit

Homepage

bitbucket.org/atlassian/atlaskit#readme

Weekly Downloads

1

Version

4.0.6

License

Apache-2.0

Last publish

Collaborators

  • atlassian-aui
Try on RunKit
Report malware