feat(tab-bar): Launch tab, tab indicator, tab scroller, tab bar (#3252)

Release new MDCTab, MDCTabIndicator, MDCTabScroller, and MDCTabBar. BREAKING CHANGE: mdc-tabs is deprecated and no longer bundled in the material-components-web package. You are encouraged to use the new mdc-tab-bar and related packages instead.
material-components · Jul 27, 2018 · 78bf4bc · 78bf4bc
1 parent 19724f1
commit 78bf4bc
Show file tree

Hide file tree

Showing 72 changed files with 7,216 additions and 121 deletions.
diff --git a/demos/tab-bar.html b/demos/tab-bar.html
diff --git a/demos/tab-bar.scss b/demos/tab-bar.scss
@@ -0,0 +1,68 @@
+//
+// Copyright 2018 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@import "./common";
+@import "../packages/mdc-tab/mdc-tab";
+@import "../packages/mdc-tab/mixins";
+@import "../packages/mdc-tab-indicator/mdc-tab-indicator";
+@import "../packages/mdc-tab-indicator/mixins";
+@import "../packages/mdc-tab-scroller/mdc-tab-scroller";
+@import "../packages/mdc-tab-bar/mdc-tab-bar";
+@import "../packages/mdc-tab-bar/mixins";
+@import "../packages/mdc-elevation/mixins";
+@import "../packages/mdc-ripple/mixins";
+@import "../packages/mdc-theme/color-palette";
+
+.demo {
+  display: flex;
+  align-items: center;
+}
+
+.hero-demo-tab-bar {
+  @include mdc-tab-bar-width(420px);
+}
+
+.custom-demo-tab-bar {
+  .mdc-tab {
+    @include mdc-typography(subtitle1);
+    @include mdc-tab-fixed-width(120px);
+    @include mdc-tab-text-label-color($material-color-blue-600);
+    @include mdc-tab-icon-color($material-color-blue-600);
+  }
+
+  .mdc-tab__ripple {
+    @include mdc-states($material-color-yellow-700);
+  }
+
+  .mdc-tab--active {
+    @include mdc-tab-text-label-color($material-color-blue-900);
+    @include mdc-tab-icon-color($material-color-blue-900);
+  }
+
+  .mdc-tab-indicator {
+    @include mdc-tab-indicator-underline-height(5px);
+    @include mdc-tab-indicator-underline-color($material-color-yellow-700);
+  }
+}
+
+.demo-controls {
+  padding: 0 16px;
+}
+
+.rtl-container {
+  margin: 24px;
+  padding: 24px;
+}
diff --git a/demos/tab-indicator.html b/demos/tab-indicator.html
@@ -0,0 +1,269 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2018 Google Inc. All rights reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Tab Indicator - Material Components Catalog</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
+    <link rel="stylesheet" href="/assets/tab-indicator.css">
+    <script src="/ready.js"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  </head>
+
+  <body class="mdc-typography">
+    <header class="mdc-toolbar mdc-toolbar--fixed">
+      <div class="mdc-toolbar__row">
+        <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
+          <span class="catalog-back">
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
+          </span>
+          <span class="mdc-toolbar__title catalog-title">Tab Indicator</span>
+        </section>
+      </div>
+    </header>
+
+    <main class="mdc-toolbar-fixed-adjust">
+      <section class="hero">
+        <div class="demo">
+          <div class="demo-item hero-demo-item">
+            <span class="mdc-tab-indicator mdc-tab-indicator--active">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+          </div>
+          <div class="demo-item demo-item--wide hero-demo-item">
+            <span class="mdc-tab-indicator">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+          </div>
+          <div class="demo-item demo-item--narrow hero-demo-item">
+            <span class="mdc-tab-indicator">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+          </div>
+        </div>
+      </section>
+
+      <section class="example">
+        <h2>Sliding Underline Indicator</h2>
+        <div class="demo">
+          <div class="demo-item">
+            <span class="mdc-tab-indicator mdc-tab-indicator--active demo-indicator custom-sliding-underline">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+          </div>
+          <div class="demo-item demo-item--narrow">
+            <span class="mdc-tab-indicator custom-sliding-underline">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+          </div>
+          <div class="demo-item demo-item--wide">
+            <span class="mdc-tab-indicator custom-sliding-underline">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+          </div>
+        </div>
+
+        <br>
+
+        <h4>Custom Color</h4>
+        <div class="demo">
+          <div class="demo-item demo-item--narrow">
+            <span class="mdc-tab-indicator mdc-tab-indicator--active custom-color-underline">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+          </div>
+          <div class="demo-item">
+            <span class="mdc-tab-indicator custom-color-underline">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+          </div>
+          <div class="demo-item demo-item--wide">
+            <span class="mdc-tab-indicator custom-color-underline">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+          </div>
+        </div>
+
+        <br>
+
+        <h4>Custom Height</h4>
+        <div class="demo">
+          <div class="demo-item demo-item--narrow">
+            <span class="mdc-tab-indicator mdc-tab-indicator--active custom-height-underline">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+          </div>
+          <div class="demo-item demo-item--wide">
+            <span class="mdc-tab-indicator custom-height-underline">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+          </div>
+          <div class="demo-item demo-item">
+            <span class="mdc-tab-indicator custom-height-underline">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+          </div>
+        </div>
+
+        <br>
+
+        <h4>Custom Border Radius</h4>
+        <div class="demo">
+          <div class="demo-item">
+            <span class="mdc-tab-indicator mdc-tab-indicator--active custom-border-radius">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+          </div>
+          <div class="demo-item demo-item--narrow">
+            <span class="mdc-tab-indicator custom-border-radius">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+          </div>
+          <div class="demo-item demo-item--wide">
+            <span class="mdc-tab-indicator custom-border-radius">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+          </div>
+        </div>
+      </section>
+
+      <section class="example">
+        <h2>Fading Icon Indicator</h2>
+        <div class="demo">
+          <div class="demo-item">
+            <span class="mdc-tab-indicator mdc-tab-indicator--fade mdc-tab-indicator--active">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons">favorite</span>
+            </span>
+          </div>
+          <div class="demo-item demo-item--wide">
+            <span class="mdc-tab-indicator mdc-tab-indicator--fade">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons">star</span>
+            </span>
+          </div>
+          <div class="demo-item demo-item--narrow">
+            <span class="mdc-tab-indicator mdc-tab-indicator--fade">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons">lens</span>
+            </span>
+          </div>
+        </div>
+
+        <br>
+
+        <h4>Custom Color</h4>
+        <div class="demo">
+          <div class="demo-item demo-item--wide">
+            <span class="mdc-tab-indicator mdc-tab-indicator--fade mdc-tab-indicator--active custom-color-icon">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons">favorite</span>
+            </span>
+          </div>
+          <div class="demo-item">
+            <span class="mdc-tab-indicator mdc-tab-indicator--fade custom-color-icon">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons">star</span>
+            </span>
+          </div>
+          <div class="demo-item demo-item--narrow">
+            <span class="mdc-tab-indicator mdc-tab-indicator--fade custom-color-icon">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons">lens</span>
+            </span>
+          </div>
+        </div>
+
+        <br>
+
+        <h4>Custom Height</h4>
+        <div class="demo">
+          <div class="demo-item demo-item--narrow">
+            <span class="mdc-tab-indicator mdc-tab-indicator--fade mdc-tab-indicator--active custom-height-icon">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons">favorite</span>
+            </span>
+          </div>
+          <div class="demo-item demo-item--wide">
+            <span class="mdc-tab-indicator mdc-tab-indicator--fade custom-height-icon">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons">star</span>
+            </span>
+          </div>
+          <div class="demo-item">
+            <span class="mdc-tab-indicator mdc-tab-indicator--fade custom-height-icon">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons">lens</span>
+            </span>
+          </div>
+        </div>
+      </section>
+
+      <section class="example">
+        <h2>Mix and Match</h2>
+        <p>This demo shows how to use a sliding indicator with custom SVG icon content.</p>
+        <div class="demo">
+          <div class="demo-item">
+            <span class="mdc-tab-indicator mdc-tab-indicator--active custom-sliding-icon">
+              <svg class="mdc-tab-indicator__content mdc-tab-indicator__content--icon custom-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path d="M12 7.77L18.39 18H5.61L12 7.77M12 4L2 20h20L12 4z"/>
+                <path fill="none" d="M0 0h24v24H0V0z"/>
+              </svg>
+            </span>
+          </div>
+          <div class="demo-item demo-item--narrow">
+            <span class="mdc-tab-indicator custom-sliding-icon">
+              <svg class="mdc-tab-indicator__content mdc-tab-indicator__content--icon custom-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path d="M12 7.77L18.39 18H5.61L12 7.77M12 4L2 20h20L12 4z"/>
+                <path fill="none" d="M0 0h24v24H0V0z"/>
+              </svg>
+            </span>
+          </div>
+          <div class="demo-item demo-item--wide">
+            <span class="mdc-tab-indicator custom-sliding-icon">
+              <svg class="mdc-tab-indicator__content mdc-tab-indicator__content--icon custom-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path d="M12 7.77L18.39 18H5.61L12 7.77M12 4L2 20h20L12 4z"/>
+                <path fill="none" d="M0 0h24v24H0V0z"/>
+              </svg>
+            </span>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <script src="/assets/material-components-web.js" async></script>
+    <script>
+      demoReady(function() {
+
+        function initDemo(demoRoot) {
+          var demoItems = demoRoot.querySelectorAll('.demo-item');
+          var activeIndicator;
+          [].forEach.call(demoItems, function (demoItem) {
+            var indicatorEl = demoItem.querySelector('.mdc-tab-indicator');
+            var indicator = new mdc.tabIndicator.MDCTabIndicator(indicatorEl);
+            if (indicatorEl.classList.contains('mdc-tab-indicator--active')) {
+              activeIndicator = indicator;
+            }
+
+            demoItem.addEventListener('click', function() {
+              activeIndicator.deactivate();
+              indicator.activate(activeIndicator.computeContentClientRect());
+              activeIndicator = indicator;
+            });
+          });
+        }
+
+        var demos = document.querySelectorAll('.demo');
+        [].forEach.call(demos, initDemo);
+      });
+    </script>
+  </body>
+</html>