「Shoelace」でタブ（Tab）を作成する方法

「Shoelace」でタブ（Tab）を作成する方法

今回は「Shoelace」の『sl-tab-group』と『sl-tab』『sl-tab-panel』タグに紹介です。

タグ「<sl-tab-group>」

• Tab Group

タグ「<sl-tab>」

• Tab

タグ「<sl-tab-panel>」

• Tab Panel

デモ

• デモページ 

導入方法

JSファイルインクルード

「Shoelace」の全機能を利用する必要はなく、タブに関連するJSファイルを読み込んでください。

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.3.0/dist/components/tab-group/tab-group.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.3.0/dist/components/tab/tab.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.3.0/dist/components/tab-panel/tab-panel.js"></script>

「Shoelace」の全機能を利用する場合は、以下のファイルを読み込んでください。

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/shoelace.js"></script>

CSSファイルインクルード

「Shoelace」のCSSファイルをインクルードします。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/themes/light.css" />

HTMLマークアップ

タグ「<sl-tab-group>」と「<sl-tab>」「<sl-tab-panel>」でタブ領域を定義します。

まず、「<sl-tab-group>」タグでタブを生成するエリアを定義します。

<sl-tab-group>
   ...
</sl-tab-group>

次にタブグループ（<sl-tab-group>）内に、タブを定義します。

<sl-tab-group>
   <sl-tab slot="nav" panel="tab-1">タブ 1</sl-tab>
   <sl-tab slot="nav" panel="tab-2">タブ 2</sl-tab>
   <sl-tab slot="nav" panel="tab-3">タブ 3</sl-tab>
   ...
</sl-tab-group>

タブ（<sl-tab>）タグを利用し、タブを定義します。

<sl-tab-group>
   <sl-tab slot="nav" panel="tab-1">タブ 1</sl-tab>
   <sl-tab slot="nav" panel="tab-2">タブ 2</sl-tab>
   <sl-tab slot="nav" panel="tab-3">タブ 3</sl-tab>
   <sl-tab-panel name="tab-1">タブパネル 1</sl-tab-panel>
   <sl-tab-panel name="tab-2">タブパネル 2</sl-tab-panel>
   <sl-tab-panel name="tab-3">タブパネル 3</sl-tab-panel>
</sl-tab-group>

サンプル

全般 カスタム 上級者向け 無効 全般のパネル領域 カスタムのパネル領域 上級者向けのパネル領域 無効のパネル領域

タブを無効にする方法

「disabled」属性を設定するとタブが無効化されます。

<sl-tab-group>
  <sl-tab slot="nav" panel="general">全般</sl-tab>
  <sl-tab slot="nav" panel="custom" active>カスタム</sl-tab>
  <sl-tab slot="nav" panel="advanced">上級者向け</sl-tab>
  <sl-tab slot="nav" panel="disabled" disabled>無効</sl-tab>
  <sl-tab-panel name="general">全般のパネル領域</sl-tab-panel>
  <sl-tab-panel name="custom">カスタムのパネル領域</sl-tab-panel>
  <sl-tab-panel name="advanced">上級者向けのパネル領域</sl-tab-panel>
  <sl-tab-panel name="disabled">無効のパネル領域</sl-tab-panel>
</sl-tab-group>

タブを初期選択して表示させる方法
「active」属性を設定することで、初期状態から選択状態で表示させることができます。

<sl-tab-group>
  <sl-tab slot="nav" panel="general">全般</sl-tab>
  <sl-tab slot="nav" panel="custom" active>カスタム</sl-tab>
  <sl-tab slot="nav" panel="advanced">上級者向け</sl-tab>
  <sl-tab slot="nav" panel="disabled" disabled>無効</sl-tab>
  <sl-tab-panel name="general">全般のパネル領域</sl-tab-panel>
  <sl-tab-panel name="custom">カスタムのパネル領域</sl-tab-panel>
  <sl-tab-panel name="advanced">上級者向けのパネル領域</sl-tab-panel>
  <sl-tab-panel name="disabled">無効のパネル領域</sl-tab-panel>
</sl-tab-group>

タブ下部

サンプル

全般 カスタム 上級者向け 無効 全般のパネル領域 カスタムのパネル領域 上級者向けのパネル領域 無効のパネル領域

HTMLコード

