refactor(Switches): move to Switch component v2
This commit is contained in:
xidedix
+380
-269
@@ -1,291 +1,390 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="animated fadeIn">
|
<div class="animated fadeIn">
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col md="12">
|
<b-col xs="12" md="6">
|
||||||
<b-card header="3d Switch">
|
<b-card>
|
||||||
<c-switch type="3d" variant="primary" :checked="true"/>
|
<div slot="header">
|
||||||
|
Switch default
|
||||||
<c-switch type="3d" variant="secondary" :checked="true"/>
|
<b-badge variant="primary">{{checker}}</b-badge>
|
||||||
|
</div>
|
||||||
<c-switch type="3d" variant="success" :checked="true"/>
|
<c-switch class="mx-1" color="primary" checked name="switch1" v-model="checker" value="yes" uncheckedValue="no"/>
|
||||||
|
<c-switch class="mx-1" color="secondary" checked />
|
||||||
<c-switch type="3d" variant="warning" :checked="true"/>
|
<c-switch class="mx-1" color="success" checked />
|
||||||
|
<c-switch class="mx-1" color="warning" checked />
|
||||||
<c-switch type="3d" variant="info" :checked="true"/>
|
<c-switch class="mx-1" color="info" checked />
|
||||||
|
<c-switch class="mx-1" color="danger" checked />
|
||||||
<c-switch type="3d" variant="danger" :checked="true"/>
|
<c-switch class="mx-1" color="light" checked />
|
||||||
|
<c-switch class="mx-1" color="dark" checked />
|
||||||
|
<c-switch class="mx-1" color="primary" disabled />
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col md="6">
|
<b-col xs="12" md="6">
|
||||||
<b-card header="Switch default">
|
<b-card>
|
||||||
<c-switch type="default" variant="primary" :checked="true"/>
|
<div slot="header">
|
||||||
|
Switch pills
|
||||||
<c-switch type="default" variant="secondary" :checked="true"/>
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" checked variant="pill" />
|
||||||
<c-switch type="default" variant="success" :checked="true"/>
|
<c-switch class="mx-1" color="secondary" checked variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="success" checked variant="pill" />
|
||||||
<c-switch type="default" variant="warning" :checked="true"/>
|
<c-switch class="mx-1" color="warning" checked variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="info" checked variant="pill" />
|
||||||
<c-switch type="default" variant="info" :checked="true"/>
|
<c-switch class="mx-1" color="danger" checked variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="light" checked variant="pill" />
|
||||||
<c-switch type="default" variant="danger" :checked="true"/>
|
<c-switch class="mx-1" color="dark" checked variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="primary" disabled variant="pill" />
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col md="6">
|
<b-col xs="12" md="6">
|
||||||
<b-card header="Switch default - pills">
|
<b-card>
|
||||||
<c-switch type="default" variant="primary" :pill="true" :checked="true"/>
|
<div slot="header">
|
||||||
|
3d Switch
|
||||||
<c-switch type="default" variant="secondary" :pill="true" :checked="true"/>
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" checked variant="3d" />
|
||||||
<c-switch type="default" variant="success" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="secondary" checked variant="3d" />
|
||||||
|
<c-switch class="mx-1" color="success" checked variant="3d" />
|
||||||
<c-switch type="default" variant="warning" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="warning" checked variant="3d" />
|
||||||
|
<c-switch class="mx-1" color="info" checked variant="3d" />
|
||||||
<c-switch type="default" variant="info" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="danger" checked variant="3d" />
|
||||||
|
<c-switch class="mx-1" color="light" checked variant="3d" />
|
||||||
<c-switch type="default" variant="danger" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="dark" checked variant="3d" />
|
||||||
|
<c-switch class="mx-1" color="primary" disabled variant="3d" />
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col md="6">
|
<b-col xs="12" md="6">
|
||||||
<b-card header="Switch outline">
|
<b-card>
|
||||||
<c-switch type="default" variant="primary-outline" :checked="true"/>
|
<div slot="header">
|
||||||
|
3d Switch <small><code>disabled</code></small>
|
||||||
<c-switch type="default" variant="secondary-outline" :checked="true"/>
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" checked variant="3d" disabled />
|
||||||
<c-switch type="default" variant="success-outline" :checked="true"/>
|
<c-switch class="mx-1" color="secondary" checked variant="3d" disabled />
|
||||||
|
<c-switch class="mx-1" color="success" checked variant="3d" disabled />
|
||||||
<c-switch type="default" variant="warning-outline" :checked="true"/>
|
<c-switch class="mx-1" color="warning" checked variant="3d" disabled />
|
||||||
|
<c-switch class="mx-1" color="info" checked variant="3d" disabled />
|
||||||
<c-switch type="default" variant="info-outline" :checked="true"/>
|
<c-switch class="mx-1" color="danger" checked variant="3d" disabled />
|
||||||
|
<c-switch class="mx-1" color="light" checked variant="3d" disabled />
|
||||||
<c-switch type="default" variant="danger-outline" :checked="true"/>
|
<c-switch class="mx-1" color="dark" checked variant="3d" disabled />
|
||||||
|
<c-switch class="mx-1" color="primary" disabled variant="3d" />
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col md="6">
|
<b-col xs="12" md="6">
|
||||||
<b-card header="Switch outline - pills">
|
<b-card>
|
||||||
<c-switch type="default" variant="primary-outline" :pill="true" :checked="true"/>
|
<div slot="header">
|
||||||
|
3d Switch <small><code>outline="alt"</code></small>
|
||||||
<c-switch type="default" variant="secondary-outline" :pill="true" :checked="true"/>
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" checked variant="3d" outline="alt" />
|
||||||
<c-switch type="default" variant="success-outline" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="secondary" checked variant="3d" outline="alt" />
|
||||||
|
<c-switch class="mx-1" color="success" checked variant="3d" outline="alt" />
|
||||||
<c-switch type="default" variant="warning-outline" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="warning" checked variant="3d" outline="alt" />
|
||||||
|
<c-switch class="mx-1" color="info" checked variant="3d" outline="alt" />
|
||||||
<c-switch type="default" variant="info-outline" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="danger" checked variant="3d" outline="alt" />
|
||||||
|
<c-switch class="mx-1" color="light" checked variant="3d" outline="alt" />
|
||||||
<c-switch type="default" variant="danger-outline" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="dark" checked variant="3d" outline="alt" />
|
||||||
|
<c-switch class="mx-1" color="primary" disabled variant="3d" outline="alt" />
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col md="6">
|
<b-col xs="12" md="6">
|
||||||
<b-card header="Switch outline alternative">
|
<b-card>
|
||||||
<c-switch type="default" variant="primary-outline-alt" :checked="true"/>
|
<div slot="header">
|
||||||
|
3d Switch <small><code>label</code></small>
|
||||||
<c-switch type="default" variant="secondary-outline-alt" :checked="true"/>
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" defaultChecked variant="3d" label v-bind="labelIcon" />
|
||||||
<c-switch type="default" variant="success-outline-alt" :checked="true"/>
|
<c-switch class="mx-1" color="secondary" defaultChecked variant="3d" label v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="success" defaultChecked variant="3d" label v-bind="labelIcon" />
|
||||||
<c-switch type="default" variant="warning-outline-alt" :checked="true"/>
|
<c-switch class="mx-1" color="warning" defaultChecked variant="3d" label v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="info" defaultChecked variant="3d" label v-bind="labelIcon" />
|
||||||
<c-switch type="default" variant="info-outline-alt" :checked="true"/>
|
<c-switch class="mx-1" color="danger" defaultChecked variant="3d" label v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="light" defaultChecked variant="3d" label v-bind="labelIcon" />
|
||||||
<c-switch type="default" variant="danger-outline-alt" :checked="true"/>
|
<c-switch class="mx-1" color="dark" defaultChecked variant="3d" label v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="primary" disabled variant="3d" label v-bind="labelIcon" />
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col md="6">
|
<b-col xs="12" md="6">
|
||||||
<b-card header="Switch outline alternative - pills">
|
<b-card>
|
||||||
<c-switch type="default" variant="primary-outline-alt" :pill="true" :checked="true"/>
|
<div slot="header">
|
||||||
|
3d Switch <small><code>outline="alt" label</code></small>
|
||||||
<c-switch type="default" variant="secondary-outline-alt" :pill="true" :checked="true"/>
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
|
||||||
<c-switch type="default" variant="success-outline-alt" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="secondary" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="success" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
|
||||||
<c-switch type="default" variant="warning-outline-alt" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="warning" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="info" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
|
||||||
<c-switch type="default" variant="info-outline-alt" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="danger" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="light" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
|
||||||
<c-switch type="default" variant="danger-outline-alt" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="dark" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="primary" disabled variant="3d" outline="alt" label v-bind="labelIcon" />
|
||||||
|
</b-card>
|
||||||
|
</b-col>
|
||||||
|
<b-col xs="12" md="6">
|
||||||
|
<b-card>
|
||||||
|
<div slot="header">
|
||||||
|
3d Switch <small><code>outline="alt" label</code></small>
|
||||||
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" defaultChecked variant="3d" outline="alt" label />
|
||||||
|
<c-switch class="mx-1" color="secondary" defaultChecked variant="3d" outline="alt" label />
|
||||||
|
<c-switch class="mx-1" color="success" defaultChecked variant="3d" outline="alt" label />
|
||||||
|
<c-switch class="mx-1" color="warning" defaultChecked variant="3d" outline="alt" label />
|
||||||
|
<c-switch class="mx-1" color="info" defaultChecked variant="3d" outline="alt" label />
|
||||||
|
<c-switch class="mx-1" color="danger" defaultChecked variant="3d" outline="alt" label />
|
||||||
|
<c-switch class="mx-1" color="light" defaultChecked variant="3d" outline="alt" label />
|
||||||
|
<c-switch class="mx-1" color="dark" defaultChecked variant="3d" outline="alt" label />
|
||||||
|
<c-switch class="mx-1" color="primary" disabled variant="3d" outline="alt" label />
|
||||||
|
</b-card>
|
||||||
|
</b-col>
|
||||||
|
<b-col xs="12" md="6">
|
||||||
|
<b-card>
|
||||||
|
<div slot="header">
|
||||||
|
Switch <small><code>outline</code></small>
|
||||||
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" checked outline />
|
||||||
|
<c-switch class="mx-1" color="secondary" checked outline />
|
||||||
|
<c-switch class="mx-1" color="success" checked outline />
|
||||||
|
<c-switch class="mx-1" color="warning" checked outline />
|
||||||
|
<c-switch class="mx-1" color="info" checked outline />
|
||||||
|
<c-switch class="mx-1" color="danger" checked outline />
|
||||||
|
<c-switch class="mx-1" color="light" checked outline />
|
||||||
|
<c-switch class="mx-1" color="dark" checked outline />
|
||||||
|
<c-switch class="mx-1" color="primary" outline disabled />
|
||||||
|
</b-card>
|
||||||
|
</b-col>
|
||||||
|
<b-col xs="12" md="6">
|
||||||
|
<b-card>
|
||||||
|
<div slot="header">
|
||||||
|
Switch <small><code>outline variant="pill"</code></small>
|
||||||
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" checked outline variant="pill"/>
|
||||||
|
<c-switch class="mx-1" color="secondary" checked outline variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="success" checked outline variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="warning" checked outline variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="info" checked outline variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="danger" checked outline variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="light" checked outline variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="dark" checked outline variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="primary" outline variant="pill" disabled />
|
||||||
|
</b-card>
|
||||||
|
</b-col>
|
||||||
|
<b-col xs="12" md="6">
|
||||||
|
<b-card>
|
||||||
|
<div slot="header">
|
||||||
|
Switch <small><code>outline="alt"</code></small>
|
||||||
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" checked outline="alt" />
|
||||||
|
<c-switch class="mx-1" color="secondary" checked outline="alt" />
|
||||||
|
<c-switch class="mx-1" color="success" checked outline="alt" />
|
||||||
|
<c-switch class="mx-1" color="warning" checked outline="alt" />
|
||||||
|
<c-switch class="mx-1" color="info" checked outline="alt" />
|
||||||
|
<c-switch class="mx-1" color="danger" checked outline="alt" />
|
||||||
|
<c-switch class="mx-1" color="light" checked outline="alt" />
|
||||||
|
<c-switch class="mx-1" color="dark" checked outline="alt" />
|
||||||
|
<c-switch class="mx-1" color="primary" outline="alt" disabled />
|
||||||
|
</b-card>
|
||||||
|
</b-col>
|
||||||
|
<b-col xs="12" md="6">
|
||||||
|
<b-card>
|
||||||
|
<div slot="header">
|
||||||
|
Switch <small><code>outline="alt" variant="pill"</code></small>
|
||||||
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" checked outline="alt" variant="pill"/>
|
||||||
|
<c-switch class="mx-1" color="secondary" checked outline="alt" variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="success" checked outline="alt" variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="warning" checked outline="alt" variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="info" checked outline="alt" variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="danger" checked outline="alt" variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="light" checked outline="alt" variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="dark" checked outline="alt" variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="primary" outline="alt" variant="pill" disabled />
|
||||||
|
</b-card>
|
||||||
|
</b-col>
|
||||||
|
<b-col xs="12" md="6">
|
||||||
|
<b-card>
|
||||||
|
<div slot="header">
|
||||||
|
Switch <small><code>label</code></small>
|
||||||
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" checked label />
|
||||||
|
<c-switch class="mx-1" color="secondary" checked label />
|
||||||
|
<c-switch class="mx-1" color="success" checked label />
|
||||||
|
<c-switch class="mx-1" color="warning" checked label />
|
||||||
|
<c-switch class="mx-1" color="info" checked label />
|
||||||
|
<c-switch class="mx-1" color="danger" checked label />
|
||||||
|
<c-switch class="mx-1" color="light" checked label />
|
||||||
|
<c-switch class="mx-1" color="dark" checked label />
|
||||||
|
<c-switch class="mx-1" color="primary" label disabled />
|
||||||
|
</b-card>
|
||||||
|
</b-col>
|
||||||
|
<b-col xs="12" md="6">
|
||||||
|
<b-card>
|
||||||
|
<div slot="header">
|
||||||
|
Switch <small><code>label variant="pill"</code></small>
|
||||||
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" checked label variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="secondary" checked label variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="success" checked label variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="warning" checked label variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="info" checked label variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="danger" checked label variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="light" checked label variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="dark" checked label variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="primary" label variant="pill" disabled />
|
||||||
|
</b-card>
|
||||||
|
</b-col>
|
||||||
|
<b-col xs="12" md="6">
|
||||||
|
<b-card>
|
||||||
|
<div slot="header">
|
||||||
|
Switch <small><code>label outline</code></small>
|
||||||
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" checked label outline />
|
||||||
|
<c-switch class="mx-1" color="secondary" checked label outline />
|
||||||
|
<c-switch class="mx-1" color="success" checked label outline />
|
||||||
|
<c-switch class="mx-1" color="warning" checked label outline />
|
||||||
|
<c-switch class="mx-1" color="info" checked label outline />
|
||||||
|
<c-switch class="mx-1" color="danger" checked label outline />
|
||||||
|
<c-switch class="mx-1" color="light" checked label outline />
|
||||||
|
<c-switch class="mx-1" color="dark" checked label outline />
|
||||||
|
<c-switch class="mx-1" color="primary" label outline disabled />
|
||||||
|
</b-card>
|
||||||
|
</b-col>
|
||||||
|
<b-col xs="12" md="6">
|
||||||
|
<b-card>
|
||||||
|
<div slot="header">
|
||||||
|
Switch <small><code>label outline</code></small>
|
||||||
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" checked label outline variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="secondary" checked label outline variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="success" checked label outline variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="warning" checked label outline variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="info" checked label outline variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="danger" checked label outline variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="light" checked label outline variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="dark" checked label outline variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="primary" label outline variant="pill" disabled />
|
||||||
|
</b-card>
|
||||||
|
</b-col>
|
||||||
|
<b-col xs="12" md="6">
|
||||||
|
<b-card>
|
||||||
|
<div slot="header">
|
||||||
|
Switch <small><code>label outline</code></small>
|
||||||
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" checked label outline="alt" />
|
||||||
|
<c-switch class="mx-1" color="secondary" checked label outline="alt" />
|
||||||
|
<c-switch class="mx-1" color="success" checked label outline="alt" />
|
||||||
|
<c-switch class="mx-1" color="warning" checked label outline="alt" />
|
||||||
|
<c-switch class="mx-1" color="info" checked label outline="alt" />
|
||||||
|
<c-switch class="mx-1" color="danger" checked label outline="alt" />
|
||||||
|
<c-switch class="mx-1" color="light" checked label outline="alt" />
|
||||||
|
<c-switch class="mx-1" color="dark" checked label outline="alt" />
|
||||||
|
<c-switch class="mx-1" color="primary" label outline="alt" disabled />
|
||||||
|
</b-card>
|
||||||
|
</b-col>
|
||||||
|
<b-col xs="12" md="6">
|
||||||
|
<b-card>
|
||||||
|
<div slot="header">
|
||||||
|
Switch <small><code>label outline</code></small>
|
||||||
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" checked label outline="alt" variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="secondary" checked label outline="alt" variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="success" checked label outline="alt" variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="warning" checked label outline="alt" variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="info" checked label outline="alt" variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="danger" checked label outline="alt" variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="light" checked label outline="alt" variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="dark" checked label outline="alt" variant="pill" />
|
||||||
|
<c-switch class="mx-1" color="primary" label outline="alt" variant="pill" disabled />
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
|
|
||||||
<b-col md="6">
|
<b-col xs="12" md="6">
|
||||||
<b-card header="Switch with text">
|
<b-card>
|
||||||
<c-switch type="text" variant="primary" on="On" off="Off" :checked="true"/>
|
<div slot="header">
|
||||||
|
Switch <small><code>label</code></small>
|
||||||
<c-switch type="text" variant="secondary" on="On" off="Off" :checked="true"/>
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" checked label dataOn="yes" dataOff="no"/>
|
||||||
<c-switch type="text" variant="success" on="On" off="Off" :checked="true"/>
|
<c-switch class="mx-1" color="secondary" checked label v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="success" checked label v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="warning" on="On" off="Off" :checked="true"/>
|
<c-switch class="mx-1" color="warning" checked label v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="info" checked label v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="info" on="On" off="Off" :checked="true"/>
|
<c-switch class="mx-1" color="danger" checked label v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="light" checked label v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="danger" on="On" off="Off" :checked="true"/>
|
<c-switch class="mx-1" color="dark" checked label v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="primary" label disabled v-bind="labelIcon" />
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col md="6">
|
<b-col xs="12" md="6">
|
||||||
<b-card header="Switch with text - pills">
|
<b-card>
|
||||||
<c-switch type="text" variant="primary" on="On" off="Off" :pill="true" :checked="true"/>
|
<div slot="header">
|
||||||
|
Switch <small><code>label variant="pill"</code></small>
|
||||||
<c-switch type="text" variant="secondary" on="On" off="Off" :pill="true" :checked="true"/>
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" checked label variant="pill" v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="success" on="On" off="Off" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="secondary" checked label variant="pill" v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="success" checked label variant="pill" v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="warning" on="On" off="Off" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="warning" checked label variant="pill" v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="info" checked label variant="pill" v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="info" on="On" off="Off" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="danger" checked label variant="pill" v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="light" checked label variant="pill" v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="danger" on="On" off="Off" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="dark" checked label variant="pill" v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="primary" label variant="pill" disabled v-bind="labelIcon" />
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col md="6">
|
<b-col xs="12" md="6">
|
||||||
<b-card header="Switch with text outline">
|
<b-card>
|
||||||
<c-switch type="text" variant="primary-outline" on="On" off="Off" :checked="true"/>
|
<div slot="header">
|
||||||
|
Switch <small><code>label outline</code></small>
|
||||||
<c-switch type="text" variant="secondary-outline" on="On" off="Off" :checked="true"/>
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" checked label outline v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="success-outline" on="On" off="Off" :checked="true"/>
|
<c-switch class="mx-1" color="secondary" checked label outline v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="success" checked label outline v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="warning-outline" on="On" off="Off" :checked="true"/>
|
<c-switch class="mx-1" color="warning" checked label outline v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="info" checked label outline v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="info-outline" on="On" off="Off" :checked="true"/>
|
<c-switch class="mx-1" color="danger" checked label outline v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="light" checked label outline v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="danger-outline" on="On" off="Off" :checked="true"/>
|
<c-switch class="mx-1" color="dark" checked label outline v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="primary" label outline disabled v-bind="labelIcon" />
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col md="6">
|
<b-col xs="12" md="6">
|
||||||
<b-card header="Switch with text outline - pills">
|
<b-card>
|
||||||
<c-switch type="text" variant="primary-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
<div slot="header">
|
||||||
|
Switch <small><code>label outline</code></small>
|
||||||
<c-switch type="text" variant="secondary-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" checked label outline variant="pill" v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="success-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="secondary" checked label outline variant="pill" v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="success" checked label outline variant="pill" v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="warning-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="warning" checked label outline variant="pill" v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="info" checked label outline variant="pill" v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="info-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="danger" checked label outline variant="pill" v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="light" checked label outline variant="pill" v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="danger-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="dark" checked label outline variant="pill" v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="primary" label outline variant="pill" disabled v-bind="labelIcon" />
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col md="6">
|
<b-col xs="12" md="6">
|
||||||
<b-card header="Switch with text outline alternative">
|
<b-card>
|
||||||
<c-switch type="text" variant="primary-outline-alt" on="On" off="Off" :checked="true"/>
|
<div slot="header">
|
||||||
|
Switch <small><code>label outline</code></small>
|
||||||
<c-switch type="text" variant="secondary-outline-alt" on="On" off="Off" :checked="true"/>
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" checked label outline="alt" v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="success-outline-alt" on="On" off="Off" :checked="true"/>
|
<c-switch class="mx-1" color="secondary" checked label outline="alt" v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="success" checked label outline="alt" v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="warning-outline-alt" on="On" off="Off" :checked="true"/>
|
<c-switch class="mx-1" color="warning" checked label outline="alt" v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="info" checked label outline="alt" v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="info-outline-alt" on="On" off="Off" :checked="true"/>
|
<c-switch class="mx-1" color="danger" checked label outline="alt" v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="light" checked label outline="alt" v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="danger-outline-alt" on="On" off="Off" :checked="true"/>
|
<c-switch class="mx-1" color="dark" checked label outline="alt" v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="primary" label outline="alt" disabled v-bind="labelIcon" />
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col md="6">
|
<b-col xs="12" md="6">
|
||||||
<b-card header="Switch with text outline alternative - pills">
|
<b-card>
|
||||||
<c-switch type="text" variant="primary-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
<div slot="header">
|
||||||
|
Switch <small><code>label outline</code></small>
|
||||||
<c-switch type="text" variant="secondary-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
</div>
|
||||||
|
<c-switch class="mx-1" color="primary" checked label outline="alt" variant="pill" v-bind="labelTxt" />
|
||||||
<c-switch type="text" variant="success-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="secondary" checked label outline="alt" variant="pill" v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="success" checked label outline="alt" variant="pill" v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="warning-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="warning" checked label outline="alt" variant="pill" v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="info" checked label outline="alt" variant="pill" v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="info-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="danger" checked label outline="alt" variant="pill" v-bind="labelIcon" />
|
||||||
|
<c-switch class="mx-1" color="light" checked label outline="alt" variant="pill" v-bind="labelIcon" />
|
||||||
<c-switch type="text" variant="danger-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
<c-switch class="mx-1" color="dark" checked label outline="alt" variant="pill" v-bind="labelIcon" />
|
||||||
</b-card>
|
<c-switch class="mx-1" color="primary" label outline="alt" variant="pill" disabled v-bind="labelIcon" />
|
||||||
</b-col>
|
|
||||||
|
|
||||||
<b-col md="6">
|
|
||||||
<b-card header="Switch with icon">
|
|
||||||
<c-switch type="icon" variant="primary" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="secondary" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="success" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="warning" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="info" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="danger" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col md="6">
|
|
||||||
<b-card header="Switch with icon - pills">
|
|
||||||
<c-switch type="icon" variant="primary" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="secondary" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="success" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="warning" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="info" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="danger" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col md="6">
|
|
||||||
<b-card header="Switch with icon outline">
|
|
||||||
<c-switch type="icon" variant="primary-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="secondary-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="success-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="warning-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="info-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="danger-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col md="6">
|
|
||||||
<b-card header="Switch with icon outline - pills">
|
|
||||||
<c-switch type="icon" variant="primary-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="secondary-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="success-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="warning-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="info-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="danger-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col md="6">
|
|
||||||
<b-card header="Switch with icon outline alternative">
|
|
||||||
<c-switch type="icon" variant="primary-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="secondary-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="success-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="warning-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="info-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="danger-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
|
||||||
</b-card>
|
|
||||||
</b-col>
|
|
||||||
<b-col md="6">
|
|
||||||
<b-card header="Switch with icon outline alternative - pills">
|
|
||||||
<c-switch type="icon" variant="primary-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="secondary-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="success-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="warning-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="info-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
|
||||||
|
|
||||||
<c-switch type="icon" variant="danger-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
|
|
||||||
@@ -297,18 +396,21 @@
|
|||||||
<b-card-body class="p-0">
|
<b-card-body class="p-0">
|
||||||
<b-table hover striped responsive="sm" class="table-align-middle mb-0" :items="items" :fields="fields">
|
<b-table hover striped responsive="sm" class="table-align-middle mb-0" :items="items" :fields="fields">
|
||||||
<template slot="example" slot-scope="data">
|
<template slot="example" slot-scope="data">
|
||||||
<c-switch :type="data.value.type" :variant="data.value.variant" :size="data.value.size" :checked="data.value.checked"/>
|
<c-switch :variant="data.value.variant" :color="data.value.color" :size="data.value.size" :checked="data.value.checked"/>
|
||||||
|
</template>
|
||||||
|
<template slot="size_prop" slot-scope="data">
|
||||||
|
<span v-html="data.item.size_prop"></span>
|
||||||
</template>
|
</template>
|
||||||
</b-table>
|
</b-table>
|
||||||
</b-card-body>
|
</b-card-body>
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row><!--/.row-->
|
</b-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Switch as cSwitch } from '../../components'
|
import { Switch as cSwitch } from '@coreui/vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'switches',
|
name: 'switches',
|
||||||
@@ -325,14 +427,23 @@ export default {
|
|||||||
fields: [
|
fields: [
|
||||||
{key: 'size'},
|
{key: 'size'},
|
||||||
{key: 'example'},
|
{key: 'example'},
|
||||||
{key: 'css_class', label: 'CSS Class'}
|
{key: 'size_prop', label: 'Size prop'}
|
||||||
],
|
],
|
||||||
items: [
|
items: [
|
||||||
{size: 'Large', example: {type: '3d', variant: 'primary', size: 'lg', checked: true}, css_class: 'Add following code <code>size="lg"</code>'},
|
{size: 'Large', example: {variant: '3d', color: 'primary', size: 'lg', checked: true}, size_prop: 'Add following prop <code>size="lg"</code>'},
|
||||||
{size: 'Normal', example: {type: '3d', variant: 'primary', size: '', checked: true}, css_class: '-'},
|
{size: 'Normal', example: {variant: '3d', color: 'primary', size: '', checked: true}, size_prop: '-'},
|
||||||
{size: 'Small', example: {type: '3d', variant: 'primary', size: 'sm', checked: true}, css_class: 'Add following code <code>size="sm"</code>'},
|
{size: 'Small', example: {variant: '3d', color: 'primary', size: 'sm', checked: true}, size_prop: 'Add following prop <code>size="sm"</code>'}
|
||||||
{size: 'Extra small', example: {type: '3d', variant: 'primary', size: 'xs', checked: true}, css_class: 'Add following code <code>size="xs"</code>'}
|
],
|
||||||
]
|
checker: 'yes',
|
||||||
|
picker: '',
|
||||||
|
labelIcon: {
|
||||||
|
dataOn: '\u2713',
|
||||||
|
dataOff: '\u2715'
|
||||||
|
},
|
||||||
|
labelTxt: {
|
||||||
|
dataOn: 'yes',
|
||||||
|
dataOff: 'no'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user