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/line-divider.json
{
"name": "LineDivider",
"tagName": "noora-line-divider",
"elementClassName": "NooraLineDivider",
"className": "noora-line-divider",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Separates adjacent content with an optional inline label.",
"usage": "<noora-line-divider text=\"or\"></noora-line-divider>",
"attributes": [
{
"name": "text",
"property": "text",
"type": "string",
"description": "Sets the optional inline label."
}
],
"readonlyProperties": [],
"slots": [],
"cssParts": [
{
"name": "divider",
"description": "The divider."
},
{
"name": "text",
"description": "The inline label."
}
],
"notes": [],
"examples": [
{
"id": "basic",
"title": "Basic dividers",
"description": "Match the LiveView component with a plain divider and an inline label.",
"markup": "<noora-line-divider></noora-line-divider>\n<noora-line-divider text=\"OR\"></noora-line-divider>"
},
{
"id": "text-variations",
"title": "Text variations",
"description": "Use the same text variations as the LiveView component.",
"markup": "<noora-line-divider text=\"AND\"></noora-line-divider>\n<noora-line-divider text=\"Continue with\"></noora-line-divider>\n<noora-line-divider text=\"2\"></noora-line-divider>\n<noora-line-divider text=\"Alternative method\"></noora-line-divider>"
}
]
}