sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: refactoring template

Browse Source
This commit is contained in:
woothu
2018-11-23 15:26:30 +01:00
parent f7a2634748
commit 74b325afc5
64 changed files with 1261 additions and 1634 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/Breadcrumbs.vue
+36 -3
View File
@@ -14,7 +14,11 @@
</a>
</div>
</div>
<b-breadcrumb :items="items"/>
<CBreadcrumb :items="items"/>
<CBreadcrumb :items="items2"/>
<CBreadcrumb :items="items3"/>
<Breadcrumb :list="items3"/>
</b-card>
</b-col>
</b-row>
@@ -23,8 +27,12 @@
</template>
<script>
// import CBreadcrumb from './CBreadcrumb'
export default {
name: 'breadcrumbs',
// components: {
// CBreadcrumb
// },
data () {
return {
items: [{
@@ -34,8 +42,33 @@ export default {
text: 'Manage',
href: '#'
}, {
text: 'Library',
active: true
text: 'Library'
}],
items2: [{
text: 'Go to dashboard',
to: '/dashboard'
}, {
text: 'Go to widgets',
to: '/Widgets'
}, {
text: 'Go to Google',
href: 'http://google.com'
},{
text: 'Current page'
}],
items3: ['sd', {
text: 'Link',
to: '#2',
activeClass: 'bg-info p-1'
}, {
text: 'Active',
to: '#3',
activeClass: 'bg-warning p-1'
},{
text: 'Classes',
to: '#4',
activeClass: 'bg-danger p-1',
current: false
}]
}
}
src/views/base/CLink.js
+170
View File
@@ -0,0 +1,170 @@
import { mergeData } from 'vue-functional-data-merge'
/**
* The Link component is used in many other BV components.
* As such, sharing its props makes supporting all its features easier.
* However, some components need to modify the defaults for their own purpose.
* Prefer sharing a fresh copy of the props to ensure mutations
* do not affect other component references to the props.
*
* https://github.com/vuejs/vue-router/blob/dev/src/components/link.js
* @return {{}}
*/
export function propsFactory () {
return {
href: {
type: String,
default: null
},
rel: {
type: String,
default: null
},
target: {
type: String,
default: '_self'
},
active: {
type: Boolean,
default: false
},
activeClass: {
type: String,
default: 'active'
},
append: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
event: {
type: [String, Array],
default: 'click'
},
exact: {
type: Boolean,
default: false
},
exactActiveClass: {
type: String,
default: 'active'
},
replace: {
type: Boolean,
default: false
},
routerTag: {
type: String,
default: 'a'
},
to: {
type: [String, Object],
default: null
}
}
}
export const props = propsFactory()
function computeTag (props, parent) {
return Boolean(parent.$router) && props.to && !props.disabled ? 'router-link' : 'a'
}
/*eslint no-unused-vars: ["error", {"args": "none"}]*/
function computeHref ({ disabled, href, to }, tag) {
// We've already checked the parent.$router in computeTag,
// so router-link means live router.
// When deferring to Vue Router's router-link,
// don't use the href attr at all.
// Must return undefined for router-link to populate href.
if (tag === 'router-link') return void 0
// If href explicitly provided
if (href) return href
// Reconstruct href when `to` used, but no router
if (to) {
// Fallback to `to` prop (if `to` is a string)
if (typeof to === 'string') return to
// Fallback to `to.path` prop (if `to` is an object)
if (typeof to === 'object' && typeof to.path === 'string') return to.path
}
// If nothing is provided use '#'
return '#'
}
function computeRel ({ target, rel }) {
if (target === '_blank' && rel === null) {
return 'noopener'
}
return rel || null
}
function clickHandlerFactory ({ disabled, tag, href, suppliedHandler, parent }) {
const isRouterLink = tag === 'router-link'
return function onClick (e) {
if (disabled && e instanceof Event) {
// Stop event from bubbling up.
e.stopPropagation()
// Kill the event loop attached to this specific EventTarget.
e.stopImmediatePropagation()
} else {
parent.$root.$emit('clicked::link', e)
if (isRouterLink && e.target.__vue__) {
e.target.__vue__.$emit('click', e)
}
if (typeof suppliedHandler === 'function') {
suppliedHandler(...arguments)
}
}
if ((!isRouterLink && href === '#') || disabled) {
// Stop scroll-to-top behavior or navigation.
e.preventDefault()
}
}
}
export default {
functional: true,
name: 'CLink',
props: propsFactory(),
render (h, { props, data, parent, children }) {
const tag = computeTag(props, parent)
const rel = computeRel(props)
const href = computeHref(props, tag)
const eventType = tag === 'router-link' ? 'nativeOn' : 'on'
const suppliedHandler = (data[eventType] || {}).click
const handlers = { click: clickHandlerFactory({ tag, href, disabled: props.disabled, suppliedHandler, parent }) }
const componentData = mergeData(data, {
class: [
props.active ? (props.exact ? props.exactActiveClass : props.activeClass) : null,
{ disabled: props.disabled }
],
attrs: {
rel,
href,
target: props.target,
tabindex: props.disabled ? '-1' : (data.attrs ? data.attrs.tabindex : null),
'aria-disabled': (tag === 'a' && props.disabled) ? 'true' : null
},
props: Object.assign(props, { tag: props.routerTag })
})
// If href prop exists on router-link (even undefined or null) it fails working on SSR
if (!componentData.attrs.href) {
delete componentData.attrs.href
}
// We want to overwrite any click handler since our callback
// will invoke the supplied handler if !props.disabled
componentData[eventType] = Object.assign(componentData[eventType] || {}, handlers)
return h(tag, componentData, children)
}
}
src/views/base/CNavItemDropdown.vue
+90
View File
@@ -0,0 +1,90 @@
<template>
<li :class='dropdownClasses' :id="safeId">
<a href="#" :id="'C-' + safeId" aria-haspopup="true" :aria-expanded="visible"
:class="toggleClasses" @click="toggle(!visible)" @blur="toggle(false)">
<slot name="button-content">{{text}}</slot>
</a>
<div :class='menuClasses' :aria-labbeledby="'C-' + safeId">
<slot></slot>
<slot name="dropdown"></slot>
</div>
</li>
</template>
<script>
export default {
name: 'CNavItemDropdown',
data () {
return {
visible: this.show
}
},
props: {
noCaret: {
type: Boolean,
default: false
},
extraToggleClasses: {
type: String,
default: ''
},
extraMenuClasses: {
type: String,
default: ''
},
text: {
type: String,
default: 'Dropdown'
},
show: {
type: Boolean,
default: false
},
dropup: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
right: {
type: Boolean,
default: false
},
},
methods:{
toggle (visible) {
if(this.disabled)
return
this.visible = visible
}
},
computed: {
dropdownClasses () {
return [
'nav-item',
'dropdown',
this.dropup ? 'dropup' : '',
this.visible ? 'show' : ''
]
},
toggleClasses () {
return [
'nav-link',
this.noCaret ? '' : 'dropdown-toggle',
this.disabled ? 'disabled' : '',
this.extraToggleClasses ? this.extraToggleClasses : ''
]
},
menuClasses () {
return [
'dropdown-menu',
this.right ? 'dropdown-menu-right' : 'dropdown-menu-left',
this.visible ? 'show' : '',
this.extraMenuClasses ? this.extraMenuClasses : ''
]
}
},
}
</script>
src/views/base/CSwitch.vue
+116
View File
@@ -0,0 +1,116 @@
<template>
<label :class="classList">
<input
:id="id"
:name="name"
:type="type"
:checked="isChecked"
:disabled="disabled"
:required="required"
:value="value"
class="switch-input form-check-input"
@change="toggle"
>
<span
:data-checked="dataOn"
:data-unchecked="dataOff"
class="switch-slider"
>
</span>
</label>
</template>
<script>
export default {
name:'CSwitch',
model: {
prop: 'passedValue',
event: 'change'
},
data: function () {
return {
isChecked: null,
passedValue: null
}
},
props: {
variant: {
type: String,
default: 'secondary'
},
outline: {
type: [Boolean, String],
default: null,
validator: value => [false, true, '', 'alt'].indexOf(value) !== -1
},
size: {
type: String,
default: null,
validator: value => ['', 'lg', 'sm'].indexOf(value) !== -1
},
shape: {
type: String,
default: null,
validator: value => [null, '3d', 'pill'].indexOf(value) !== -1
},
id: String,
name: String,
checked: {
type: Boolean,
default: false
},
disabled: Boolean,
required: Boolean,
value: String,
trueValue: [String, Number, Array, Object],
falseValue: [String, Number, Array, Object],
dataOn: String,
dataOff: String,
type: {
type: String,
default: 'checkbox'
}
},
computed: {
classList () {
return [
'switch',
this.dataOn || this.dataOff ? 'switch-label' : '',
this.size ? `switch-${this.size}` : '',
this.shape ? `switch-${this.shape}` : '',
`switch${this.outline ? '-outline' : ''}-${this.variant}${this.outline==='alt' ? '-alt' : ''}`,
'form-check-label'
]
}
},
methods: {
toggle (event) {
this.setValues(event.target.checked)
this.$emit('change', this.passedValue, event);
},
setValues (checked) {
this.isChecked = checked
if(checked)
this.passedValue = this.trueValue !== undefined ? this.trueValue : checked
else
this.passedValue = this.falseValue !== undefined ? this.falseValue : checked
},
detectPassedCheck (modelValue) {
if(typeof modelValue === 'boolean')
this.isChecked = modelValue
else if (modelValue === this.falseValue)
this.isChecked = false
else if (modelValue === this.trueValue)
this.isChecked = true
else if (this.type === 'checkbox')
console.warn('Value passed to CSwitch component by v-model property is not of boolean type and does not equal trueValue or falseValue property.')
}
},
created () {
if(this.$vnode.data.model)
this.detectPassedCheck(this.$vnode.data.model.value)
else
this.isChecked = this.checked
}
}
</script>
src/views/base/Navbars.vue
+20 -8
View File
@@ -33,12 +33,20 @@
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
</b-nav-form>
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
<c-nav-item-dropdown text="Lang">
<!-- <template slot="button-content">
<img
src="img/avatars/6.jpg"
class="img-avatar"
alt="admin@bootstrapmaster.com" />
</template> -->
<template slot="dropdown">
<a href="#" class='dropdown-item'>EN</a>
<a href="#" class='dropdown-item'>ES</a>
<a href="#" class='dropdown-item'>RU</a>
<a href="#" class='dropdown-item'>FA</a>
</template>
</c-nav-item-dropdown>
<b-nav-item-dropdown right>
<!-- Using button-content slot -->
@@ -157,8 +165,12 @@
</template>
<script>
import CNavItemDropdown from './CNavItemDropdown'
export default {
name: 'navbars'
name: 'navbars',
components:{
CNavItemDropdown
}
}
</script>
src/views/base/ProgressBars.vue
+6 -7
View File
@@ -13,12 +13,12 @@
</div>
</div>
<div>
<b-progress :value="counter" :max="max" show-progress animated></b-progress>
<b-progress class="mt-1" :max="max" show-value>
<b-progress-bar :value="counter*(6/10)" variant="success"></b-progress-bar>
<b-progress-bar :value="counter*(2.5/10)" variant="warning"></b-progress-bar>
<b-progress-bar :value="counter*(1.5/10)" variant="danger"></b-progress-bar>
</b-progress>
<c-progress :value="counter" :max="max" show-progress animated></c-progress>
<CProgress class="mt-1" :max="max" show-value>
<CProgressBar :value="counter*(6/10)" color="success"/>
<CProgressBar :value="counter*(2.5/10)" color="warning"/>
<CProgressBar :value="counter*(1.5/10)" color="danger"/>
</CProgress>
<b-btn class="mt-4" @click="clicked">Click me</b-btn>
</div>
</b-card>
@@ -200,4 +200,3 @@ export default {
}
}
</script>
src/views/base/Switches.vue
+275 -227
View File
@@ -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>
src/views/base/Tables.vue
+1 -1
View File
@@ -3,7 +3,7 @@
<b-row>
<b-col lg="6">
<c-table caption="<i class='fa fa-align-justify'></i> Simple Table"></c-table>
<c-table caption="<i class='fa fa-align-justify' items='{username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'}' ></i> Simple Table"></c-table>
</b-col><!--/.col-->
<b-col lg="6">