@gfsdeliver/gfs-dropdown-menu NPM

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

GFS dropdown web-components web-component

@polymer/polymer @polymer/iron-flex-layout @gfsdeliver/gfs-styles

@everything-registry/sub-chunk-359 @infinitebrahmanuniverse/nolb-_gf @gfsdeliver/gfs-checkout-widget

4 years ago

5 years ago

5 years ago

5 years ago