sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

refactor: remplace variant prop with color

Browse Source
This commit is contained in:
woothu
2019-10-15 10:55:00 +02:00
parent 26d30c2fb0
commit c639eb8213
28 changed files with 800 additions and 810 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Dashboard.vue
+42 -42
View File
@@ -9,12 +9,12 @@
<div class="small text-muted">November 2017</div>
</CCol>
<CCol sm="7" class="d-none d-md-block">
<CButton variant="primary" class="float-right">
<CButton color="primary" class="float-right">
<i class="cui-cloud-download"></i>
</CButton>
<CButtonGroup class="float-right mr-3">
<CButton
variant="outline-secondary"
color="outline-secondary"
v-for="(value, key) in ['Day', 'Month', 'Year']"
:key="key"
class="mx-0"
@@ -36,7 +36,7 @@
<CProgress
class="progress-xs mt-2"
:precision="1"
variant="success"
color="success"
:value="40"
/>
</CCol>
@@ -46,7 +46,7 @@
<CProgress
class="progress-xs mt-2"
:precision="1"
variant="info"
color="info"
:value="20"
/>
</CCol>
@@ -56,7 +56,7 @@
<CProgress
class="progress-xs mt-2"
:precision="1"
variant="warning"
color="warning"
:value="60"
/>
</CCol>
@@ -66,7 +66,7 @@
<CProgress
class="progress-xs mt-2"
:precision="1"
variant="danger"
color="danger"
:value="80"
/>
</CCol>
@@ -90,13 +90,13 @@
<CCol sm="12" lg="6">
<CRow>
<CCol sm="6">
<CCallout variant="info">
<CCallout color="info">
<small class="text-muted">New Clients</small><br>
<strong class="h4">9,123</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout variant="danger">
<CCallout color="danger">
<small class="text-muted">Recurring Clients</small><br>
<strong class="h4">22,643</strong>
</CCallout>
@@ -112,12 +112,12 @@
<div class="progress-group-bars">
<CProgress
class="progress-xs"
variant="info"
color="info"
:value="34"
/>
<CProgress
class="progress-xs"
variant="danger"
color="danger"
:value="78"
/>
</div>
@@ -132,12 +132,12 @@
<CProgress
class="progress-xs"
:value="56"
variant="info"
color="info"
/>
<CProgress
class="progress-xs"
:value="94"
variant="danger"
color="danger"
/>
</div>
</div>
@@ -151,12 +151,12 @@
<CProgress
class="progress-xs"
:value="12"
variant="info"
color="info"
/>
<CProgress
class="progress-xs"
:value="67"
variant="danger"
color="danger"
/>
</div>
</div>
@@ -170,12 +170,12 @@
<CProgress
class="progress-xs"
:value="43"
variant="info"
color="info"
/>
<CProgress
class="progress-xs"
:value="91"
variant="danger"
color="danger"
/>
</div>
</div>
@@ -189,12 +189,12 @@
<CProgress
class="progress-xs"
:value="22"
variant="info"
color="info"
/>
<CProgress
class="progress-xs"
:value="73"
variant="danger"
color="danger"
/>
</div>
</div>
@@ -208,12 +208,12 @@
<CProgress
class="progress-xs"
:value="53"
variant="info"
color="info"
/>
<CProgress
class="progress-xs"
:value="82"
variant="danger"
color="danger"
/>
</div>
</div>
@@ -227,21 +227,21 @@
<CProgress
class="progress-xs"
:value="9"
variant="info"
color="info"
/>
<CProgress
class="progress-xs"
:value="69"
variant="danger"
color="danger"
/>
</div>
</div>
<div class="legend text-center">
<small>
<sup><CBadge pill variant="info">&nbsp;</CBadge></sup>
<sup><CBadge pill color="info">&nbsp;</CBadge></sup>
New clients
&nbsp;&nbsp;
<sup><CBadge pill variant="danger">&nbsp;</CBadge></sup>
<sup><CBadge pill color="danger">&nbsp;</CBadge></sup>
Recurring clients
</small>
</div>
@@ -249,13 +249,13 @@
<CCol sm="12" lg="6">
<CRow>
<CCol sm="6">
<CCallout variant="warning">
<CCallout color="warning">
<small class="text-muted">Pageviews</small><br>
<strong class="h4">78,623</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout variant="success">
<CCallout color="success">
<small class="text-muted">Organic</small><br>
<strong class="h4">49,123</strong>
</CCallout>
@@ -273,7 +273,7 @@
<CProgress
class="progress-xs"
:value="43"
variant="warning"
color="warning"
/>
</div>
</div>
@@ -287,7 +287,7 @@
<CProgress
class="progress-xs"
:value="37"
variant="warning"
color="warning"
/>
</div>
</div>
@@ -303,7 +303,7 @@
<CProgress
class="progress-xs"
:value="56"
variant="success"
color="success"
/>
</div>
</div>
@@ -323,7 +323,7 @@
<CProgress
class="progress-xs"
:value="15"
variant="success"
color="success"
/>
</div>
</div>
@@ -343,7 +343,7 @@
<CProgress
class="progress-xs"
:value="11"
variant="success"
color="success"
/>
</div>
</div>
@@ -363,12 +363,12 @@
<CProgress
class="progress-xs"
:value="8"
variant="success"
color="success"
/>
</div>
</div>
<div class="divider text-center">
<CButton variant="link" size="sm" class="text-muted">
<CButton color="link" size="sm" class="text-muted">
<i class="cui-options"></i>
</CButton>
</div>
@@ -381,7 +381,7 @@
hover
:items="tableItems"
:fields="tableFields"
head-variant="light"
head-color="light"
no-sorting
>
<td slot="avatar" class="text-center" slot-scope="{item}">
@@ -424,7 +424,7 @@
<CProgress
class="progress-xs"
v-model="item.usage.value"
:variant="variant(item.usage.value)"
:color="color(item.usage.value)"
/>
</td>
<td
@@ -524,18 +524,18 @@ export default {
}
},
methods: {
variant (value) {
let $variant
color (value) {
let $color
if (value <= 25) {
$variant = 'info'
$color = 'info'
} else if (value > 25 && value <= 50) {
$variant = 'success'
$color = 'success'
} else if (value > 50 && value <= 75) {
$variant = 'warning'
$color = 'warning'
} else if (value > 75 && value <= 100) {
$variant = 'danger'
$color = 'danger'
}
return $variant
return $color
}
}
}
src/views/base/Cards.vue
+9 -9
View File
@@ -38,7 +38,7 @@
class="float-right"
size="sm"
shape="pill"
variant="info"
color="info"
data-on="On"
data-off="Off"
:checked="true"
@@ -53,7 +53,7 @@
<CCard>
<CCardHeader>
Card with label
<CBadge variant="success" class="float-right">Success</CBadge>
<CBadge color="success" class="float-right">Success</CBadge>
</CCardHeader>
<CCardBody>
{{loremIpsum}}
@@ -64,7 +64,7 @@
<CCard>
<CCardHeader>
Card with label
<CBadge pill variant="danger" class="float-right">42</CBadge>
<CBadge pill color="danger" class="float-right">42</CBadge>
</CCardHeader>
<CCardBody>
{{loremIpsum}}
@@ -76,38 +76,38 @@
<CCol sm="6" md="4">
<CCard
header="Card outline primary"
border-variant="primary"
border-color="primary"
:body-html="loremIpsum"
/>
</CCol>
<CCol sm="6" md="4">
<CCard
header="Card outline secondary"
border-variant="secondary"
border-color="secondary"
:body-html="loremIpsum"
/>
</CCol>
<CCol sm="6" md="4">
<CCard
header="Card outline success"
border-variant="success"
border-color="success"
body-wrapper
>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header-html="Card outline info" border-variant="info" body-wrapper>
<CCard header-html="Card outline info" border-color="info" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header-html="Card outline warning" border-variant="warning" body-wrapper>
<CCard header-html="Card outline warning" border-color="warning" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header-html="Card outline danger" border-variant="danger" body-wrapper>
<CCard header-html="Card outline danger" border-color="danger" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
src/views/base/Collapses.vue
+2 -2
View File
@@ -17,13 +17,13 @@
</div>
</CCardHeader>
<CCardBody>
<CButton id="collapse1" variant="primary">
<CButton id="collapse1" color="primary">
Toggle Collapse
</CButton>
<CCollapse toggler="collapse1" class="mt-2">
<CCard body-wrapper>
<p class="card-text">Collapse contents Here</p>
<CButton id="collapse2" size="sm" variant="secondary">
<CButton id="collapse2" size="sm" color="secondary">
Toggle Inner Collapse
</CButton>
<CCollapse toggler="collapse2" class="mt-2">
src/views/base/Forms.vue
+43 -43
View File
@@ -246,8 +246,8 @@
</CForm>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
@@ -277,8 +277,8 @@
</CForm>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -308,8 +308,8 @@
</CForm>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
@@ -338,8 +338,8 @@
/>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CForm>
</CCard>
@@ -400,8 +400,8 @@
</CRow>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="cui-user"></i> Login</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" color="primary"><i class="cui-user"></i> Login</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
@@ -428,8 +428,8 @@
/>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -506,8 +506,8 @@
/>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -519,7 +519,7 @@
<CCardBody>
<CFormInput placeholder="Username">
<template #prepend>
<CButton variant="primary">
<CButton color="primary">
<i class="cui-magnifying-glass"></i> Search
</CButton>
</template>
@@ -530,7 +530,7 @@
autocomplete="email"
>
<template #append>
<CButton type="submit" variant="primary">Submit</CButton>
<CButton type="submit" color="primary">Submit</CButton>
</template>
</CFormInput>
<CFormInput
@@ -539,16 +539,16 @@
autocomplete="email"
>
<template #prepend>
<CButton variant="primary"><CIcon name="facebook" height="14"/></CButton>
<CButton color="primary"><CIcon name="facebook" height="14"/></CButton>
</template>
<template #append>
<CButton variant="primary"><CIcon name="twitter" height="14"/></CButton>
<CButton color="primary"><CIcon name="twitter" height="14"/></CButton>
</template>
</CFormInput>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -562,7 +562,7 @@
<template #prepend>
<CDropdown
togglerText="Action"
variant="primary"
color="primary"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -579,7 +579,7 @@
<template #append>
<CDropdown
togglerText="Action"
variant="primary"
color="primary"
right
>
<CDropdownItem>Action</CDropdownItem>
@@ -594,7 +594,7 @@
<template #prepend>
<CDropdown
togglerText="Split"
variant="primary"
color="primary"
split
>
<CDropdownItem href="#">Action</CDropdownItem>
@@ -607,7 +607,7 @@
<template #append>
<CDropdown
togglerText="Action"
variant="primary"
color="primary"
right
>
<CDropdownItem>Action</CDropdownItem>
@@ -620,8 +620,8 @@
</CFormInput>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -647,11 +647,11 @@
</CRow>
</CCardBody>
<CCardFooter>
<CButton size="sm" variant="primary">Action</CButton>
<CButton size="sm" variant="danger">Action</CButton>
<CButton size="sm" variant="warning">Action</CButton>
<CButton size="sm" variant="info">Action</CButton>
<CButton size="sm" variant="success">Action</CButton>
<CButton size="sm" color="primary">Action</CButton>
<CButton size="sm" color="danger">Action</CButton>
<CButton size="sm" color="warning">Action</CButton>
<CButton size="sm" color="info">Action</CButton>
<CButton size="sm" color="success">Action</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -675,11 +675,11 @@
</CRow>
</CCardBody>
<CCardFooter>
<CButton size="sm" variant="primary">Action</CButton>
<CButton size="sm" variant="danger">Action</CButton>
<CButton size="sm" variant="warning">Action</CButton>
<CButton size="sm" variant="info">Action</CButton>
<CButton size="sm" variant="success">Action</CButton>
<CButton size="sm" color="primary">Action</CButton>
<CButton size="sm" color="danger">Action</CButton>
<CButton size="sm" color="warning">Action</CButton>
<CButton size="sm" color="info">Action</CButton>
<CButton size="sm" color="success">Action</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -709,7 +709,7 @@
append-html="<i class='cui-shield'></i>"
/>
<div class="form-group form-actions">
<CButton type="submit" size="sm" variant="primary">
<CButton type="submit" size="sm" color="primary">
Submit
</CButton>
</div>
@@ -773,7 +773,7 @@
prependHtml="<i class='cui-shield'></i>"
/>
<div class="form-group form-actions">
<CButton type="submit" size="sm" variant="success">
<CButton type="submit" size="sm" color="success">
Submit
</CButton>
</div>
@@ -828,18 +828,18 @@
description="Here's some help text"
>
<template #append>
<CButton variant="primary">Go!</CButton>
<CButton color="primary">Go!</CButton>
</template>
</CFormInput>
<CFormInput label="Two-buttons append">
<template #append>
<CButton variant="primary">Search</CButton>
<CButton variant="danger">Options</CButton>
<CButton color="primary">Search</CButton>
<CButton color="danger">Options</CButton>
</template>
</CFormInput>
<div class="form-actions">
<CButton type="submit" variant="primary">Save changes</CButton>
<CButton variant="secondary">Cancel</CButton>
<CButton type="submit" color="primary">Save changes</CButton>
<CButton color="secondary">Cancel</CButton>
</div>
</CCardBody>
</CCollapse>
src/views/base/Jumbotrons.vue
+7 -7
View File
@@ -20,7 +20,7 @@
<CCardBody>
<CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
<p>For more information visit website</p>
<CButton variant="primary" href="#">More Info</CButton>
<CButton color="primary" href="#">More Info</CButton>
</CJumbotron>
</CCardBody>
</CCard>
@@ -42,8 +42,8 @@
It uses utility classes for typography and spacing to space content
out within the larger container.
</p>
<CButton variant="primary" href="#">Do Something</CButton>
<CButton variant="success" href="#">Do Something Else</CButton>
<CButton color="primary" href="#">Do Something</CButton>
<CButton color="success" href="#">Do Something Else</CButton>
</CJumbotron>
</CCardBody>
</CCard>
@@ -54,13 +54,13 @@
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
<small>variants</small>
<small>colors</small>
</CCardHeader>
<CCardBody>
<CJumbotron
variant="info"
text-variant="white"
border-variant="dark"
color="info"
text-color="white"
border-color="dark"
header="Bootstrap 4"
>
<p slot="lead" class="lead">
src/views/base/ListGroups.vue
+21 -21
View File
@@ -113,19 +113,19 @@
class="d-flex justify-content-between align-items-center"
>
Cras justo odio
<CBadge variant="primary" pill>14</CBadge>
<CBadge color="primary" pill>14</CBadge>
</CListGroupItem>
<CListGroupItem
class="d-flex justify-content-between align-items-center"
>
Dapibus ac facilisis in
<CBadge variant="primary" pill>2</CBadge>
<CBadge color="primary" pill>2</CBadge>
</CListGroupItem>
<CListGroupItem
class="d-flex justify-content-between align-items-center"
>
Morbi leo risus
<CBadge variant="primary" pill>1</CBadge>
<CBadge color="primary" pill>1</CBadge>
</CListGroupItem>
</CListGroup>
</CCardBody>
@@ -138,19 +138,19 @@
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>variants</small>
<small>colors</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem>This is a default list group item</CListGroupItem>
<CListGroupItem variant="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem variant="secondary">This is a secondary list group item</CListGroupItem>
<CListGroupItem variant="success">This is a success list group item</CListGroupItem>
<CListGroupItem variant="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem variant="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem variant="info">This is a info list group item</CListGroupItem>
<CListGroupItem variant="light">This is a light list group item</CListGroupItem>
<CListGroupItem variant="dark">This is a dark list group item</CListGroupItem>
<CListGroupItem color="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem color="secondary">This is a secondary list group item</CListGroupItem>
<CListGroupItem color="success">This is a success list group item</CListGroupItem>
<CListGroupItem color="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem color="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem color="info">This is a info list group item</CListGroupItem>
<CListGroupItem color="light">This is a light list group item</CListGroupItem>
<CListGroupItem color="dark">This is a dark list group item</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
@@ -160,19 +160,19 @@
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>variants active</small>
<small>colors active</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem href="#">This is a default list group item</CListGroupItem>
<CListGroupItem href="#" variant="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem href="#" variant="secondary">This is a secondary list group item</CListGroupItem>
<CListGroupItem href="#" variant="success">This is a success list group item</CListGroupItem>
<CListGroupItem href="#" variant="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem href="#" variant="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem href="#" variant="info">This is a info list group item</CListGroupItem>
<CListGroupItem href="#" variant="light">This is a light list group item</CListGroupItem>
<CListGroupItem href="#" variant="dark">This is a dark list group item</CListGroupItem>
<CListGroupItem href="#" color="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem href="#" color="secondary">This is a secondary list group item</CListGroupItem>
<CListGroupItem href="#" color="success">This is a success list group item</CListGroupItem>
<CListGroupItem href="#" color="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem href="#" color="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem href="#" color="info">This is a info list group item</CListGroupItem>
<CListGroupItem href="#" color="light">This is a light list group item</CListGroupItem>
<CListGroupItem href="#" color="dark">This is a dark list group item</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
src/views/base/Navbars.vue
+8 -8
View File
@@ -18,7 +18,7 @@
<CCardBody>
<CNavbar
toggleable="md"
variant="info"
color="info"
>
<CNavbarToggler @click="show=!show"/>
<CNavbarBrand href="#">NavBar</CNavbarBrand>
@@ -36,7 +36,7 @@
placeholder="Search"
size="sm"
/>
<CButton variant="light" size="sm" class="my-2 my-sm-0">
<CButton color="light" size="sm" class="my-2 my-sm-0">
Search
</CButton>
</CForm>
@@ -72,7 +72,7 @@
</CCardHeader>
<CCardBody>
<!-- Image and text -->
<CNavbar variant="faded" light>
<CNavbar color="faded" light>
<CNavbarBrand href="#">
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="CoreuiVue">
CoreuiVue
@@ -86,7 +86,7 @@
<small>text</small>
</CCardHeader>
<CCardBody>
<CNavbar toggleable="sm" light variant="light">
<CNavbar toggleable="sm" light color="light">
<CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle>
<CNavbarBrand>CoreuiVue</CNavbarBrand>
<CCollapse :show="navbarText" navbar>
@@ -103,7 +103,7 @@
<small>dropdown</small>
</CCardHeader>
<CCardBody>
<CNavbar toggleable="sm" variant="primary">
<CNavbar toggleable="sm" color="primary">
<CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
<CCollapse :show="navbarDropdown" navbar>
<CNavbarNav>
@@ -139,14 +139,14 @@
<small>form</small>
</CCardHeader>
<CCardBody>
<CNavbar light variant="light">
<CNavbar light color="light">
<CForm inline>
<CFormInput
class="mr-sm-2"
placeholder="Search"
size="sm"
/>
<CButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
<CButton color="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
</CForm>
</CNavbar>
</CCardBody>
@@ -157,7 +157,7 @@
<small>input group</small>
</CCardHeader>
<CCardBody>
<CNavbar light variant="light">
<CNavbar light color="light">
<CForm inline>
<CFormInput
class="mr-sm-2"
src/views/base/Popovers.vue
+4 -4
View File
@@ -20,7 +20,7 @@
<CCol col="4">
<div class="my-3 text-center">
<CButton
variant="primary"
color="primary"
v-c-popover="{
header: 'Popover header',
content: 'I am popover content!'
@@ -33,7 +33,7 @@
<CCol col="4">
<div class="my-3 text-center">
<CButton
variant="primary"
color="primary"
v-c-popover="{
header: 'Popover!',
content: 'I start <strong>open</strong>',
@@ -46,7 +46,7 @@
<CCol col="4">
<div class="my-3 text-center">
<CButton
variant="primary"
color="primary"
v-c-popover.click="{
header: 'Popover!',
content: 'I am showing on click and hiding on click outside tooltip!',
@@ -75,7 +75,7 @@
:key="placement"
>
<CButton
variant="primary"
color="primary"
v-c-popover="{
header: 'Popover!',
content: `Placement ${placement}`,
src/views/base/ProgressBars.vue
+37 -37
View File
@@ -18,13 +18,13 @@
<CCardBody>
<CProgress :value="counter" :max="max" show-percentage animated></CProgress>
<CProgress class="mt-1" :max="max" show-value>
<CProgressBar :value="counter*(6/10)" variant="success"/>
<CProgressBar :value="counter*(2.5/10)" variant="warning"/>
<CProgressBar :value="counter*(1.5/10)" variant="danger"/>
<CProgressBar :value="counter*(6/10)" color="success"/>
<CProgressBar :value="counter*(2.5/10)" color="warning"/>
<CProgressBar :value="counter*(1.5/10)" color="danger"/>
</CProgress>
<CButton
@click="clicked"
variant="secondary"
color="secondary"
class="mt-4"
>
Click me to animate progress bars
@@ -82,16 +82,16 @@
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>variants</small>
<small>colors</small>
</CCardHeader>
<CCardBody>
<div :key="index" v-for="(bar, index) in bars" class="row mb-1">
<div class="col-sm-2">{{ bar.variant }}:</div>
<div class="col-sm-2">{{ bar.color }}:</div>
<div class="col-sm-10 pt-1">
<CProgress
:value="bar.value"
:variant="bar.variant"
:key="bar.variant"
:color="bar.color"
:key="bar.color"
/>
</div>
</div>
@@ -106,29 +106,29 @@
<CCardBody>
<CProgress
:value="25"
variant="success"
color="success"
:striped="striped"
class="mb-2"
/>
<CProgress
:value="50"
variant="info"
color="info"
:striped="striped"
class="mb-2"
/>
<CProgress
:value="75"
variant="warning"
color="warning"
:striped="striped"
class="mb-2"
/>
<CProgress
:value="100"
variant="danger"
color="danger"
:striped="striped"
class="mb-2"
/>
<CButton variant="secondary" @click="striped = !striped">
<CButton color="secondary" @click="striped = !striped">
{{ striped ? 'Remove' : 'Add'}} Striped
</CButton>
</CCardBody>
@@ -142,32 +142,32 @@
<CCardBody>
<CProgress
:value="25"
variant="success"
color="success"
striped
:animated="animate"
class="mb-2"
/>
<CProgress
:value="50"
variant="info"
color="info"
striped
:animated="animate"
class="mb-2"
/>
<CProgress
:value="75"
variant="warning"
color="warning"
striped
:animated="animate"
class="mb-2"
/>
<CProgress
:value="100"
variant="danger"
color="danger"
:animated="animate"
class="mb-3"
/>
<CButton variant="secondary" @click="animate = !animate">
<CButton color="secondary" @click="animate = !animate">
{{ animate ? 'Stop' : 'Start'}} Animation
</CButton>
</CCardBody>
@@ -180,24 +180,24 @@
</CCardHeader>
<CCardBody>
<CProgress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
<CProgressBar color="primary" :value="values[0]"/>
<CProgressBar color="success" :value="values[1]"/>
<CProgressBar color="info" :value="values[2]"/>
</CProgress>
<CProgress show-percentage :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
<CProgressBar color="primary" :value="values[0]"/>
<CProgressBar color="success" :value="values[1]"/>
<CProgressBar color="info" :value="values[2]"/>
</CProgress>
<CProgress show-value striped :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
<CProgressBar color="primary" :value="values[0]"/>
<CProgressBar color="success" :value="values[1]"/>
<CProgressBar color="info" :value="values[2]"/>
</CProgress>
<CProgress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]" show-percentage/>
<CProgressBar variant="success" :value="values[1]" animated show-percentage/>
<CProgressBar variant="info" :value="values[2]" striped show-percentage/>
<CProgressBar color="primary" :value="values[0]" show-percentage/>
<CProgressBar color="success" :value="values[1]" animated show-percentage/>
<CProgressBar color="info" :value="values[2]" striped show-percentage/>
</CProgress>
</CCardBody>
</CCard>
@@ -215,13 +215,13 @@ export default {
value: 33.333333333,
value3: 75,
bars: [
{variant: 'success', value: 75},
{variant: 'info', value: 75},
{variant: 'warning', value: 75},
{variant: 'danger', value: 75},
{variant: 'primary', value: 75},
{variant: 'secondary', value: 75},
{variant: 'dark', value: 75}
{color: 'success', value: 75},
{color: 'info', value: 75},
{color: 'warning', value: 75},
{color: 'danger', value: 75},
{color: 'primary', value: 75},
{color: 'secondary', value: 75},
{color: 'dark', value: 75}
],
timer: null,
striped: true,
src/views/base/Switches.vue
+226 -236
View File
@@ -5,7 +5,7 @@
<CCard v-if="true">
<CCardHeader>
Radio switches
<CBadge :variant="radio" class="mr-auto">{{radio}}</CBadge>
<CBadge :color="radio" class="mr-auto">{{radio}}</CBadge>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Switch"
@@ -18,27 +18,19 @@
</div>
</CCardHeader>
<CCardBody>
<!-- <CSwitch
:checked.sync="test11"
true-value="yes"
false-value="no"
id="alt"
name="lg"
required
/> -->
<!-- <CSwitch class="mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" checked.sync="radio" true-value="primary"/> -->
<CSwitch
v-for="(color, key) in colors"
:key="'radio' + key"
class="mx-1"
:key="key"
:variant="variant"
:color="color"
shape="3d"
outline="alt"
v-bind="labelIcon"
type="radio"
name="radio"
:checked.sync="radio"
:value="variant"
v-for="(variant, key) in variants"
:checked="key === 2"
@update:checked="(val) => val ? radio = color : null"
:value="color"
/>
</CCardBody>
</CCard>
@@ -49,25 +41,23 @@
<CCard>
<CCardHeader>
Switch default
<CBadge variant="primary">{{checker}}</CBadge>
<CBadge color="primary">{{checker}}</CBadge>
</CCardHeader>
<CCardBody>
<CSwitch
class="mx-1"
variant="primary"
color="primary"
name="switch1"
:checked.sync="checker"
true-value="yes"
false-value="no"
/>
<CSwitch
class="mx-1"
:variant="variant"
:color="color"
checked
:key="key"
v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark']"
v-for="(color, key) in ['secondary', 'success','warning','info','danger','light','dark']"
/>
<CSwitch class="mx-1" variant="primary" disabled />
<CSwitch class="mx-1" color="primary" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -77,15 +67,15 @@
Switch pills
</CCardHeader>
<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" />
<CSwitch class="mx-1" color="primary" checked shape="pill"/>
<CSwitch class="mx-1" color="secondary" checked shape="pill" />
<CSwitch class="mx-1" color="success" checked shape="pill" />
<CSwitch class="mx-1" color="warning" checked shape="pill" />
<CSwitch class="mx-1" color="info" checked shape="pill" />
<CSwitch class="mx-1" color="danger" checked shape="pill" />
<CSwitch class="mx-1" color="light" checked shape="pill" />
<CSwitch class="mx-1" color="dark" checked shape="pill" />
<CSwitch class="mx-1" color="primary" disabled shape="pill" />
</CCardBody>
</CCard>
</CCol>
@@ -95,15 +85,15 @@
3d Switch
</CCardHeader>
<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" />
<CSwitch class="mx-1" color="primary" checked shape="3d" />
<CSwitch class="mx-1" color="secondary" checked shape="3d" />
<CSwitch class="mx-1" color="success" checked shape="3d" />
<CSwitch class="mx-1" color="warning" checked shape="3d" />
<CSwitch class="mx-1" color="info" checked shape="3d" />
<CSwitch class="mx-1" color="danger" checked shape="3d" />
<CSwitch class="mx-1" color="light" checked shape="3d" />
<CSwitch class="mx-1" color="dark" checked shape="3d" />
<CSwitch class="mx-1" color="primary" disabled shape="3d" />
</CCardBody>
</CCard>
</CCol>
@@ -113,15 +103,15 @@
3d Switch <small><code>disabled</code></small>
</CCardHeader>
<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" />
<CSwitch class="mx-1" color="primary" checked shape="3d" disabled />
<CSwitch class="mx-1" color="secondary" checked shape="3d" disabled />
<CSwitch class="mx-1" color="success" checked shape="3d" disabled />
<CSwitch class="mx-1" color="warning" checked shape="3d" disabled />
<CSwitch class="mx-1" color="info" checked shape="3d" disabled />
<CSwitch class="mx-1" color="danger" checked shape="3d" disabled />
<CSwitch class="mx-1" color="light" checked shape="3d" disabled />
<CSwitch class="mx-1" color="dark" checked shape="3d" disabled />
<CSwitch class="mx-1" color="primary" disabled shape="3d" />
</CCardBody>
</CCard>
</CCol>
@@ -131,15 +121,15 @@
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<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" />
<CSwitch class="mx-1" color="primary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="secondary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="success" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="warning" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="info" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="danger" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="light" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="dark" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="primary" disabled shape="3d" outline="alt" />
</CCardBody>
</CCard>
</CCol>
@@ -149,15 +139,15 @@
3d Switch <small><code>label</code></small>
</CCardHeader>
<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" />
<CSwitch class="mx-1" color="primary" shape="3d" checked v-bind="labelIcon"/>
<CSwitch class="mx-1" color="secondary" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" disabled shape="3d" v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -167,15 +157,15 @@
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<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" />
<CSwitch class="mx-1" color="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -185,15 +175,15 @@
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<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" />
<CSwitch class="mx-1" color="primary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="secondary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="success" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="warning" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="info" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="danger" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="light" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="dark" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" color="primary" disabled shape="3d" outline="alt" />
</CCardBody>
</CCard>
</CCol>
@@ -203,15 +193,15 @@
Switch <small><code>outline</code></small>
</CCardHeader>
<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 />
<CSwitch class="mx-1" color="primary" checked outline />
<CSwitch class="mx-1" color="secondary" checked outline />
<CSwitch class="mx-1" color="success" checked outline />
<CSwitch class="mx-1" color="warning" checked outline />
<CSwitch class="mx-1" color="info" checked outline />
<CSwitch class="mx-1" color="danger" checked outline />
<CSwitch class="mx-1" color="light" checked outline />
<CSwitch class="mx-1" color="dark" checked outline />
<CSwitch class="mx-1" color="primary" outline disabled />
</CCardBody>
</CCard>
</CCol>
@@ -221,15 +211,15 @@
Switch <small><code>outline shape="pill"</code></small>
</CCardHeader>
<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 />
<CSwitch class="mx-1" color="primary" checked outline shape="pill"/>
<CSwitch class="mx-1" color="secondary" checked outline shape="pill" />
<CSwitch class="mx-1" color="success" checked outline shape="pill" />
<CSwitch class="mx-1" color="warning" checked outline shape="pill" />
<CSwitch class="mx-1" color="info" checked outline shape="pill" />
<CSwitch class="mx-1" color="danger" checked outline shape="pill" />
<CSwitch class="mx-1" color="light" checked outline shape="pill" />
<CSwitch class="mx-1" color="dark" checked outline shape="pill" />
<CSwitch class="mx-1" color="primary" outline shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -239,15 +229,15 @@
Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<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 />
<CSwitch class="mx-1" color="primary" checked outline="alt" />
<CSwitch class="mx-1" color="secondary" checked outline="alt" />
<CSwitch class="mx-1" color="success" checked outline="alt" />
<CSwitch class="mx-1" color="warning" checked outline="alt" />
<CSwitch class="mx-1" color="info" checked outline="alt" />
<CSwitch class="mx-1" color="danger" checked outline="alt" />
<CSwitch class="mx-1" color="light" checked outline="alt" />
<CSwitch class="mx-1" color="dark" checked outline="alt" />
<CSwitch class="mx-1" color="primary" outline="alt" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -257,15 +247,15 @@
Switch <small><code>outline="alt" shape="pill"</code></small>
</CCardHeader>
<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 />
<CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill"/>
<CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -275,15 +265,15 @@
Switch <small><code>label</code></small>
</CCardHeader>
<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 />
<CSwitch class="mx-1" color="primary" checked />
<CSwitch class="mx-1" color="secondary" checked />
<CSwitch class="mx-1" color="success" checked />
<CSwitch class="mx-1" color="warning" checked />
<CSwitch class="mx-1" color="info" checked />
<CSwitch class="mx-1" color="danger" checked />
<CSwitch class="mx-1" color="light" checked />
<CSwitch class="mx-1" color="dark" checked />
<CSwitch class="mx-1" color="primary" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -293,15 +283,15 @@
Switch <small><code>label shape="pill"</code></small>
</CCardHeader>
<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 />
<CSwitch class="mx-1" color="primary" checked shape="pill" />
<CSwitch class="mx-1" color="secondary" checked shape="pill" />
<CSwitch class="mx-1" color="success" checked shape="pill" />
<CSwitch class="mx-1" color="warning" checked shape="pill" />
<CSwitch class="mx-1" color="info" checked shape="pill" />
<CSwitch class="mx-1" color="danger" checked shape="pill" />
<CSwitch class="mx-1" color="light" checked shape="pill" />
<CSwitch class="mx-1" color="dark" checked shape="pill" />
<CSwitch class="mx-1" color="primary" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -311,15 +301,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<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 />
<CSwitch class="mx-1" color="primary" checked outline />
<CSwitch class="mx-1" color="secondary" checked outline />
<CSwitch class="mx-1" color="success" checked outline />
<CSwitch class="mx-1" color="warning" checked outline />
<CSwitch class="mx-1" color="info" checked outline />
<CSwitch class="mx-1" color="danger" checked outline />
<CSwitch class="mx-1" color="light" checked outline />
<CSwitch class="mx-1" color="dark" checked outline />
<CSwitch class="mx-1" color="primary" outline disabled />
</CCardBody>
</CCard>
</CCol>
@@ -329,15 +319,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<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 />
<CSwitch class="mx-1" color="primary" checked outline shape="pill" />
<CSwitch class="mx-1" color="secondary" checked outline shape="pill" />
<CSwitch class="mx-1" color="success" checked outline shape="pill" />
<CSwitch class="mx-1" color="warning" checked outline shape="pill" />
<CSwitch class="mx-1" color="info" checked outline shape="pill" />
<CSwitch class="mx-1" color="danger" checked outline shape="pill" />
<CSwitch class="mx-1" color="light" checked outline shape="pill" />
<CSwitch class="mx-1" color="dark" checked outline shape="pill" />
<CSwitch class="mx-1" color="primary" outline shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -347,15 +337,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<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 />
<CSwitch class="mx-1" color="primary" checked outline="alt" />
<CSwitch class="mx-1" color="secondary" checked outline="alt" />
<CSwitch class="mx-1" color="success" checked outline="alt" />
<CSwitch class="mx-1" color="warning" checked outline="alt" />
<CSwitch class="mx-1" color="info" checked outline="alt" />
<CSwitch class="mx-1" color="danger" checked outline="alt" />
<CSwitch class="mx-1" color="light" checked outline="alt" />
<CSwitch class="mx-1" color="dark" checked outline="alt" />
<CSwitch class="mx-1" color="primary" outline="alt" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -365,15 +355,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<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 />
<CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -384,15 +374,15 @@
Switch <small><code>label</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked v-bind="labelIcon"/>
<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" />
<CSwitch class="mx-1" color="primary" checked v-bind="labelIcon"/>
<CSwitch class="mx-1" color="secondary" checked v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>shape
</CCol>
@@ -402,15 +392,15 @@
Switch <small><code>label shape="pill"</code></small>
</CCardHeader>
<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" />
<CSwitch class="mx-1" color="primary" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="secondary" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -420,15 +410,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<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" />
<CSwitch class="mx-1" color="primary" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" color="secondary" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" outline disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -438,15 +428,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<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" />
<CSwitch class="mx-1" color="primary" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="secondary" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" outline shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -456,15 +446,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<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" />
<CSwitch class="mx-1" color="primary" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="secondary" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" outline="alt" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -474,15 +464,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<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" />
<CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
<CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -505,7 +495,7 @@
<td>
<CSwitch
:shape="item.example.shape"
:variant="item.example.variant"
:color="item.example.color"
:size="item.example.size"
:checked="item.example.checked"
/>
@@ -529,7 +519,7 @@ export default {
name: 'Switches',
data () {
return {
variants: [
colors: [
'primary','secondary','warning','success','info','danger','light','dark'
],
fields: [
@@ -540,22 +530,22 @@ export default {
items: [
{
size: 'Large',
example: { shape: '3d', variant: 'primary', size: 'lg', checked: true },
example: { shape: '3d', color: 'primary', size: 'lg', checked: true },
size_prop: 'Add following prop <code>size="lg"</code>'
},
{
size: 'Normal',
example: { shape: '3d', variant: 'primary', size: '', checked: true },
example: { shape: '3d', color: 'primary', size: '', checked: true },
size_prop: '-'
},
{
size: 'Small',
example: {shape: '3d', variant: 'primary', size: 'sm', checked: true},
example: {shape: '3d', color: 'primary', size: 'sm', checked: true},
size_prop: 'Add following prop <code>size="sm"</code>'
}
],
checker: 'yes',
radio: 'primary',
checker: true,
radio: 'warning',
labelIcon: {
labelOn: '\u2713',
labelOff: '\u2715'
src/views/base/Table.vue
+1 -1
View File
@@ -14,7 +14,7 @@
>
<template #status="{item}">
<td>
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
<CBadge :color="getBadge(item.status)">{{item.status}}</CBadge>
</td>
</template>
</CTable>
src/views/base/Tooltips.vue
+4 -4
View File
@@ -21,7 +21,7 @@
<CCol col="4">
<div class="text-center my-3">
<CButton
variant="secondary"
color="secondary"
v-c-tooltip.hover.click="'I am a tooltip!'"
>
Hover Me
@@ -32,7 +32,7 @@
<div class="text-center my-3">
<CButton
v-c-tooltip="{content: 'I start open!', active:true }"
variant="secondary"
color="secondary"
>
Hover me
</CButton>
@@ -41,7 +41,7 @@
<CCol col="4">
<div class="text-center my-3">
<CButton
variant="secondary"
color="secondary"
v-c-tooltip.click="
'I am showing on click and hiding on click outside tooltip!'
"
@@ -69,7 +69,7 @@
:key="placement"
>
<CButton
variant="primary"
color="primary"
v-c-tooltip.hover="{
content: `Placement ${placement}`,
placement
src/views/buttons/BrandButtons.vue
+12 -12
View File
@@ -29,7 +29,7 @@
:name="brandName"
size="sm"
:key="key"
:variant="brandName"
:color="brandName"
>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
@@ -42,7 +42,7 @@
<CButton
:name="brandName"
:key="key"
:variant="brandName"
:color="brandName"
>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
@@ -56,7 +56,7 @@
:name="brandName"
size="lg"
:key="key"
:variant="brandName"
:color="brandName"
>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
@@ -82,7 +82,7 @@
:name="brandName"
size="sm"
:key="key"
:variant="brandName"
:color="brandName"
>
<CIcon :name="brandName"/>
</CButton>
@@ -94,7 +94,7 @@
<CButton
:name="brandName"
:key="key"
:variant="brandName"
:color="brandName"
>
<CIcon :name="brandName"/>
</CButton>
@@ -107,7 +107,7 @@
:name="brandName"
size="lg"
:key="key"
:variant="brandName"
:color="brandName"
>
<CIcon :name="brandName"/>
</CButton>
@@ -135,7 +135,7 @@
:name="brandName"
size="sm"
:key="key"
:variant="brandName"
:color="brandName"
>
<span>{{brandName}}</span>
</CButton>
@@ -147,7 +147,7 @@
<CButton
:name="brandName"
:key="key"
:variant="brandName"
:color="brandName"
>
<span>{{brandName}}</span>
</CButton>
@@ -160,7 +160,7 @@
:name="brandName"
size="lg"
:key="key"
:variant="brandName"
:color="brandName"
>
<span>{{brandName}}</span>
</CButton>
@@ -175,9 +175,9 @@
<script>
export default {
name: 'BrandButtons',
usage: '<CButton variant="facebook"><span>Facebook</span></CButton>',
iconsOnlyUsage: '<CButton variant="facebook"><CIcon name="facebook"/></CButton>',
textOnlyUsage: '<CButton variant="facebook"><CIcon name="facebook"/></CButton>',
usage: '<CButton color="facebook"><span>Facebook</span></CButton>',
iconsOnlyUsage: '<CButton color="facebook"><CIcon name="facebook"/></CButton>',
textOnlyUsage: '<CButton color="facebook"><CIcon name="facebook"/></CButton>',
brands: [
'facebook',
'twitter',
src/views/buttons/ButtonGroups.vue
+45 -45
View File
@@ -19,20 +19,20 @@
<CCardBody>
<div>
<CButtonGroup>
<CButton variant="secondary">One</CButton>
<CButton variant="secondary">Two</CButton>
<CButton variant="secondary">Three</CButton>
<CButton variant="secondary">Four</CButton>
<CButton variant="secondary" class="d-sm-down-none">Five</CButton>
<CButton color="secondary">One</CButton>
<CButton color="secondary">Two</CButton>
<CButton color="secondary">Three</CButton>
<CButton color="secondary">Four</CButton>
<CButton color="secondary" class="d-sm-down-none">Five</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup>
<CButton class="d-sm-down-none" variant="success">Success</CButton>
<CButton variant="info">Info</CButton>
<CButton variant="warning">Warn</CButton>
<CButton class="d-sm-down-none" variant="primary">Primary</CButton>
<CButton variant="danger">Danger</CButton>
<CButton variant="link">Link</CButton>
<CButton class="d-sm-down-none" color="success">Success</CButton>
<CButton color="info">Info</CButton>
<CButton color="warning">Warn</CButton>
<CButton class="d-sm-down-none" color="primary">Primary</CButton>
<CButton color="danger">Danger</CButton>
<CButton color="link">Link</CButton>
</CButtonGroup>
</div>
</CCardBody>
@@ -47,21 +47,21 @@
<CCardBody>
<div>
<CButtonGroup>
<CButton variant="secondary">Left</CButton>
<CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Right</CButton>
<CButton color="secondary">Left</CButton>
<CButton color="secondary">Middle</CButton>
<CButton color="secondary">Right</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup size="sm">
<CButton variant="secondary">Left</CButton>
<CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Right</CButton>
<CButton color="secondary">Left</CButton>
<CButton color="secondary">Middle</CButton>
<CButton color="secondary">Right</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup size="lg">
<CButton variant="secondary">Left</CButton>
<CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Right</CButton>
<CButton color="secondary">Left</CButton>
<CButton color="secondary">Middle</CButton>
<CButton color="secondary">Right</CButton>
</CButtonGroup>
</div>
</CCardBody>
@@ -75,16 +75,16 @@
<CCardBody>
<div>
<CButtonGroup>
<CButton variant="secondary" class="d-sm-down-none">Button 1</CButton>
<CButton variant="secondary" class="d-sm-down-none">Button 2</CButton>
<CDropdown right text="Menu" variant="success">
<CButton color="secondary" class="d-sm-down-none">Button 1</CButton>
<CButton color="secondary" class="d-sm-down-none">Button 2</CButton>
<CDropdown right text="Menu" color="success">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButton variant="secondary" class="d-sm-down-none">Button 3</CButton>
<CDropdown right split text="Split Menu" variant="info">
<CButton color="secondary" class="d-sm-down-none">Button 3</CButton>
<CDropdown right split text="Split Menu" color="info">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
@@ -104,9 +104,9 @@
<CCardBody>
<div>
<CButtonGroup vertical>
<CButton variant="secondary">Top</CButton>
<CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Bottom</CButton>
<CButton color="secondary">Top</CButton>
<CButton color="secondary">Middle</CButton>
<CButton color="secondary">Bottom</CButton>
</CButtonGroup>
</div>
</CCardBody>
@@ -127,17 +127,17 @@
<CCardBody>
<CButtonToolbar aria-label="Toolbar with button groups" >
<CButtonGroup class="mx-1">
<CButton variant="secondary" class="d-sm-down-none">&laquo;</CButton>
<CButton variant="secondary">&lsaquo;</CButton>
<CButton color="secondary" class="d-sm-down-none">&laquo;</CButton>
<CButton color="secondary">&lsaquo;</CButton>
</CButtonGroup>
<CButtonGroup class="mx-1">
<CButton variant="secondary" class="d-sm-down-none">Edit</CButton>
<CButton variant="secondary">Undo</CButton>
<CButton variant="secondary">Redo</CButton>
<CButton color="secondary" class="d-sm-down-none">Edit</CButton>
<CButton color="secondary">Undo</CButton>
<CButton color="secondary">Redo</CButton>
</CButtonGroup>
<CButtonGroup class="mx-1">
<CButton variant="secondary">&rsaquo;</CButton>
<CButton variant="secondary" class="d-sm-down-none">&raquo;</CButton>
<CButton color="secondary">&rsaquo;</CButton>
<CButton color="secondary" class="d-sm-down-none">&raquo;</CButton>
</CButtonGroup>
</CButtonToolbar>
<hr class="d-sm-down-none"/>
@@ -146,8 +146,8 @@
class="d-sm-down-none"
>
<CButtonGroup size="sm" class="mx-1">
<CButton variant="secondary">New</CButton>
<CButton variant="secondary">Edit</CButton>
<CButton color="secondary">New</CButton>
<CButton color="secondary">Edit</CButton>
</CButtonGroup>
<CFormInput
class="mb-0 w-25 mx-1"
@@ -165,19 +165,19 @@
custom
/>
<CButtonGroup size="sm" class="mx-1">
<CButton variant="secondary">Save</CButton>
<CButton variant="secondary">Cancel</CButton>
<CButton color="secondary">Save</CButton>
<CButton color="secondary">Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
<hr/>
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
<CButtonGroup class="mx-1 d-sm-down-none">
<CButton variant="secondary">New</CButton>
<CButton variant="secondary">Edit</CButton>
<CButton variant="secondary">Undo</CButton>
<CButton color="secondary">New</CButton>
<CButton color="secondary">Edit</CButton>
<CButton color="secondary">Undo</CButton>
</CButtonGroup>
<CDropdown
variant="secondary"
color="secondary"
class="mx-1"
placement="bottom-end"
button-content="Menu"
@@ -187,8 +187,8 @@
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButtonGroup class="mx-1">
<CButton variant="secondary">Save</CButton>
<CButton variant="secondary">Cancel</CButton>
<CButton color="secondary">Save</CButton>
<CButton color="secondary">Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
</CCardBody>
src/views/buttons/Dropdowns.vue
+24 -24
View File
@@ -22,7 +22,7 @@
<CDropdown
toggler-text="Dropdown Button"
class="m-2"
variant="secondary"
color="secondary"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
@@ -44,7 +44,7 @@
<CDropdown
toggler-text="Dropdown with divider"
class="m-2"
variant="secondary"
color="secondary"
>
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second item</CDropdownItem>
@@ -56,7 +56,7 @@
<CDropdown
toggler-text="Dropdown with header"
class="m-2"
variant="secondary"
color="secondary"
>
<CDropdownHeader>Dropdown header</CDropdownHeader>
<CDropdownItem>First item</CDropdownItem>
@@ -77,7 +77,7 @@
<div>
<CDropdown
toggler-text="Left align"
variant="primary"
color="primary"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
@@ -87,7 +87,7 @@
<CDropdown
placement="bottom-end"
toggler-text="Right align"
variant="primary"
color="primary"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
@@ -98,7 +98,7 @@
<div>
<CDropdown
toggler-text="Drop-Up"
variant="info"
color="info"
class="m-2"
placement="top-start"
@@ -110,7 +110,7 @@
</div>
<div>
<CDropdown
variant="secondary"
color="secondary"
:offset="25"
toggler-text="Offset Dropdown"
class="m-2"
@@ -122,7 +122,7 @@
</div>
<div>
<CDropdown
variant="secondary"
color="secondary"
split
toggler-text="Split Dropdown"
class="m-2"
@@ -147,7 +147,7 @@
<CCardBody>
<div>
<CDropdown
variant="link"
color="link"
size="lg"
no-caret
>
@@ -172,7 +172,7 @@
<CCardBody>
<div>
<CDropdown
variant="secondary"
color="secondary"
size="lg"
toggler-text="Large"
class="m-2 d-inline-block"
@@ -182,7 +182,7 @@
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
<CDropdown
variant="secondary"
color="secondary"
size="lg"
split
toggler-text="Large Split"
@@ -194,7 +194,7 @@
</CDropdown>
<br>
<CDropdown
variant="secondary"
color="secondary"
size="sm"
toggler-text="Small"
class="m-2 d-inline-block"
@@ -204,7 +204,7 @@
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
<CDropdown
variant="secondary"
color="secondary"
size="sm"
split toggler-text="Small Split"
class="m-2"
@@ -229,7 +229,7 @@
<CCardBody>
<div>
<CDropdown
toggler-text="Dropdown ARIA" variant="primary"
toggler-text="Dropdown ARIA" color="primary"
class="m-2"
>
<div role="group">
@@ -256,13 +256,13 @@
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small><code>variant</code></small>
<small><code>color</code></small>
</CCardHeader>
<CCardBody>
<CDropdown
size="sm"
toggler-text="Primary"
variant="primary"
color="primary"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
@@ -272,7 +272,7 @@
<CDropdown
size="sm"
toggler-text="Secondary"
variant="secondary"
color="secondary"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
@@ -282,7 +282,7 @@
<CDropdown
size="sm"
toggler-text="Success"
variant="success"
color="success"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
@@ -292,7 +292,7 @@
<CDropdown
size="sm"
toggler-text="Warning"
variant="warning"
color="warning"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
@@ -302,7 +302,7 @@
<CDropdown
size="sm"
toggler-text="Danger"
variant="danger"
color="danger"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
@@ -312,7 +312,7 @@
<CDropdown
size="sm"
toggler-text="Info"
variant="info"
color="info"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
@@ -322,7 +322,7 @@
<CDropdown
size="sm"
toggler-text="Light"
variant="light"
color="light"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
@@ -332,7 +332,7 @@
<CDropdown
size="sm"
toggler-text="Dark"
variant="dark"
color="dark"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
@@ -342,7 +342,7 @@
<CDropdown
size="sm"
toggler-text="Link"
variant="link"
color="link"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
src/views/buttons/StandardButtons.vue
+169 -169
View File
@@ -20,31 +20,31 @@
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary">Primary</CButton>
<CButton block color="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary">Secondary</CButton>
<CButton block color="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success">Success</CButton>
<CButton block color="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning">Warning</CButton>
<CButton block color="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger">Danger</CButton>
<CButton block color="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info">Info</CButton>
<CButton block color="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light">Light</CButton>
<CButton block color="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark">Dark</CButton>
<CButton block color="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link">Link</CButton>
<CButton block color="link">Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
@@ -52,31 +52,31 @@
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="primary" aria-pressed="true">Primary</CButton>
<CButton pressed block color="primary" aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="secondary" aria-pressed="true">Secondary</CButton>
<CButton pressed block color="secondary" aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="success" aria-pressed="true">Success</CButton>
<CButton pressed block color="success" aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="warning" aria-pressed="true">Warning</CButton>
<CButton pressed block color="warning" aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="danger" aria-pressed="true">Danger</CButton>
<CButton pressed block color="danger" aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="info" aria-pressed="true">Info</CButton>
<CButton pressed block color="info" aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="light" aria-pressed="true">Light</CButton>
<CButton pressed block color="light" aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="dark" aria-pressed="true">Dark</CButton>
<CButton pressed block color="dark" aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="link" aria-pressed="true">Link</CButton>
<CButton pressed block color="link" aria-pressed="true">Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
@@ -84,31 +84,31 @@
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary" disabled>Primary</CButton>
<CButton block color="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary" disabled>Secondary</CButton>
<CButton block color="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success" disabled>Success</CButton>
<CButton block color="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning" disabled>Warning</CButton>
<CButton block color="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger" disabled>Danger</CButton>
<CButton block color="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info" disabled>Info</CButton>
<CButton block color="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light" disabled>Light</CButton>
<CButton block color="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark" disabled>Dark</CButton>
<CButton block color="dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link" disabled>Link</CButton>
<CButton block color="link" disabled>Link</CButton>
</CCol>
</CRow>
</CCardBody>
@@ -126,28 +126,28 @@
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="primary">Primary</CButton>
<CButton block outline color="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="secondary">Secondary</CButton>
<CButton block outline color="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="success">Success</CButton>
<CButton block outline color="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="warning">Warning</CButton>
<CButton block outline color="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="danger">Danger</CButton>
<CButton block outline color="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="info">Info</CButton>
<CButton block outline color="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="light">Light</CButton>
<CButton block outline color="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="dark">Dark</CButton>
<CButton block outline color="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
@@ -156,28 +156,28 @@
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="primary" aria-pressed="true">Primary</CButton>
<CButton block pressed outline color="primary" aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="secondary" aria-pressed="true">Secondary</CButton>
<CButton block pressed outline color="secondary" aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="success" aria-pressed="true">Success</CButton>
<CButton block pressed outline color="success" aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="warning" aria-pressed="true">Warning</CButton>
<CButton block pressed outline color="warning" aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="danger" aria-pressed="true">Danger</CButton>
<CButton block pressed outline color="danger" aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="info" aria-pressed="true">Info</CButton>
<CButton block pressed outline color="info" aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="light" aria-pressed="true">Light</CButton>
<CButton block pressed outline color="light" aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="dark" aria-pressed="true">Dark</CButton>
<CButton block pressed outline color="dark" aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
@@ -186,28 +186,28 @@
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="primary" disabled>Primary</CButton>
<CButton block outline color="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="secondary" disabled>Secondary</CButton>
<CButton block outline color="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="success" disabled>Success</CButton>
<CButton block outline color="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="warning" disabled>Warning</CButton>
<CButton block outline color="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="danger" disabled>Danger</CButton>
<CButton block outline color="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="info" disabled>Info</CButton>
<CButton block outline color="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="light" disabled>Light</CButton>
<CButton block outline color="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="dark" disabled>Dark</CButton>
<CButton block outline color="dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
@@ -227,28 +227,28 @@
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="primary">Primary</CButton>
<CButton block ghost color="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="secondary">Secondary</CButton>
<CButton block ghost color="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="success">Success</CButton>
<CButton block ghost color="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="warning">Warning</CButton>
<CButton block ghost color="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="danger">Danger</CButton>
<CButton block ghost color="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="info">Info</CButton>
<CButton block ghost color="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="light">Light</CButton>
<CButton block ghost color="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="dark">Dark</CButton>
<CButton block ghost color="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
@@ -257,28 +257,28 @@
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="primary" aria-pressed="true">Primary</CButton>
<CButton block pressed ghost color="primary" aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="secondary" aria-pressed="true">Secondary</CButton>
<CButton block pressed ghost color="secondary" aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="success" aria-pressed="true">Success</CButton>
<CButton block pressed ghost color="success" aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="warning" aria-pressed="true">Warning</CButton>
<CButton block pressed ghost color="warning" aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="danger" aria-pressed="true">Danger</CButton>
<CButton block pressed ghost color="danger" aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="info" aria-pressed="true">Info</CButton>
<CButton block pressed ghost color="info" aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="light" aria-pressed="true">Light</CButton>
<CButton block pressed ghost color="light" aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="dark" aria-pressed="true">Dark</CButton>
<CButton block pressed ghost color="dark" aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
@@ -287,28 +287,28 @@
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="primary" disabled>Primary</CButton>
<CButton block ghost color="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="secondary" disabled>Secondary</CButton>
<CButton block ghost color="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="success" disabled>Success</CButton>
<CButton block ghost color="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="warning" disabled>Warning</CButton>
<CButton block ghost color="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="danger" disabled>Danger</CButton>
<CButton block ghost color="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="info" disabled>Info</CButton>
<CButton block ghost color="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="light" disabled>Light</CButton>
<CButton block ghost color="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="dark" disabled>Dark</CButton>
<CButton block ghost color="dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
@@ -328,31 +328,31 @@
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary" square>Primary</CButton>
<CButton block color="primary" square>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary" square>Secondary</CButton>
<CButton block color="secondary" square>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success" square>Success</CButton>
<CButton block color="success" square>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning" square>Warning</CButton>
<CButton block color="warning" square>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger" square>Danger</CButton>
<CButton block color="danger" square>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info" square>Info</CButton>
<CButton block color="info" square>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light" square>Light</CButton>
<CButton block color="light" square>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark" square>Dark</CButton>
<CButton block color="dark" square>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link" square>Link</CButton>
<CButton block color="link" square>Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
@@ -360,31 +360,31 @@
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="primary" square aria-pressed="true">Primary</CButton>
<CButton pressed block color="primary" square aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="secondary" square aria-pressed="true">Secondary</CButton>
<CButton pressed block color="secondary" square aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="success" square aria-pressed="true">Success</CButton>
<CButton pressed block color="success" square aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="warning" square aria-pressed="true">Warning</CButton>
<CButton pressed block color="warning" square aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="danger" square aria-pressed="true">Danger</CButton>
<CButton pressed block color="danger" square aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="info" square aria-pressed="true">Info</CButton>
<CButton pressed block color="info" square aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="light" square aria-pressed="true">Light</CButton>
<CButton pressed block color="light" square aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="dark" square aria-pressed="true">Dark</CButton>
<CButton pressed block color="dark" square aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="link" square aria-pressed="true">Link</CButton>
<CButton pressed block color="link" square aria-pressed="true">Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
@@ -392,31 +392,31 @@
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary" square disabled>Primary</CButton>
<CButton block color="primary" square disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary" square disabled>Secondary</CButton>
<CButton block color="secondary" square disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success" square disabled>Success</CButton>
<CButton block color="success" square disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning" square disabled>Warning</CButton>
<CButton block color="warning" square disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger" square disabled>Danger</CButton>
<CButton block color="danger" square disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info" square disabled>Info</CButton>
<CButton block color="info" square disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light" square disabled>Light</CButton>
<CButton block color="light" square disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark" square disabled>Dark</CButton>
<CButton block color="dark" square disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link" square disabled>Link</CButton>
<CButton block color="link" square disabled>Link</CButton>
</CCol>
</CRow>
</CCardBody>
@@ -435,31 +435,31 @@
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary" pill>Primary</CButton>
<CButton block color="primary" pill>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary" pill>Secondary</CButton>
<CButton block color="secondary" pill>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success" pill>Success</CButton>
<CButton block color="success" pill>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning" pill>Warning</CButton>
<CButton block color="warning" pill>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger" pill>Danger</CButton>
<CButton block color="danger" pill>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info" pill>Info</CButton>
<CButton block color="info" pill>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light" pill>Light</CButton>
<CButton block color="light" pill>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark" pill>Dark</CButton>
<CButton block color="dark" pill>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link" pill>Link</CButton>
<CButton block color="link" pill>Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
@@ -467,31 +467,31 @@
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="primary" pill aria-pressed="true">Primary</CButton>
<CButton pressed block color="primary" pill aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="secondary" pill aria-pressed="true">Secondary</CButton>
<CButton pressed block color="secondary" pill aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="success" pill aria-pressed="true">Success</CButton>
<CButton pressed block color="success" pill aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="warning" pill aria-pressed="true">Warning</CButton>
<CButton pressed block color="warning" pill aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="danger" pill aria-pressed="true">Danger</CButton>
<CButton pressed block color="danger" pill aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="info" pill aria-pressed="true">Info</CButton>
<CButton pressed block color="info" pill aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="light" pill aria-pressed="true">Light</CButton>
<CButton pressed block color="light" pill aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="dark" pill aria-pressed="true">Dark</CButton>
<CButton pressed block color="dark" pill aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="link" pill aria-pressed="true">Link</CButton>
<CButton pressed block color="link" pill aria-pressed="true">Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
@@ -499,31 +499,31 @@
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary" pill disabled>Primary</CButton>
<CButton block color="primary" pill disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary" pill disabled>Secondary</CButton>
<CButton block color="secondary" pill disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success" pill disabled>Success</CButton>
<CButton block color="success" pill disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning" pill disabled>Warning</CButton>
<CButton block color="warning" pill disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger" pill disabled>Danger</CButton>
<CButton block color="danger" pill disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info" pill disabled>Info</CButton>
<CButton block color="info" pill disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light" pill disabled>Light</CButton>
<CButton block color="light" pill disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark" pill disabled>Dark</CButton>
<CButton block color="dark" pill disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link" pill disabled>Link</CButton>
<CButton block color="link" pill disabled>Link</CButton>
</CCol>
</CRow>
</CCardBody>
@@ -539,19 +539,19 @@
Small
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="primary" size="sm">Standard Button</CButton>
<CButton color="primary" size="sm">Standard Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton outline variant="secondary" size="sm">Outline Button</CButton>
<CButton outline color="secondary" size="sm">Outline Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton size="sm" ghost variant="success">Ghost Button</CButton>
<CButton size="sm" ghost color="success">Ghost Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="warning" size="sm" square>Square Button</CButton>
<CButton color="warning" size="sm" square>Square Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="danger" size="sm" pill>Pill Button</CButton>
<CButton color="danger" size="sm" pill>Pill Button</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
@@ -559,19 +559,19 @@
Normal
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="primary">Standard Button</CButton>
<CButton color="primary">Standard Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton outline variant="secondary">Outline Button</CButton>
<CButton outline color="secondary">Outline Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton ghost variant="success">Ghost Button</CButton>
<CButton ghost color="success">Ghost Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="warning" square>Square Button</CButton>
<CButton color="warning" square>Square Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="danger" pill>Pill Button</CButton>
<CButton color="danger" pill>Pill Button</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
@@ -579,19 +579,19 @@
Large
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="primary" size="lg">Standard Button</CButton>
<CButton color="primary" size="lg">Standard Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton outline variant="secondary" size="lg">Outline Button</CButton>
<CButton outline color="secondary" size="lg">Outline Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton ghost variant="success" size="lg">Ghost Button</CButton>
<CButton ghost color="success" size="lg">Ghost Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="warning" size="lg" square>Square Button</CButton>
<CButton color="warning" size="lg" square>Square Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="danger" size="lg" pill>Pill Button</CButton>
<CButton color="danger" size="lg" pill>Pill Button</CButton>
</CCol>
</CRow>
</CCardBody>
@@ -603,27 +603,27 @@
<CCardBody>
<CRow class="align-items-center">
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="primary">
<CButton color="primary">
<i class="cui-lightbulb"></i>&nbsp;Standard Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="secondary" outline>
<CButton color="secondary" outline>
<i class="cui-lightbulb"></i>&nbsp;Outline Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="success">
<CButton color="success">
<i class="cui-lightbulb"></i>&nbsp;Ghost Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="warning" square>
<CButton color="warning" square>
<i class="cui-lightbulb"></i>&nbsp;Square Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="danger" pill>
<CButton color="danger" pill>
<i class="cui-lightbulb"></i>&nbsp;Pill Button
</CButton>
</CCol>
@@ -637,22 +637,22 @@
<CCardBody>
<CRow>
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
<CButton outline color="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
<CButton outline color="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
<CButton outline color="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
<CButton outline color="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
<CButton outline color="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
<CButton outline color="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
</CRow>
</CCardBody>
@@ -664,13 +664,13 @@
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
</CCardHeader>
<CCardBody>
<CButton size="lg" variant="secondary" block>Block level button</CButton>
<CButton size="lg" variant="primary" block>Block level button</CButton>
<CButton size="lg" variant="success" block>Block level button</CButton>
<CButton size="lg" variant="info" block>Block level button</CButton>
<CButton size="lg" variant="warning" block>Block level button</CButton>
<CButton size="lg" variant="danger" block>Block level button</CButton>
<CButton size="lg" variant="link" block>Block level button</CButton>
<CButton size="lg" color="secondary" block>Block level button</CButton>
<CButton size="lg" color="primary" block>Block level button</CButton>
<CButton size="lg" color="success" block>Block level button</CButton>
<CButton size="lg" color="info" block>Block level button</CButton>
<CButton size="lg" color="warning" block>Block level button</CButton>
<CButton size="lg" color="danger" block>Block level button</CButton>
<CButton size="lg" color="link" block>Block level button</CButton>
</CCardBody>
</CCard>
</CCol>
@@ -680,13 +680,13 @@
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
</CCardHeader>
<CCardBody>
<CButton size="lg" outline variant="secondary" block>Block level button</CButton>
<CButton size="lg" outline variant="primary" block>Block level button</CButton>
<CButton size="lg" outline variant="success" block>Block level button</CButton>
<CButton size="lg" outline variant="info" block>Block level button</CButton>
<CButton size="lg" outline variant="warning" block>Block level button</CButton>
<CButton size="lg" outline variant="danger" block>Block level button</CButton>
<CButton size="lg" ghost variant="info" block>Block level button</CButton>
<CButton size="lg" outline color="secondary" block>Block level button</CButton>
<CButton size="lg" outline color="primary" block>Block level button</CButton>
<CButton size="lg" outline color="success" block>Block level button</CButton>
<CButton size="lg" outline color="info" block>Block level button</CButton>
<CButton size="lg" outline color="warning" block>Block level button</CButton>
<CButton size="lg" outline color="danger" block>Block level button</CButton>
<CButton size="lg" ghost color="info" block>Block level button</CButton>
</CCardBody>
</CCard>
</CCol>
src/views/icons/CoreUIIcons.vue
+1 -1
View File
@@ -3,7 +3,7 @@
<CCard>
<CCardHeader>
<i class="cui-pencil"></i>CoreUI Icons
<CBadge variant="info">New</CBadge>
<CBadge color="info">New</CBadge>
<div class="card-header-actions">
<a
href="https://github.com/coreui/coreui-icons"
src/views/notifications/Alerts.vue
+26 -26
View File
@@ -19,14 +19,14 @@
<CCardBody>
<div>
<p></p>
<CAlert show variant="primary">Primary Alert</CAlert>
<CAlert show variant="secondary">Secondary Alert</CAlert>
<CAlert show variant="success">Success Alert</CAlert>
<CAlert show variant="danger">Danger Alert</CAlert>
<CAlert show variant="warning">Warning Alert</CAlert>
<CAlert show variant="info">Info Alert</CAlert>
<CAlert show variant="light">Light Alert</CAlert>
<CAlert show variant="dark">Dark Alert</CAlert>
<CAlert show color="primary">Primary Alert</CAlert>
<CAlert show color="secondary">Secondary Alert</CAlert>
<CAlert show color="success">Success Alert</CAlert>
<CAlert show color="danger">Danger Alert</CAlert>
<CAlert show color="warning">Warning Alert</CAlert>
<CAlert show color="info">Info Alert</CAlert>
<CAlert show color="light">Light Alert</CAlert>
<CAlert show color="dark">Dark Alert</CAlert>
</div>
</CCardBody>
</CCard>
@@ -39,28 +39,28 @@
</CCardHeader>
<CCardBody>
<div>
<CAlert show variant="primary">
<CAlert show color="primary">
Primary Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="secondary">
<CAlert show color="secondary">
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="success">
<CAlert show color="success">
Success Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="danger">
<CAlert show color="danger">
Danger Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="warning">
<CAlert show color="warning">
Warning Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="info">
<CAlert show color="info">
Info Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="light">
<CAlert show color="light">
Light Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="dark">
<CAlert show color="dark">
Dark Alert with
<CLink href="#" class="alert-link">an example link</CLink>
.
@@ -75,7 +75,7 @@
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
</CCardHeader>
<CCardBody>
<CAlert show variant="success">
<CAlert show color="success">
<h4 class="alert-heading">Well done!</h4>
<p>
Aww yeah, you successfully read this important alert message.
@@ -98,7 +98,7 @@
</CCardHeader>
<CCardBody>
<CAlert
variant="secondary"
color="secondary"
closeButton
:show.sync="dismissibleAlerts[0]"
>
@@ -106,7 +106,7 @@
</CAlert>
<CAlert
variant="secondary"
color="secondary"
closeButton
fade
:show.sync="dismissibleAlerts[1]"
@@ -115,7 +115,7 @@
</CAlert>
<CAlert
variant="secondary"
color="secondary"
:show.sync="dismissibleAlerts[2]"
v-slot="{dismiss}"
class="alert-dismissible"
@@ -123,7 +123,7 @@
Dismissible Alert with custom button!
<CButton
class="position-absolute"
variant="secondary"
color="secondary"
style="right:10px;top: 50%;transform: translateY(-50%);"
textHtml="<i>Close</i>"
@click="dismiss"
@@ -131,7 +131,7 @@
</CAlert>
<CButton
@click="showDismissibleAlerts"
variant="info"
color="info"
class="m-1"
>
Show dismissible alerts
@@ -148,7 +148,7 @@
<CAlert
:show.sync="dismissCountDown"
closeButton
variant="warning"
color="warning"
fade
>
Alert will dismiss after
@@ -158,17 +158,17 @@
<CAlert
:show.sync="dismissCountDown"
closeButton
variant="info"
color="info"
>
Alert will dismiss after {{dismissCountDown}} seconds...
<CProgress
variant="info"
color="info"
:max="dismissSecs"
:value="dismissCountDown"
height="4px"
/>
</CAlert>
<CButton @click="showAlert" variant="info" class="m-1">
<CButton @click="showAlert" color="info" class="m-1">
Show alert with timer
</CButton>
</div>
src/views/notifications/Badges.vue
+31 -31
View File
@@ -17,16 +17,16 @@
</div>
</CCardHeader>
<CCardBody>
<h2>Example heading <CBadge variant="primary">New</CBadge></h2>
<h3>Example heading <CBadge variant="primary">New</CBadge></h3>
<h4>Example heading <CBadge variant="primary">New</CBadge></h4>
<h5>Example heading <CBadge variant="primary">New</CBadge></h5>
<h6>Example heading <CBadge variant="primary">New</CBadge></h6>
<h2>Example heading <CBadge color="primary">New</CBadge></h2>
<h3>Example heading <CBadge color="primary">New</CBadge></h3>
<h4>Example heading <CBadge color="primary">New</CBadge></h4>
<h5>Example heading <CBadge color="primary">New</CBadge></h5>
<h6>Example heading <CBadge color="primary">New</CBadge></h6>
</CCardBody>
<CCardFooter>
<CButton variant="primary">
<CButton color="primary">
Notifications
<CBadge variant="light" :style="{position: 'static'}">4</CBadge>
<CBadge color="light" :style="{position: 'static'}">4</CBadge>
</CButton>
</CCardFooter>
</CCard>
@@ -38,14 +38,14 @@
<small>contextual variations</small>
</CCardHeader>
<CCardBody>
<CBadge variant="primary">Primary</CBadge>
<CBadge variant="secondary">Secondary</CBadge>
<CBadge variant="success">Success</CBadge>
<CBadge variant="danger">Danger</CBadge>
<CBadge variant="warning">Warning</CBadge>
<CBadge variant="info">Info</CBadge>
<CBadge variant="light">Light</CBadge>
<CBadge variant="dark">Dark</CBadge>
<CBadge color="primary">Primary</CBadge>
<CBadge color="secondary">Secondary</CBadge>
<CBadge color="success">Success</CBadge>
<CBadge color="danger">Danger</CBadge>
<CBadge color="warning">Warning</CBadge>
<CBadge color="info">Info</CBadge>
<CBadge color="light">Light</CBadge>
<CBadge color="dark">Dark</CBadge>
</CCardBody>
</CCard>
<CCard>
@@ -54,14 +54,14 @@
<small>pills</small>
</CCardHeader>
<CCardBody>
<CBadge pill variant="primary">Primary</CBadge>
<CBadge pill variant="secondary">Secondary</CBadge>
<CBadge pill variant="success">Success</CBadge>
<CBadge pill variant="danger">Danger</CBadge>
<CBadge pill variant="warning">Warning</CBadge>
<CBadge pill variant="info">Info</CBadge>
<CBadge pill variant="light">Light</CBadge>
<CBadge pill variant="dark">Dark</CBadge>
<CBadge pill color="primary">Primary</CBadge>
<CBadge pill color="secondary">Secondary</CBadge>
<CBadge pill color="success">Success</CBadge>
<CBadge pill color="danger">Danger</CBadge>
<CBadge pill color="warning">Warning</CBadge>
<CBadge pill color="info">Info</CBadge>
<CBadge pill color="light">Light</CBadge>
<CBadge pill color="dark">Dark</CBadge>
</CCardBody>
</CCard>
<CCard>
@@ -70,14 +70,14 @@
<small>actionable</small>
</CCardHeader>
<CCardBody>
<CBadge href="#" variant="primary">Primary</CBadge>
<CBadge href="#" variant="secondary">Secondary</CBadge>
<CBadge href="#" variant="success">Success</CBadge>
<CBadge href="#" variant="danger">Danger</CBadge>
<CBadge href="#" variant="warning">Warning</CBadge>
<CBadge href="#" variant="info">Info</CBadge>
<CBadge href="#" variant="light">Light</CBadge>
<CBadge href="#" variant="dark">Dark</CBadge>
<CBadge href="#" color="primary">Primary</CBadge>
<CBadge href="#" color="secondary">Secondary</CBadge>
<CBadge href="#" color="success">Success</CBadge>
<CBadge href="#" color="danger">Danger</CBadge>
<CBadge href="#" color="warning">Warning</CBadge>
<CBadge href="#" color="info">Info</CBadge>
<CBadge href="#" color="light">Light</CBadge>
<CBadge href="#" color="dark">Dark</CBadge>
</CCardBody>
</CCard>
</CCol>
src/views/notifications/Modals.vue
+16 -16
View File
@@ -18,32 +18,32 @@
</div>
</CCardHeader>
<CCardBody>
<CButton variant="secondary" @click="myModal = true" class="mr-1">
<CButton color="secondary" @click="myModal = true" class="mr-1">
Launch demo modal
</CButton>
<CButton variant="secondary" @click="largeModal = true" class="mr-1">
<CButton color="secondary" @click="largeModal = true" class="mr-1">
Launch large modal
</CButton>
<CButton variant="secondary" @click="smallModal = true" class="mr-1">
<CButton color="secondary" @click="smallModal = true" class="mr-1">
Launch small modal
</CButton>
<hr>
<CButton variant="primary" @click="primaryModal = true" class="mr-1">
<CButton color="primary" @click="primaryModal = true" class="mr-1">
Launch primary modal
</CButton>
<CButton variant="success" @click="successModal = true" class="mr-1">
<CButton color="success" @click="successModal = true" class="mr-1">
Launch success modal
</CButton>
<CButton variant="warning" @click="warningModal = true" class="mr-1">
<CButton color="warning" @click="warningModal = true" class="mr-1">
Launch warning modal
</CButton>
<CButton variant="danger" @click="dangerModal = true" class="mr-1">
<CButton color="danger" @click="dangerModal = true" class="mr-1">
Launch danger modal
</CButton>
<CButton variant="info" @click="infoModal = true" class="mr-1">
<CButton color="info" @click="infoModal = true" class="mr-1">
Launch info modal
</CButton>
<CButton variant="dark" @click="darkModal = true" class="mr-1">
<CButton color="dark" @click="darkModal = true" class="mr-1">
Launch dark modal
</CButton>
</CCardBody>
@@ -101,7 +101,7 @@
</CModal>
<CModal
title="Modal title"
variant="success"
color="success"
:show.sync="successModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -113,7 +113,7 @@
</CModal>
<CModal
title="Modal title"
variant="warning"
color="warning"
:show.sync="warningModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -125,7 +125,7 @@
</CModal>
<CModal
title="Modal title"
variant="danger"
color="danger"
:show.sync="dangerModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -137,7 +137,7 @@
</CModal>
<CModal
title="Modal title"
variant="info"
color="info"
:show.sync="infoModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -153,7 +153,7 @@
:centered="true"
title="Modal title 2"
size="lg"
variant="dark"
color="dark"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -166,8 +166,8 @@
<CButtonClose @click="hide()" class="text-white"/>
</template>
<template #footer="{hide}">
<CButton @click="darkModal = false" variant="danger">Discard</CButton>
<CButton @click="darkModal = false" variant="success">Accept</CButton>
<CButton @click="darkModal = false" color="danger">Discard</CButton>
<CButton @click="darkModal = false" color="success">Accept</CButton>
</template>
</CModal>
</div>
src/views/pages/Login.vue
+3 -3
View File
@@ -21,10 +21,10 @@
/>
<CRow>
<CCol col="6">
<CButton variant="primary" class="px-4">Login</CButton>
<CButton color="primary" class="px-4">Login</CButton>
</CCol>
<CCol col="6" class="text-right">
<CButton variant="link" class="px-0">Forgot password?</CButton>
<CButton color="link" class="px-0">Forgot password?</CButton>
</CCol>
</CRow>
</CForm>
@@ -38,7 +38,7 @@
<h2>Sign up</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<CButton
variant="primary"
color="primary"
class="active mt-3"
>
Register Now!
src/views/pages/Page404.vue
+1 -1
View File
@@ -14,7 +14,7 @@
placeholder="What are you looking for?"
>
<template #append>
<CButton variant="info">Search</CButton>
<CButton color="info">Search</CButton>
</template>
</CFormInput>
</div>
src/views/pages/Page500.vue
+1 -1
View File
@@ -13,7 +13,7 @@
placeholder="What are you looking for?"
>
<template #append>
<CButton variant="info">Search</CButton>
<CButton color="info">Search</CButton>
</template>
</CFormInput>
</CCol>
src/views/pages/Register.vue
+3 -3
View File
@@ -30,16 +30,16 @@
autocomplete="new-password"
class="mb-4"
/>
<CButton variant="success" block>Create Account</CButton>
<CButton color="success" block>Create Account</CButton>
</CForm>
</CCardBody>
<CCardFooter class="p-4">
<CRow>
<CCol col="6">
<CButton block variant="facebook" textHtml="Facebook"/>
<CButton block color="facebook" textHtml="Facebook"/>
</CCol>
<CCol col="6">
<CButton block variant="twitter" textHtml="Twitter"/>
<CButton block color="twitter" textHtml="Twitter"/>
</CCol>
</CRow>
</CCardFooter>
src/views/users/Users.vue
+1 -1
View File
@@ -20,7 +20,7 @@
<strong>{{data.item.name}}</strong>
</td>
<td slot="status" slot-scope="data">
<CBadge :variant="getBadge(data.item.status)">
<CBadge :color="getBadge(data.item.status)">
{{data.item.status}}
</CBadge>
</td>
src/views/widgets/Widgets.vue
+47 -47
View File
@@ -8,7 +8,7 @@
footer="Lorem ipsum dolor sit amet enim."
>
<CProgress
variant="success"
color="success"
:value="25"
class="progress-xs my-3 mb-0"
/>
@@ -32,7 +32,7 @@
header="12.124"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
variant="info"
color="info"
:value="25"
/>
</CCol>
@@ -41,7 +41,7 @@
header="$98.111,00"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
variant="warning"
color="warning"
:value="25"
/>
</CCol>
@@ -50,7 +50,7 @@
header="2 TB"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
variant="danger"
color="danger"
:value="25"
/>
</CCol>
@@ -61,7 +61,7 @@
header="89.9%"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
variant="success"
color="success"
inverse :value="25"
/>
</CCol>
@@ -70,7 +70,7 @@
header="12.124"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
variant="info"
color="info"
inverse
:value="25"
/>
@@ -80,7 +80,7 @@
header="$98.111,00"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
variant="warning"
color="warning"
inverse
:value="25"
/>
@@ -90,7 +90,7 @@
header="2 TB"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
variant="danger"
color="danger"
inverse
:value="25"
/>
@@ -101,7 +101,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="primary"
color="primary"
>
<CIcon name="settings" width="24"/>
</CWidgetIcon>
@@ -110,7 +110,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="info"
color="info"
>
<CIcon name="laptop" width="24"/>
</CWidgetIcon>
@@ -119,7 +119,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="warning"
color="warning"
>
<CIcon name="moon" width="24"/>
</CWidgetIcon>
@@ -128,7 +128,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="danger"
color="danger"
>
<CIcon name="bell" width="24"/>
</CWidgetIcon>
@@ -139,7 +139,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="primary"
color="primary"
no-icon-padding
>
<CIcon name="settings" width="24"/>
@@ -149,7 +149,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="info"
color="info"
no-icon-padding
>
<CIcon name="laptop" width="24"/>
@@ -159,7 +159,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="warning"
color="warning"
no-icon-padding
>
<CIcon name="moon" width="24"/>
@@ -169,7 +169,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="danger"
color="danger"
no-icon-padding
>
<CIcon name="bell" width="24"/>
@@ -181,7 +181,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="primary"
color="primary"
no-icon-padding
>
<CIcon name="settings" class="mx-5 " width="24"/>
@@ -191,7 +191,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="info"
color="info"
no-icon-padding
>
<CIcon name="laptop" class="mx-5 " width="24"/>
@@ -201,7 +201,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="warning"
color="warning"
no-icon-padding
>
<CIcon name="moon" class="mx-5 " width="24"/>
@@ -224,7 +224,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="primary"
color="primary"
no-icon-padding
link="#"
>
@@ -235,7 +235,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="info"
color="info"
no-icon-padding
link="#"
>
@@ -246,7 +246,7 @@
<CWidgetIcon
header="$1.999,50"
text="Income"
variant="warning"
color="warning"
no-icon-padding
link="#"
>
@@ -260,21 +260,21 @@
<CWidgetProgressIcon
header="87.500"
text="Visitors"
variant="info"
color="info"
>
<CIcon name="people" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="385"
text="New Clients"
variant="success"
color="success"
>
<CIcon name="userFollow" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="1238"
text="Products sold"
variant="warning"
color="warning"
>
<CIcon name="basketLoaded" height="36"/>
</CWidgetProgressIcon>
@@ -287,7 +287,7 @@
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
variant="danger"
color="danger"
>
<CIcon name="speedometer" height="36"/>
</CWidgetProgressIcon>
@@ -296,7 +296,7 @@
<CWidgetProgressIcon
header="87.500"
text="Visitors"
variant="info"
color="info"
inverse
>
<CIcon name="people" height="36"/>
@@ -304,7 +304,7 @@
<CWidgetProgressIcon
header="385"
text="New Clients"
variant="success"
color="success"
inverse
>
<CIcon name="userFollow" height="36"/>
@@ -312,7 +312,7 @@
<CWidgetProgressIcon
header="1238"
text="Products sold"
variant="warning"
color="warning"
inverse
>
<CIcon name="basketLoaded" height="36"/>
@@ -320,7 +320,7 @@
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
variant="primary"
color="primary"
inverse
>
<CIcon name="chartPie" height="36"/>
@@ -328,7 +328,7 @@
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
variant="danger"
color="danger"
inverse
>
<CIcon name="speedometer" height="36"/>
@@ -339,7 +339,7 @@
<CWidgetProgressIcon
header="87.500"
text="Visitors"
variant="info"
color="info"
>
<CIcon name="people" height="36"/>
</CWidgetProgressIcon>
@@ -348,7 +348,7 @@
<CWidgetProgressIcon
header="385"
text="New Clients"
variant="success"
color="success"
>
<CIcon name="userFollow" height="36"/>
</CWidgetProgressIcon>
@@ -357,7 +357,7 @@
<CWidgetProgressIcon
header="1238"
text="Products sold"
variant="warning"
color="warning"
>
<CIcon name="basketLoaded" height="36"/>
</CWidgetProgressIcon>
@@ -366,7 +366,7 @@
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
variant="primary"
color="primary"
>
<CIcon name="chartPie" height="36"/>
</CWidgetProgressIcon>
@@ -375,7 +375,7 @@
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
variant="danger"
color="danger"
>
<CIcon name="speedometer" height="36"/>
</CWidgetProgressIcon>
@@ -384,7 +384,7 @@
<CWidgetProgressIcon
header="972"
text="comments"
variant="info"
color="info"
>
<CIcon name="speech" height="36"/>
</CWidgetProgressIcon>
@@ -395,7 +395,7 @@
<CWidgetProgressIcon
header="87.500"
text="Visitors"
variant="info"
color="info"
inverse
>
<CIcon name="people" height="36"/>
@@ -405,7 +405,7 @@
<CWidgetProgressIcon
header="385"
text="New Clients"
variant="success"
color="success"
inverse
>
<CIcon name="userFollow" height="36"/>
@@ -415,7 +415,7 @@
<CWidgetProgressIcon
header="1238"
text="Products sold"
variant="warning"
color="warning"
inverse
>
<CIcon name="basketLoaded" height="36"/>
@@ -425,7 +425,7 @@
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
variant="primary"
color="primary"
inverse
>
<CIcon name="chartPie" height="36"/>
@@ -435,7 +435,7 @@
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
variant="danger"
color="danger"
inverse
>
<CIcon name="speedometer" height="36"/>
@@ -445,7 +445,7 @@
<CWidgetProgressIcon
header="972"
text="comments"
variant="info"
color="info"
inverse
>
<CIcon name="speech" height="36"/>
@@ -456,7 +456,7 @@
<CRow>
<CCol sm="6" lg="3">
<CWidgetHeaderDetails
variant="primary"
color="primary"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
@@ -468,7 +468,7 @@
</CCol>
<CCol sm="6" lg="3">
<CWidgetHeaderDetails
variant="success"
color="success"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
@@ -480,7 +480,7 @@
</CCol>
<CCol sm="6" lg="3">
<CWidgetHeaderDetails
variant="danger"
color="danger"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
@@ -492,7 +492,7 @@
</CCol>
<CCol sm="6" lg="3">
<CWidgetHeaderDetails
variant="warning"
color="warning"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
src/views/widgets/WidgetsBrand.vue
+8 -8
View File
@@ -3,7 +3,7 @@
<template v-if="!noCharts">
<CCol md="3" sm="6">
<CWidgetBrand
variant="facebook"
color="facebook"
right-header="89k"
right-footer="friends"
left-header="459"
@@ -26,7 +26,7 @@
</CCol>
<CCol md="3" sm="6">
<CWidgetBrand
variant="twitter"
color="twitter"
right-header="973k"
right-footer="followers"
left-header="1.792"
@@ -49,7 +49,7 @@
</CCol>
<CCol md="3" sm="6">
<CWidgetBrand
variant="linkedin"
color="linkedin"
right-header="500+"
right-footer="contracts"
left-header="292"
@@ -76,7 +76,7 @@
right-footer="events"
left-header="4"
left-footer="meetings"
variant="warning"
color="warning"
>
<CIcon
name="calendar"
@@ -97,7 +97,7 @@
<template v-else>
<CCol md="3" sm="6">
<CWidgetBrand
variant="facebook"
color="facebook"
right-header="89k"
right-footer="friends"
left-header="459"
@@ -112,7 +112,7 @@
</CCol>
<CCol md="3" sm="6">
<CWidgetBrand
variant="twitter"
color="twitter"
right-header="973k"
right-footer="followers"
left-header="1.792"
@@ -127,7 +127,7 @@
</CCol>
<CCol md="3" sm="6">
<CWidgetBrand
variant="linkedin"
color="linkedin"
right-header="500+"
right-footer="contracts"
left-header="292"
@@ -146,7 +146,7 @@
right-footer="events"
left-header="4"
left-footer="meetings"
variant="warning"
color="warning"
>
<CIcon
name="calendar"
src/views/widgets/WidgetsDropdown.vue
+8 -8
View File
@@ -1,11 +1,11 @@
<template>
<CRow>
<CCol sm="6" lg="3">
<CWidgetDropdown variant="primary" header="9.823" text="Members online">
<CWidgetDropdown color="primary" header="9.823" text="Members online">
<template #default>
<CDropdown
class="float-right"
variant="transparent p-0"
color="transparent p-0"
placement="bottom-end"
>
<template #toggler-content>
@@ -31,11 +31,11 @@
</CWidgetDropdown>
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown variant="info" header="9.823" text="Members online">
<CWidgetDropdown color="info" header="9.823" text="Members online">
<template #default>
<CDropdown
class="float-right"
variant="transparent p-0"
color="transparent p-0"
placement="bottom-end"
no-caret
buttonHtml="<i class='cui-location-pin'></i>"
@@ -65,14 +65,14 @@
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown
variant="warning"
color="warning"
header="9.823"
text="Members online"
>
<template #default>
<CDropdown
class="float-right"
variant="transparent p-0"
color="transparent p-0"
placement="bottom-end"
>
<template #toggler-content>
@@ -99,14 +99,14 @@
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown
variant="danger"
color="danger"
header="9.823"
text="Members online"
>
<template #default>
<CDropdown
class="float-right"
variant="transparent p-0"
color="transparent p-0"
placement="bottom-end"
>
<template #toggler-content>