feat(mdc-toolbar): Implement mdc-toolbar (#38) (#267)

material-components · Feb 15, 2017 · 3ca957c · 3ca957c
1 parent 3effc35
commit 3ca957c
Show file tree

Hide file tree

Showing 10 changed files with 403 additions and 0 deletions.
diff --git a/demos/index.html b/demos/index.html
@@ -44,6 +44,7 @@
           <li><a href="snackbar.html">Snackbar</a></li>
           <li><a href="textfield.html">Text Field</a></li>
           <li><a href="theme.html">Theme</a></li>
+          <li><a href="toolbar/index.html">Toolbar</a></li>
           <li><a href="typography.html">Typography</a></li>
         </ul>
       </nav>

diff --git a/demos/toolbar/default-toolbar.html b/demos/toolbar/default-toolbar.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2016 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>MDC Toolbar Demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <style>
+      .mdc-toolbar-demo {
+        margin: 0px;
+      }
+      .demo-paragraph {
+        margin: 0px;
+        padding: 20px 16px;
+      }
+      .material-icons {
+        text-decoration: none;
+        cursor: pointer;
+        padding-right: 8px;
+      }
+      [dir='rtl'] .material-icons {
+        padding-left: 8px;
+      }
+    </style>
+    <script src="../assets/material-components-web.css.js" charset="utf-8"></script>
+  </head>
+  <body class="mdc-typography mdc-toolbar-demo">
+    <header class="mdc-toolbar">
+      <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
+        <a class="material-icons">menu</a>
+        <span class="mdc-toolbar__title">Title</span>
+      </section>
+      <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
+        <a class="material-icons" aria-label="Download" alt="Download">file_download</a>
+        <a class="material-icons" aria-label="Print this page" alt="Print this page">print</a>
+        <a class="material-icons" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
+      </section>
+    </header>
+    <main>
+      <p class="demo-paragraph">
+        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+      </p>
+      <p class="demo-paragraph">
+        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+      </p>
+    </main>
+  </body>
+</html>
diff --git a/demos/toolbar/fixed-top-toolbar.html b/demos/toolbar/fixed-top-toolbar.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2016 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>MDC Toolbar Demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <style>
+      .mdc-toolbar-demo {
+        margin: 0px;
+      }
+      .demo-paragraph {
+        margin: 0px;
+        padding: 20px 16px;
+      }
+      .material-icons {
+        text-decoration: none;
+        cursor: pointer;
+        padding: 0px 8px 0px 0px;
+      }
+      [dir='rtl'] .material-icons {
+        padding-left: 8px;
+      }
+    </style>
+    <script src="../assets/material-components-web.css.js" charset="utf-8"></script>
+  </head>
+  <body class="mdc-typography mdc-toolbar-demo">
+    <header class="mdc-toolbar mdc-toolbar--fixed">
+      <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
+        <a class="material-icons">menu</a>
+        <span class="mdc-toolbar__title">Title</span>
+      </section>
+      <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
+        <a class="material-icons" aria-label="Download" alt="Download">file_download</a>
+        <a class="material-icons" aria-label="Print this page" alt="Print this page">print</a>
+        <a class="material-icons" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
+      </section>
+    </header>
+    <main>
+
+      <div class="mdc-toolbar__fixed-adjust">
+        <p class="demo-paragraph">
+          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+        </p>
+        <p class="demo-paragraph">
+          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+        </p>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/demos/toolbar/index.html b/demos/toolbar/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2016 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>MDC Toolbar Demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <style>
+      .demo-container {
+        height: 500px;
+        margin: 0px;
+        font-size: 16px;
+        overflow: scroll;
+      }
+    </style>
+    <script src="../assets/material-components-web.css.js" charset="utf-8"></script>
+  </head>
+  <body class="mdc-typography">
+    <main>
+      <small>To best show the functionality of toolbars, we put both demos in iframes. Click the links above the iframe to view the demo in a full browser window.</small>
+      <h2>Normal Toolbar <button type="button" onclick="toggleRTL(0)">Toggle RTL</button></h2>
+      <p><a href="./default-toolbar.html" target="_blank">View in separate window</a></p>
+      <iframe class="demo-container" src="./default-toolbar.html"></iframe>
+      <h2>Fixed Toolbar <button type="button" onclick="toggleRTL(1)">Toggle RTL</button></h2>
+      <p><a href="./fixed-top-toolbar.html" target="_blank">View in separate window</a></p>
+      <iframe class="demo-container" src="./fixed-top-toolbar.html"></iframe>
+    </main>
+    <script>
+      function toggleRTL(iframe_number) {
+        var iframeMainEl = document.querySelectorAll('iframe')[iframe_number].contentWindow.document.querySelector('body');
+        iframeMainEl.getAttribute('dir') === 'rtl' ? iframeMainEl.setAttribute('dir', 'ltr') : iframeMainEl.setAttribute('dir', 'rtl');
+      }
+    </script>
+  </body>
+</html>
diff --git a/packages/material-components-web/material-components-web.scss b/packages/material-components-web/material-components-web.scss
@@ -33,4 +33,5 @@
 @import "@material/switch/mdc-switch";
 @import "@material/textfield/mdc-textfield";
 @import "@material/theme/mdc-theme";
+@import "@material/toolbar/mdc-toolbar";
 @import "@material/typography/mdc-typography";
diff --git a/packages/material-components-web/package.json b/packages/material-components-web/package.json
@@ -34,6 +34,7 @@
     "@material/switch": "^0.1.0",
     "@material/textfield": "^0.2.1",
     "@material/theme": "^0.1.1",
+    "@material/toolbar": "^0.0.0",
     "@material/typography": "^0.1.1"
   }
 }