<sl-tab-group placement="bottom">
  <sl-tab slot="nav" panel="general">全般</sl-tab>
  <sl-tab slot="nav" panel="custom">カスタム</sl-tab>
  <sl-tab slot="nav" panel="advanced">上級者向け</sl-tab>
  <sl-tab slot="nav" panel="disabled" disabled>無効</sl-tab>
  <sl-tab-panel name="general">全般のパネル領域</sl-tab-panel>
  <sl-tab-panel name="custom">カスタムのパネル領域</sl-tab-panel>
  <sl-tab-panel name="advanced">上級者向けのパネル領域</sl-tab-panel>
  <sl-tab-panel name="disabled">無効のパネル領域</sl-tab-panel>
</sl-tab-group>

「<sl-tab-group」の属性「placement」に『bottom』を指定すれば、タブの配置が下部に移り、パネルは上部になります。

タブ左側

サンプル

全般 カスタム 上級者向け 無効 全般のパネル領域 カスタムのパネル領域 上級者向けのパネル領域 無効のパネル領域

HTMLコード

<sl-tab-group placement="start">
  <sl-tab slot="nav" panel="general">全般</sl-tab>
  <sl-tab slot="nav" panel="custom">カスタム</sl-tab>
  <sl-tab slot="nav" panel="advanced">上級者向け</sl-tab>
  <sl-tab slot="nav" panel="disabled" disabled>無効</sl-tab>
  <sl-tab-panel name="general">全般のパネル領域</sl-tab-panel>
  <sl-tab-panel name="custom">カスタムのパネル領域</sl-tab-panel>
  <sl-tab-panel name="advanced">上級者向けのパネル領域</sl-tab-panel>
  <sl-tab-panel name="disabled">無効のパネル領域</sl-tab-panel>
</sl-tab-group>

「<sl-tab-group」の属性「placement」に『start』を指定すれば、タブの配置が左に移り、パネルは右側になります。

タブ右側

サンプル

全般 カスタム 上級者向け 無効 全般のパネル領域 カスタムのパネル領域 上級者向けのパネル領域 無効のパネル領域

HTMLコード

<sl-tab-group placement="end">
  <sl-tab slot="nav" panel="general">全般</sl-tab>
  <sl-tab slot="nav" panel="custom">カスタム</sl-tab>
  <sl-tab slot="nav" panel="advanced">上級者向け</sl-tab>
  <sl-tab slot="nav" panel="disabled" disabled>無効</sl-tab>
  <sl-tab-panel name="general">全般のパネル領域</sl-tab-panel>
  <sl-tab-panel name="custom">カスタムのパネル領域</sl-tab-panel>
  <sl-tab-panel name="advanced">上級者向けのパネル領域</sl-tab-panel>
  <sl-tab-panel name="disabled">無効のパネル領域</sl-tab-panel>
</sl-tab-group>

「<sl-tab-group」の属性「placement」に『end』を指定すれば、タブの配置が右に移り、パネルは左側になります。

閉じることができるタブ

全般 タブ 1 タブ 2 タブ 3 全般のパネル領域 １つ目のパネル領域 ２つ目のパネル領域 ３つ目のパネル領域

HTMLコード

<sl-tab-group class="tabs-closable">
  <sl-tab slot="nav" panel="general">全般</sl-tab>
  <sl-tab slot="nav" panel="closable-1" closable>タブ 1</sl-tab>
  <sl-tab slot="nav" panel="closable-2" closable>タブ 2</sl-tab>
  <sl-tab slot="nav" panel="closable-3" closable>タブ 3</sl-tab>
  <sl-tab-panel name="general">全般のパネル領域</sl-tab-panel>
  <sl-tab-panel name="closable-1">１つ目のパネル領域</sl-tab-panel>
  <sl-tab-panel name="closable-2">２つ目のパネル領域</sl-tab-panel>
  <sl-tab-panel name="closable-3">３つ目のパネル領域</sl-tab-panel>
</sl-tab-group>
<script>
  const tabGroup = document.querySelector('.tabs-closable');
  tabGroup.addEventListener('sl-close', async event => {
    const tab = event.target;
    const panel = tabGroup.querySelector(`sl-tab-panel[name="${tab.panel}"]`);
    // Show the previous tab if the tab is currently active
    if (tab.active) {
      tabGroup.show(tab.previousElementSibling.panel);
    }
    // Remove the tab + panel
    tab.remove();
    panel.remove();
  });
</script>

「<sl-tab>」タブの属性に『closable』を設定すると×（閉じるボタン）が設定されます。

ただ、閉じるボタンが設定されるだけでは、タブは閉じません。Javascriptにて処理を追加しなければなりません。

まず、『sl-close』イベントで、×（閉じるボタン）がクリックされたイベントを受け取ります。

• <sl-tab>Events

