feat(top-app-bar): Add top app bar component #2225
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| <!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 Top App Bar Demo</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/top-app-bar.css"> | ||
| <link rel="stylesheet" href="/assets/drawer/drawer.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 id="demo-top-app-bar" class="mdc-top-app-bar demo-top-app-bar"> | ||
| <div class="mdc-top-app-bar__row"> | ||
| <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> | ||
| <a href="#" class="material-icons mdc-top-app-bar__menu-icon">menu</a> | ||
| <span class="mdc-top-app-bar__title">Title</span> | ||
| </section> | ||
| <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="top-app-bar"> | ||
| <a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Download" alt="Download">file_download</a> | ||
| <a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Print this page" alt="Print this page">print</a> | ||
| <a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a> | ||
| </section> | ||
| </div> | ||
| </header> | ||
|
|
||
| <aside class="mdc-drawer mdc-drawer--temporary demo-drawer"> | ||
|
There was a problem hiding this comment. I don't think the |
||
| <nav class="mdc-drawer__drawer"> | ||
| <header class="mdc-drawer__header"> | ||
| <div class="mdc-drawer__header-content mdc-theme--text-primary-on-primary mdc-theme--primary-bg"> | ||
| Header here | ||
| </div> | ||
| </header> | ||
| <nav class="mdc-drawer__content mdc-list-group"> | ||
| <div class="mdc-list"> | ||
| <a href="/" class="mdc-list-item demo-drawer-list-item"> | ||
| <i class="material-icons mdc-list-item__graphic" aria-hidden="true"></i>Back | ||
| </a> | ||
| <a class="mdc-list-item demo-drawer-list-item" href="#"> | ||
| <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>Star | ||
| </a> | ||
| <a class="mdc-list-item demo-drawer-list-item" href="#"> | ||
| <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>Sent Mail | ||
| </a> | ||
| <a class="mdc-list-item demo-drawer-list-item" href="#"> | ||
| <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>Drafts | ||
| </a> | ||
| </div> | ||
|
|
||
| <hr class="mdc-list-divider"> | ||
|
|
||
| <div class="mdc-list"> | ||
| <a class="mdc-list-item demo-drawer-list-item" href="#"> | ||
| <i class="material-icons mdc-list-item__graphic" aria-hidden="true">email</i>All Mail | ||
| </a> | ||
| <a class="mdc-list-item demo-drawer-list-item" href="#"> | ||
| <i class="material-icons mdc-list-item__graphic" aria-hidden="true">delete</i>Trash | ||
| </a> | ||
| <a class="mdc-list-item demo-drawer-list-item" href="#"> | ||
| <i class="material-icons mdc-list-item__graphic" aria-hidden="true">report</i>Spam | ||
| </a> | ||
| </div> | ||
| </nav> | ||
| </nav> | ||
| </aside> | ||
|
|
||
| <main> | ||
| <div> | ||
| <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> | ||
| <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> | ||
| <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> | ||
| <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> | ||
| <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> | ||
| <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> | ||
|
|
||
| <script src="/assets/common.js" async></script> | ||
| <script src="/assets/material-components-web.js" async></script> | ||
|
There was a problem hiding this comment. Load /assets/common.js above this line, to automatically get preventDefault on |
||
| <script type="text/javascript"> | ||
| demoReady(function() { | ||
| var appBarElement = document.getElementById('demo-top-app-bar'); | ||
|
There was a problem hiding this comment. Nit: Shorten to |
||
| var appBar = mdc.topAppBar.MDCTopAppBar.attachTo(appBarElement); | ||
|
|
||
| var drawerEl = document.querySelector('.mdc-drawer'); | ||
| var MDCTemporaryDrawer = mdc.drawer.MDCTemporaryDrawer; | ||
| var drawer = new MDCTemporaryDrawer(drawerEl); | ||
|
|
||
| appBarElement.addEventListener('MDCTopAppBar:nav', function() { | ||
| drawer.open = true; | ||
| }); | ||
|
|
||
| }); | ||
| </script> | ||
| </body> | ||
| </html> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| // | ||
| // Copyright 2017 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-button/mdc-button"; | ||
| @import "../packages/mdc-list/mdc-list"; | ||
| @import "../packages/mdc-menu/mdc-menu"; | ||
| @import "../packages/mdc-theme/color-palette"; | ||
|
|
||
| @import "../packages/mdc-top-app-bar/mdc-top-app-bar"; | ||
|
|
||
| .demo-paragraph { | ||
| margin: 0; | ||
| padding: 20px 28px; | ||
| } | ||
|
|
||
| @media (max-width: 599px) { | ||
|
There was a problem hiding this comment. Reference |
||
| .demo-paragraph { | ||
| padding: 16px; | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
|
|
||
|
There was a problem hiding this comment. Remove leading newline? |
||
| # Top App Bar | ||
|
|
||
| MDC Top App Bar acts as a container for items such as application title, navigation menu, and action items, among other | ||
| things. Top app bars scroll with content by default. | ||
|
|
||
| ## Design & API Documentation | ||
|
|
||
| <ul class="icon-list"> | ||
| <li class="icon-list-item icon-list-item--spec"> | ||
| <a href="https://material.io/guidelines/components/toolbars.html">Material Design guidelines: Toolbars</a> | ||
| </li> | ||
| <li class="icon-list-item icon-list-item--link"> | ||
| <a href="https://material-components-web.appspot.com/top-app-bar.html">Demo</a> | ||
| </li> | ||
| </ul> | ||
|
|
||
| ## Installation | ||
|
|
||
| ``` | ||
| npm install --save @material/top-app-bar | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| ### HTML Structure | ||
|
|
||
| ```html | ||
| <header class="mdc-top-app-bar"> | ||
| <div class="mdc-top-app-bar__row"> | ||
| <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> | ||
|
There was a problem hiding this comment. Out of curiosity... does design have more semantic names we should be using for the align-start and align-end sections? Or are they general-purpose enough that there's no name that would fit all cases? There was a problem hiding this comment. I don't think designers know we split the toolbar into two sides so we can show some things on the left and some things on the right. I'll get with the designer to see if they have any input bit it seems like this was named by a developer smashing together |
||
| <a href="#" class="material-icons mdc-top-app-bar__menu-icon">menu</a> | ||
| <span class="mdc-top-app-bar__title">Title</span> | ||
| </section> | ||
| </div> | ||
| </header> | ||
| ``` | ||
|
|
||
| Top app bars can accommodate multiple icons on the right: | ||
|
|
||
| ```html | ||
| <header class="mdc-top-app-bar"> | ||
| <div class="mdc-top-app-bar__row"> | ||
| <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> | ||
| <a href="#" class="material-icons mdc-top-app-bar__menu-icon">menu</a> | ||
| <span class="mdc-top-app-bar__title">Title</span> | ||
| </section> | ||
| <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="top-app-bar"> | ||
| <a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Download" alt="Download">file_download</a> | ||
| <a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Print this page" alt="Print this page">print</a> | ||
| <a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a> | ||
| </section> | ||
| </div> | ||
| </header> | ||
| ``` | ||
|
|
||
| ### JavaScript | ||
|
|
||
|
There was a problem hiding this comment. Remove extra newline (edit: this was done, I guess the line that didn't have this comment attached was removed) |
||
| ```js | ||
| // Instantiation | ||
| var topAppBarElement = document.querySelector('#topAppBar'); | ||
| var topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(topAppBarElement); | ||
|
|
||
| // Listen for menu icon events | ||
| topAppBarElement.addEventListener('MDCTopAppBar:nav', function () { | ||
| // do something | ||
| }); | ||
| ``` | ||
|
|
||
| ### CSS Classes | ||
|
|
||
| Class | Description | ||
| --- | --- | ||
| `mdc-top-app-bar` | Mandatory | ||
|
|
||
| ### Sass Mixins | ||
|
|
||
| Mixin | Description | ||
| --- | --- | ||
| `mdc-top-app-bar-ink-color($color)` | Sets the ink color of the top app bar | ||
| `mdc-top-app-bar-icon-ink-color($color)` | Sets the ink color of the top app bar icons | ||
| `mdc-top-app-bar-fill-color($color)` | Sets the fill color of the top app bar | ||
| `mdc-top-app-bar-fill-color-accessible($color)` | Sets the fill color of the top app bar and automatically sets a high-contrast ink color | ||
|
|
||
| ### `MDCTopAppBar` | ||
|
|
||
| See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript. | ||
|
|
||
| #### `MDCTopAppBarAdapter` | ||
|
|
||
| Method Signature | Description | ||
| --- | --- | ||
| `hasClass(className: string) => boolean` | Checks if the root element of the component has the given className. | ||
| `addClass(className: string) => void` | Adds a class to the root element of the component. | ||
| `removeClass(className: string) => void` | Removes a class from the root element of the component. | ||
| `registerNavigationIconInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the native navigation icon element for a given event. | ||
| `deregisterNavigationIconInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the native navigation icon element for a given event. | ||
| `notifyNavigationIconClicked() => void` | Emits a custom event "MDCTopAppBar:nav" when the navigation icon is clicked. | ||
|
There was a problem hiding this comment. Nit: switch from quotes to backticks around the custom event name |
||
|
|
||
| ### Events | ||
|
|
||
| Event Name | Event Data Structure | Description | ||
| --- | --- | --- | ||
| `MDCTopAppBar:nav` | None | Emits when the menu icon is clicked. | ||
|
There was a problem hiding this comment. Nit: we say "navigation icon" a few lines up, but "menu icon" here... is there one right word for it? |
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure how I feel about this vs. importing mdc-drawer in the top-app-bar demo scss. Including this instead also picks up a bunch of demo styles specific to the drawer page that aren't being used here.