refactor: refactoring template
This commit is contained in:
woothu
+275
-227
@@ -1,5 +1,36 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<!-- <p>myFlag1: {{radio}}</p>
|
||||
<p>myFlag1: {{myFlag1}}</p>
|
||||
<p>myFlag2: {{myFlag2}}</p>
|
||||
<CSwitch v-model="myFlag1"/>
|
||||
<CSwitch v-model="myFlag2" checked @change="test" /> -->
|
||||
<b-row>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<h5>
|
||||
Radio switches
|
||||
<b-badge :variant="radio" class="mr-auto">{{radio}}</b-badge>
|
||||
<b-badge variant="danger" class="float-right">NEW</b-badge>
|
||||
</h5>
|
||||
</div>
|
||||
<CSwitch class="mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" v-model="radio" trueValue="primary"/>
|
||||
<CSwitch class="mx-1"
|
||||
:key="key"
|
||||
:variant="variant"
|
||||
shape="3d"
|
||||
outline="alt"
|
||||
v-bind="labelIcon"
|
||||
type="radio"
|
||||
name="radio"
|
||||
v-model="radio"
|
||||
:trueValue="variant"
|
||||
v-for="(variant, key) in ['secondary','warning','success','info','danger','light','dark']"
|
||||
/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
@@ -7,15 +38,22 @@
|
||||
Switch default
|
||||
<b-badge variant="primary">{{checker}}</b-badge>
|
||||
</div>
|
||||
<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 class="mx-1" color="success" checked />
|
||||
<c-switch class="mx-1" color="warning" checked />
|
||||
<c-switch class="mx-1" color="info" checked />
|
||||
<c-switch class="mx-1" color="danger" checked />
|
||||
<c-switch class="mx-1" color="light" checked />
|
||||
<c-switch class="mx-1" color="dark" checked />
|
||||
<c-switch class="mx-1" color="primary" disabled />
|
||||
<CSwitch class="mx-1"
|
||||
variant="primary"
|
||||
checked
|
||||
name="switch1"
|
||||
v-model="checker"
|
||||
value="someValue"
|
||||
trueValue="yes"
|
||||
falseValue="no"
|
||||
/>
|
||||
<CSwitch class="mx-1"
|
||||
:variant="variant"
|
||||
checked
|
||||
:key="key"
|
||||
v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark','primary']"
|
||||
/>
|
||||
<CSwitch class="mx-1" variant="primary" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -23,15 +61,15 @@
|
||||
<div slot="header">
|
||||
Switch pills
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked variant="pill" />
|
||||
<c-switch class="mx-1" color="secondary" checked variant="pill" />
|
||||
<c-switch class="mx-1" color="success" checked variant="pill" />
|
||||
<c-switch class="mx-1" color="warning" checked variant="pill" />
|
||||
<c-switch class="mx-1" color="info" checked variant="pill" />
|
||||
<c-switch class="mx-1" color="danger" checked variant="pill" />
|
||||
<c-switch class="mx-1" color="light" checked variant="pill" />
|
||||
<c-switch class="mx-1" color="dark" checked variant="pill" />
|
||||
<c-switch class="mx-1" color="primary" disabled variant="pill" />
|
||||
<c-switch class="mx-1" variant="primary" checked shape="pill"/>
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="pill" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -39,15 +77,15 @@
|
||||
<div slot="header">
|
||||
3d Switch
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked variant="3d" />
|
||||
<c-switch class="mx-1" color="secondary" checked variant="3d" />
|
||||
<c-switch class="mx-1" color="success" checked variant="3d" />
|
||||
<c-switch class="mx-1" color="warning" checked variant="3d" />
|
||||
<c-switch class="mx-1" color="info" checked variant="3d" />
|
||||
<c-switch class="mx-1" color="danger" checked variant="3d" />
|
||||
<c-switch class="mx-1" color="light" checked variant="3d" />
|
||||
<c-switch class="mx-1" color="dark" checked variant="3d" />
|
||||
<c-switch class="mx-1" color="primary" disabled variant="3d" />
|
||||
<c-switch class="mx-1" variant="primary" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -55,15 +93,15 @@
|
||||
<div slot="header">
|
||||
3d Switch <small><code>disabled</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked variant="3d" disabled />
|
||||
<c-switch class="mx-1" color="secondary" checked variant="3d" disabled />
|
||||
<c-switch class="mx-1" color="success" checked variant="3d" disabled />
|
||||
<c-switch class="mx-1" color="warning" checked variant="3d" disabled />
|
||||
<c-switch class="mx-1" color="info" checked variant="3d" disabled />
|
||||
<c-switch class="mx-1" color="danger" checked variant="3d" disabled />
|
||||
<c-switch class="mx-1" color="light" checked variant="3d" disabled />
|
||||
<c-switch class="mx-1" color="dark" checked variant="3d" disabled />
|
||||
<c-switch class="mx-1" color="primary" disabled variant="3d" />
|
||||
<c-switch class="mx-1" variant="primary" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -71,15 +109,15 @@
|
||||
<div slot="header">
|
||||
3d Switch <small><code>outline="alt"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked variant="3d" outline="alt" />
|
||||
<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 class="mx-1" color="warning" checked variant="3d" outline="alt" />
|
||||
<c-switch class="mx-1" color="info" checked variant="3d" outline="alt" />
|
||||
<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 class="mx-1" color="dark" checked variant="3d" outline="alt" />
|
||||
<c-switch class="mx-1" color="primary" disabled variant="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -87,47 +125,47 @@
|
||||
<div slot="header">
|
||||
3d Switch <small><code>label</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" defaultChecked variant="3d" label v-bind="labelIcon" />
|
||||
<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 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 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 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" />
|
||||
<c-switch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" 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>
|
||||
3d Switch <small><code>outline="alt"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" defaultChecked variant="3d" outline="alt" label v-bind="labelIcon" />
|
||||
<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 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 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 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" />
|
||||
<c-switch class="mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" outline="alt" 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>
|
||||
3d Switch <small><code>outline="alt"</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 />
|
||||
<c-switch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -135,31 +173,31 @@
|
||||
<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 />
|
||||
<c-switch class="mx-1" variant="primary" checked outline />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline />
|
||||
<c-switch class="mx-1" variant="success" checked outline />
|
||||
<c-switch class="mx-1" variant="warning" checked outline />
|
||||
<c-switch class="mx-1" variant="info" checked outline />
|
||||
<c-switch class="mx-1" variant="danger" checked outline />
|
||||
<c-switch class="mx-1" variant="light" checked outline />
|
||||
<c-switch class="mx-1" variant="dark" checked outline />
|
||||
<c-switch class="mx-1" variant="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>
|
||||
Switch <small><code>outline shape="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 />
|
||||
<c-switch class="mx-1" variant="primary" checked outline shape="pill"/>
|
||||
<c-switch class="mx-1" variant="secondary" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" outline shape="pill" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -167,31 +205,31 @@
|
||||
<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 />
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="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>
|
||||
Switch <small><code>outline="alt" shape="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 />
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -199,31 +237,31 @@
|
||||
<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 />
|
||||
<c-switch class="mx-1" variant="primary" checked />
|
||||
<c-switch class="mx-1" variant="secondary" checked />
|
||||
<c-switch class="mx-1" variant="success" checked />
|
||||
<c-switch class="mx-1" variant="warning" checked />
|
||||
<c-switch class="mx-1" variant="info" checked />
|
||||
<c-switch class="mx-1" variant="danger" checked />
|
||||
<c-switch class="mx-1" variant="light" checked />
|
||||
<c-switch class="mx-1" variant="dark" checked />
|
||||
<c-switch class="mx-1" variant="primary" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Switch <small><code>label variant="pill"</code></small>
|
||||
Switch <small><code>label shape="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 />
|
||||
<c-switch class="mx-1" variant="primary" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" shape="pill" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -231,15 +269,15 @@
|
||||
<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 />
|
||||
<c-switch class="mx-1" variant="primary" checked outline />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline />
|
||||
<c-switch class="mx-1" variant="success" checked outline />
|
||||
<c-switch class="mx-1" variant="warning" checked outline />
|
||||
<c-switch class="mx-1" variant="info" checked outline />
|
||||
<c-switch class="mx-1" variant="danger" checked outline />
|
||||
<c-switch class="mx-1" variant="light" checked outline />
|
||||
<c-switch class="mx-1" variant="dark" checked outline />
|
||||
<c-switch class="mx-1" variant="primary" outline disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -247,15 +285,15 @@
|
||||
<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 />
|
||||
<c-switch class="mx-1" variant="primary" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" outline shape="pill" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -263,15 +301,15 @@
|
||||
<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 />
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -279,15 +317,15 @@
|
||||
<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 />
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
||||
@@ -296,31 +334,31 @@
|
||||
<div slot="header">
|
||||
Switch <small><code>label</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked label dataOn="yes" dataOff="no"/>
|
||||
<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 class="mx-1" color="warning" checked label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="info" checked label v-bind="labelIcon" />
|
||||
<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 class="mx-1" color="dark" checked label v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="primary" label disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
<c-switch class="mx-1" variant="primary" checked dataOn="" dataOff=""/>
|
||||
<c-switch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
|
||||
</b-card>shape
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Switch <small><code>label variant="pill"</code></small>
|
||||
Switch <small><code>label shape="pill"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked label variant="pill" v-bind="labelIcon" />
|
||||
<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 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 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 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" />
|
||||
<c-switch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -328,15 +366,15 @@
|
||||
<div slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked label outline v-bind="labelIcon" />
|
||||
<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 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 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 class="mx-1" color="dark" checked label outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="primary" label outline disabled v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -344,15 +382,15 @@
|
||||
<div slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked label outline variant="pill" v-bind="labelIcon" />
|
||||
<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 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 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 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" />
|
||||
<c-switch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -360,15 +398,15 @@
|
||||
<div slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked label outline="alt" v-bind="labelIcon" />
|
||||
<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 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 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 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" />
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
@@ -376,15 +414,15 @@
|
||||
<div slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" color="primary" checked label outline="alt" variant="pill" v-bind="labelTxt" />
|
||||
<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 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 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 class="mx-1" color="dark" checked label outline="alt" variant="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" color="primary" label outline="alt" variant="pill" disabled v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
||||
@@ -410,18 +448,18 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Switch as cSwitch } from '@coreui/vue'
|
||||
// import CSwitch from './CSwitch'
|
||||
|
||||
export default {
|
||||
name: 'switches',
|
||||
components: {
|
||||
cSwitch
|
||||
},
|
||||
computed: {
|
||||
icon (icon) {
|
||||
return icon
|
||||
}
|
||||
},
|
||||
// components: {
|
||||
// CSwitch
|
||||
// },
|
||||
data: () => {
|
||||
return {
|
||||
fields: [
|
||||
@@ -435,6 +473,9 @@ export default {
|
||||
{size: 'Small', example: {variant: '3d', color: 'primary', size: 'sm', checked: true}, size_prop: 'Add following prop <code>size="sm"</code>'}
|
||||
],
|
||||
checker: 'yes',
|
||||
radio: 'primary',
|
||||
myFlag1: true,
|
||||
myFlag2: false,
|
||||
picker: '',
|
||||
labelIcon: {
|
||||
dataOn: '\u2713',
|
||||
@@ -445,6 +486,13 @@ export default {
|
||||
dataOff: 'no'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
test (a, event) {
|
||||
console.log(a)
|
||||
console.log(typeof a)
|
||||
console.log(event)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user