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/text-divider.json
{
"name": "TextDivider",
"tagName": "noora-text-divider",
"elementClassName": "NooraTextDivider",
"className": "noora-text-divider",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Renders a compact textual section divider.",
"usage": "<noora-text-divider text=\"OR\"></noora-text-divider>",
"attributes": [
{
"name": "text",
"property": "text",
"type": "string",
"default": "",
"description": "Sets the divider text."
}
],
"readonlyProperties": [],
"slots": [],
"cssParts": [
{
"name": "divider",
"description": "The text divider."
}
],
"notes": [],
"examples": [
{
"id": "basic",
"title": "Basic dividers",
"description": "Separate alternatives, combined conditions, or sections.",
"markup": "<noora-text-divider text=\"OR\"></noora-text-divider>\n<noora-text-divider text=\"AND\"></noora-text-divider>\n<noora-text-divider text=\"Section 2\"></noora-text-divider>"
},
{
"id": "content",
"title": "Content types",
"description": "Use symbols, numbers, longer labels, or dates.",
"markup": "<noora-text-divider text=\"•\"></noora-text-divider>\n<noora-text-divider text=\"1\"></noora-text-divider>\n<noora-text-divider text=\"Alternative Options\"></noora-text-divider>\n<noora-text-divider text=\"January 2024\"></noora-text-divider>"
}
]
}