P
CUI v1.20.1177
Documentation and examples in using Radio button Sliders with PCUI
<link href="~/PCUIAssets/PCUI/Elements/RadioSliders/css/RadioSliders.min.css" rel="stylesheet" />
<script src="~/PCUIAssets/PCUI/Elements/RadioSliders/js/RadioSliders.js"></script>
<div id="radio-sliders">
<pcui_radio_slider v-bind:pills="allEnabledPills">
</pcui_radio_slider>
</div>
var radioSliders = new Vue({
el: '#radio-sliders',
data: {
allEnabledPills: [
{
id: '1',
text: 'Info style',
class: 'info'
},
{
id: '2',
text: 'Success style',
class: 'success'
},
{
id: '3',
text: 'Progressing style',
class: 'warning'
},
{
id: '4',
text: 'Danger style',
class: 'danger'
}
]
},
components: {
pcui_radio_slider: PCUIRadioSliderComponent
}
});
<div id="radio-sliders">
<pcui_radio_slider v-bind:pills="allDisabledPills">
</pcui_radio_slider>
</div>
var radioSliders = new Vue({
el: '#radio-sliders',
data: {
allDisabledPills: [
{
id: '1',
text: 'Info style',
class: 'info',
disabled: true
},
{
id: '2',
text: 'Success style',
class: 'success',
disabled: true
},
{
id: '3',
text: 'Progressing style',
class: 'warning',
disabled: true
},
{
id: '4',
text: 'Danger style',
class: 'danger',
disabled: true
}
]
},
components: {
pcui_radio_slider: PCUIRadioSliderComponent
}
});
<div id="radio-sliders">
<pcui_radio_slider v-bind:pills="someDisabledPills">
</pcui_radio_slider>
</div>
var radioSliders = new Vue({
el: '#radio-sliders',
data: {
someDisabledPills: [
{
id: '1',
text: 'Info style',
class: 'info'
},
{
id: '2',
text: 'Success style',
class: 'success',
disabled: true
},
{
id: '3',
text: 'Progressing style',
class: 'warning'
},
{
id: '4',
text: 'Danger style',
class: 'danger',
disabled: true
}
]
},
components: {
pcui_radio_slider: PCUIRadioSliderComponent
}
});
<div id="radio-sliders">
<pcui_radio_slider v-bind:pills="allDisabledPillsInfoSelected">
</pcui_radio_slider>
</div>
var radioSliders = new Vue({
el: '#radio-sliders',
data: {
allDisabledPillsInfoSelected: [
{
id: '1',
text: 'Info style',
class: 'info',
disabled: true,
checked: true
},
{
id: '2',
text: 'Success style',
class: 'success',
disabled: true
},
{
id: '3',
text: 'Progressing style',
class: 'warning',
disabled: true
},
{
id: '4',
text: 'Danger style',
class: 'danger',
disabled: true
}
]
},
components: {
pcui_radio_slider: PCUIRadioSliderComponent
}
});
<div id="radio-sliders">
<pcui_radio_slider v-bind:pills="allDisabledPillsSuccessSelected">
</pcui_radio_slider>
</div>
var radioSliders = new Vue({
el: '#radio-sliders',
data: {
allDisabledPillsSuccessSelected: [
{
id: '1',
text: 'Info style',
class: 'info',
disabled: true
},
{
id: '2',
text: 'Success style',
class: 'success',
disabled: true,
checked: true
},
{
id: '3',
text: 'Progressing style',
class: 'warning',
disabled: true
},
{
id: '4',
text: 'Danger style',
class: 'danger',
disabled: true
}
]
},
components: {
pcui_radio_slider: PCUIRadioSliderComponent
}
});
<div id="radio-sliders">
<pcui_radio_slider v-bind:pills="allDisabledPillsProgressingSelected">
</pcui_radio_slider>
</div>
var radioSliders = new Vue({
el: '#radio-sliders',
data: {
allDisabledPillsProgressingSelected: [
{
id: '1',
text: 'Info style',
class: 'info',
disabled: true
},
{
id: '2',
text: 'Success style',
class: 'success',
disabled: true
},
{
id: '3',
text: 'Progressing style',
class: 'warning',
disabled: true,
checked: true
},
{
id: '4',
text: 'Danger style',
class: 'danger',
disabled: true
}
]
},
components: {
pcui_radio_slider: PCUIRadioSliderComponent
}
});
<div id="radio-sliders">
<pcui_radio_slider v-bind:pills="allDisabledPillsDangerSelected">
</pcui_radio_slider>
</div>
var radioSliders = new Vue({
el: '#radio-sliders',
data: {
allDisabledPillsDangerSelected: [
{
id: '1',
text: 'Info style',
class: 'info',
disabled: true
},
{
id: '2',
text: 'Success style',
class: 'success',
disabled: true
},
{
id: '3',
text: 'Progressing style',
class: 'warning',
disabled: true
},
{
id: '4',
text: 'Danger style',
class: 'danger',
disabled: true,
checked: true
}
]
},
components: {
pcui_radio_slider: PCUIRadioSliderComponent
}
});
<div id="radio-sliders">
<pcui_radio_slider v-bind:pills="onOrOffPills">
</pcui_radio_slider>
<pcui_radio_slider v-bind:pills="allDisabledOnOrOffPills">
</pcui_radio_slider>
<pcui_radio_slider v-bind:pills="allDisabledOnOrOffPillsOnSelected">
</pcui_radio_slider>
<pcui_radio_slider v-bind:pills="allDisabledOnOrOffPillsOffSelected">
</pcui_radio_slider>
</div>
var radioSliders = new Vue({
el: '#radio-sliders',
data: {
onOrOffPills: [
{
id: '1',
text: 'ON',
class: 'info'
},
{
id: '2',
text: 'OFF',
class: 'info'
}
],
allDisabledOnOrOffPills: [
{
id: '1',
text: 'ON',
class: 'info',
disabled: true
},
{
id: '2',
text: 'OFF',
class: 'info',
disabled: true
}
],
allDisabledOnOrOffPillsOnSelected: [
{
id: '1',
text: 'ON',
class: 'info',
disabled: true,
checked: true
},
{
id: '2',
text: 'OFF',
class: 'info',
disabled: true
}
],
allDisabledOnOrOffPillsOffSelected: [
{
id: '1',
text: 'ON',
class: 'info',
disabled: true
},
{
id: '2',
text: 'OFF',
class: 'info',
disabled: true,
checked: true
}
]
},
components: {
pcui_radio_slider: PCUIRadioSliderComponent
}
});
<div id="radio-sliders">
<pcui_radio_slider v-bind:pills="activeOrInactivePills">
</pcui_radio_slider>
<pcui_radio_slider v-bind:pills="allDisabledActiveOrInactivePills">
</pcui_radio_slider>
<pcui_radio_slider v-bind:pills="allDisabledActiveOrInactivePillsActiveSelected">
</pcui_radio_slider>
<pcui_radio_slider v-bind:pills="allDisabledActiveOrInactivePillsInactiveSelected">
</pcui_radio_slider>
</div>
var radioSliders = new Vue({
el: '#radio-sliders',
data: {
activeOrInactivePills: [
{
id: '1',
text: 'ACTIVE',
class: 'info'
},
{
id: '2',
text: 'INACTIVE',
class: 'info'
}
],
allDisabledActiveOrInactivePills: [
{
id: '1',
text: 'ACTIVE',
class: 'info',
disabled: true
},
{
id: '2',
text: 'INACTIVE',
class: 'info',
disabled: true
}
],
allDisabledActiveOrInactivePillsActiveSelected: [
{
id: '1',
text: 'ACTIVE',
class: 'info',
disabled: true,
checked: true
},
{
id: '2',
text: 'INACTIVE',
class: 'info',
disabled: true
}
],
allDisabledActiveOrInactivePillsInactiveSelected: [
{
id: '1',
text: 'ACTIVE',
class: 'info',
disabled: true
},
{
id: '2',
text: 'INACTIVE',
class: 'info',
disabled: true,
checked: true
}
]
},
components: {
pcui_radio_slider: PCUIRadioSliderComponent
}
});
<div id="radio-sliders">
<pcui_radio_slider v-bind:pills="yesOrNoPills">
</pcui_radio_slider>
<pcui_radio_slider v-bind:pills="allDisabledYesOrNoPills">
</pcui_radio_slider>
<pcui_radio_slider v-bind:pills="allDisabledYesOrNoPillsYesSelected">
</pcui_radio_slider>
<pcui_radio_slider v-bind:pills="allDisabledYesOrNoPillsNoSelected">
</pcui_radio_slider>
</div>
var radioSliders = new Vue({
el: '#radio-sliders',
data: {
yesOrNoPills: [
{
id: '1',
text: 'YES',
class: 'info'
},
{
id: '2',
text: 'NO',
class: 'info'
}
],
allDisabledYesOrNoPills: [
{
id: '1',
text: 'YES',
class: 'info',
disabled: true
},
{
id: '2',
text: 'NO',
class: 'info',
disabled: true
}
],
allDisabledYesOrNoPillsYesSelected: [
{
id: '1',
text: 'YES',
class: 'info',
disabled: true,
checked: true
},
{
id: '2',
text: 'NO',
class: 'info',
disabled: true
}
],
allDisabledYesOrNoPillsNoSelected: [
{
id: '1',
text: 'YES',
class: 'info',
disabled: true
},
{
id: '2',
text: 'NO',
class: 'info',
disabled: true,
checked: true
}
]
},
components: {
pcui_radio_slider: PCUIRadioSliderComponent
}
});