demo

js-tab-ui

Download Auto JS Download JS

Horizontal UI

ArrowLeftとArrowRightでタブを移動し、同時にパネルを切り替えます。

Default horizontal tabs

data-ui-tab-initで初期タブを指定し、disabled triggerをスキップします。

Overview

初期化後、rootにはdata-ui-tab-currentが設定されます。

Features

active class、aria-selected、tabindex、hiddenがまとめて更新されます。

Disabled

disabled classを持つtriggerはクリックやキーボード移動の対象外です。

Horizontal setup

Auto

<div data-ui-tab data-ui-tab-init="overview">
  <div role="tablist" aria-label="Horizontal tabs">
    <button type="button" data-ui-tab-trigger="overview">Overview</button>
    <button type="button" data-ui-tab-trigger="features">Features</button>
    <button type="button" data-ui-tab-trigger="disabled" class="--disabled">Disabled</button>
  </div>

  <section data-ui-tab-content="overview">...</section>
  <section data-ui-tab-content="features">...</section>
  <section data-ui-tab-content="disabled">...</section>
</div>

<script src="../dist/js-tab-ui.auto.global.js" defer></script>

Manual init

<div data-ui-tab data-ui-tab-init="overview">
  <div role="tablist" aria-label="Horizontal tabs">
    <button type="button" data-ui-tab-trigger="overview">Overview</button>
    <button type="button" data-ui-tab-trigger="features">Features</button>
    <button type="button" data-ui-tab-trigger="disabled" class="--disabled">Disabled</button>
  </div>

  <section data-ui-tab-content="overview">...</section>
  <section data-ui-tab-content="features">...</section>
  <section data-ui-tab-content="disabled">...</section>
</div>

<script src="../dist/js-tab-ui.umd.global.js"></script>
<script>
  window.UiTab.init();
</script>

Vertical UI

data-ui-tab-orientation="vertical"でArrowUpとArrowDownを使います。

Vertical tabs

custom active classとdisabled classもdata属性で指定しています。

Account

tablistにはaria-orientation="vertical"が付与されます。

Billing

ArrowDownで次、ArrowUpで前の有効なタブへ移動します。

Security

この例ではis-activeとis-disabledを使っています。

Archive

disabled triggerはフォーカス移動からも除外されます。

Vertical setup

Auto

<div
  data-ui-tab
  data-ui-tab-init="account"
  data-ui-tab-orientation="vertical"
  data-ui-tab-active-class="is-active"
  data-ui-tab-disabled-class="is-disabled"
>
  <div role="tablist" aria-label="Vertical tabs">
    <button type="button" data-ui-tab-trigger="account">Account</button>
    <button type="button" data-ui-tab-trigger="billing">Billing</button>
    <button type="button" data-ui-tab-trigger="security">Security</button>
    <button type="button" data-ui-tab-trigger="archive" class="is-disabled">Archive</button>
  </div>

  <section data-ui-tab-content="account">...</section>
  <section data-ui-tab-content="billing">...</section>
  <section data-ui-tab-content="security">...</section>
  <section data-ui-tab-content="archive">...</section>
</div>

<script src="../dist/js-tab-ui.auto.global.js" defer></script>

Manual init

<div data-ui-tab data-ui-tab-init="account">
  <div role="tablist" aria-label="Vertical tabs">
    <button type="button" data-ui-tab-trigger="account">Account</button>
    <button type="button" data-ui-tab-trigger="billing">Billing</button>
    <button type="button" data-ui-tab-trigger="security">Security</button>
    <button type="button" data-ui-tab-trigger="archive" class="is-disabled">Archive</button>
  </div>

  <section data-ui-tab-content="account">...</section>
  <section data-ui-tab-content="billing">...</section>
  <section data-ui-tab-content="security">...</section>
  <section data-ui-tab-content="archive">...</section>
</div>

<script src="../dist/js-tab-ui.umd.global.js"></script>
<script>
  window.UiTab.init({
    activeClass: 'is-active',
    disabledClass: 'is-disabled',
    orientation: 'vertical'
  });
</script>

