Layered Elements

Dropdowns

Dropdown is container that are hidden by default and should be called by other element to become visible. When it's visible, it attached to element that called it.

This is dropdown dd1

This is dropdown dd1

This is dropdown dd1

This is dropdown dd4

<input type="button" su-target="identifier" value="Open dropdown" />
<input type="button" su-target="identifier" value="Open same dropdown" />
 
<su-dropdown su-anchor="identifier">
    This is dropdown dd1
    ...
</su-dropdown>

Some facts about layered elements:

  • Layered elements (dropdowns and popups) could be nested
  • Open nested layered elements makes tree
  • Second click on element that opening layer closes it
  • Any click outside top opened layer (or press on ESC button) will close it
  • Element that opening layer by click is caller
  • Caller is any element that have su-target attribute
  • Any layered element should have an attribute su-anchor, that tells to caller what to open
  • Different callers can open the same layered elements, but only if they are not nested by loop

Some more about dropdowns:

  • If dropdown callers width is less then 50 pixels, dropdowns arrow will be closer to edge
    Rly??

Yes!


Popups

Popup is container that are hidden by default and should be called by other element too. When it's visible, it makes basic content area unscrollable and greyscaled. Wherein popup's container is displayed at the center of the page.

<input type="button" su-target="identifier" value="Open popup"
    config='{"title": "Popup title"}' />
 
<su-popup su-anchor="identifier">
    Popup content
</su-popup>

Popup content

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll

Popup with scroll