このレッスンでは

  1. タブを追加する
  2. タブにコンテンツを追加する
  3. タブのスタイル

について紹介しています。

1.タブを追加する

Tabs icon thumbnail

タブ要素を追加するには、「追加」パネルで、コンポーネントセクションまでスクロールダウンします。次に、Tabs要素をクリックしてドラッグし、キャンバス上に配置します。この要素は、配置された要素の幅を自動的に満たします。

The eleven elements that are included in the components section are background

タブの解剖学

Tabs 要素は、Tabs Wrapper から構成され、その中に タブメニューと タブコンテンツが入っています。

The Tabs content is highlighted within the Navigator panel. The tabs menu displays the tab links and panels.

タブメニュー

タブメニューには、すべてのタブリンクが含まれています。デフォルトでは、3つのタブリンクがあります。各タブリンクの中には、テキストブロックがあります。


タブのコンテンツ

タブコンテンツの中には、タブペインがあり、各タブのコンテンツが保持されています。デフォルトでは、3つのペインがあります（数字のボタンと同じ）。


タブの作成

デフォルトでは、3つのタブがあります。以下の手順で追加することができます。


  1. 「タブ」内の任意の要素を選択する
  2. 要素設定パネルに移動します。
  3. [タブの設定]の下にあるプラスアイコンをクリックします
  4. 新しいタブを作成すると、タブリンクとタブペインが正しい位置に自動的に作成されます。

タブの削除

  1. タブ内の任意の要素を選択する
  2. 要素設定パネルに移動します
  3. [タブの設定]セクションを見つけます
  4. 削除したいタブの横にあるゴミ箱アイコンをクリックします。 
  5. タブリンクを削除すると、対応するタブペインも削除されます（逆も同様）。


タブの名前を変更する


タブの設定では、内部整理のためにタブの名前を変更することもできます（この場合、キャンバス上のタブの名前は変更されません）。 


タブの切り替え

別のタブに切り替えるには、いくつかの方法があります。


[アクティブなタブの設定] 

  1. リストからタブを選択します。注意：これは、ウェブサイトを読み込んだときのデフォルトのタブも設定します。
  2. ナビゲータで表示したいタブを選択する
  3. キャンバス上でタブペインを選択し、キーボードの左右の矢印を使用して隣接するタブペインを選択します。
The Tabs settings panel displays four options to set as the active tab along with a plug icon to add another tab. The panel also displays an easing drop down menu and text input fields for both Fade in and Fade out.

2.タブを追加する

タブに切り替えた後、いくつかの方法でタブペインに要素を追加することができます。

タブペインを選択した状態で、[追加] パネル内の要素をクリックすると、即座にその要素が挿入されます。

[追加]パネルからタブペインに要素をドラッグ＆ドロップする。


Step one on the left, select the tab pane you want to add an element into. Step two on the right, select the elements tab from the Add panel and add the element you choose.

また、プレビューモードで各タブボタンをクリックすると、各タブの内容をプレビューすることができます。

3.タブのスタイル設定

タブコンポーネント内の各要素にスタイルを設定することができます。

タブメニュー

タブメニューのスタイルは、まずキャンバス上かナビゲータでタブメニューを選択し、「スタイル」パネルで設定することができます。例えば、タブとタブペイン内のコンテンツの間にスペースを作るために、ボトムマージンを追加することを選択できます。


Step one on the left, select the tabs menu. Step two on the right, add margin on all sides in the spacing section of the style panel.

タブリンク

まず、タブリンクを選択し、新しいクラスを作成します。次に、このクラス名を他のすべてのタブリンクに追加して、同じスタイルを共有できるようにします。この緑色の「現在の」クラスは、サイト上でタブが選択されるたびに自動的に適用されます。

The style panel displays a tab link selected with the class Current added to the default Tab link class.

すべてのタブリンクに同じクラス名をつけたら、「現在のクラス」がないタブリンクの1つを選択します。これらのタブリンクの1つにスタイルを設定すると、その変更がすべてのタブリンクに適用されます。例えば、フォントの色、フォントサイズ、背景色などを編集することができます。

Step one on the left, select a tab link and make sure the Current class is not active. Step two in the middle, edit the font and font size. Step three on the right, edit the tab background.

現在のタブのリンクのスタイル

アクティブなタブと非アクティブなタブを区別するために、現在のタブを通常のタブと異なるスタイルにすることができます。例えば、フォントの色や背景色を通常のタブとは異なるものに編集することができます。現在のタブのスタイルを設定するには、アクティブなタブのリンクを選択するだけです。

A set of tabs called Monthly Plans (selected), Annual plans, and sesquicentennial plans are displayed.

タブリンクのホバースタイリング

以下の手順で、タブリンクにホバー効果を追加することができます。


  1. 現在表示されていないタブリンクを選択します。
  2. [状態]ドロップダウンメニューから[ホバー]を選択します。
  3. ホバー時に表示させたいタブのスタイルを設定します。
  4. [状態]ドロップダウンから[なし]を選択します。
  5. スタイルパネルで、必要なイージングと期間を指定してトランジションを追加します。
Step one on the left, select the Annual Plans tab. Step two on the right, select Hover (highlighted) in the states drop down menu.

トランジション

異なるタブペイン間の遷移を制御します。


  1. いずれかのタブ要素を選択します。
  2. 要素設定パネルに移動します。
  3. ドロップダウンからイージングを選択します。
  4. フェードイン/アウトの時間(ms)を設定します。
Step one on the left, select the tabs menu from the navigator panel. Step two on the right, edit the Easing in the tabs settings panel. a

‍