Skip to content

Commit

Permalink
feat(top-app-bar): Baseline top app bar component (#2225)
Browse files Browse the repository at this point in the history
  • Loading branch information
@williamernest
williamernest committed Feb 21, 2018
1 parent f89cd10 commit 0ad69c4
Show file tree
Hide file tree
Showing 22 changed files with 981 additions and 1 deletion.
143 changes: 143 additions & 0 deletions demos/top-app-bar.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
<!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">
<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">
<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">
<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 ">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">&#xE5C4;</i>Back
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>Star
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>Sent Mail
</a>
<a class="mdc-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" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">email</i>All Mail
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">delete</i>Trash
</a>
<a class="mdc-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>
<script type="text/javascript">
demoReady(function() {
var appBarEl = document.getElementById('demo-top-app-bar');
var appBar = mdc.topAppBar.MDCTopAppBar.attachTo(appBarEl);

var drawerEl = document.querySelector('.mdc-drawer');
var MDCTemporaryDrawer = mdc.drawer.MDCTemporaryDrawer;
var drawer = new MDCTemporaryDrawer(drawerEl);

appBarEl.addEventListener('MDCTopAppBar:nav', function() {
drawer.open = true;
});

});
</script>
</body>
</html>
31 changes: 31 additions & 0 deletions demos/top-app-bar.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
//
// 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-top-app-bar/mdc-top-app-bar";
@import "../packages/mdc-drawer/mdc-drawer";
@import "../packages/mdc-list/mdc-list";

.demo-paragraph {
margin: 0;
padding: 20px 28px;
}

@media (max-width: $mdc-top-app-bar-mobile-breakpoint) {
.demo-paragraph {
padding: 16px;
}
}
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@
"text-field",
"theme",
"toolbar",
"top-app-bar",
"typography",
"demos",
"infrastructure",
Expand All @@ -176,6 +177,7 @@
"mdc-ripple",
"mdc-selection-control",
"mdc-slider",
"mdc-textfield"
"mdc-textfield",
"mdc-top-app-bar"
]
}
3 changes: 3 additions & 0 deletions packages/material-components-web/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import * as snackbar from '@material/snackbar/index';
import * as tabs from '@material/tabs/index';
import * as textField from '@material/textfield/index';
import * as toolbar from '@material/toolbar/index';
import * as topAppBar from '@material/top-app-bar/index';

// Register all components
autoInit.register('MDCLineRipple', lineRipple.MDCLineRipple);
Expand All @@ -58,6 +59,7 @@ autoInit.register('MDCMenu', menu.MDCMenu);
autoInit.register('MDCSelect', select.MDCSelect);
autoInit.register('MDCSlider', slider.MDCSlider);
autoInit.register('MDCToolbar', toolbar.MDCToolbar);
autoInit.register('MDCTopAppBar', topAppBar.MDCTopAppBar);

// Export all components.
export {
Expand All @@ -82,4 +84,5 @@ export {
tabs,
textField,
toolbar,
topAppBar,
};
1 change: 1 addition & 0 deletions packages/material-components-web/material-components-web.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,4 +40,5 @@
@import "@material/textfield/mdc-text-field";
@import "@material/theme/mdc-theme";
@import "@material/toolbar/mdc-toolbar";
@import "@material/top-app-bar/mdc-top-app-bar";
@import "@material/typography/mdc-typography";
1 change: 1 addition & 0 deletions packages/material-components-web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
"@material/textfield": "^0.31.0",
"@material/theme": "^0.30.0",
"@material/toolbar": "^0.30.0",
"@material/top-app-bar": "^0.0.0",
"@material/typography": "^0.28.0"
}
}
103 changes: 103 additions & 0 deletions packages/mdc-top-app-bar/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
# 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">
<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

```js
// Instantiation
var topAppBarElement = document.querySelector('#topAppBar');
var topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(topAppBarElement);

// Listen for navigation 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.

### Events

Event Name | Event Data Structure | Description
--- | --- | ---
`MDCTopAppBar:nav` | None | Emits when the navigation icon is clicked.
Loading

0 comments on commit 0ad69c4

Please sign in to comment.