Contact us Create app

Directory

← Back

cosmoz-bottom-bar

Responsive bottom-bar that dynamically displays action buttons and menu.

Author

Rating

Links

Popularity

<100

[ This description is mirrored from README.md at github.com/Neovici/cosmoz-bottom-bar on 2019-05-10 ]

cosmoz-bottom-bar

Build Status Published on webcomponents.org

<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>

Compatibility

(Loading compatibility data...)

Last updated: 2017-09-26

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. cosmoz-bottom-bar - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/Neovici/cosmoz-bottom-bar](https://github.com//Neovici/cosmoz-bottom-bar/blob/v2.2.4/README.md) on 2019-05-10 ]** cosmoz-bottom-bar ================== [![Build Status](https://travis-ci.org/Neovici/cosmoz-bottom-bar.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-bottom-bar) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Neovici/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: ```html

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.

5 dummy actions
Action 1 Action 2 Action 3 Action 4 Action 5 ```
GitHub Homepage
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

Online