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/button-dropdown.json
{
"name": "ButtonDropdown",
"tagName": "noora-button-dropdown",
"elementClassName": "NooraButtonDropdown",
"className": "noora-button-dropdown",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Combines a primary button action with an attached menu.",
"usage": "<noora-button-dropdown label=\"Create\">\n <noora-dropdown-item value=\"project\">Project</noora-dropdown-item>\n</noora-button-dropdown>",
"attributes": [
{
"name": "label",
"property": "label",
"type": "string",
"default": "",
"description": "Sets the main action label."
},
{
"name": "size",
"property": "size",
"type": "string",
"values": ["medium", "large"],
"default": "large",
"description": "Controls the dimensions."
},
{
"name": "disabled",
"property": "disabled",
"type": "boolean",
"default": false,
"description": "Disables both controls."
},
{
"name": "open",
"property": "open",
"type": "boolean",
"default": false,
"reflect": true,
"description": "Controls whether the menu is open."
},
{
"name": "close-on-select",
"property": "closeOnSelect",
"type": "boolean",
"default": true,
"description": "Closes the menu after a selection."
},
{
"name": "keep-open",
"property": "keepOpen",
"type": "boolean",
"default": false,
"description": "Keeps the menu open after selection."
},
{
"name": "align",
"property": "align",
"type": "string",
"values": ["start", "end"],
"default": "start",
"description": "Aligns the menu to the button."
}
],
"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-left",
"description": "An icon before the main label."
},
{
"name": "icon-right",
"description": "An icon after the main label."
},
{
"name": "",
"description": "Declarative noora-dropdown-item children."
}
],
"cssParts": [
{
"name": "main-button",
"description": "The main action."
},
{
"name": "trigger",
"description": "The menu trigger."
},
{
"name": "content",
"description": "The menu content."
}
],
"events": [
{
"name": "noora-action",
"type": "CustomEvent<Record<string, never>>",
"description": "Emitted when the primary button is activated."
},
{
"name": "noora-open-change",
"type": "CustomEvent<{ open: boolean }>",
"description": "Emitted when the menu opens or closes."
},
{
"name": "noora-select",
"type": "CustomEvent<{ item: Record<string, unknown>; value: unknown }>",
"description": "Emitted when a menu item is selected."
}
],
"notes": ["Selections emit a `noora-select` event."],
"examples": [
{
"id": "default",
"title": "Default",
"description": "Attach related options to a primary action.",
"markup": "<noora-button-dropdown label=\"Button\">\n <noora-dropdown-item value=\"1\">Option 1</noora-dropdown-item>\n <noora-dropdown-item value=\"2\">Option 2</noora-dropdown-item>\n <noora-dropdown-item value=\"3\">Option 3</noora-dropdown-item>\n</noora-button-dropdown>"
},
{
"id": "sizes",
"title": "Sizes",
"description": "Button dropdowns are available in medium and large sizes.",
"markup": "<noora-button-dropdown label=\"Button\" size=\"medium\">\n <noora-dropdown-item value=\"1\">Option 1</noora-dropdown-item>\n <noora-dropdown-item value=\"2\">Option 2</noora-dropdown-item>\n</noora-button-dropdown>\n<noora-button-dropdown label=\"Button\" size=\"large\">\n <noora-dropdown-item value=\"1\">Option 1</noora-dropdown-item>\n <noora-dropdown-item value=\"2\">Option 2</noora-dropdown-item>\n</noora-button-dropdown>"
},
{
"id": "icons",
"title": "Icons",
"description": "Place icons on either side of the main action label.",
"markup": "<noora-button-dropdown label=\"Button\">\n <noora-icon slot=\"icon-left\" name=\"chevron_left\"></noora-icon>\n <noora-icon slot=\"icon-right\" name=\"chevron_right\"></noora-icon>\n <noora-dropdown-item value=\"1\">Option 1</noora-dropdown-item>\n <noora-dropdown-item value=\"2\">Option 2</noora-dropdown-item>\n</noora-button-dropdown>"
},
{
"id": "disabled",
"title": "Disabled",
"description": "The disabled state prevents both action and menu interaction.",
"markup": "<noora-button-dropdown disabled label=\"Button\">\n <noora-dropdown-item value=\"1\">Option 1</noora-dropdown-item>\n <noora-dropdown-item value=\"2\">Option 2</noora-dropdown-item>\n</noora-button-dropdown>"
}
]
}