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/inline-dropdown.json
{
"name": "InlineDropdown",
"tagName": "noora-inline-dropdown",
"elementClassName": "NooraInlineDropdown",
"className": "noora-inline-dropdown",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Opens a compact inline menu.",
"usage": "<noora-inline-dropdown label=\"Sort\">\n <noora-dropdown-item value=\"newest\">Newest</noora-dropdown-item>\n</noora-inline-dropdown>",
"attributes": [
{
"name": "label",
"property": "label",
"type": "string",
"default": "",
"description": "Sets the trigger label."
},
{
"name": "size",
"property": "size",
"type": "string",
"values": ["small", "large"],
"default": "small",
"description": "Controls the trigger dimensions."
},
{
"name": "disabled",
"property": "disabled",
"type": "boolean",
"default": false,
"description": "Disables the trigger."
},
{
"name": "open",
"property": "open",
"type": "boolean",
"default": false,
"reflect": true,
"description": "Controls whether the menu is open."
},
{
"name": "keep-open",
"property": "keepOpen",
"type": "boolean",
"default": false,
"description": "Keeps the menu open after selection."
}
],
"properties": [
{
"name": "items",
"type": "json",
"typescriptType": "Array<Record<string, unknown>>",
"default": [],
"description": "Defines menu items programmatically when declarative noora-dropdown-item children are not used."
}
],
"readonlyProperties": [],
"slots": [
{
"name": "icon",
"description": "The trigger icon."
},
{
"name": "",
"description": "Declarative noora-dropdown-item children."
}
],
"cssParts": [
{
"name": "trigger",
"description": "The menu trigger."
},
{
"name": "content",
"description": "The menu content."
}
],
"events": [
{
"name": "noora-open-change",
"type": "CustomEvent<{ open: boolean }>",
"description": "Emitted when the dropdown opens or closes."
},
{
"name": "noora-select",
"type": "CustomEvent<{ item: Record<string, unknown>; value: unknown }>",
"description": "Emitted when an enabled item is selected."
}
],
"notes": ["Selections emit a `noora-select` event."],
"examples": [
{
"id": "default",
"title": "Default",
"description": "Use an inline menu for compact choices.",
"markup": "<noora-inline-dropdown label=\"Sort\">\n <noora-dropdown-item value=\"newest\">Newest</noora-dropdown-item>\n <noora-dropdown-item value=\"oldest\">Oldest</noora-dropdown-item>\n</noora-inline-dropdown>"
},
{
"id": "disabled",
"title": "Disabled",
"description": "Prevent changes while the choice is unavailable.",
"markup": "<noora-inline-dropdown label=\"Sort\" disabled>\n <noora-dropdown-item value=\"newest\">Newest</noora-dropdown-item>\n</noora-inline-dropdown>"
},
{
"id": "large-items",
"title": "Large items",
"description": "Use larger item rows for more prominent menus.",
"markup": "<noora-inline-dropdown label=\"Environment\" size=\"large\">\n <noora-dropdown-item value=\"production\" size=\"large\">Production</noora-dropdown-item>\n <noora-dropdown-item value=\"staging\" size=\"large\">Staging</noora-dropdown-item>\n</noora-inline-dropdown>"
},
{
"id": "icons",
"title": "Items with icons",
"description": "Pair choices with recognizable icons.",
"markup": "<noora-inline-dropdown label=\"View\">\n <noora-dropdown-item value=\"grid\" icon=\"layout_grid\">Grid</noora-dropdown-item>\n <noora-dropdown-item value=\"list\" icon=\"list\">List</noora-dropdown-item>\n</noora-inline-dropdown>"
},
{
"id": "secondary-text",
"title": "Secondary text",
"description": "Add concise context beside each label.",
"markup": "<noora-inline-dropdown label=\"Branch\">\n <noora-dropdown-item value=\"main\" secondary-text=\"default\">main</noora-dropdown-item>\n <noora-dropdown-item value=\"release\" secondary-text=\"protected\">release</noora-dropdown-item>\n</noora-inline-dropdown>"
}
]
}