Mui Popover

  • Updated

Mui Popover

Status

Release AvailableStatusFramework Name
3.6CurrentMUI

General

  • Popover can be triggered by the action with the actionType of context.
  • Any overlay can be triggered as popover.
Component ActionOverlay
Code JSON
"componentActions": [{
  "name": "...",
  "actionType": "context",
  "popup": {
    "direction": "bottom",
    "anchor": "right",
    "overlay": "PopoverContainer"  }
}]
Code JSON
"overlays": [{
  "name": "PopoverContainer",
  "children": [...],
  "width": "300px",
  "maxHeight": "200px"}]

Popover Positions

Code JSONOutput
Code JSON
"componentActions": [{
  "popup": {
    "direction": "bottom",
    "anchor": "right",
    "overlay": "DocumentPreviewContainer"  },…
}]

Code JSON
"popup": {
  "direction": "bottom",
  "overlay": "DocumentPreviewContainer"}

Code JSON
"popup": {
  "direction": "bottom",
  "anchor": "left",
  "overlay": "DocumentPreviewContainer"}

Code JSON
"componentActions": [{
  "popup": {
    "direction": "top",
    "anchor": "right",
    "overlay": "DocumentPreviewContainer"  },…
}]

Code JSON
"popup": {
  "direction": "top",
  "overlay": "DocumentPreviewContainer"}

Code JSON
"popup": {
  "direction": "top",
  "anchor": "left",
  "overlay": "DocumentPreviewContainer"}

Code JSON
"componentActions": [{
  "popup": {
    "direction": "left",
    "anchor": "top",
    "overlay": "DocumentPreviewContainer"  },…
}]

Code JSON
"popup": {
  "direction": "left",
  "overlay": "DocumentPreviewContainer"}
Code JSON
"popup": {
  "direction": "left",
  "anchor": "bottom",
  "overlay": "DocumentPreviewContainer"}

Code JSON
"componentActions": [{
  "popup": {
    "direction": "right",
    "anchor": "top",
    "overlay": "DocumentPreviewContainer"  },...
}]

Code JSON
"popup": {
  "direction": "right",
  "overlay": "DocumentPreviewContainer"}

Code JSON
"popup": {
  "direction": "right",
  "anchor": "bottom",
  "overlay": "DocumentPreviewContainer"}

Popover Dimension

  • Popover dimension includes
    • width, minWidth, and maxWidth
      • Width or maxWidth is required.
    • height, minHeight, and maxHeight
      • height or maxHeight is required.
Code JSON
"overlays": [
  {
    "name": "...",
    "children": [...],
    "width": "400px",
    "maxHeight": "300px"  }
]

Overlay Dimension

  • Dimension works for layout as well (both Mui and Mint)
    • width (recommended), minWidth, and maxWidth
    • height, minHeight, and maxHeight
Code JSON
"overlays": [
  {
    "name": "...",
    "children": [...],
    "width": "400px",
    "maxHeight": "300px"  }
]

In This Article