isw-toolbar - Vaadin Add-on Directory
Material Design Polymer 2.0 Toolbar.
**[ This description is mirrored from README.md at [github.com/IswPolymerElements/isw-toolbar](https://github.com//IswPolymerElements/isw-toolbar/blob/1.0.8/README.md) on 2019-05-22 ]**
# \
Material Design Polymer 2.0 Toolbar.
Since paper-toolbar is deprecated, and making an app-toolbar MD takes some styling - DRY.
```html
ISW Toolbar Demo
```
### Responsive
The element uses the `isw-responsive-behavior`, so its appearance can be controlled by setting the `device` and `orientation` attributes...
```html
ISW Toolbar Demo
```
... or get responsive by combining with `isw-responsive`
```html
ISW Toolbar Demo
```
### Styling
The following custom properties are available for styling:
Custom property | Default
----------------|----------
`--isw-toolbar-background` | --primary-color
`--isw-toolbar-font-color` | --dark-theme-text-color
`--isw-toolbar-button-icon-color` | --dark-theme-text-color
`--isw-toolbar-fab-icon-color` | --dark-theme-text-color
Available mixins:
* `--isw-toolbar-row-mobile`
* `--isw-toolbar-row-tablet`
* `--isw-toolbar-row-desktop`
Default styling via paper-styles properties:
```css
isw-toolbar {
--primary-color: var(--paper-blue-500);
--accent-color: var(--paper-cyan-500);
}
```
Custom styling:
```css
isw-toolbar {
--isw-toolbar-background: var(--paper-blue-500);
--isw-toolbar-font-color: var(--dark-theme-text-color);
--isw-toolbar-button-icon-color: rgba( 0, 0, 0, 0.54 );
--isw-toolbar-fab-icon-color: var(--dark-theme-text-color);
--paper-fab-background: var(--paper-cyan-500);
}
```
### Elements wrapped with a-tag
Elements with a tags should be properly styled by default.
If the fab is mini and wrapped in an a tag, the a tag also needs an mini attribute for correct positioning.
```html
```
Online Demo
Documentation
GitHub Homepage
Issue tracker
License
isw-toolbar version 1.0.0
### Dependencies
Polymer/polymer#^2.0.0-rc.2
* PolymerElements/iron-flex-layout#2.0-preview
isw-toolbar version 1.0.1
### Dependencies
Polymer/polymer#^2.0.0-rc.2
* PolymerElements/iron-flex-layout#2.0-preview
isw-toolbar version 1.0.2
### Dependencies
Polymer/polymer#^2.0.0-rc.2
* PolymerElements/iron-flex-layout#2.0-preview
isw-toolbar version 1.0.3
### Dependencies
Polymer/polymer#^2.0.0-rc.2
* PolymerElements/iron-flex-layout#2.0-preview
isw-toolbar version 1.0.4
### Dependencies
Polymer/polymer#^2.0.0-rc.2
* PolymerElements/iron-flex-layout#2.0-preview
isw-toolbar version 1.0.5
### Dependencies
Polymer/polymer#^2.0.0-rc.2
* PolymerElements/iron-flex-layout#2.0-preview
isw-toolbar version 1.0.6
### Dependencies
Polymer/polymer#^2.0.0
* PolymerElements/iron-flex-layout#^2.0.0
isw-toolbar version 1.0.7
### Dependencies
Polymer/polymer#^2.0.0
* PolymerElements/iron-flex-layout#^2.0.0
isw-toolbar version 1.0.8
### Dependencies
Polymer/polymer#^2.0.0
* PolymerElements/iron-flex-layout#^2.0.0
* IswPolymerElements/isw-responsive