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/banner.json
{
"name": "Banner",
"tagName": "noora-banner",
"elementClassName": "NooraBanner",
"className": "noora-banner",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Displays a page-level message with an optional dismiss action.",
"usage": "<noora-banner status=\"success\" title=\"Changes saved\"></noora-banner>",
"attributes": [
{
"name": "status",
"property": "status",
"type": "string",
"values": ["primary", "error", "success", "warning", "information"],
"default": "primary",
"description": "Sets the semantic status."
},
{
"name": "title",
"property": "title",
"type": "string",
"default": "",
"description": "Sets the banner title."
},
{
"name": "description",
"property": "description",
"type": "string",
"description": "Sets the optional description."
},
{
"name": "dismissible",
"property": "dismissible",
"type": "boolean",
"default": false,
"description": "Shows a dismiss control."
}
],
"readonlyProperties": [],
"slots": [
{
"name": "icon",
"description": "A custom icon used by primary banners."
}
],
"cssParts": [
{
"name": "banner",
"description": "The banner container."
},
{
"name": "title",
"description": "The title."
},
{
"name": "description",
"description": "The description."
}
],
"events": [
{
"name": "noora-dismiss",
"type": "CustomEvent<Record<string, never>>",
"description": "Emitted after the banner is dismissed."
}
],
"notes": [
"A dismiss action emits a `noora-dismiss` event and hides the element."
],
"examples": [
{
"id": "statuses",
"title": "Statuses",
"description": "Banners support primary, error, success, warning, and information states.",
"markup": "<noora-banner status=\"primary\" title=\"Primary status\" description=\"I am a primary banner\"></noora-banner>\n<noora-banner status=\"error\" title=\"Error status\" description=\"I am an error banner\"></noora-banner>\n<noora-banner status=\"success\" title=\"Success status\" description=\"I am a success banner\"></noora-banner>\n<noora-banner status=\"warning\" title=\"Warning status\" description=\"I am a warning banner\"></noora-banner>\n<noora-banner status=\"information\" title=\"Information status\" description=\"I am an information banner\"></noora-banner>"
},
{
"id": "custom-icon",
"title": "Custom icon",
"description": "Primary banners accept a custom icon through the icon slot.",
"markup": "<noora-banner status=\"primary\" title=\"Primary status\" description=\"I am a primary banner with a custom icon\">\n <noora-icon slot=\"icon\" name=\"alert_circle\"></noora-icon>\n</noora-banner>"
},
{
"id": "content-variations",
"title": "Content variations",
"description": "Descriptions are optional, banners can be dismissible, and long content wraps.",
"markup": "<noora-banner status=\"primary\" title=\"Title only banner\"></noora-banner>\n<noora-banner dismissible status=\"warning\" title=\"Dismissible banner\" description=\"This banner can be dismissed by the user\"></noora-banner>\n<noora-banner status=\"information\" title=\"Banner with longer content\" description=\"This is a banner with much longer descriptive text that demonstrates how the component handles multiple lines of content and text wrapping behavior\"></noora-banner>"
}
]
}