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/dropdown-item.json
{
"name": "DropdownItem",
"tagName": "noora-dropdown-item",
"elementClassName": "NooraDropdownItem",
"className": "noora-dropdown-item",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Describes one declarative item inside a dropdown or breadcrumb menu.",
"usage": "<noora-dropdown-item value=\"edit\" icon=\"edit\">Edit</noora-dropdown-item>",
"standalone": false,
"attributes": [
{
"name": "label",
"property": "label",
"type": "string",
"default": "",
"description": "Sets the item label instead of using its text content."
},
{
"name": "value",
"property": "value",
"type": "string",
"description": "Sets the value emitted when the item is selected."
},
{
"name": "icon",
"property": "icon",
"type": "string",
"description": "Shows an icon before the label."
},
{
"name": "right-icon",
"property": "rightIcon",
"type": "string",
"description": "Shows an icon after the label."
},
{
"name": "size",
"property": "size",
"type": "string",
"values": ["small", "large"],
"default": "small",
"description": "Controls the item dimensions."
},
{
"name": "href",
"property": "href",
"type": "string",
"description": "Renders the item as a link."
},
{
"name": "secondary-text",
"property": "secondaryText",
"type": "string",
"description": "Adds compact secondary text beside the label."
},
{
"name": "description",
"property": "description",
"type": "string",
"description": "Adds supporting text below the label."
},
{
"name": "disabled",
"property": "disabled",
"type": "boolean",
"default": false,
"description": "Disables selection."
},
{
"name": "checkable",
"property": "checkable",
"type": "boolean",
"default": false,
"description": "Shows a checkbox indicator."
},
{
"name": "checked",
"property": "checked",
"type": "boolean",
"default": false,
"description": "Marks a checkable item as selected."
},
{
"name": "selected",
"property": "selected",
"type": "boolean",
"default": false,
"description": "Marks a breadcrumb menu item as selected."
},
{
"name": "avatar",
"property": "avatar",
"type": "boolean",
"default": false,
"description": "Shows an avatar before the label."
},
{
"name": "avatar-name",
"property": "avatarName",
"type": "string",
"description": "Sets the avatar name."
},
{
"name": "avatar-color",
"property": "avatarColor",
"type": "string",
"description": "Sets the avatar color."
},
{
"name": "avatar-image-href",
"property": "avatarImageHref",
"type": "string",
"description": "Sets the avatar image address."
},
{
"name": "badge-label",
"property": "badgeLabel",
"type": "string",
"description": "Shows a badge with this label."
},
{
"name": "badge-color",
"property": "badgeColor",
"type": "string",
"description": "Sets the badge color."
}
],
"properties": [],
"readonlyProperties": [],
"slots": [
{
"name": "",
"description": "The item label."
}
],
"cssParts": [],
"notes": [
"Use this element inside noora-dropdown, noora-inline-dropdown, noora-button-dropdown, or noora-breadcrumb-item."
],
"examples": [
{
"id": "item",
"title": "Item",
"description": "Describe a selectable menu item.",
"markup": "<noora-dropdown-item value=\"edit\" icon=\"edit\">Edit</noora-dropdown-item>"
}
]
}