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/icon.json
{
"name": "Icon",
"tagName": "noora-icon",
"elementClassName": "NooraIcon",
"className": "noora-icon",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Renders an icon from Noora's shared icon catalog.",
"usage": "<noora-icon name=\"settings\" label=\"Settings\"></noora-icon>",
"attributes": [
{
"name": "name",
"property": "name",
"type": "string",
"default": "",
"description": "Selects the icon by its underscore or hyphen-separated name."
},
{
"name": "label",
"property": "label",
"type": "string",
"description": "Provides an accessible label. Omit for decorative icons."
},
{
"name": "size",
"property": "size",
"type": "number",
"default": 24,
"description": "Sets the width and height in pixels."
},
{
"name": "active-name",
"property": "activeName",
"type": "string",
"description": "Selects the icon shown while the parent element has an open data state."
},
{
"name": "transition",
"property": "transition",
"type": "string",
"values": ["morph", "crossfade_rotate", "auto"],
"default": "auto",
"description": "Controls the animated transition between the default and active icons."
}
],
"readonlyProperties": [],
"slots": [],
"cssParts": [
{
"name": "icon",
"description": "The rendered scalable vector graphic."
}
],
"notes": [
"Unknown icon names render no graphic.",
"When active-name is set, the icon observes its parent element's data-state attribute and switches when that state is open."
],
"examples": [
{
"id": "transitions",
"title": "Animated transitions",
"description": "Click each button to toggle its state and transition between paired icons.",
"markup": "<button data-state=\"closed\" onclick=\"this.dataset.state = this.dataset.state === 'open' ? 'closed' : 'open'\" aria-label=\"Toggle selector\"><noora-icon name=\"selector\" active-name=\"selector_2\" transition=\"morph\"></noora-icon></button>\n<button data-state=\"closed\" onclick=\"this.dataset.state = this.dataset.state === 'open' ? 'closed' : 'open'\" aria-label=\"Toggle menu\"><noora-icon name=\"menu\" active-name=\"close\" transition=\"crossfade_rotate\"></noora-icon></button>\n<button data-state=\"closed\" onclick=\"this.dataset.state = this.dataset.state === 'open' ? 'closed' : 'open'\" aria-label=\"Toggle theme\"><noora-icon name=\"sun_high\" active-name=\"moon\" transition=\"crossfade_rotate\"></noora-icon></button>\n<button data-state=\"closed\" onclick=\"this.dataset.state = this.dataset.state === 'open' ? 'closed' : 'open'\" aria-label=\"Toggle playback\"><noora-icon name=\"player_play\" active-name=\"player_pause\" transition=\"auto\"></noora-icon></button>"
}
]
}