@19h47/tabs 中文文档教程
@19h47/tabs
Tabulation partout、tabulation nulle part
Installation
yarn add @19h47/tabs
Usage
import Tabs from '@19h47/tabs';
const $element = document.querySelector('.js-tabs');
const tabs = new Tabs($element);
tabs.init();
Tablist
用作选项卡集容器的元素。 role="tablist"
属性是必需的。aria-label=""
属性提供了一个描述标签集用途的标签。
<ul role="tablist" aria-label="navigation">
<li>
<button
type="button"
class="is-active"
role="tab"
aria-selected="true"
aria-controls="home-tab"
id="home"
>
Home
</button>
</li>
<li>
<button
type="button"
role="tab"
aria-selected="false"
aria-controls="project-tab"
id="project"
tabindex="-1"
>
Project
</button>
</li>
<li>
<button
type="button"
role="tab"
aria-selected="false"
aria-controls="contact-tab"
id="contact"
tabindex="-1"
data-deletable=""
>
Contact
</button>
</li>
</ul>
您可以使用 tablist
元素上的属性 aria-orientation
更改
<ul role="tablist" aria-orientation="vertical"></ul>
Tab
选项卡列表方向:选项卡列表中的一个元素,用作其中一个选项卡面板的标签,并且可以被激活以显示该面板。
<button
type="button"
role="tab"
aria-selected="false"
aria-controls="foo-tab"
id="foo"
tabindex="-1"
>
Project
</button>
role="tab"
属性是必需的。
aria-controls="foo-tab"
指的是与选项卡关联的 tabpanel 元素的 ID。
由于 HTML 按钮元素用于选项卡,因此无需在选定(活动)选项卡元素上设置 tabindex="0"
。
列表可以删除吗? 您可以通过在按钮上添加 data-deletable
属性来设置此选项。
要在第一次加载时激活按钮,请向按钮添加一个 is-active
类,删除 tabindex
属性并切换到 true
aria-selected
属性。
Tabpanel
包含与选项卡关联的内容的元素。
<section tabindex="0" role="tabpanel" aria-labelledby="foo" id="foo-tab">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil hic, vero. Fugiat voluptas
ex consequatur hic nemo officia iure placeat non, pariatur, dolore natus nobis, tempore
dolores dicta nisi inventore.
</p>
</section>
要在第一次加载时激活面板,请向其添加一个 is-active
类。
Keyboard support
Key | Function |
---|---|
Tab |
|
Enter Space | When a tab has focus, activates the tab, causing its associated panel to be displayed. |
Right Arrow | When a tab has focus:
|
Left Arrow | When a tab has focus:
|
Homefn + left arrow | When a tab has focus, moves focus to the first tab. |
Endfn + right arrow | When a tab has focus, moves focus to the last tab. |
Delete | When focus is on the Contact tab, removes the tab from the tab list and places focus on the previous tab. |
Options
Option | Type | Default | Description |
---|---|---|---|
delay | integer | 0 | Determine whether there should be a delay when user navigates with the arrow keys |
hash | boolean | true | |
callback | function | () => {} | A callback fired right before Tab.activate event. Useful for animation or to fetch data for instance. Don't use arrow function if you need to access this . |
import Tabs from '@19h47/tabs';
const $element = document.querySelector('.js-tabs');
const tabs = new Tabs.default($el, {
callback() {
return new Promise(resolve => {
// animate, fetch data, use this, do your stuff, etc.
resolve();
});
},
});
tabs.init();
Events
Event | Arguments | Description |
---|---|---|
Tab.activate | event | Object containing current controls id, and current DOM element |
Tab.delete | event | Object containing current controls id, and current DOM element |
import Tabs from '@19h47/tabs';
const $element = document.querySelector('.js-tabs');
const tabs = new Tabs($element);
tabs.init();
tabs.tabs.forEach($tab => {
$tab.on('Tab.activate', ({ controls, element }) => {
console.log(controls, element);
});
$tab.on('Tab.delete', ({ controls, element }) => {
console.log(controls, element);
});
});
Methods
Method | |
---|---|
destroy() | Destroy |
init() | Create |
create() | Create |
Build Setup
# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn start
# build for production
$ yarn prod
Example
Acknowledgments
@19h47/tabs
Tabulation partout, tabulation nulle part
Installation
yarn add @19h47/tabs
Usage
import Tabs from '@19h47/tabs';
const $element = document.querySelector('.js-tabs');
const tabs = new Tabs($element);
tabs.init();
Tablist
The element that serves as a container for the set of tabs. The role="tablist"
attribute is required.
The aria-label=""
attribute provides a label that describes the purpose of the set of tabs.
<ul role="tablist" aria-label="navigation">
<li>
<button
type="button"
class="is-active"
role="tab"
aria-selected="true"
aria-controls="home-tab"
id="home"
>
Home
</button>
</li>
<li>
<button
type="button"
role="tab"
aria-selected="false"
aria-controls="project-tab"
id="project"
tabindex="-1"
>
Project
</button>
</li>
<li>
<button
type="button"
role="tab"
aria-selected="false"
aria-controls="contact-tab"
id="contact"
tabindex="-1"
data-deletable=""
>
Contact
</button>
</li>
</ul>
You can change the tablist orientation with the attribute aria-orientation
on the tablist
element:
<ul role="tablist" aria-orientation="vertical"></ul>
Tab
An element in the tab list that serves as a label for one of the tab panels and can be activated to display that panel.
<button
type="button"
role="tab"
aria-selected="false"
aria-controls="foo-tab"
id="foo"
tabindex="-1"
>
Project
</button>
The role="tab"
attribute is required.
The aria-controls="foo-tab"
refers to the id of the tabpanel element associated with the tab.
Since an HTML button element is used for the tab, it is not necessary to set tabindex="0"
on the selected (active) tab element.
Is the tabulation deletable ? You can set up this option by adding the data-deletable
attribute on button.
To active the button on first load, add a is-active
class to the button, remove the tabindex
attribute and switch to true
the aria-selected
attribute.
Tabpanel
The element that contains the content associated with a tab.
<section tabindex="0" role="tabpanel" aria-labelledby="foo" id="foo-tab">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil hic, vero. Fugiat voluptas
ex consequatur hic nemo officia iure placeat non, pariatur, dolore natus nobis, tempore
dolores dicta nisi inventore.
</p>
</section>
To active panel on first load, add a is-active
class to it.
Keyboard support
Key | Function |
---|---|
Tab |
|
Enter Space | When a tab has focus, activates the tab, causing its associated panel to be displayed. |
Right Arrow | When a tab has focus:
|
Left Arrow | When a tab has focus:
|
Homefn + left arrow | When a tab has focus, moves focus to the first tab. |
Endfn + right arrow | When a tab has focus, moves focus to the last tab. |
Delete | When focus is on the Contact tab, removes the tab from the tab list and places focus on the previous tab. |
Options
Option | Type | Default | Description |
---|---|---|---|
delay | integer | 0 | Determine whether there should be a delay when user navigates with the arrow keys |
hash | boolean | true | |
callback | function | () => {} | A callback fired right before Tab.activate event. Useful for animation or to fetch data for instance. Don't use arrow function if you need to access this . |
import Tabs from '@19h47/tabs';
const $element = document.querySelector('.js-tabs');
const tabs = new Tabs.default($el, {
callback() {
return new Promise(resolve => {
// animate, fetch data, use this, do your stuff, etc.
resolve();
});
},
});
tabs.init();
Events
Event | Arguments | Description |
---|---|---|
Tab.activate | event | Object containing current controls id, and current DOM element |
Tab.delete | event | Object containing current controls id, and current DOM element |
import Tabs from '@19h47/tabs';
const $element = document.querySelector('.js-tabs');
const tabs = new Tabs($element);
tabs.init();
tabs.tabs.forEach($tab => {
$tab.on('Tab.activate', ({ controls, element }) => {
console.log(controls, element);
});
$tab.on('Tab.delete', ({ controls, element }) => {
console.log(controls, element);
});
});
Methods
Method | |
---|---|
destroy() | Destroy |
init() | Create |
create() | Create |
Build Setup
# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn start
# build for production
$ yarn prod
Example
An example is located right here, see sources.