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/tag.json
{
"name": "Tag",
"tagName": "noora-tag",
"elementClassName": "NooraTag",
"className": "noora-tag",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Displays a compact label with optional icon and dismissal.",
"usage": "<noora-tag label=\"Active\"></noora-tag>",
"attributes": [
{
"name": "label",
"property": "label",
"type": "string",
"default": "",
"description": "Sets the visible label."
},
{
"name": "dismissible",
"property": "dismissible",
"type": "boolean",
"default": false,
"description": "Shows a dismiss control."
},
{
"name": "dismiss-value",
"property": "dismissValue",
"type": "string",
"description": "Adds a value to the dismiss event."
},
{
"name": "icon",
"property": "icon",
"type": "string",
"description": "Sets a Noora icon before the label."
},
{
"name": "disabled",
"property": "disabled",
"type": "boolean",
"default": false,
"description": "Disables dismissal."
}
],
"readonlyProperties": [],
"slots": [
{
"name": "icon",
"description": "A custom icon that takes precedence over the icon attribute."
}
],
"cssParts": [
{
"name": "tag",
"description": "The tag container."
},
{
"name": "label",
"description": "The label."
},
{
"name": "dismiss",
"description": "The dismiss control."
}
],
"events": [
{
"name": "noora-dismiss",
"type": "CustomEvent<{ value: string | undefined }>",
"description": "Emitted when the tag dismiss control is activated."
}
],
"notes": ["Dismissal emits a `noora-dismiss` event."],
"examples": [
{
"id": "basic",
"title": "Basic tags",
"description": "Render plain tags and tags with different icons.",
"markup": "<noora-tag label=\"Simple Tag\"></noora-tag>\n<noora-tag label=\"Category\" icon=\"category\"></noora-tag>\n<noora-tag label=\"User\" icon=\"user\"></noora-tag>"
},
{
"id": "dismissible",
"title": "Dismissible states",
"description": "Allow removal when a tag represents editable input.",
"markup": "<noora-tag label=\"Dismissible Tag\" icon=\"category\" dismissible></noora-tag>\n<noora-tag label=\"Fixed Tag\" icon=\"category\"></noora-tag>\n<noora-tag label=\"Remove Me\" dismissible></noora-tag>"
},
{
"id": "disabled",
"title": "Disabled states",
"description": "Disable plain, icon, and dismissible tags.",
"markup": "<noora-tag label=\"Disabled Tag\" disabled></noora-tag>\n<noora-tag label=\"Disabled\" icon=\"category\" disabled></noora-tag>\n<noora-tag label=\"Disabled Dismissible\" icon=\"category\" dismissible disabled></noora-tag>"
},
{
"id": "content",
"title": "Content variations",
"description": "Support short, long, version, and status labels.",
"markup": "<noora-tag label=\"New\" dismissible></noora-tag>\n<noora-tag label=\"Very Long Tag Label That Might Wrap\" icon=\"category\" dismissible></noora-tag>\n<noora-tag label=\"v2.1.0\" icon=\"git_branch\"></noora-tag>\n<noora-tag label=\"In Progress\" icon=\"progress_x\" dismissible></noora-tag>"
}
]
}