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/avatar.json
{
"name": "Avatar",
"tagName": "noora-avatar",
"elementClassName": "NooraAvatar",
"className": "noora-avatar",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Displays an image, initials, or a placeholder for an account.",
"usage": "<noora-avatar name=\"Ada Lovelace\"></noora-avatar>",
"attributes": [
{
"name": "name",
"property": "name",
"type": "string",
"default": "",
"description": "Provides the account name and accessible label."
},
{
"name": "color",
"property": "color",
"type": "string",
"values": [
"gray",
"red",
"orange",
"yellow",
"green",
"azure",
"blue",
"purple",
"pink"
],
"default": "pink",
"description": "Controls the fallback color."
},
{
"name": "image-href",
"property": "imageHref",
"type": "string",
"description": "Sets the image location."
},
{
"name": "image-decoding",
"property": "imageDecoding",
"type": "string",
"values": ["sync", "async", "auto"],
"default": "async",
"description": "Controls image decoding."
},
{
"name": "image-loading",
"property": "imageLoading",
"type": "string",
"values": ["eager", "lazy"],
"description": "Controls image loading."
},
{
"name": "fallback",
"property": "fallback",
"type": "string",
"values": ["initials", "placeholder"],
"default": "initials",
"description": "Chooses the fallback when the image is unavailable."
},
{
"name": "size",
"property": "size",
"type": "string",
"values": ["2xsmall", "small", "medium", "large", "xlarge", "2xlarge"],
"default": "medium",
"description": "Controls the avatar dimensions."
}
],
"readonlyProperties": [],
"slots": [],
"cssParts": [
{
"name": "avatar",
"description": "The avatar container."
},
{
"name": "image",
"description": "The image."
},
{
"name": "initials",
"description": "The initials fallback."
}
],
"events": [
{
"name": "noora-status-change",
"type": "CustomEvent<{ status: \"loaded\" | \"error\" }>",
"description": "Emitted when the avatar image loads or fails."
}
],
"notes": ["Image loading changes emit a `noora-status-change` event."],
"examples": [
{
"id": "basic",
"title": "Basic",
"description": "Display initials, a remote image, or a placeholder fallback.",
"markup": "<noora-avatar name=\"Asmit Malakannawar\"></noora-avatar>\n<noora-avatar name=\"Marek Fořt\" image-href=\"https://www.gravatar.com/avatar/292c129cf17a552c08b4d9dcf2c6c1f8\"></noora-avatar>\n<noora-avatar name=\"Marek Fořt\" image-href=\"https://www.invalid.url\" fallback=\"placeholder\"></noora-avatar>"
},
{
"id": "sizes",
"title": "Sizes",
"description": "Avatar sizes range from twice-extra-small to twice-extra-large.",
"markup": "<noora-avatar name=\"Asmit Malakannawar\" size=\"2xsmall\" color=\"gray\"></noora-avatar>\n<noora-avatar name=\"Asmit Malakannawar\" size=\"small\" color=\"orange\"></noora-avatar>\n<noora-avatar name=\"Asmit Malakannawar\" size=\"medium\" color=\"yellow\"></noora-avatar>\n<noora-avatar name=\"Asmit Malakannawar\" size=\"large\" color=\"azure\"></noora-avatar>\n<noora-avatar name=\"Asmit Malakannawar\" size=\"xlarge\" color=\"blue\"></noora-avatar>\n<noora-avatar name=\"Asmit Malakannawar\" size=\"2xlarge\" color=\"purple\"></noora-avatar>"
},
{
"id": "colors",
"title": "Colors",
"description": "Use any of the fallback colors available to LiveView avatars.",
"markup": "<noora-avatar name=\"John Doe\" color=\"gray\"></noora-avatar>\n<noora-avatar name=\"Jane Smith\" color=\"red\"></noora-avatar>\n<noora-avatar name=\"Bob Johnson\" color=\"orange\"></noora-avatar>\n<noora-avatar name=\"Alice Brown\" color=\"yellow\"></noora-avatar>\n<noora-avatar name=\"Charlie Davis\" color=\"azure\"></noora-avatar>\n<noora-avatar name=\"Emma Wilson\" color=\"blue\"></noora-avatar>\n<noora-avatar name=\"Frank Miller\" color=\"purple\"></noora-avatar>\n<noora-avatar name=\"Grace Taylor\" color=\"pink\"></noora-avatar>"
},
{
"id": "edge-cases",
"title": "Name formats",
"description": "Initials handle single names, multiple names, separators, and accented characters.",
"markup": "<noora-avatar name=\"Madonna\" color=\"purple\"></noora-avatar>\n<noora-avatar name=\"Mary Jane Watson\" color=\"red\"></noora-avatar>\n<noora-avatar name=\"Anne-Marie Johnson\" color=\"blue\"></noora-avatar>\n<noora-avatar name=\"john_doe_123\" color=\"gray\"></noora-avatar>\n<noora-avatar name=\"José García\" color=\"orange\"></noora-avatar>\n<noora-avatar name=\"Failed Image Test\" image-href=\"\" fallback=\"initials\"></noora-avatar>"
}
]
}