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/tab-menu.json
{
"name": "TabMenu",
"tagName": "noora-tab-menu",
"elementClassName": "NooraTabMenu",
"className": "noora-tab-menu-horizontal",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Switches between related views or navigation destinations.",
"usage": "<noora-tab-menu value=\"overview\">\n <noora-tab-item value=\"overview\">Overview</noora-tab-item>\n <noora-tab-item value=\"settings\">Settings</noora-tab-item>\n</noora-tab-menu>",
"attributes": [
{
"name": "orientation",
"property": "orientation",
"type": "string",
"values": ["horizontal", "vertical"],
"default": "horizontal",
"description": "Controls the menu layout."
},
{
"name": "value",
"property": "value",
"type": "string",
"description": "Gets or sets the selected item value."
}
],
"properties": [
{
"name": "items",
"type": "json",
"typescriptType": "Array<Record<string, unknown>>",
"default": [],
"description": "Defines tabs programmatically when declarative noora-tab-item children are not used."
}
],
"readonlyProperties": [],
"slots": [
{
"name": "",
"description": "Declarative noora-tab-item children."
}
],
"cssParts": [
{
"name": "menu",
"description": "The menu container."
},
{
"name": "item",
"description": "Each tab item."
}
],
"events": [
{
"name": "noora-tab-change",
"type": "CustomEvent<{ item: Record<string, unknown>; value: unknown }>",
"description": "Emitted when an enabled tab is selected."
}
],
"notes": ["Selection emits a `noora-tab-change` event."],
"examples": [
{
"id": "horizontal",
"title": "Horizontal tabs",
"description": "Switch between sibling views.",
"markup": "<noora-tab-menu value=\"general\">\n <noora-tab-item value=\"general\" icon=\"category\">General</noora-tab-item>\n <noora-tab-item value=\"settings\">Settings</noora-tab-item>\n <noora-tab-item value=\"members\">Members</noora-tab-item>\n</noora-tab-menu>"
},
{
"id": "vertical",
"title": "Vertical tabs",
"description": "Use labels with left, right, or paired icons.",
"markup": "<noora-tab-menu orientation=\"vertical\">\n <noora-tab-item value=\"dashboard\">Dashboard</noora-tab-item>\n <noora-tab-item value=\"analytics\" icon=\"category\">Analytics</noora-tab-item>\n <noora-tab-item value=\"settings\" right-icon=\"category\">Settings</noora-tab-item>\n <noora-tab-item value=\"users\" icon=\"category\" right-icon=\"category\">Users</noora-tab-item>\n</noora-tab-menu>"
},
{
"id": "vertical-edge-cases",
"title": "Vertical edge cases",
"description": "Handle especially long and short labels.",
"markup": "<noora-tab-menu orientation=\"vertical\">\n <noora-tab-item value=\"long\">Very Long Tab Label That Might Wrap</noora-tab-item>\n <noora-tab-item value=\"short\">A</noora-tab-item>\n</noora-tab-menu>"
}
]
}