diff --git a/packages/mdc-toolbar/README.md b/packages/mdc-toolbar/README.md
@@ -0,0 +1,117 @@
+# MDC Toolbar
+
+MDC Toolbar provides a RTL-aware Material Design toolbar component adhering to the
+[Material Design toolbar spec](https://www.google.com/design/spec/components/toolbars.html)
+Toolbars scroll with content by default, but supports fixed on
+top as well. Currently, this component does not yet support the "Waterfall" or
+"Flexible Header" patterns.
+
+
+## Installation
+
+```
+npm install --save @material/toolbar
+```
+
+
+## Usage
+
+Wrap the items with `mdc-toolbar` class in following way:
+
+```html
+<header class="mdc-toolbar">
+  <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
+    <a class="material-icons">menu</a>
+    <span class="mdc-toolbar__title">Title</span>
+  </section>
+</div>
+```
+
+### Fixed toolbars
+
+By default, toolbars scroll with the page content. To keep the toolbar fixed to
+the top of the screen, add an `mdc-toolbar--fixed` class to the toolbar element.
+
+**Adjusting sibling elements of fixed toolbars**
+
+When using `mdc-toolbar--fixed`, you can add the `mdc-toolbar-fixed-adjust`
+helper class to the toolbar's adjacent sibling element, which will ensure that
+the sibling element's top margin will be large enough such that the fixed
+toolbar will not overlay any of the element's content.
+
+```html
+<header class="mdc-toolbar mdc-toolbar--fixed">
+  <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
+    <span class="mdc-toolbar__title">Title</span>
+  </section>
+</header>
+<main class="mdc-toolbar-fixed-adjust">
+  <p class="demo-paragraph">
+    A demo paragraph here.
+  </p>
+</main>
+```
+
+### Sections
+
+Toolbar sections are aligned to the toolbar's center. You can change this
+behavior by applying `mdc-toolbar__section--align-start` or
+`mdc-toolbar__section--align-end` to align the sections to the start or the end
+of the toolbar (respectively).
+
+```html
+<header class="mdc-toolbar">
+  <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
+    Section aligns to start.
+  </section>
+  <section class="mdc-toolbar__section">
+    Section aligns to center.
+  </section>
+  <section class="mdc-toolbar__section mdc-toolbar__section--align-end">
+    Section aligns to end.
+  </section>
+</header>
+```
+
+Toolbar sections are laid out using flexbox. Each section will take up an equal
+amount of space within the toolbar.
+
+### Toolbar title
+
+You can use the `mdc-toolbar__title` element to style toolbar text representing
+a page's title, or an application name.
+
+```html
+<header class="mdc-toolbar">
+  <section class="mdc-toolbar__section">
+    <span class="mdc-toolbar__title">Title</span>
+  </section>
+</header>
+```
+
+### RTL Support
+
+`mdc-toolbar` is automatically RTL-aware, and will re-position elements whenever
+it, or its ancestors, has a `dir="rtl"` attribute.
+
+
+## Classes
+
+### Block
+
+The block class is `mdc-toolbar`. This defines the top-level toolbar element.
+
+### Element
+The component has `mdc-toolbar__section` and `mdc-toolbar__title` elements. You
+can add multiple sections to toolbar. Refer to Sections and Toolbar title for
+further details.
+
+### Modifier
+
+The provided modifiers are:
+
+| Class                                | Description                             |
+| -------------------------------------| --------------------------------------- |
+| `mdc-toolbar--fixed`                 | Make toolbar fixed to top of screen.    |
+| `mdc-toolbar__section--align-start`  | Makes section aligns to the start.      |
+| `mdc-toolbar__section--align-end`    | Makes section aligns to the end.        |