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/progress-bar.json
{
"name": "ProgressBar",
"tagName": "noora-progress-bar",
"elementClassName": "NooraProgressBar",
"className": "noora-progress-bar",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Visualizes progress toward a maximum value.",
"usage": "<noora-progress-bar value=\"75\" max=\"100\" title=\"Upload progress\"></noora-progress-bar>",
"previewLayout": "stack",
"attributes": [
{
"name": "value",
"property": "value",
"type": "number",
"default": 0,
"description": "Sets the current value."
},
{
"name": "max",
"property": "max",
"type": "number",
"default": 100,
"description": "Sets the maximum value."
},
{
"name": "title",
"property": "title",
"type": "string",
"description": "Sets the optional title."
}
],
"readonlyProperties": [],
"slots": [
{
"name": "description",
"description": "Supporting content below the bar."
}
],
"cssParts": [
{
"name": "progress",
"description": "The progress container."
},
{
"name": "track",
"description": "The complete track."
},
{
"name": "value",
"description": "The filled track."
}
],
"notes": [],
"examples": [
{
"id": "basic",
"title": "Basic progress",
"description": "Show progress with or without a title.",
"markup": "<noora-progress-bar value=\"75\" max=\"100\"></noora-progress-bar>\n<noora-progress-bar value=\"150\" max=\"200\" title=\"Storage Used:\"></noora-progress-bar>",
"previewMarkup": "<noora-progress-bar value=\"75\" max=\"100\" style=\"width: 75%\"></noora-progress-bar>\n<noora-progress-bar value=\"150\" max=\"200\" title=\"Storage Used:\" style=\"width: 75%\"></noora-progress-bar>"
},
{
"id": "levels",
"title": "Progress levels",
"description": "Compare empty, quarter, half, three-quarter, and complete states.",
"markup": "<noora-progress-bar value=\"0\" max=\"100\" title=\"Not started\"></noora-progress-bar>\n<noora-progress-bar value=\"25\" max=\"100\" title=\"25% Complete\"></noora-progress-bar>\n<noora-progress-bar value=\"50\" max=\"100\" title=\"Halfway there\"></noora-progress-bar>\n<noora-progress-bar value=\"75\" max=\"100\" title=\"Almost done\"></noora-progress-bar>\n<noora-progress-bar value=\"100\" max=\"100\" title=\"Complete!\"></noora-progress-bar>",
"previewMarkup": "<noora-progress-bar value=\"0\" max=\"100\" title=\"Not started\" style=\"width: 75%\"></noora-progress-bar>\n<noora-progress-bar value=\"25\" max=\"100\" title=\"25% Complete\" style=\"width: 75%\"></noora-progress-bar>\n<noora-progress-bar value=\"50\" max=\"100\" title=\"Halfway there\" style=\"width: 75%\"></noora-progress-bar>\n<noora-progress-bar value=\"75\" max=\"100\" title=\"Almost done\" style=\"width: 75%\"></noora-progress-bar>\n<noora-progress-bar value=\"100\" max=\"100\" title=\"Complete!\" style=\"width: 75%\"></noora-progress-bar>"
},
{
"id": "scales",
"title": "Different scales",
"description": "Use any numeric range that suits the measured quantity.",
"markup": "<noora-progress-bar value=\"3\" max=\"5\" title=\"Steps completed:\"></noora-progress-bar>\n<noora-progress-bar value=\"750\" max=\"1000\" title=\"Points earned:\"></noora-progress-bar>\n<noora-progress-bar value=\"847\" max=\"1024\" title=\"Download progress (MB):\"></noora-progress-bar>",
"previewMarkup": "<noora-progress-bar value=\"3\" max=\"5\" title=\"Steps completed:\" style=\"width: 75%\"></noora-progress-bar>\n<noora-progress-bar value=\"750\" max=\"1000\" title=\"Points earned:\" style=\"width: 75%\"></noora-progress-bar>\n<noora-progress-bar value=\"847\" max=\"1024\" title=\"Download progress (MB):\" style=\"width: 75%\"></noora-progress-bar>"
},
{
"id": "edge-cases",
"title": "Edge cases",
"description": "Show overflowing, very small, and long-title progress values.",
"markup": "<noora-progress-bar value=\"120\" max=\"100\" title=\"Exceeded goal:\"></noora-progress-bar>\n<noora-progress-bar value=\"1\" max=\"1000\" title=\"Just started:\"></noora-progress-bar>\n<noora-progress-bar value=\"42\" max=\"100\" title=\"Very Long Progress Bar Title That Might Wrap:\"></noora-progress-bar>",
"previewMarkup": "<noora-progress-bar value=\"120\" max=\"100\" title=\"Exceeded goal:\" style=\"width: 75%\"></noora-progress-bar>\n<noora-progress-bar value=\"1\" max=\"1000\" title=\"Just started:\" style=\"width: 75%\"></noora-progress-bar>\n<noora-progress-bar value=\"42\" max=\"100\" title=\"Very Long Progress Bar Title That Might Wrap:\" style=\"width: 75%\"></noora-progress-bar>"
}
]
}