refactor: template changes to implement new CCard syntax

This commit is contained in:
woothu
2019-03-05 11:19:23 +01:00
parent 7e3646e438
commit 403122ddfb
36 changed files with 2725 additions and 2895 deletions
+323 -303
View File
@@ -1,445 +1,490 @@
<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" /> -->
<CRow>
<CCol xs="12" md="6">
<CCard v-if="true">
<CCardHeader slot="header">
<CCardHeader>
<h5>
Radio switches
<CBadge :variant="radio" class="mr-auto">{{radio}}</CBadge>
<CBadge variant="danger" class="float-right">NEW</CBadge>
</h5>
</CCardHeader>
<!-- <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"
:value="variant"
v-for="(variant, key) in ['primary','secondary','warning','success','info','danger','light','dark']"
/>
<CCardBody>
<!-- <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"
:value="variant"
v-for="(variant, key) in ['primary','secondary','warning','success','info','danger','light','dark']"
/>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch default
<CBadge variant="primary">{{checker}}</CBadge>
</CCardHeader>
<CSwitch class="mx-1"
variant="primary"
checked
name="switch1"
v-model="checker"
value="someValue"
trueValue="yes"
falseValue="no"
/>
<CSwitch class="mx-1"
ref="totest"
variant="primary"
checked
name="switch1"
:checked="true"
value="someValue"
/>
<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 />
<CCardBody>
<CSwitch class="mx-1"
variant="primary"
checked
name="switch1"
v-model="checker"
value="someValue"
trueValue="yes"
falseValue="no"
/>
<CSwitch class="mx-1"
variant="primary"
checked
name="switch1"
:checked="true"
value="someValue"
/>
<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 />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch pills
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked shape="pill"/>
<CSwitch class="mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="mx-1" variant="success" checked shape="pill" />
<CSwitch class="mx-1" variant="warning" checked shape="pill" />
<CSwitch class="mx-1" variant="info" checked shape="pill" />
<CSwitch class="mx-1" variant="danger" checked shape="pill" />
<CSwitch class="mx-1" variant="light" checked shape="pill" />
<CSwitch class="mx-1" variant="dark" checked shape="pill" />
<CSwitch class="mx-1" variant="primary" disabled shape="pill" />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="pill"/>
<CSwitch class="mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="mx-1" variant="success" checked shape="pill" />
<CSwitch class="mx-1" variant="warning" checked shape="pill" />
<CSwitch class="mx-1" variant="info" checked shape="pill" />
<CSwitch class="mx-1" variant="danger" checked shape="pill" />
<CSwitch class="mx-1" variant="light" checked shape="pill" />
<CSwitch class="mx-1" variant="dark" checked shape="pill" />
<CSwitch class="mx-1" variant="primary" disabled shape="pill" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
3d Switch
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked shape="3d" />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" />
<CSwitch class="mx-1" variant="success" checked shape="3d" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" />
<CSwitch class="mx-1" variant="info" checked shape="3d" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" />
<CSwitch class="mx-1" variant="light" checked shape="3d" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="3d" />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" />
<CSwitch class="mx-1" variant="success" checked shape="3d" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" />
<CSwitch class="mx-1" variant="info" checked shape="3d" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" />
<CSwitch class="mx-1" variant="light" checked shape="3d" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
3d Switch <small><code>disabled</code></small>
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="success" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="warning" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="info" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="danger" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="light" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="dark" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="success" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="warning" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="info" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="danger" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="light" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="dark" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
3d Switch <small><code>label</code></small>
</CCardHeader>
<CSwitch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
<CSwitch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
<CCardBody>
<CSwitch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
<CSwitch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>outline</code></small>
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline />
<CSwitch class="mx-1" variant="secondary" checked outline />
<CSwitch class="mx-1" variant="success" checked outline />
<CSwitch class="mx-1" variant="warning" checked outline />
<CSwitch class="mx-1" variant="info" checked outline />
<CSwitch class="mx-1" variant="danger" checked outline />
<CSwitch class="mx-1" variant="light" checked outline />
<CSwitch class="mx-1" variant="dark" checked outline />
<CSwitch class="mx-1" variant="primary" outline disabled />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline />
<CSwitch class="mx-1" variant="secondary" checked outline />
<CSwitch class="mx-1" variant="success" checked outline />
<CSwitch class="mx-1" variant="warning" checked outline />
<CSwitch class="mx-1" variant="info" checked outline />
<CSwitch class="mx-1" variant="danger" checked outline />
<CSwitch class="mx-1" variant="light" checked outline />
<CSwitch class="mx-1" variant="dark" checked outline />
<CSwitch class="mx-1" variant="primary" outline disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>outline shape="pill"</code></small>
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline shape="pill"/>
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline shape="pill" />
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
<CSwitch class="mx-1" variant="info" checked outline shape="pill" />
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
<CSwitch class="mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline shape="pill"/>
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline shape="pill" />
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
<CSwitch class="mx-1" variant="info" checked outline shape="pill" />
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
<CSwitch class="mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline="alt" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" />
<CSwitch class="mx-1" variant="success" checked outline="alt" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" />
<CSwitch class="mx-1" variant="info" checked outline="alt" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" />
<CSwitch class="mx-1" variant="light" checked outline="alt" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" />
<CSwitch class="mx-1" variant="primary" outline="alt" disabled />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline="alt" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" />
<CSwitch class="mx-1" variant="success" checked outline="alt" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" />
<CSwitch class="mx-1" variant="info" checked outline="alt" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" />
<CSwitch class="mx-1" variant="light" checked outline="alt" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" />
<CSwitch class="mx-1" variant="primary" outline="alt" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>outline="alt" shape="pill"</code></small>
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label</code></small>
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked />
<CSwitch class="mx-1" variant="secondary" checked />
<CSwitch class="mx-1" variant="success" checked />
<CSwitch class="mx-1" variant="warning" checked />
<CSwitch class="mx-1" variant="info" checked />
<CSwitch class="mx-1" variant="danger" checked />
<CSwitch class="mx-1" variant="light" checked />
<CSwitch class="mx-1" variant="dark" checked />
<CSwitch class="mx-1" variant="primary" disabled />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked />
<CSwitch class="mx-1" variant="secondary" checked />
<CSwitch class="mx-1" variant="success" checked />
<CSwitch class="mx-1" variant="warning" checked />
<CSwitch class="mx-1" variant="info" checked />
<CSwitch class="mx-1" variant="danger" checked />
<CSwitch class="mx-1" variant="light" checked />
<CSwitch class="mx-1" variant="dark" checked />
<CSwitch class="mx-1" variant="primary" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label shape="pill"</code></small>
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked shape="pill" />
<CSwitch class="mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="mx-1" variant="success" checked shape="pill" />
<CSwitch class="mx-1" variant="warning" checked shape="pill" />
<CSwitch class="mx-1" variant="info" checked shape="pill" />
<CSwitch class="mx-1" variant="danger" checked shape="pill" />
<CSwitch class="mx-1" variant="light" checked shape="pill" />
<CSwitch class="mx-1" variant="dark" checked shape="pill" />
<CSwitch class="mx-1" variant="primary" shape="pill" disabled />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="pill" />
<CSwitch class="mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="mx-1" variant="success" checked shape="pill" />
<CSwitch class="mx-1" variant="warning" checked shape="pill" />
<CSwitch class="mx-1" variant="info" checked shape="pill" />
<CSwitch class="mx-1" variant="danger" checked shape="pill" />
<CSwitch class="mx-1" variant="light" checked shape="pill" />
<CSwitch class="mx-1" variant="dark" checked shape="pill" />
<CSwitch class="mx-1" variant="primary" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline />
<CSwitch class="mx-1" variant="secondary" checked outline />
<CSwitch class="mx-1" variant="success" checked outline />
<CSwitch class="mx-1" variant="warning" checked outline />
<CSwitch class="mx-1" variant="info" checked outline />
<CSwitch class="mx-1" variant="danger" checked outline />
<CSwitch class="mx-1" variant="light" checked outline />
<CSwitch class="mx-1" variant="dark" checked outline />
<CSwitch class="mx-1" variant="primary" outline disabled />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline />
<CSwitch class="mx-1" variant="secondary" checked outline />
<CSwitch class="mx-1" variant="success" checked outline />
<CSwitch class="mx-1" variant="warning" checked outline />
<CSwitch class="mx-1" variant="info" checked outline />
<CSwitch class="mx-1" variant="danger" checked outline />
<CSwitch class="mx-1" variant="light" checked outline />
<CSwitch class="mx-1" variant="dark" checked outline />
<CSwitch class="mx-1" variant="primary" outline disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline shape="pill" />
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline shape="pill" />
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
<CSwitch class="mx-1" variant="info" checked outline shape="pill" />
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
<CSwitch class="mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline shape="pill" />
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline shape="pill" />
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
<CSwitch class="mx-1" variant="info" checked outline shape="pill" />
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
<CSwitch class="mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline="alt" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" />
<CSwitch class="mx-1" variant="success" checked outline="alt" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" />
<CSwitch class="mx-1" variant="info" checked outline="alt" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" />
<CSwitch class="mx-1" variant="light" checked outline="alt" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" />
<CSwitch class="mx-1" variant="primary" outline="alt" disabled />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline="alt" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" />
<CSwitch class="mx-1" variant="success" checked outline="alt" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" />
<CSwitch class="mx-1" variant="info" checked outline="alt" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" />
<CSwitch class="mx-1" variant="light" checked outline="alt" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" />
<CSwitch class="mx-1" variant="primary" outline="alt" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label</code></small>
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked dataOn="" dataOff=""/>
<CSwitch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked dataOn="" dataOff=""/>
<CSwitch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>shape
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label shape="pill"</code></small>
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol md="12">
<CCard noWrapper>
<CCardHeader slot="header">
<CCard>
<CCardHeader>
Sizes
</CCardHeader>
<CCardBody slot="body" class="p-0">
<CCardBody class="p-0">
<CTable
hover
striped
@@ -472,19 +517,9 @@
</template>
<script>
// import CSwitch from './CSwitch'
export default {
name: 'switches',
computed: {
icon (icon) {
return icon
}
},
// components: {
// CSwitch
// },
data: () => {
data () {
return {
fields: [
{key: 'size'},
@@ -498,10 +533,6 @@ export default {
],
checker: 'yes',
radio: 'primary',
radio2: 'warning',
myFlag1: true,
myFlag2: false,
picker: '',
labelIcon: {
dataOn: '\u2713',
dataOff: '\u2715'
@@ -511,17 +542,6 @@ export default {
dataOff: 'no'
}
}
},
methods: {
test (a, event) {
console.log(a)
console.log(typeof a)
console.log(event)
},
test2 () {
console.log(this.$refs.totest)
this.$refs.totest.$forceUpdate()
}
}
}
</script>