cosmoz-bottom-bar
Responsive bottom-bar that dynamically displays action buttons and menu.
[ This description is mirrored from README.md at github.com/Neovici/cosmoz-bottom-bar on 2019-05-10 ]
cosmoz-bottom-bar
<cosmoz-bottom-bar>
cosmoz-bottom-bar is a responsive bottom-bar that can house buttons/actions and a menu for the buttons that won't fit the available width.
Example:
<cosmoz-bottom-bar-view>
<div slot="scroller-content" style="padding: 0 18px;">
<h3>Sample page</h3>
<p>Nam non enim vitae mauris pharetra semper nec sed lectus.</p>
<p>Maecenas gravida sollicitudin mauris, id gravida odio commodo iaculis.</p>
<p>Nulla pulvinar justo vel sodales sollicitudin.</p>
<p>Proin turpis tortor, sagittis sit amet consequat ut, tempor non velit.</p>
<p>Proin finibus elit libero, vitae scelerisque lacus maximus ac.</p>
<p>Vivamus ut finibus ligula. Mauris sollicitudin vitae orci eu scelerisque.</p>
<p>Duis nec placerat mauris, at tincidunt libero.</p>
<p>Nullam non magna eget mauris porta tempor.</p>
<p>Proin non sagittis enim.</p>
<p>Sed pharetra ante ipsum, in porta dolor sagittis non.</p>
<p>Cras odio quam, pretium consectetur finibus eu, elementum at risus.</p>
<p>Proin feugiat vitae sem eu imperdiet.</p>
</div>
<div slot="info">5 dummy actions</div>
<paper-button>Action 1</paper-button>
<paper-button>Action 2</paper-button>
<paper-button>Action 3</paper-button>
<paper-button>Action 4</paper-button>
<paper-button>Action 5</paper-button>
</cosmoz-bottom-bar-view>
Links
Compatibility
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/polymer#^2.6.1
- iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^2.1.1
- iron-flex-layout#PolymerElements/iron-flex-layout#^2.0.3
- iron-selector#PolymerElements/iron-selector#^2.0.1
- iron-icons#PolymerElements/iron-icons#^2.1.1
- paper-icon-button#PolymerElements/paper-icon-button#^2.2.0
- paper-listbox#PolymerElements/paper-listbox#^2.1.1
- paper-menu-button#PolymerElements/paper-menu-button#^2.1.1
- cosmoz-viewinfo#Neovici/cosmoz-viewinfo#^2.0.0
- Released
- 2019-03-20
- Maturity
- IMPORTED
- License
- Apache License 2.0
Compatibility
- Framework
- Polymer 2.0+
- Polymer 1.0+ in 0.9.2
- Browser
- Browser Independent
cosmoz-bottom-bar - Vaadin Add-on Directory
Responsive bottom-bar that dynamically displays action buttons and menu.Sample page
Nam non enim vitae mauris pharetra semper nec sed lectus.
Maecenas gravida sollicitudin mauris, id gravida odio commodo iaculis.
Nulla pulvinar justo vel sodales sollicitudin.
Proin turpis tortor, sagittis sit amet consequat ut, tempor non velit.
Proin finibus elit libero, vitae scelerisque lacus maximus ac.
Vivamus ut finibus ligula. Mauris sollicitudin vitae orci eu scelerisque.
Duis nec placerat mauris, at tincidunt libero.
Nullam non magna eget mauris porta tempor.
Proin non sagittis enim.
Sed pharetra ante ipsum, in porta dolor sagittis non.
Cras odio quam, pretium consectetur finibus eu, elementum at risus.
Proin feugiat vitae sem eu imperdiet.
Documentation
Issue tracker
View on GitHub
Online Demo
cosmoz-bottom-bar version 0.9.0
### Dependencies
* polymer#^1.8.0
* iron-flex-layout#polymerelements/iron-flex-layout#^1.0.0
* iron-icons#polymerelements/iron-icons#^1.0.0
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0
* iron-selector#PolymerElements/iron-selector#^1.0.0
* paper-icon-button#PolymerElements/paper-icon-button#^1.0.0
* paper-listbox#PolymerElements/paper-listbox#^1.0.0
* paper-menu-button#PolymerElements/paper-menu-button#^1.0.0
* cosmoz-viewinfo#neovici/cosmoz-viewinfo#master
cosmoz-bottom-bar version 0.9.1
### Dependencies
* polymer#^1.8.0
* iron-flex-layout#polymerelements/iron-flex-layout#^1.0.0
* iron-icons#polymerelements/iron-icons#^1.0.0
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0
* iron-selector#PolymerElements/iron-selector#^1.0.0
* paper-icon-button#PolymerElements/paper-icon-button#^1.0.0
* paper-listbox#PolymerElements/paper-listbox#^1.0.0
* paper-menu-button#PolymerElements/paper-menu-button#^1.0.0
* cosmoz-viewinfo#neovici/cosmoz-viewinfo#master
cosmoz-bottom-bar version 0.9.2
### Dependencies
* polymer#^1.8.0
* iron-flex-layout#polymerelements/iron-flex-layout#^1.0.0
* iron-icons#polymerelements/iron-icons#^1.0.0
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0
* iron-selector#PolymerElements/iron-selector#^1.0.0
* paper-icon-button#PolymerElements/paper-icon-button#^1.0.0
* paper-listbox#PolymerElements/paper-listbox#^1.0.0
* paper-menu-button#PolymerElements/paper-menu-button#^1.0.0
* cosmoz-viewinfo#neovici/cosmoz-viewinfo#master
cosmoz-bottom-bar version 2.0.0
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1 - 2
* iron-flex-layout#PolymerElements/iron-flex-layout#1 - 2
* iron-selector#PolymerElements/iron-selector#1 - 2
* iron-icons#PolymerElements/iron-icons#1 - 2
* paper-icon-button#PolymerElements/paper-icon-button#1 - 2
* paper-listbox#PolymerElements/paper-listbox#1 - 2
* paper-menu-button#PolymerElements/paper-menu-button#1 - 2
* cosmoz-viewinfo#neovici/cosmoz-viewinfo#master
cosmoz-bottom-bar version 2.0.1
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1 - 2
* iron-flex-layout#PolymerElements/iron-flex-layout#1 - 2
* iron-selector#PolymerElements/iron-selector#1 - 2
* iron-icons#PolymerElements/iron-icons#1 - 2
* paper-icon-button#PolymerElements/paper-icon-button#1 - 2
* paper-listbox#PolymerElements/paper-listbox#1 - 2
* paper-menu-button#PolymerElements/paper-menu-button#1 - 2
* cosmoz-viewinfo#neovici/cosmoz-viewinfo#master
cosmoz-bottom-bar version 2.0.2
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1 - 2
* iron-flex-layout#PolymerElements/iron-flex-layout#1 - 2
* iron-selector#PolymerElements/iron-selector#1 - 2
* iron-icons#PolymerElements/iron-icons#1 - 2
* paper-icon-button#PolymerElements/paper-icon-button#1 - 2
* paper-listbox#PolymerElements/paper-listbox#1 - 2
* paper-menu-button#PolymerElements/paper-menu-button#1 - 2
* cosmoz-viewinfo#neovici/cosmoz-viewinfo#^1.0.0
cosmoz-bottom-bar version 2.0.4
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1 - 2
* iron-flex-layout#PolymerElements/iron-flex-layout#1 - 2
* iron-selector#PolymerElements/iron-selector#1 - 2
* iron-icons#PolymerElements/iron-icons#1 - 2
* paper-icon-button#PolymerElements/paper-icon-button#1 - 2
* paper-listbox#PolymerElements/paper-listbox#1 - 2
* paper-menu-button#PolymerElements/paper-menu-button#1 - 2
* cosmoz-viewinfo#neovici/cosmoz-viewinfo#^1.0.0
cosmoz-bottom-bar version 2.0.5
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1 - 2
* iron-flex-layout#PolymerElements/iron-flex-layout#1 - 2
* iron-selector#PolymerElements/iron-selector#1 - 2
* iron-icons#PolymerElements/iron-icons#1 - 2
* paper-icon-button#PolymerElements/paper-icon-button#1 - 2
* paper-listbox#PolymerElements/paper-listbox#1 - 2
* paper-menu-button#PolymerElements/paper-menu-button#1 - 2
* cosmoz-viewinfo#neovici/cosmoz-viewinfo#^1.0.0
cosmoz-bottom-bar version 2.0.6
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1 - 2
* iron-flex-layout#PolymerElements/iron-flex-layout#1 - 2
* iron-selector#PolymerElements/iron-selector#1 - 2
* iron-icons#PolymerElements/iron-icons#1 - 2
* paper-icon-button#PolymerElements/paper-icon-button#1 - 2
* paper-listbox#PolymerElements/paper-listbox#1 - 2
* paper-menu-button#PolymerElements/paper-menu-button#1 - 2
* cosmoz-viewinfo#neovici/cosmoz-viewinfo#^1.0.0
cosmoz-bottom-bar version 2.0.7
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1 - 2
* iron-flex-layout#PolymerElements/iron-flex-layout#1 - 2
* iron-selector#PolymerElements/iron-selector#1 - 2
* iron-icons#PolymerElements/iron-icons#1 - 2
* paper-icon-button#PolymerElements/paper-icon-button#1 - 2
* paper-listbox#PolymerElements/paper-listbox#1 - 2
* paper-menu-button#PolymerElements/paper-menu-button#1 - 2
* cosmoz-viewinfo#neovici/cosmoz-viewinfo#^1.0.0
cosmoz-bottom-bar version 2.1.7
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1 - 2
* iron-flex-layout#PolymerElements/iron-flex-layout#1 - 2
* iron-selector#PolymerElements/iron-selector#1 - 2
* iron-icons#PolymerElements/iron-icons#1 - 2
* paper-icon-button#PolymerElements/paper-icon-button#1 - 2
* paper-listbox#PolymerElements/paper-listbox#1 - 2
* paper-menu-button#PolymerElements/paper-menu-button#1 - 2
* cosmoz-viewinfo#neovici/cosmoz-viewinfo#^1.0.0
cosmoz-bottom-bar version 2.1.8
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1 - 2
* iron-flex-layout#PolymerElements/iron-flex-layout#1 - 2
* iron-selector#PolymerElements/iron-selector#1 - 2
* iron-icons#PolymerElements/iron-icons#1 - 2
* paper-icon-button#PolymerElements/paper-icon-button#1 - 2
* paper-listbox#PolymerElements/paper-listbox#1 - 2
* paper-menu-button#PolymerElements/paper-menu-button#1 - 2
* cosmoz-viewinfo#neovici/cosmoz-viewinfo#^1.0.0
cosmoz-bottom-bar version 2.2.0
### Dependencies
* polymer#Polymer/polymer#1.9 - 2
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1 - 2
* iron-flex-layout#PolymerElements/iron-flex-layout#1 - 2
* iron-selector#PolymerElements/iron-selector#1 - 2
* iron-icons#PolymerElements/iron-icons#1 - 2
* paper-icon-button#PolymerElements/paper-icon-button#1 - 2
* paper-listbox#PolymerElements/paper-listbox#1 - 2
* paper-menu-button#PolymerElements/paper-menu-button#1 - 2
* cosmoz-viewinfo#neovici/cosmoz-viewinfo#^1.0.0
cosmoz-bottom-bar version 2.2.1
### Dependencies
* polymer#Polymer/polymer#^2.6.1
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^2.1.1
* iron-flex-layout#PolymerElements/iron-flex-layout#^2.0.3
* iron-selector#PolymerElements/iron-selector#^2.0.1
* iron-icons#PolymerElements/iron-icons#^2.1.1
* paper-icon-button#PolymerElements/paper-icon-button#^2.2.0
* paper-listbox#PolymerElements/paper-listbox#^2.1.1
* paper-menu-button#PolymerElements/paper-menu-button#^2.1.1
* cosmoz-viewinfo#Neovici/cosmoz-viewinfo#^1.0.2
cosmoz-bottom-bar version 2.2.2
### Dependencies
* polymer#Polymer/polymer#^2.6.1
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^2.1.1
* iron-flex-layout#PolymerElements/iron-flex-layout#^2.0.3
* iron-selector#PolymerElements/iron-selector#^2.0.1
* iron-icons#PolymerElements/iron-icons#^2.1.1
* paper-icon-button#PolymerElements/paper-icon-button#^2.2.0
* paper-listbox#PolymerElements/paper-listbox#^2.1.1
* paper-menu-button#PolymerElements/paper-menu-button#^2.1.1
* cosmoz-viewinfo#Neovici/cosmoz-viewinfo#^2.0.0
cosmoz-bottom-bar version 2.2.3
### Dependencies
* polymer#Polymer/polymer#^2.6.1
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^2.1.1
* iron-flex-layout#PolymerElements/iron-flex-layout#^2.0.3
* iron-selector#PolymerElements/iron-selector#^2.0.1
* iron-icons#PolymerElements/iron-icons#^2.1.1
* paper-icon-button#PolymerElements/paper-icon-button#^2.2.0
* paper-listbox#PolymerElements/paper-listbox#^2.1.1
* paper-menu-button#PolymerElements/paper-menu-button#^2.1.1
* cosmoz-viewinfo#Neovici/cosmoz-viewinfo#^2.0.0
cosmoz-bottom-bar version 2.2.4
### Dependencies
* polymer#Polymer/polymer#^2.6.1
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^2.1.1
* iron-flex-layout#PolymerElements/iron-flex-layout#^2.0.3
* iron-selector#PolymerElements/iron-selector#^2.0.1
* iron-icons#PolymerElements/iron-icons#^2.1.1
* paper-icon-button#PolymerElements/paper-icon-button#^2.2.0
* paper-listbox#PolymerElements/paper-listbox#^2.1.1
* paper-menu-button#PolymerElements/paper-menu-button#^2.1.1
* cosmoz-viewinfo#Neovici/cosmoz-viewinfo#^2.0.0