×（閉じるボタン）が押されたイベントで、クリックされたタブとそのパネルを「remove()」メソッドを使って、削除します。

スクロールタブ

サンプル

タブがたくさんあり、表示しきれない場合にはスクロールバーが表示されるようになります。

タブ 1 タブ 2 タブ 3 タブ 4 タブ 5 タブ 6 タブ 7 タブ 8 タブ 9 タブ 10 タブ 11 タブ 12 タブ 13 タブ 14 タブ 15 タブ 16 タブ 17 タブ 18 タブ 19 タブ 20 タブパネル 1 タブパネル 2 タブパネル 3 タブパネル 4 タブパネル 5 タブパネル 6 タブパネル 7 タブパネル 8 タブパネル 9 タブパネル 10 タブパネル 11 タブパネル 12 タブパネル 13 タブパネル 14 タブパネル 15 タブパネル 16 タブパネル 17 タブパネル 18 タブパネル 19 タブパネル 20

HTMLコード

<sl-tab-group>
  <sl-tab slot="nav" panel="tab-1">タブ 1</sl-tab>
  <sl-tab slot="nav" panel="tab-2">タブ 2</sl-tab>
  <sl-tab slot="nav" panel="tab-3">タブ 3</sl-tab>
  <sl-tab slot="nav" panel="tab-4">タブ 4</sl-tab>
  <sl-tab slot="nav" panel="tab-5">タブ 5</sl-tab>
  <sl-tab slot="nav" panel="tab-6">タブ 6</sl-tab>
  <sl-tab slot="nav" panel="tab-7">タブ 7</sl-tab>
  <sl-tab slot="nav" panel="tab-8">タブ 8</sl-tab>
  <sl-tab slot="nav" panel="tab-9">タブ 9</sl-tab>
  <sl-tab slot="nav" panel="tab-10">タブ 10</sl-tab>
  <sl-tab slot="nav" panel="tab-11">タブ 11</sl-tab>
  <sl-tab slot="nav" panel="tab-12">タブ 12</sl-tab>
  <sl-tab slot="nav" panel="tab-13">タブ 13</sl-tab>
  <sl-tab slot="nav" panel="tab-14">タブ 14</sl-tab>
  <sl-tab slot="nav" panel="tab-15">タブ 15</sl-tab>
  <sl-tab slot="nav" panel="tab-16">タブ 16</sl-tab>
  <sl-tab slot="nav" panel="tab-17">タブ 17</sl-tab>
  <sl-tab slot="nav" panel="tab-18">タブ 18</sl-tab>
  <sl-tab slot="nav" panel="tab-19">タブ 19</sl-tab>
  <sl-tab slot="nav" panel="tab-20">タブ 20</sl-tab>
  <sl-tab-panel name="tab-1">タブパネル 1</sl-tab-panel>
  <sl-tab-panel name="tab-2">タブパネル 2</sl-tab-panel>
  <sl-tab-panel name="tab-3">タブパネル 3</sl-tab-panel>
  <sl-tab-panel name="tab-4">タブパネル 4</sl-tab-panel>
  <sl-tab-panel name="tab-5">タブパネル 5</sl-tab-panel>
  <sl-tab-panel name="tab-6">タブパネル 6</sl-tab-panel>
  <sl-tab-panel name="tab-7">タブパネル 7</sl-tab-panel>
  <sl-tab-panel name="tab-8">タブパネル 8</sl-tab-panel>
  <sl-tab-panel name="tab-9">タブパネル 9</sl-tab-panel>
  <sl-tab-panel name="tab-10">タブパネル 10</sl-tab-panel>
  <sl-tab-panel name="tab-11">タブパネル 11</sl-tab-panel>
  <sl-tab-panel name="tab-12">タブパネル 12</sl-tab-panel>
  <sl-tab-panel name="tab-13">タブパネル 13</sl-tab-panel>
  <sl-tab-panel name="tab-14">タブパネル 14</sl-tab-panel>
  <sl-tab-panel name="tab-15">タブパネル 15</sl-tab-panel>
  <sl-tab-panel name="tab-16">タブパネル 16</sl-tab-panel>
  <sl-tab-panel name="tab-17">タブパネル 17</sl-tab-panel>
  <sl-tab-panel name="tab-18">タブパネル 18</sl-tab-panel>
  <sl-tab-panel name="tab-19">タブパネル 19</sl-tab-panel>
  <sl-tab-panel name="tab-20">タブパネル 20</sl-tab-panel>
</sl-tab-group>

ご参考

関連記事

• ウェブコンポーネントライブラリ「Shoelace」の導入方法