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/toggle.json
{
"name": "Toggle",
"tagName": "noora-toggle",
"elementClassName": "NooraToggle",
"className": "noora-toggle",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Turns a setting on or off.",
"usage": "<noora-toggle label=\"Notifications\" name=\"notifications\"></noora-toggle>",
"attributes": [
{
"name": "label",
"property": "label",
"type": "string",
"description": "Sets the visible label."
},
{
"name": "description",
"property": "description",
"type": "string",
"description": "Sets supporting text."
},
{
"name": "checked",
"property": "checked",
"type": "boolean",
"default": false,
"reflect": true,
"description": "Controls the checked state."
},
{
"name": "disabled",
"property": "disabled",
"type": "boolean",
"default": false,
"reflect": true,
"description": "Disables interaction."
},
{
"name": "name",
"property": "name",
"type": "string",
"default": "",
"description": "Sets the submitted field name."
},
{
"name": "value",
"property": "value",
"type": "string",
"default": "on",
"description": "Sets the submitted field value."
}
],
"readonlyProperties": [
{
"name": "control",
"type": "HTMLInputElement | null",
"description": "The native checkbox input."
},
{
"name": "form",
"type": "HTMLFormElement | null",
"description": "The associated form."
}
],
"slots": [],
"cssParts": [
{
"name": "root",
"description": "The toggle label."
},
{
"name": "control",
"description": "The visual switch."
},
{
"name": "label",
"description": "The label text."
}
],
"events": [
{
"name": "input",
"type": "InputEvent",
"description": "Emitted while the checked state changes."
},
{
"name": "change",
"type": "Event",
"description": "Emitted after the checked state changes."
}
],
"notes": ["The component emits standard input and change events."],
"examples": [
{
"id": "states",
"title": "Basic states",
"description": "Compare off and on settings.",
"markup": "<noora-toggle label=\"Enable notifications\"></noora-toggle>\n<noora-toggle label=\"Email alerts\" checked></noora-toggle>"
},
{
"id": "disabled",
"title": "Disabled states",
"description": "Show disabled settings in both states.",
"markup": "<noora-toggle label=\"Disabled off\" disabled></noora-toggle>\n<noora-toggle label=\"Disabled on\" checked disabled></noora-toggle>"
},
{
"id": "description",
"title": "With description",
"description": "Explain the setting below its label.",
"markup": "<noora-toggle label=\"Marketing emails\" description=\"Receive updates about new features and promotions\"></noora-toggle>"
}
]
}