Skip to content

CorneredGrid

Panoramax.components.layout.CorneredGrid ⇐ lit.LitElement

Kind: static class of Panoramax.components.layout
Extends: lit.LitElement
Element: pnx-cornered-grid
Slot: bg The full size background component
Slot: top-left The top-left corner
Slot: top The top middle corner
Slot: top-right The top-right corner
Slot: bottom-left The bottom-left corner
Slot: bottom The bottom middle corner
Slot: bottom-right The bottom-right corner

new CorneredGrid()

CorneredGrid layout offers a convenient way to display overlay widgets on top of a background component. This is useful for showing buttons in corners over a map or picture display. Grid layout is organised through many slots (background and corners) : two rows (top, bottom) and three columns (right, middle, left).

Example

<pnx-cornered-grid>
  <pnx-map slot="bg" />
  <pnx-button slot="top-left" />
  <pnx-button slot="top-left" />
  <pnx-legend slot="bottom" />
</pnx-cornered-grid>