Directory

← Back

isw-toolbar

Material Design Polymer 2.0 Toolbar.

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/IswPolymerElements/isw-toolbar on 2019-05-22 ]

<isw-toolbar>

Material Design Polymer 2.0 Toolbar.

Since paper-toolbar is deprecated, and making an app-toolbar MD takes some styling - DRY.

<isw-toolbar rows="2">
  <paper-icon-button slot="nav-icon" icon="menu"></paper-icon-button>

  <span slot="middle">ISW Toolbar Demo</span>

  <paper-icon-button slot="action-icon" icon="search"></paper-icon-button>
  <paper-icon-button slot="action-icon" icon="refresh"></paper-icon-button>
  <paper-icon-button slot="action-icon" icon="more-vert"></paper-icon-button>

  <paper-fab slot="fab" icon="add" mini></paper-fab>
</isw-toolbar>

Responsive

The element uses the isw-responsive-behavior, so its appearance can be controlled by setting the device and orientation attributes...

<isw-toolbar device="tablet" orientation="landscape">
  <span slot="top">ISW Toolbar Demo</span>
</isw-toolbar>

... or get responsive by combining with isw-responsive

<isw-responsive device="{{device}}" orientation="{{orientation}}"></isw-responsive>
<isw-toolbar device="[[device]]" orientation="[[orientation]]">
  <span slot="top">ISW Toolbar Demo</span>
</isw-toolbar>

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:

isw-toolbar {
  --primary-color: var(--paper-blue-500);
  --accent-color: var(--paper-cyan-500);
}

Custom styling:

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.

<a slot="fab" href="#" mini>
  <paper-fab icon="add" mini></paper-fab>
</a>

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Polymer/polymer#^2.0.0

  • PolymerElements/iron-flex-layout#^2.0.0
  • IswPolymerElements/isw-responsive
Released
2017-09-25
Maturity
IMPORTED
License
Other

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

isw-toolbar - Vaadin Add-on Directory

Material Design Polymer 2.0 Toolbar. isw-toolbar - Vaadin Add-on Directory
**[ 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