Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
components/popover.json
{
"name": "Popover",
"tagName": "noora-popover",
"elementClassName": "NooraPopover",
"className": "noora-popover",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Displays contextual content anchored to a trigger.",
"usage": "<noora-popover><button slot=\"trigger\">Settings</button><p>Popover content</p></noora-popover>",
"attributes": [
{
"name": "open",
"property": "open",
"type": "boolean",
"default": false,
"description": "Controls whether the popover is open."
},
{
"name": "modal",
"property": "modal",
"type": "boolean",
"default": false,
"description": "Enables modal interaction behavior."
},
{
"name": "auto-focus",
"property": "autoFocus",
"type": "boolean",
"default": true,
"description": "Focuses the first focusable element after opening."
},
{
"name": "close-on-interact-outside",
"property": "closeOnInteractOutside",
"type": "boolean",
"default": true,
"description": "Closes after outside interaction."
},
{
"name": "close-on-escape",
"property": "closeOnEscape",
"type": "boolean",
"default": true,
"description": "Closes when Escape is pressed."
},
{
"name": "placement",
"property": "placement",
"type": "string",
"values": [
"top",
"top-start",
"top-end",
"bottom",
"bottom-start",
"bottom-end"
],
"default": "bottom",
"description": "Controls the preferred placement."
}
],
"readonlyProperties": [],
"slots": [
{
"name": "trigger",
"description": "The control that toggles the popover."
},
{
"name": "",
"description": "The popover content."
}
],
"cssParts": [
{
"name": "trigger",
"description": "The trigger wrapper."
},
{
"name": "content",
"description": "The popover surface."
}
],
"events": [
{
"name": "noora-open-change",
"type": "CustomEvent<{ open: boolean }>",
"description": "Emitted when the popover opens or closes."
}
],
"notes": ["Opening and closing emits a `noora-open-change` event."],
"examples": [
{
"id": "settings",
"title": "Default",
"description": "Show a simple popover with basic content.",
"markup": "<noora-popover placement=\"bottom\">\n <button slot=\"trigger\" type=\"button\" style=\"padding: 8px 16px;\">Click me</button>\n <div style=\"padding: 16px;\">\n <h3 style=\"margin: 0 0 8px; color: var(--noora-surface-label-primary);\">Popover Title</h3>\n <p style=\"margin: 0; color: var(--noora-surface-label-secondary);\">This is the content inside the popover.</p>\n </div>\n</noora-popover>"
}
]
}