mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 06:04:44 +03:00
Remove short Top App Bar variant (#422)
* Remove short Top App Bar variant Design guidance from Material is that the short top app bar is not an officially supported component. In the case that this is reconsidered, the removal can be reverted. * remove demos as well * remove short from other top app bar readmes
This commit is contained in:
Daniel Freedman
GitHub
parent
aa060417c0
commit
30e4a35b0a
@ -48,6 +48,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
|
||||
- Fix bug where setting the `<mwc-snackbar>` `labelText` property could throw
|
||||
an exception and fail to render
|
||||
([#367](https://github.com/material-components/material-components-web-components/issues/367)).
|
||||
- Removed:
|
||||
- mwc-top-app-bar-short has been removed after guidance from the Material Design team.
|
||||
|
||||
## [0.6.0] - 2019-06-05
|
||||
- Upgrade lerna to 3.x
|
||||
|
||||
@ -211,13 +211,6 @@ class DemoView extends LitElement {
|
||||
<span class="mdc-list-item__secondary-text">Top App Bars are a container for items such as application title, navigation icon, and action items.</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="top-app-bar-short.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_component_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Top App Bar Short
|
||||
<span class="mdc-list-item__secondary-text">Top App Bars are a container for items such as application title, navigation icon, and action items.</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,60 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2019 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.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>top app bar short demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon-button/mwc-icon-button.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
<style>
|
||||
iframe {
|
||||
border-width: 0;
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
margin: 20px;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon-button icon="arrow_back"></mwc-icon-button></a>
|
||||
<span>Top App Bar Short</span>
|
||||
</header>
|
||||
<main>
|
||||
<div>
|
||||
<iframe src="top-app-bars/short.html"></iframe>
|
||||
</div>
|
||||
<div>
|
||||
<iframe src="top-app-bars/short.html?centerTitle"></iframe>
|
||||
</div>
|
||||
<div>
|
||||
<iframe src="top-app-bars/short.html?alwaysCollapsed"></iframe>
|
||||
</div>
|
||||
<div>
|
||||
<iframe src="top-app-bars/short.html?custom"></iframe>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,48 +0,0 @@
|
||||
<!doctype html>
|
||||
<script type="module" src="../../node_modules/@material/mwc-top-app-bar-short/mwc-top-app-bar-short.js"></script>
|
||||
<script type="module" src="../../node_modules/@material/mwc-icon-button/mwc-icon-button.js"></script>
|
||||
<link rel="stylesheet" href="./styling.css">
|
||||
<mwc-top-app-bar-short id="bar">
|
||||
<mwc-icon-button icon="menu" slot="navigationIcon"></mwc-icon-button>
|
||||
<div slot="title" id="title">Short</div>
|
||||
<mwc-icon-button icon="print" slot="actionItems"></mwc-icon-button>
|
||||
<div id="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
</mwc-top-app-bar-short>
|
||||
<script>
|
||||
const flags = {};
|
||||
// from url
|
||||
location.search.slice(1).split('&').forEach(function(option) {
|
||||
const parts = option.split('=');
|
||||
bar[parts[0]] = parts[1] || true;
|
||||
});
|
||||
if (bar.collapsed) {
|
||||
title.textContent = '';
|
||||
}
|
||||
if (bar.custom) {
|
||||
title.textContent = 'Custom Colors';
|
||||
bar.classList.add('custom');
|
||||
}
|
||||
</script>
|
||||
@ -9,8 +9,6 @@ Fixed Top App Bars are a container for items such as application title, navigati
|
||||
|
||||
For a version of this component that scrolls, see [`<mwc-top-app-bar>`](http://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)
|
||||
|
||||
For a collapsable version of this component, see [`<mwc-top-app-bar-short>`](http://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-short)
|
||||
|
||||
[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)
|
||||
|
||||
## Installation
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
.tsbuildinfo
|
||||
tsconfig.json
|
||||
*.tgz
|
||||
images/*
|
||||
@ -1,120 +0,0 @@
|
||||
# `<mwc-top-app-bar-short>` [](https://www.npmjs.com/package/@material/mwc-top-app-bar-short)
|
||||
|
||||
> IMPORTANT: The Material Web Components are a work in progress and subject to
|
||||
> major changes until 1.0 release.
|
||||
|
||||
Short Top App Bars are a container for items such as application title, navigation icon, and an action item that shrinks into the corner.
|
||||
|
||||
|
||||
|
||||
For a fixed position version of this component, see [`<mwc-top-app-bar-fixed>`](http://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)
|
||||
|
||||
For a scrollable version of this component, see [`<mwc-top-app-bar>`](http://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)
|
||||
|
||||
[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
npm install @material/mwc-top-app-bar-short
|
||||
```
|
||||
|
||||
> NOTE: The Material Web Components are distributed as ES2017 JavaScript
|
||||
> Modules, and use the Custom Elements API. They are compatible with all modern
|
||||
> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional
|
||||
> tooling step is required to resolve *bare module specifiers*, as well as
|
||||
> transpilation and polyfills for Edge and IE11. See
|
||||
> [here](https://github.com/material-components/material-components-web-components#quick-start)
|
||||
> for detailed instructions.
|
||||
|
||||
## Example Usage
|
||||
|
||||
### Standard
|
||||
|
||||
<img src="images/standard.png" height="56px">
|
||||
|
||||
```html
|
||||
<mwc-top-app-bar-short>
|
||||
<mwc-icon-button icon="menu" slot="navigationIcon"></mwc-icon-button>
|
||||
<div slot="title">Title</div>
|
||||
<mwc-icon-button icon="print" slot="actionItems"></mwc-icon-button>
|
||||
<div><!-- content --></div>
|
||||
</mwc-top-app-bar-short>
|
||||
```
|
||||
|
||||
### Center Title
|
||||
|
||||
<img src="images/center_title.png" height="56px">
|
||||
|
||||
```html
|
||||
<mwc-top-app-bar-short centerTitle>
|
||||
<mwc-icon-button icon="menu" slot="navigationIcon"></mwc-icon-button>
|
||||
<div slot="title">Title</div>
|
||||
<mwc-icon-button icon="print" slot="actionItems"></mwc-icon-button>
|
||||
<div><!-- content --></div>
|
||||
</mwc-top-app-bar-short>
|
||||
```
|
||||
|
||||
### Always Collapsed
|
||||
|
||||
|
||||
|
||||
<img src="images/collapsed.png" height="56px">
|
||||
|
||||
```html
|
||||
<mwc-top-app-bar-short alwaysCollapsed>
|
||||
<mwc-icon-button icon="menu" slot="navigationIcon"></mwc-icon-button>
|
||||
<div slot="title">Title</div>
|
||||
<mwc-icon-button icon="print" slot="actionItems"></mwc-icon-button>
|
||||
<div><!-- content --></div>
|
||||
</mwc-top-app-bar-short>
|
||||
```
|
||||
|
||||
### Customize Colors
|
||||
|
||||
<img src="images/custom_colors.png" height="56px">
|
||||
|
||||
```css
|
||||
mwc-top-app-bar-short {
|
||||
--mdc-theme-primary: orange;
|
||||
--mdc-theme-on-primary: black;
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Slots
|
||||
| Name | Description
|
||||
| ---- | -----------
|
||||
| `actionItems` | One `<mwc-icon-button>` element to use for action icons on the right side.
|
||||
| `navigationIcon` | One `<mwc-icon-button>` element to use for the left icon.
|
||||
| `title` | A `<div>` or `<span>` that will be used as the title text.
|
||||
| _default_ | Scrollable content to display under the bar. This may be the entire application.
|
||||
|
||||
### Properties/Attributes
|
||||
| Name | Type | Default | Description
|
||||
| ---- | ---- | ------- | -----------
|
||||
| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.
|
||||
| `alwaysCollapsed` | `boolean` | `false` | Whether the short top app bar should always be collapsed.
|
||||
| `collapsed` | `boolean` (read-only) | `false` | Whether the short top app bar is currently collapsed.
|
||||
| `scrollTarget` | `HTMLElement` \| `Window` | `window` | Element used to listen for `scroll` events.
|
||||
|
||||
### Methods
|
||||
*None*
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Detail | Description
|
||||
| ---- | ------ | -----------
|
||||
| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.
|
||||
|
||||
### CSS Custom Properties
|
||||
|
||||
| Name | Default | Description
|
||||
| ---- | ------- | -----------
|
||||
| `--mdc-theme-primary` |  `#6200ee` | Background color of the bar
|
||||
| `--mdc-theme-on-primary` |  `#ffffff` | Text color of the title, and icon colors
|
||||
|
||||
## Additional references
|
||||
|
||||
- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 268 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 82 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 318 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
@ -1,25 +0,0 @@
|
||||
{
|
||||
"name": "@material/mwc-top-app-bar-short",
|
||||
"version": "0.6.0",
|
||||
"description": "",
|
||||
"main": "mwc-top-app-bar-short.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/material-components/material-components-web-components.git",
|
||||
"directory": "packages/top-app-bar"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"build": "tsc"
|
||||
},
|
||||
"author": "",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@material/mwc-base": "^0.6.0",
|
||||
"@material/mwc-top-app-bar": "^0.6.0",
|
||||
"@material/top-app-bar": "^3.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
@ -1,119 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2018 Google Inc.
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
|
||||
/* NOTE: Delete this after
|
||||
* https://github.com/material-components/material-components-web/pull/5009
|
||||
* lands */
|
||||
import {MDCTopAppBarAdapter} from '@material/top-app-bar/adapter';
|
||||
import {cssClasses} from '@material/top-app-bar/constants';
|
||||
import {MDCTopAppBarBaseFoundation} from '@material/top-app-bar/foundation';
|
||||
|
||||
export class MDCShortTopAppBarFoundation extends MDCTopAppBarBaseFoundation {
|
||||
// Public visibility for backward compatibility.
|
||||
get isCollapsed(): boolean {
|
||||
return this.isCollapsed_;
|
||||
}
|
||||
|
||||
private isCollapsed_ = false;
|
||||
|
||||
private isAlwaysCollapsed_ = false;
|
||||
|
||||
/* istanbul ignore next: optional argument is not a branch statement */
|
||||
constructor(adapter?: Partial<MDCTopAppBarAdapter>) {
|
||||
super(adapter);
|
||||
}
|
||||
|
||||
init() {
|
||||
super.init();
|
||||
|
||||
if (this.adapter_.getTotalActionItems() > 0) {
|
||||
this.adapter_.addClass(cssClasses.SHORT_HAS_ACTION_ITEM_CLASS);
|
||||
}
|
||||
|
||||
// If initialized with SHORT_COLLAPSED_CLASS, the bar should always be
|
||||
// collapsed
|
||||
this.setAlwaysCollapsed(
|
||||
this.adapter_.hasClass(cssClasses.SHORT_COLLAPSED_CLASS));
|
||||
}
|
||||
|
||||
/**
|
||||
* Set if the short top app bar should always be collapsed.
|
||||
*
|
||||
* When set to `true`, the bar collapses.
|
||||
* When set to `false`, the bar will determine if it should collapse based on
|
||||
* scroll position.
|
||||
*/
|
||||
setAlwaysCollapsed(value: boolean) {
|
||||
this.isAlwaysCollapsed_ = !!value;
|
||||
if (this.isAlwaysCollapsed_) {
|
||||
this.collapse_();
|
||||
} else {
|
||||
// let maybeCollapseBar_ determine if the bar should be collapsed
|
||||
this.maybeCollapseBar_();
|
||||
}
|
||||
}
|
||||
|
||||
getAlwaysCollapsed() {
|
||||
return this.isAlwaysCollapsed_;
|
||||
}
|
||||
|
||||
/**
|
||||
* Scroll handler for applying/removing the collapsed modifier class on the
|
||||
* short top app bar.
|
||||
* @override
|
||||
*/
|
||||
handleTargetScroll() {
|
||||
this.maybeCollapseBar_();
|
||||
}
|
||||
|
||||
private maybeCollapseBar_() {
|
||||
if (this.isAlwaysCollapsed_) {
|
||||
return;
|
||||
}
|
||||
const currentScroll = this.adapter_.getViewportScrollY();
|
||||
|
||||
if (currentScroll <= 0) {
|
||||
if (this.isCollapsed_) {
|
||||
this.uncollapse_();
|
||||
}
|
||||
} else {
|
||||
if (!this.isCollapsed_) {
|
||||
this.collapse_();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private uncollapse_() {
|
||||
this.adapter_.removeClass(cssClasses.SHORT_COLLAPSED_CLASS);
|
||||
this.isCollapsed_ = false;
|
||||
}
|
||||
|
||||
private collapse_() {
|
||||
this.adapter_.addClass(cssClasses.SHORT_COLLAPSED_CLASS);
|
||||
this.isCollapsed_ = true;
|
||||
}
|
||||
}
|
||||
|
||||
// tslint:disable-next-line:no-default-export Needed for backward compatibility
|
||||
// with MDC Web v0.44.0 and earlier.
|
||||
export default MDCShortTopAppBarFoundation;
|
||||
@ -1,31 +0,0 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2019 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 {customElement} from '@material/mwc-base/base-element.js';
|
||||
import {style} from '@material/mwc-top-app-bar/mwc-top-app-bar-css';
|
||||
|
||||
import {TopAppBarShortBase} from './top-app-bar-short-base';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'mwc-top-app-bar-short': TopAppBarShort;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('mwc-top-app-bar-short')
|
||||
export class TopAppBarShort extends TopAppBarShortBase {
|
||||
static styles = style;
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2019 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 {observer, property} from '@material/mwc-base/base-element';
|
||||
import {TopAppBarBaseBase} from '@material/mwc-top-app-bar/mwc-top-app-bar-base-base';
|
||||
|
||||
import MDCShortTopAppBarFoundation from './mdc-top-app-bar-short-foundation';
|
||||
|
||||
export class TopAppBarShortBase extends TopAppBarBaseBase {
|
||||
protected mdcFoundation!: MDCShortTopAppBarFoundation;
|
||||
|
||||
protected mdcFoundationClass = MDCShortTopAppBarFoundation;
|
||||
|
||||
@property({type: Boolean})
|
||||
@observer(function(this: TopAppBarShortBase, value: boolean) {
|
||||
this.mdcFoundation.setAlwaysCollapsed(value);
|
||||
})
|
||||
alwaysCollapsed = false;
|
||||
|
||||
protected barClasses() {
|
||||
return {
|
||||
'mdc-top-app-bar--short': true,
|
||||
};
|
||||
}
|
||||
|
||||
protected contentClasses() {
|
||||
return {'mdc-top-app-bar--short-fixed-adjust': true};
|
||||
}
|
||||
|
||||
protected handleTargetScroll = () => {
|
||||
this.mdcFoundation.handleTargetScroll();
|
||||
this.toggleAttribute('collapsed', this.mdcFoundation.isCollapsed);
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"rootDir": "src",
|
||||
"outDir": ".",
|
||||
"tsBuildInfoFile": ".tsbuildinfo"
|
||||
},
|
||||
"include": [
|
||||
"src/*.ts"
|
||||
],
|
||||
"references": [
|
||||
{"path": "../base"},
|
||||
{"path": "../top-app-bar"}
|
||||
]
|
||||
}
|
||||
@ -9,8 +9,6 @@ Top App Bars are a container for items such as application title, navigation ico
|
||||
|
||||
For a fixed position version of this component, see [`<mwc-top-app-bar-fixed>`](http://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)
|
||||
|
||||
For a collapsable version of this component, see [`<mwc-top-app-bar-short>`](http://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-short)
|
||||
|
||||
[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)
|
||||
|
||||
## Installation
|
||||
|
||||
Loading…
Reference in New Issue
Block a user