You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+99-30Lines changed: 99 additions & 30 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -57,6 +57,8 @@ components: {
57
57
| show-label | Boolean | If true, labels will be displayed |
58
58
| show-bridge | Boolean | If true, the bridges will be displayed (bridges will be displayed on small devices, irrespective of this) |
59
59
| show-bridge-on-small-devices | Boolean | If false, the bridges will be hidden even on smaller devices |
60
+
| styles | Object | Provide custom style for various UI components |
61
+
| colors | Object | Provide colrs for various UI components |
60
62
61
63
### Events
62
64
@@ -67,41 +69,108 @@ components: {
67
69
68
70
### Customization
69
71
70
-
Since customization can vary hugely for each use case, i thought it would be too much hassle to pass colors, width and height as props.
71
-
Instead overwriting the styles would be way simpler. Just make sure to use
72
-
`!important`
73
-
on every style you want to overwrite.
74
-
Here is a complete set of css classes used in the project
72
+
This package has been created by taking your customization needs in mind. You can not only provide colors for components for different states (active, inactive and completed), you can do custom styling for each component in the UI. Here is an example.
75
73
76
-
```css
77
-
.progress__wrapper {
78
-
}
79
-
.progress__block {
80
-
}
81
-
.progress__bridge {
82
-
}
83
-
.progress__bubble {
84
-
}
85
-
.progress__label {
86
-
}
87
-
.progress__bubble-completed {
88
-
}
89
-
.progress__bubble-active {
90
-
}
91
-
.progress__label-completed {
92
-
}
93
-
.progress__label-active {
94
-
}
95
-
.progress__bridge-completed {
74
+
```js
75
+
// this is the default style being used in the package
76
+
// set this as data in the parent component
77
+
styleData: {
78
+
progress__wrapper: {
79
+
display:"-ms-flexbox",
80
+
display:"flex",
81
+
flexWrap:"wrap",
82
+
display:"flex",
83
+
justifyContent:"flex-start",
84
+
margin:"1rem 0",
85
+
},
86
+
progress__block: {
87
+
display:"flex",
88
+
alignItems:"center",
89
+
},
90
+
progress__bridge: {
91
+
backgroundColor:"grey",
92
+
height:"2px",
93
+
flexGrow:"1",
94
+
width:"20px",
95
+
},
96
+
progress__bubble: {
97
+
margin:"0",
98
+
padding:"0",
99
+
lineHeight:"30px",
100
+
display:"flex",
101
+
justifyContent:"center",
102
+
alignItems:"center",
103
+
height:"30px",
104
+
width:"30px",
105
+
borderRadius:"100%",
106
+
backgroundColor:"transparent",
107
+
border:"2px grey solid",
108
+
textAlign:"center",
109
+
},
110
+
progress__label: {
111
+
margin:"0 0.8rem",
112
+
},
96
113
}
114
+
115
+
// use above data as prop
116
+
<vue-step-progress-indicator
117
+
:styles="styleData"
118
+
/>
97
119
```
98
120
99
-
The style also include one simple media query to hide labels on smaller devices. Labels are hidden and bridges are shown on smaller devices by default. You can change the
100
-
behaviour by using above listed props, or by changing the styles.
121
+
You may also want to customize the colors of components. The progress bubbles can have one of three states, `active`, `inactive` & `completed`. You can set `color`, `backgroundColor`, `borderColor` for each component. You can pass colors for each component as:
122
+
123
+
```js
124
+
// this is the default colors being used in the package
0 commit comments