Progress bar3.0
Ads by Tryg Careers
Installation
npm i @tryg/ui-libraryUsage
Individual only imports the desired component, and only needs to be included once within the application. Which is beneficial to keep the application size small.
<script type="module">
import { defineCustomElement } from '@tryg/ui-library/dist/components/anchor-progress-bar';
defineCustomElement();
</script>
<anchor-progress-bar label="Progress bar" value="50"></anchor-progress-bar>Global only needs to be defined once in the application, but it will import all components even the ones that are not in use..
<script type="module">
import { defineCustomElements } from '@tryg/ui-library/dist/loader';
defineCustomElements();
</script>
<anchor-progress-bar label="Progress bar" value="50"></anchor-progress-bar>Indeterminate
<anchor-progress-bar label="Progress bar" indeterminate></anchor-progress-bar>Reverse
<anchor-progress-bar label="Progress bar" value="50" reverse></anchor-progress-bar>Show percentage
<anchor-progress-bar label="Progress bar" value="50" show-percentage></anchor-progress-bar>Steps (experimental)
<anchor-progress-bar label="Stepped progress bar" value="50" steps="4" step="2"></anchor-progress-bar>Steps indeterminate (experimental)
<anchor-progress-bar label="Connecting to wifi" steps="3" step="2" indeterminate></anchor-progress-bar>API
progress-bar
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
height | height | number | 8 | |
indeterminate | indeterminate | boolean | false | |
label | label | string | null | |
reverse | reverse | boolean | false | |
showPercentage | show-percentage | boolean | false | |
step | step | 0 | 1 | 10 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 1 | |
steps | steps | 1 | 10 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 1 | |
uuid | uuid | Give this instance of button a custom ID, or keep the default. | string | uuidv4() |
value | value | 0 | 1 | 10 | 100 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 2 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 3 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 4 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 5 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 6 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 7 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 8 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 9 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 0 |
Dependencies
Depends on
Graph
Built with StencilJS
Notification inline
The notification-inline component is a simple alert component that can display a variety of different types of messages, including error, info, success, and warning messages. It also displays an icon corresponding to the type of message being displayed.
Progress indicator
The Progress Indicator is a component that shows the user the steps they need to take to complete a form.