@gfsdeliver/gfs-dropdown-menu

1.0.0-preview.1 • Public • Published

Installation

Properties

Property Description
label Top level menu text
icon Adds an icon next to the label
jsonMenu buids the dropdown menu from a json

Examples

<gfs-dropdown-menu id="myMenu" icon="expand-more"
                    label="Static content">
                    <a href="#"><iron-icon icon="social:person"></iron-icon>Account Settings</a>
                    <a href="#"><iron-icon icon="warning"></iron-icon>Notifications</a>
                    <a href="#"><iron-icon icon="exit-to-app"></iron-icon>Sign out</a>
</gfs-dropdown-menu>

<gfs-dropdown-menu id="myJsonMenu" icon="expand-more"
                    label="Build with json"
                    full-menu='[{"name": "Cloud Login", "icon":"cloud"}, {"name": "Help", "icon":"help"}, {"name": "Report a bug", "icon":"bug-report"}]'>
</gfs-dropdown-menu>

Styling

Custom property Description Default
--gfs-dropdown-menu-font-size menu font size 13px
--gfs-dropdown-menu-background opened menu background color #fff
--gfs-dropdown-menu-border-radius menu radius corners 3px
--gfs-dropdown-menu-box-shadow adds a shadow effect on opened menu box 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)
--gfs-dropdown-menu-background-hover top level background color (label) #f7f8fb
--gfs-dropdown-menu-top-border a top border when menu is opened 5px solid var(--gfs-primary-color)
--gfs-dropdown-menu-arrow color sould be same a above, adds a triangle on top of the opened menu var(--gfs-primary-color)
--gfs-dropdown-border-b adds a bottom border on each menu item on list 1px solid #eef1f6
--gfs-dropdown-item-hover hover menu background color var(--light-grey-color)

Package Sidebar

Install

npm i @gfsdeliver/gfs-dropdown-menu

Weekly Downloads

61

Version

1.0.0-preview.1

License

Apache-2.0

Unpacked Size

18.5 kB

Total Files

8

Last publish

Collaborators

  • gfsnpm