Activation mode

manualでは矢印キーはfocus移動のみ、EnterまたはSpaceで切り替えます。

Manual activation

useHiddenAttribute=falseの例として、表示はCSSで制御しています。

Step one

ArrowRightでfocusだけが移動します。選択中のパネルはまだ変わりません。

EnterまたはSpaceを押すと、focus中のタブがactivateされます。

Step two

パネルの描画コストが高い場合や、previewと確定を分けたい場合に便利です。

Step three

hidden属性を使わないため、非表示制御は.--activeを使ったCSSで行います。

Manual activation setup

Auto

<div
  data-ui-tab
  data-ui-tab-init="one"
  data-ui-tab-activation="manual"
  data-ui-tab-use-hidden-attribute="false"
>
  <div role="tablist" aria-label="Manual activation tabs">
    <button type="button" data-ui-tab-trigger="one">Step one</button>
    <button type="button" data-ui-tab-trigger="two">Step two</button>
    <button type="button" data-ui-tab-trigger="three">Step three</button>
  </div>

  <section data-ui-tab-content="one">...</section>
  <section data-ui-tab-content="two">...</section>
  <section data-ui-tab-content="three">...</section>
</div>

<script src="../dist/js-tab-ui.auto.global.js" defer></script>

Manual init

<div data-ui-tab data-ui-tab-init="one">
  <div role="tablist" aria-label="Manual activation tabs">
    <button type="button" data-ui-tab-trigger="one">Step one</button>
    <button type="button" data-ui-tab-trigger="two">Step two</button>
    <button type="button" data-ui-tab-trigger="three">Step three</button>
  </div>

  <section data-ui-tab-content="one">...</section>
  <section data-ui-tab-content="two">...</section>
  <section data-ui-tab-content="three">...</section>
</div>

<script src="../dist/js-tab-ui.umd.global.js"></script>
<script>
  window.UiTab.init({
    activation: 'manual',
    useHiddenAttribute: false
  });
</script>

Custom manual setup

auto bundleを使わず、selector、class、hidden属性、イベントをすべて明示して初期化します。

Manual initialization with events

このデモはdata-custom-tabをrootにして、ui-tab:initとui-tab:changeをconsole.logします。

Alpha

rootSelectorやtriggerSelectorを変更しても、ARIAとキーボード操作は同じように動作します。

Beta

タブを切り替えるとconsoleにui-tab:changeのdetailを出力します。

Gamma

disabledClassに指定したis-unavailableがあるため、このタブは選択できません。

Custom manual setup

HTML

<div data-custom-tab data-ui-tab-init="alpha">
  <div role="tablist" aria-label="Custom manual tabs">
    <button type="button" data-custom-tab-trigger="alpha">Alpha</button>
    <button type="button" data-custom-tab-trigger="beta">Beta</button>
    <button type="button" data-custom-tab-trigger="gamma" class="is-unavailable">Gamma</button>
  </div>

  <section data-custom-tab-content="alpha">...</section>
  <section data-custom-tab-content="beta">...</section>
  <section data-custom-tab-content="gamma">...</section>
</div>

JavaScript

<script src="../dist/js-tab-ui.umd.global.js"></script>
<script>
  const customRoot = document.querySelector('[data-custom-tab]');

  customRoot.addEventListener('ui-tab:init', function (event) {
    console.log('ui-tab:init', event.detail);
  });

  customRoot.addEventListener('ui-tab:change', function (event) {
    console.log('ui-tab:change', event.detail);
  });

  window.UiTab.init({
    rootSelector: '[data-custom-tab]',
    triggerSelector: '[data-custom-tab-trigger]',
    contentSelector: '[data-custom-tab-content]',
    activeClass: 'is-selected',
    disabledClass: 'is-unavailable',
    hiddenAttribute: 'data-hidden',
    useHiddenAttribute: true,
    orientation: 'horizontal',
    activation: 'auto',
    on: {
      init: function (detail) {
        console.log('on.init', detail);
      },
      change: function (detail) {
        console.log('on.change', detail);
      }
    }
  });
</script>