Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/PolymerElements/paper-toolbar
A Material Design toolbar/appbar
https://github.com/PolymerElements/paper-toolbar
Last synced: 3 months ago
JSON representation
A Material Design toolbar/appbar
- Host: GitHub
- URL: https://github.com/PolymerElements/paper-toolbar
- Owner: PolymerElements
- Created: 2015-04-17T17:56:06.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-10-16T14:02:53.000Z (about 1 year ago)
- Last Synced: 2024-07-28T02:03:30.902Z (3 months ago)
- Language: JavaScript
- Homepage: https://www.webcomponents.org/element/PolymerElements/paper-toolbar
- Size: 392 KB
- Stars: 40
- Watchers: 17
- Forks: 41
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-material-design - paper-toolbar - Ploymer material toolbar (CSS and JS / Components)
README
[](https://www.npmjs.com/package/@polymer/paper-toolbar)
[](https://travis-ci.org/PolymerElements/paper-toolbar)
[](https://webcomponents.org/element/@polymer/paper-toolbar)
## <paper-toolbar>
**This element has been deprecated in favor of [app-layout](https://github.com/PolymerElements/app-layout).**
`paper-toolbar` is a horizontal bar containing items that can be used for
label, navigation, search and actions. The items placed inside the
`paper-toolbar` are projected into a `class="horizontal center layout"` container inside of
`paper-toolbar`'s Shadow DOM. You can use flex attributes to control the items'
sizing.
Example:
```html
Title
```
`paper-toolbar` has a standard height, but can made be taller by setting `tall`
class on the `paper-toolbar`. This will make the toolbar 3x the normal height.
```html
```
Apply `medium-tall` class to make the toolbar medium tall. This will make the
toolbar 2x the normal height.
```html
```
When `tall`, items can pin to either the top (default), middle or bottom. Use
`middle` slot for middle content and `bottom` slot for bottom content.
```html
Middle Title
Bottom Title
```
For `medium-tall` toolbar, the middle and bottom contents overlap and are
pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are
still honored separately.
To make an element completely fit at the bottom of the toolbar, use `fit` along
with `bottom`.
```html
```
When inside a `paper-header-panel` element with `mode="waterfall-tall"`,
the class `.animate` is toggled to animate the height change in the toolbar.
### Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-toolbar-title` | Mixin applied to the title of the toolbar | `{}`
`--paper-toolbar-background` | Toolbar background color | `--primary-color`
`--paper-toolbar-color` | Toolbar foreground color | `--dark-theme-text-color`
`--paper-toolbar-height` | Custom height for toolbar | `64px`
`--paper-toolbar-sm-height` | Custom height for small screen toolbar | `56px`
`--paper-toolbar` | Mixin applied to the toolbar | `{}`
`--paper-toolbar-content` | Mixin applied to the content section of the toolbar | `{}`
`--paper-toolbar-medium` | Mixin applied to medium height toolbar | `{}`
`--paper-toolbar-tall` | Mixin applied to tall height toolbar | `{}`
`--paper-toolbar-transition` | Transition applied to the `.animate` class | `height 0.18s ease-in`
### Accessibility
`` has `role="toolbar"` by default. Any elements with the class `title` will
be used as the label of the toolbar via `aria-labelledby`.
See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-toolbar),
[Demo](https://www.webcomponents.org/element/@polymer/paper-toolbar/demo/demo/index.html).
## Usage
### Installation
```
npm install --save @polymer/paper-toolbar
```
### In an html file
```html
import '@polymer/paper-toolbar/paper-toolbar.js';
Title
```
### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-toolbar/paper-toolbar.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
Title
`;
}
}
customElements.define('sample-element', SampleElement);
```
## Contributing
If you want to send a PR to this element, here are
the instructions for running the tests and demo locally:
### Installation
```sh
git clone https://github.com/PolymerElements/paper-toolbar
cd paper-toolbar
npm install
npm install -g polymer-cli
```
### Running the demo locally
```sh
polymer serve --npm
open http://127.0.0.1:/demo/
```
### Running the tests
```sh
polymer test --npm
```