Material Design Lite-タブ

Material Design Lite（MDL）タブコンポーネントは、単一のスペースに複数の画面を排他的に表示するのに役立つユーザーインターフェイスコンポーネントです。

MDLは、さまざまなCSSクラスを提供して、事前定義されたさまざまな視覚的および動作強化をタブに適用します。次の表に、使用可能なクラスとその効果を示します。

Sr.No.	Class Name & Description
1	mdl-layout コンテナーをMDLコンポーネントとして識別します。外側のコンテナ要素に必要です。
2	mdl-tabs タブコンテナをMDLコンポーネントとして識別します。「外部」div要素で必要です。
3	mdl-js-tabs 基本的なMDL動作をタブコンテナーに設定します。「外部」div要素で必要です。
4	mdl-js-ripple-effect リップルクリック効果をタブリンクに追加します。オプション。「外部」div要素に進みます。
5	mdl-tabs__tab-bar コンテナをMDLタブリンクバーとして識別します。最初の「内部」div要素で必要です。
6	mdl-tabs__tab アンカー（リンク）をMDLタブアクティベーターとして識別します。最初の「内部」div要素のすべてのリンクで必要です。
7	is-active タブをデフォルトの表示タブとして識別します。「内部」div（タブ）要素の1つ（および1つのみ）に必要です。
8	mdl-tabs__panel コンテナをタブコンテンツとして識別します。各「内部」div（タブ）要素で必要です。

例

次の例は、mdl-tabクラスを使用してさまざまなタブにコンテンツをレイアウトする方法を理解するのに役立ちます。

以下に示すMDLクラスは、この例で使用されます-

mdl-layout -divをMDLコンポーネントとして識別します。
mdl-js-layout -外部divに基本的なMDL動作を追加します。
mdl-layout—fixed-header -小さな画面でもヘッダーを常に表示します。
mdl-layout__header-row -コンテナをMDLヘッダー行として識別します。
mdl-layout-title -レイアウトタイトルテキストを識別します。
mdl-layout__content -divをMDLレイアウトコンテンツとして識別します。
mdl-tabs -タブコンテナをMDLコンポーネントとして識別します。
mdl-js-tabs -基本的なMDL動作をタブコンテナーに設定します。
mdl-tabs__tab-bar -コンテナをMDLタブリンクバーとして識別します。
mdl-tabs__tab -MDLタブアクティベーターとしてアンカー（リンク）を識別します。
is-active -タブをデフォルトの表示タブとして識別します。
mdl-tabs__panel -コンテナをタブコンテンツとして識別します。

mdl_tabs

<html>
   <head>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">
               <span class = "mdl-layout-title">Material Design Tabs</span>
            </div>
         </header>

         <main class = "mdl-layout__content">
            <div class = "mdl-tabs mdl-js-tabs">
               <div class = "mdl-tabs__tab-bar">
                  <a href = "#tab1-panel" class = "mdl-tabs__tab is-active">Tab 1</a>
                  <a href = "#tab2-panel" class = "mdl-tabs__tab">Tab 2</a>
                  <a href = "#tab3-panel" class = "mdl-tabs__tab">Tab 3</a>
               </div>

               <div class = "mdl-tabs__panel is-active" id = "tab1-panel">
                  <p>Tab 1 Content</p>
               </div>

               <div class = "mdl-tabs__panel" id = "tab2-panel">
                  <p>Tab 2 Content</p>
               </div>

               <div class = "mdl-tabs__panel" id = "tab3-panel">
                  <p>Tab 3 Content</p>
               </div>
            </div>
         </main>
      </div>
   </body>
</html>

結果

結果を確認します。

Materialdesignlite-tabs

Material Design Lite-タブ

例

mdl_tabs

結果

目次