Skip to content
This repository has been archived by the owner on Oct 30, 2022. It is now read-only.

Latest commit

 

History

History
107 lines (78 loc) · 5.51 KB

menu.md

File metadata and controls

107 lines (78 loc) · 5.51 KB
Raw

Menu

A local popup menu with a list of choices. A menu contains one or more Lists with List Tiles as menu elements.

Main features

  • Choose menu type: dropdown, exposing dropdown, dialog
  • Anchor menu to position "top left", "bottom right", etcetera
  • Tweak positioning with an offset
  • Dropdown menu: optionally reposition according to selected item
  • Long list: scroll selected item into view
  • Custom transitions
  • Optional backdrop
  • All List main features

Usage

Options

Menu specific options

Parameter Required Type Default Description
backdrop optional Boolean false Set to true to add a backdrop below the menu
height optional String or Number Use "max" to use the maximum available height within the parent element (the top position and bottom margin will be subtracted automatically); otherwise use a number with or without pixels or percentage, for example: 160, "160px" or "75%" (when using percentage the parent element must have a height)
offsetH optional Number or String 0 Horizontal offset relative to target element; use a number with or without pixels or percentage, for example: 16, "16px" or "75%"
offsetV optional Number or String "79%" Vertical offset relative to target element; use a number with or without pixels or percentage, for example: 16, "16px" or "75%"
origin optional String "top" (if target is specified) Makes the menu appear from a corner or a side; use any combination of "top", "right", "bottom", "left"; for example: "top left", "bottom right", "top"; but not: "top bottom", "right left"
permanent optional Boolean false Set to true to always show the menu (mostly used for demonstration purposes)
reposition optional Boolean false Set to true to position the menu to the menu item (List Tile) that has class "selected"
scrollTarget optional String HTML element selector to scroll to at appearance, for example ".list-item-12"
shadowDepth optional Number 0-5 3 Depth of the shadow
show optional Boolean false Set to true to show the menu
target recommended String HTML element selector to position to, for example "#my-button"
topMenu optional Boolean false Set to true to make the menu appear full width at the top
transitions optional Object See "Transition options" below
width optional Number: 1, 1.5, 2, 3, 4, 5, 6, 7, or "auto" Multiplication factor of width unit (56px); with "auto" the menu takes the width of the widest element; note that on smaller devices a large size may get clipped by the screen

Transition options

See: Transitions

Common component options

Parameter Required Type Default Description
after optional String, hyperscript or component Extra content after main content; note that this content is placed right of preceding elements with a higher stacking depth
before optional String, hyperscript or component Extra content before main content; note that this content is placed left of subsequent elements with a lower stacking depth
className optional String Extra CSS class appended to pe-menu
content use content or children String, hyperscript or component Expects a List, or an array of lists; replaces children
element optional String "div" HTML element tag
events optional Object Options object containing one or more standard events such as onclick (React: onClick)
id optional String HTML element id
style optional Object For setting simple style attributes
tone optional String: "dark" or "light" Renders the component light on dark (sets class pe-dark-tone); use "light" to locally inverse (sets class pe-light-tone)

Composition

Menu is usually composed from:

Menu also contains:

  • Shadow (when option shadowDepth is not 0)

CSS classes

Future

  • Take the browser window into account to make sure that the menu is always in view
  • Scrolling high menu content, style scrollbar
  • Cascading menus