P
CUI v1.20.1177
Documentation and examples in using Progress with PCUI
<link href="~/PCUIAssets/PCUI/Elements/Progress/css/Progress.min.css" rel="stylesheet" />
<script src="~/PCUIAssets/PCUI/Elements/Progress/js/Progress.js"></script>
<pcui-progress :progress-data="progress">
</pcui-progress>
var progressDOM = new Vue({
el: '#progress',
data: function () {
return {
progress: [
{
mainText: 'Info',
theme: 'progress--info',
tooltip: 'HTML Tooltip'
},
{
mainText: 'warning',
theme: 'progress--warning',
tooltip: 'HTML Tooltip'
},
{
mainText: 'success',
theme: 'progress--success',
tooltip: 'HTML Tooltip'
},
{
mainText: 'danger',
theme: 'progress--danger',
tooltip: 'HTML Tooltip'
},
{
mainText: 'default',
theme: 'progress--default',
tooltip: 'HTML Tooltip'
}
]
};
},
components: {
pcui_progress: PCUIProgressElement
}
});
<pcui-progress :progress-data="progress1"
progress-size="progress--medium">
</pcui-progress>
var progressDOM = new Vue({
el: '#progress',
data: function () {
return {
progress1: [
{
mainText: 'Info',
theme: 'progress--info',
tooltip: 'HTML Tooltip'
},
{
mainText: 'Info',
theme: 'progress--info',
tooltip: 'HTML Tooltip'
},
{
mainText: 'default',
theme: 'progress--default',
tooltip: 'HTML Tooltip'
},
{
mainText: 'default',
theme: 'progress--default',
tooltip: 'HTML Tooltip'
},
{
mainText: 'default',
theme: 'progress--default',
tooltip: 'HTML Tooltip'
}
]
};
},
components: {
pcui_progress: PCUIProgressElement
}
});
<pcui-progress :progress-data="progress"
progress-size="progress--large">
</pcui-progress>
var progressDOM = new Vue({
el: '#progress',
data: function () {
return {
progress: [
{
mainText: 'Info',
theme: 'progress--info',
tooltip: 'HTML Tooltip'
},
{
mainText: 'warning',
theme: 'progress--warning',
tooltip: 'HTML Tooltip'
},
{
mainText: 'success',
theme: 'progress--success',
tooltip: 'HTML Tooltip'
},
{
mainText: 'danger',
theme: 'progress--danger',
tooltip: 'HTML Tooltip'
},
{
mainText: 'default',
theme: 'progress--default',
tooltip: 'HTML Tooltip'
}
]
};
},
components: {
pcui_progress: PCUIProgressElement
}
});