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

refacor: update dashboard to coreui-vue changes

Browse Source
This commit is contained in:
woothu
2019-11-08 12:50:42 +01:00
parent cb5f6ec3a2
commit 1c7b133ae5
42 changed files with 549 additions and 4034 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/containers/TheHeader.vue
+24 -6
View File
@@ -19,19 +19,37 @@
:wrappedInLink="{ href: 'https://coreui.io', target: '_blank'}"
/>
<CHeaderNav class="d-md-down-none mr-auto">
<CHeaderNavItem class="px-3" to="/dashboard">Dashboard</CHeaderNavItem>
<CHeaderNavItem class="px-3" to="/users" exact>Users</CHeaderNavItem>
<CHeaderNavItem class="px-3">Settings</CHeaderNavItem>
<CHeaderNavItem class="px-3" to="/dashboard">
<CHeaderNavLink>
Dashboard
</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem class="px-3" to="/users" exact>
<CHeaderNavLink>
Users
</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem class="px-3">
<CHeaderNavLink>
Settings
</CHeaderNavLink>
</CHeaderNavItem>
</CHeaderNav>
<CHeaderNav class="mr-4">
<CHeaderNavItem class="d-md-down-none mx-2">
<i class="cui-bell"></i>
<CHeaderNavLink>
<i class="cui-bell"></i>
</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem class="d-md-down-none mx-2">
<i class="cui-list"></i>
<CHeaderNavLink>
<i class="cui-list"></i>
</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem class="d-md-down-none mx-2">
<i class="cui-envelope-open"></i>
<CHeaderNavLink>
<i class="cui-envelope-open"></i>
</CHeaderNavLink>
</CHeaderNavItem>
<TheHeaderDropdownAccnt/>
</CHeaderNav>
src/containers/TheHeaderDropdownAccnt.vue
+3 -4
View File
@@ -1,20 +1,19 @@
<template>
<CDropdown
nav
no-caret
inNav
class="c-header-nav-items"
placement="bottom-end"
add-menu-classes="pt-0"
>
<template #toggler>
<CHeaderNavItem only-link>
<CHeaderNavLink>
<div class="c-avatar">
<img
src="img/avatars/6.jpg"
class="c-avatar-img "
/>
</div>
</CHeaderNavItem>
</CHeaderNavLink>
</template>
<CDropdownHeader tag="div" class="text-center" color="light">
<strong>Account</strong>
src/views/Dashboard.vue
+7 -7
View File
@@ -238,10 +238,10 @@
</div>
<div class="legend text-center">
<small>
<sup><CBadge pill color="info">&nbsp;</CBadge></sup>
<sup><CBadge shape="pill" color="info">&nbsp;</CBadge></sup>
New clients
&nbsp;&nbsp;
<sup><CBadge pill color="danger">&nbsp;</CBadge></sup>
<sup><CBadge shape="pill" color="danger">&nbsp;</CBadge></sup>
Recurring clients
</small>
</div>
@@ -310,7 +310,7 @@
<div class="progress-group">
<div class="progress-group-header">
<CIcon
name="socialFacebook"
name="facebook"
height="17"
class="progress-group-icon"
/>
@@ -330,7 +330,7 @@
<div class="progress-group">
<div class="progress-group-header">
<CIcon
name="socialTwitter"
name="twitter"
height="17"
class="progress-group-icon"
/>
@@ -350,7 +350,7 @@
<div class="progress-group">
<div class="progress-group-header">
<CIcon
name="socialLinkedin"
name="linkedin"
height="17"
class="progress-group-icon"
/>
@@ -376,7 +376,7 @@
</CCol>
</CRow>
<br/>
<CTable
<CDataTable
class="mb-0 table-outline"
hover
:items="tableItems"
@@ -441,7 +441,7 @@
<div class="small text-muted">Last login</div>
<strong>{{item.activity}}</strong>
</td>
</CTable>
</CDataTable>
</CCard>
</CCol>
</CRow>
src/views/base/Cards.vue
+1 -1
View File
@@ -64,7 +64,7 @@
<CCard>
<CCardHeader>
Card with label
<CBadge pill color="danger" class="float-right">42</CBadge>
<CBadge shape="pill" color="danger" class="float-right">42</CBadge>
</CCardHeader>
<CCardBody>
{{loremIpsum}}
src/views/base/Carousels.vue
+7 -7
View File
@@ -24,17 +24,17 @@
height="400px"
>
<CCarouselItem
captionHeader="First Slide"
image="https://lorempixel.com/1024/480/technics/2/"
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
captionHeader="First Slide"
image="https://picsum.photos/1024/480/?image=52"
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
/>
<CCarouselItem
captionHeader="Blank page"
:image="{ blankColor: 'grey' }"
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
captionHeader="Blank page"
:image="{ placeholderColor: 'grey' }"
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
/>
<CCarouselItem
image="https://lorempixel.com/1024/480/technics/8/"
image="https://picsum.photos/1024/480/?image=54"
/>
</CCarousel>
</CCardBody>
src/views/base/Forms.vue
+4 -4
View File
@@ -190,13 +190,13 @@
</CCol>
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
<CInputCheckbox
v-for="option in options"
:key="option"
v-for="(option, optionIndex) in options"
:key="key + option"
:label="option"
:value="option"
:custom="key > 1"
:name="`Option 1${key}`"
:checked="Math.random() > 0.6"
:checked="optionIndex === key"
:inline="key % 2 === 1"
/>
</CCol>
@@ -210,7 +210,7 @@
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
<CInputRadio
v-for="(option, optionIndex) in options"
:key="option"
:key="key + option"
:label="option"
type="radio"
:value="option"
src/views/base/Jumbotrons.vue
+1 -1
View File
@@ -20,7 +20,7 @@
<CCardBody>
<CJumbotron>
<h1 class="display-3">Bootstrap 4</h1>
<p class="lead">Bootstrap 4 Components for Vue.js 2</p>
<p class="lead">Bootstrap 4 Components for Vue.js 2.6+</p>
<p>For more information visit website</p>
<CButton color="primary" href="#">More Info</CButton>
</CJumbotron>
src/views/base/ListGroups.vue
+3 -3
View File
@@ -113,19 +113,19 @@
class="d-flex justify-content-between align-items-center"
>
Cras justo odio
<CBadge color="primary" pill>14</CBadge>
<CBadge color="primary" shape="pill">14</CBadge>
</CListGroupItem>
<CListGroupItem
class="d-flex justify-content-between align-items-center"
>
Dapibus ac facilisis in
<CBadge color="primary" pill>2</CBadge>
<CBadge color="primary" shape="pill">2</CBadge>
</CListGroupItem>
<CListGroupItem
class="d-flex justify-content-between align-items-center"
>
Morbi leo risus
<CBadge color="primary" pill>1</CBadge>
<CBadge color="primary" shape="pill">1</CBadge>
</CListGroupItem>
</CListGroup>
</CCardBody>
src/views/base/Navs.vue
+4 -4
View File
@@ -51,7 +51,7 @@
<small>tab style</small>
</CCardHeader>
<CCardBody>
<CNav tabs>
<CNav variant="tabs">
<CNavItem active>
Active
</CNavItem>
@@ -72,7 +72,7 @@
<small>pill style</small>
</CCardHeader>
<CCardBody>
<CNav pills>
<CNav variant="pills">
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Another Link</CNavItem>
@@ -87,7 +87,7 @@
<small>fill tabs</small>
</CCardHeader>
<CCardBody>
<CNav fill tabs>
<CNav fill variant="tabs">
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem>
@@ -102,7 +102,7 @@
<small>justified tabs</small>
</CCardHeader>
<CCardBody>
<CNav justified tabs>
<CNav justified variant="tabs">
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem>
src/views/base/Switches.vue
+111 -275
View File
@@ -23,8 +23,7 @@
:key="'radio' + key"
class="mx-1"
:color="color"
shape="3d"
outline="alt"
variant="3d"
v-bind="labelIcon"
type="radio"
name="radio"
@@ -85,15 +84,15 @@
3d Switch
</CCardHeader>
<CCardBody>
<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" />
<CSwitch class="mx-1" color="primary" checked variant="3d" />
<CSwitch class="mx-1" color="secondary" checked variant="3d" />
<CSwitch class="mx-1" color="success" checked variant="3d" />
<CSwitch class="mx-1" color="warning" checked variant="3d" />
<CSwitch class="mx-1" color="info" checked variant="3d" />
<CSwitch class="mx-1" color="danger" checked variant="3d" />
<CSwitch class="mx-1" color="light" checked variant="3d" />
<CSwitch class="mx-1" color="dark" checked variant="3d" />
<CSwitch class="mx-1" color="primary" disabled variant="3d" />
</CCardBody>
</CCard>
</CCol>
@@ -103,33 +102,15 @@
3d Switch <small><code>disabled</code></small>
</CCardHeader>
<CCardBody>
<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>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<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" />
<CSwitch class="mx-1" color="primary" checked variant="3d" disabled />
<CSwitch class="mx-1" color="secondary" checked variant="3d" disabled />
<CSwitch class="mx-1" color="success" checked variant="3d" disabled />
<CSwitch class="mx-1" color="warning" checked variant="3d" disabled />
<CSwitch class="mx-1" color="info" checked variant="3d" disabled />
<CSwitch class="mx-1" color="danger" checked variant="3d" disabled />
<CSwitch class="mx-1" color="light" checked variant="3d" disabled />
<CSwitch class="mx-1" color="dark" checked variant="3d" disabled />
<CSwitch class="mx-1" color="primary" disabled variant="3d" />
</CCardBody>
</CCard>
</CCol>
@@ -139,235 +120,90 @@
3d Switch <small><code>label</code></small>
</CCardHeader>
<CCardBody>
<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" />
<CSwitch class="mx-1" color="primary" variant="3d" shape="square" checked v-bind="labelIcon"/>
<CSwitch class="mx-1" color="secondary" checked variant="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked variant="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked variant="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked variant="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked variant="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked variant="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked variant="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" disabled variant="3d" v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
3d Switch <small><code>outline="alt"</code></small>
Switch <small><code>variant="outline"</code></small>
</CCardHeader>
<CCardBody>
<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" />
<CSwitch class="mx-1" color="primary" checked variant="outline" />
<CSwitch class="mx-1" color="secondary" checked variant="outline" />
<CSwitch class="mx-1" color="success" checked variant="outline" />
<CSwitch class="mx-1" color="warning" checked variant="outline" />
<CSwitch class="mx-1" color="info" checked variant="outline" />
<CSwitch class="mx-1" color="danger" checked variant="outline" />
<CSwitch class="mx-1" color="light" checked variant="outline" />
<CSwitch class="mx-1" color="dark" checked variant="outline" />
<CSwitch class="mx-1" color="primary" variant="outline" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
3d Switch <small><code>outline="alt"</code></small>
Switch <small><code>variant="outline" shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<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" />
<CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill"/>
<CSwitch class="mx-1" color="secondary" checked variant="outline" shape="pill" />
<CSwitch class="mx-1" color="success" checked variant="outline" shape="pill" />
<CSwitch class="mx-1" color="warning" checked variant="outline" shape="pill" />
<CSwitch class="mx-1" color="info" checked variant="outline" shape="pill" />
<CSwitch class="mx-1" color="danger" checked variant="outline" shape="pill" />
<CSwitch class="mx-1" color="light" checked variant="outline" shape="pill" />
<CSwitch class="mx-1" color="dark" checked variant="outline" shape="pill" />
<CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>outline</code></small>
Switch <small><code>variant="opposite"</code></small>
</CCardHeader>
<CCardBody>
<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 />
<CSwitch class="mx-1" color="primary" checked variant="opposite" />
<CSwitch class="mx-1" color="secondary" checked variant="opposite" />
<CSwitch class="mx-1" color="success" checked variant="opposite" />
<CSwitch class="mx-1" color="warning" checked variant="opposite" />
<CSwitch class="mx-1" color="info" checked variant="opposite" />
<CSwitch class="mx-1" color="danger" checked variant="opposite" />
<CSwitch class="mx-1" color="light" checked variant="opposite" />
<CSwitch class="mx-1" color="dark" checked variant="opposite" />
<CSwitch class="mx-1" color="primary" variant="opposite" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>outline shape="pill"</code></small>
Switch <small><code>variant="opposite" shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<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 />
<CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill"/>
<CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" />
<CSwitch class="mx-1" color="success" checked variant="opposite" shape="pill" />
<CSwitch class="mx-1" color="warning" checked variant="opposite" shape="pill" />
<CSwitch class="mx-1" color="info" checked variant="opposite" shape="pill" />
<CSwitch class="mx-1" color="danger" checked variant="opposite" shape="pill" />
<CSwitch class="mx-1" color="light" checked variant="opposite" shape="pill" />
<CSwitch class="mx-1" color="dark" checked variant="opposite" shape="pill" />
<CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<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>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>outline="alt" shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<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>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label</code></small>
</CCardHeader>
<CCardBody>
<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>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<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>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<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>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<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>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<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>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<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>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
@@ -389,7 +225,7 @@
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label shape="pill"</code></small>
Switch <small><code>label shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" color="primary" checked shape="pill" v-bind="labelIcon" />
@@ -407,72 +243,72 @@
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label outline</code></small>
Switch <small><code>label variant="outline"</code></small>
</CCardHeader>
<CCardBody>
<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" />
<CSwitch class="mx-1" color="primary" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="secondary" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked variant="outline" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" variant="outline" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label outline</code></small>
Switch <small><code>label variant="outline"</code></small>
</CCardHeader>
<CCardBody>
<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" />
<CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="secondary" checked variant="outline" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked variant="outline" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked variant="outline" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked variant="outline" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked variant="outline" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked variant="outline" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked variant="outline" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label outline</code></small>
Switch <small><code>label variant="opposite"</code></small>
</CCardHeader>
<CCardBody>
<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" />
<CSwitch class="mx-1" color="primary" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="secondary" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked variant="opposite" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" variant="opposite" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Switch <small><code>label outline</code></small>
Switch <small><code>label variant="opposite"</code></small>
</CCardHeader>
<CCardBody>
<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" />
<CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill" v-bind="labelTxt" />
<CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="success" checked variant="opposite" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="warning" checked variant="opposite" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="info" checked variant="opposite" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="danger" checked variant="opposite" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="light" checked variant="opposite" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="dark" checked variant="opposite" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -483,7 +319,7 @@
Sizes
</CCardHeader>
<CCardBody class="p-0">
<CTable
<CDataTable
hover
striped
class="table-align-middle mb-0"
@@ -506,7 +342,7 @@
<span v-html="item.size_prop"></span>
</td>
</template>
</CTable>
</CDataTable>
</CCardBody>
</CCard>
</CCol>
src/views/base/Table.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<CCard :header="caption" body-wrapper>
<CTable
<CDataTable
:hover="hover"
:striped="striped"
:bordered="bordered"
@@ -17,7 +17,7 @@
<CBadge :color="getBadge(item.status)">{{item.status}}</CBadge>
</td>
</template>
</CTable>
</CDataTable>
</CCard>
</template>
src/views/base/Tabs.vue
+5 -5
View File
@@ -49,7 +49,7 @@
Tabs
</CCardHeader>
<CCardBody>
<CTabs pills>
<CTabs variant="pills">
<CTab title-html="Home" active>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -104,7 +104,7 @@
</CTab>
<CTab>
<template slot="title">
<i class="cui-pie-chart"></i>
<i class="cui-chart-piechart"></i>
</template>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -145,7 +145,7 @@
</CTab>
<CTab>
<template slot="title">
<i class="cui-pie-chart"></i> {{tabs[2]}}
<i class="cui-chart-piechart"></i> {{tabs[2]}}
</template>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -163,7 +163,7 @@
Tabs vertical
</CCardHeader>
<CCardBody>
<CTabs pills vertical>
<CTabs variant="pills" vertical>
<CTab active>
<template slot="title">
<i class="cui-calculator"></i> {{tabs[0]}}
@@ -186,7 +186,7 @@
</CTab>
<CTab>
<template slot="title">
<i class="cui-pie-chart"></i> {{tabs[2]}}
<i class="cui-chart-piechart"></i> {{tabs[2]}}
</template>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
src/views/buttons/StandardButtons.vue
+101 -101
View File
@@ -119,35 +119,35 @@
</CCardHeader>
<CCardBody>
<p>
Use <code>outline</code> prop
Use <code>variant="outline"</code> prop
</p>
<CRow class="align-items-center">
<CCol col="12" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="primary">Primary</CButton>
<CButton block variant="outline" color="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="secondary">Secondary</CButton>
<CButton block variant="outline" color="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="success">Success</CButton>
<CButton block variant="outline" color="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="warning">Warning</CButton>
<CButton block variant="outline" color="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="danger">Danger</CButton>
<CButton block variant="outline" color="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="info">Info</CButton>
<CButton block variant="outline" color="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="light">Light</CButton>
<CButton block variant="outline" color="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="dark">Dark</CButton>
<CButton block variant="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 color="primary" aria-pressed="true">Primary</CButton>
<CButton block pressed variant="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 color="secondary" aria-pressed="true">Secondary</CButton>
<CButton block pressed variant="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 color="success" aria-pressed="true">Success</CButton>
<CButton block pressed variant="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 color="warning" aria-pressed="true">Warning</CButton>
<CButton block pressed variant="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 color="danger" aria-pressed="true">Danger</CButton>
<CButton block pressed variant="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 color="info" aria-pressed="true">Info</CButton>
<CButton block pressed variant="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 color="light" aria-pressed="true">Light</CButton>
<CButton block pressed variant="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 color="dark" aria-pressed="true">Dark</CButton>
<CButton block pressed variant="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 color="primary" disabled>Primary</CButton>
<CButton block variant="outline" color="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="secondary" disabled>Secondary</CButton>
<CButton block variant="outline" color="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="success" disabled>Success</CButton>
<CButton block variant="outline" color="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="warning" disabled>Warning</CButton>
<CButton block variant="outline" color="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="danger" disabled>Danger</CButton>
<CButton block variant="outline" color="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="info" disabled>Info</CButton>
<CButton block variant="outline" color="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="light" disabled>Light</CButton>
<CButton block variant="outline" color="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline color="dark" disabled>Dark</CButton>
<CButton block variant="outline" color="dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
@@ -220,35 +220,35 @@
<CCardBody>
<p>
Use
<code>ghost</code> prop for ghost buttons.
<code>variant="ghost"</code> prop for ghost buttons.
</p>
<CRow class="align-items-center">
<CCol col="12" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="primary">Primary</CButton>
<CButton block variant="ghost" color="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="secondary">Secondary</CButton>
<CButton block variant="ghost" color="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="success">Success</CButton>
<CButton block variant="ghost" color="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="warning">Warning</CButton>
<CButton block variant="ghost" color="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="danger">Danger</CButton>
<CButton block variant="ghost" color="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="info">Info</CButton>
<CButton block variant="ghost" color="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="light">Light</CButton>
<CButton block variant="ghost" color="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="dark">Dark</CButton>
<CButton block variant="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 color="primary" aria-pressed="true">Primary</CButton>
<CButton block pressed variant="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 color="secondary" aria-pressed="true">Secondary</CButton>
<CButton block pressed variant="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 color="success" aria-pressed="true">Success</CButton>
<CButton block pressed variant="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 color="warning" aria-pressed="true">Warning</CButton>
<CButton block pressed variant="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 color="danger" aria-pressed="true">Danger</CButton>
<CButton block pressed variant="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 color="info" aria-pressed="true">Info</CButton>
<CButton block pressed variant="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 color="light" aria-pressed="true">Light</CButton>
<CButton block pressed variant="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 color="dark" aria-pressed="true">Dark</CButton>
<CButton block pressed variant="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 color="primary" disabled>Primary</CButton>
<CButton block variant="ghost" color="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="secondary" disabled>Secondary</CButton>
<CButton block variant="ghost" color="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="success" disabled>Success</CButton>
<CButton block variant="ghost" color="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="warning" disabled>Warning</CButton>
<CButton block variant="ghost" color="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="danger" disabled>Danger</CButton>
<CButton block variant="ghost" color="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="info" disabled>Info</CButton>
<CButton block variant="ghost" color="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="light" disabled>Light</CButton>
<CButton block variant="ghost" color="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost color="dark" disabled>Dark</CButton>
<CButton block variant="ghost" color="dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
@@ -435,31 +435,31 @@
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="primary" pill>Primary</CButton>
<CButton block color="primary" shape="pill">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="secondary" pill>Secondary</CButton>
<CButton block color="secondary" shape="pill">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="success" pill>Success</CButton>
<CButton block color="success" shape="pill">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="warning" pill>Warning</CButton>
<CButton block color="warning" shape="pill">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="danger" pill>Danger</CButton>
<CButton block color="danger" shape="pill">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="info" pill>Info</CButton>
<CButton block color="info" shape="pill">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="light" pill>Light</CButton>
<CButton block color="light" shape="pill">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="dark" pill>Dark</CButton>
<CButton block color="dark" shape="pill">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="link" pill>Link</CButton>
<CButton block color="link" shape="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 color="primary" pill aria-pressed="true">Primary</CButton>
<CButton pressed block color="primary" shape="pill" aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="secondary" pill aria-pressed="true">Secondary</CButton>
<CButton pressed block color="secondary" shape="pill" aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="success" pill aria-pressed="true">Success</CButton>
<CButton pressed block color="success" shape="pill" aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="warning" pill aria-pressed="true">Warning</CButton>
<CButton pressed block color="warning" shape="pill" aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="danger" pill aria-pressed="true">Danger</CButton>
<CButton pressed block color="danger" shape="pill" aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="info" pill aria-pressed="true">Info</CButton>
<CButton pressed block color="info" shape="pill" aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="light" pill aria-pressed="true">Light</CButton>
<CButton pressed block color="light" shape="pill" aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="dark" pill aria-pressed="true">Dark</CButton>
<CButton pressed block color="dark" shape="pill" aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block color="link" pill aria-pressed="true">Link</CButton>
<CButton pressed block color="link" shape="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 color="primary" pill disabled>Primary</CButton>
<CButton block color="primary" shape="pill" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="secondary" pill disabled>Secondary</CButton>
<CButton block color="secondary" shape="pill" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="success" pill disabled>Success</CButton>
<CButton block color="success" shape="pill" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="warning" pill disabled>Warning</CButton>
<CButton block color="warning" shape="pill" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="danger" pill disabled>Danger</CButton>
<CButton block color="danger" shape="pill" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="info" pill disabled>Info</CButton>
<CButton block color="info" shape="pill" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="light" pill disabled>Light</CButton>
<CButton block color="light" shape="pill" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="dark" pill disabled>Dark</CButton>
<CButton block color="dark" shape="pill" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block color="link" pill disabled>Link</CButton>
<CButton block color="link" shape="pill" disabled>Link</CButton>
</CCol>
</CRow>
</CCardBody>
@@ -542,16 +542,16 @@
<CButton color="primary" size="sm">Standard Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton outline color="secondary" size="sm">Outline Button</CButton>
<CButton variant="outline" color="secondary" size="sm">Outline Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton size="sm" ghost color="success">Ghost Button</CButton>
<CButton size="sm" variant="ghost" color="success">Ghost Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton color="warning" size="sm" square>Square Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton color="danger" size="sm" pill>Pill Button</CButton>
<CButton color="danger" size="sm" shape="pill">Pill Button</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
@@ -562,16 +562,16 @@
<CButton color="primary">Standard Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton outline color="secondary">Outline Button</CButton>
<CButton variant="outline" color="secondary">Outline Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton ghost color="success">Ghost Button</CButton>
<CButton variant="ghost" color="success">Ghost Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton color="warning" square>Square Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton color="danger" pill>Pill Button</CButton>
<CButton color="danger" shape="pill">Pill Button</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
@@ -582,16 +582,16 @@
<CButton color="primary" size="lg">Standard Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton outline color="secondary" size="lg">Outline Button</CButton>
<CButton variant="outline" color="secondary" size="lg">Outline Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton ghost color="success" size="lg">Ghost Button</CButton>
<CButton variant="ghost" color="success" size="lg">Ghost Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton color="warning" size="lg" square>Square Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton color="danger" size="lg" pill>Pill Button</CButton>
<CButton color="danger" size="lg" shape="pill">Pill Button</CButton>
</CCol>
</CRow>
</CCardBody>
@@ -608,7 +608,7 @@
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton color="secondary" outline>
<CButton color="secondary" variant="outline">
<i class="cui-lightbulb"></i>&nbsp;Outline Button
</CButton>
</CCol>
@@ -623,7 +623,7 @@
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton color="danger" pill>
<CButton color="danger" shape="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 color="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
<CButton variant="outline" color="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton outline color="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
<CButton variant="outline" color="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton outline color="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
<CButton variant="outline" color="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton outline color="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
<CButton variant="outline" color="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton outline color="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
<CButton variant="outline" color="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton outline color="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
<CButton variant="outline" color="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
</CRow>
</CCardBody>
@@ -680,13 +680,13 @@
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
</CCardHeader>
<CCardBody>
<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>
<CButton size="lg" variant="outline" color="secondary" block>Block level button</CButton>
<CButton size="lg" variant="outline" color="primary" block>Block level button</CButton>
<CButton size="lg" variant="outline" color="success" block>Block level button</CButton>
<CButton size="lg" variant="outline" color="info" block>Block level button</CButton>
<CButton size="lg" variant="outline" color="warning" block>Block level button</CButton>
<CButton size="lg" variant="outline" color="danger" block>Block level button</CButton>
<CButton size="lg" variant="ghost" color="info" block>Block level button</CButton>
</CCardBody>
</CCard>
</CCol>
src/views/icons/Brands.vue
+2 -2
View File
@@ -13,7 +13,7 @@
sm="2"
:key="brandName"
>
<CIcon :height="42" :content="$options.brands[brandName]"/>
<CIcon :height="42" :content="brand"/>
<div>{{brandName}}</div>
</CCol>
</template>
@@ -24,7 +24,7 @@
</template>
<script>
import { iconSet as brands } from '@coreui/icons/brands'
import { brandSet as brands } from '@coreui/icons'
export default {
name: 'Brands',
brands
src/views/icons/CoreUIIcons.vue
+15 -413
View File
@@ -1,8 +1,9 @@
<template>
<div>
<CCard>
<CCardHeader>
<i class="cui-pencil"></i>CoreUI Icons
<CIcon :content="$options.freeSet.pencil"/>CoreUI Icons
<CBadge color="info">New</CBadge>
<div class="card-header-actions">
<a
@@ -16,427 +17,28 @@
</div>
</CCardHeader>
<CCardBody>
<!-- <CRow class="text-center mb-5">
<template v-for="(name, key) in $options.iconNames">
<CCol :key="key" col="6" sm="4" md="3" xl="2">
<CIcon :name="name" width="24" class="mt-4"/>
<div>{{name}}</div>
<CRow class="text-center">
<template v-for="(icon, iconName) in $options.freeSet">
<CCol
class="mb-5"
col="3"
sm="2"
:key="iconName"
>
<CIcon :height="42" :content="icon"/>
<div>{{iconName}}</div>
</CCol>
</template>
</CRow>
-->
<CRow class="text-center ">
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-account-logout icons font-2xl d-block mt-4"></i>
<div>account-logout</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-action-redo icons font-2xl d-block mt-4"></i>
<div>action-redo</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-action-undo icons font-2xl d-block mt-4"></i>
<div>action-undo</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-align-center icons font-2xl d-block mt-4"></i>
<div>align-center</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-align-left icons font-2xl d-block mt-4"></i>
<div>align-left</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-align-right icons font-2xl d-block mt-4"></i>
<div>align-right</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-arrow-bottom icons font-2xl d-block mt-4"></i>
<div>arrow-bottom</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-arrow-left icons font-2xl d-block mt-4"></i>
<div>arrow-left</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-arrow-right icons font-2xl d-block mt-4"></i>
<div>arrow-right</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-arrow-top icons font-2xl d-block mt-4"></i>
<div>arrow-top</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-ban icons font-2xl d-block mt-4"></i>
<div>ban</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-basket-loaded icons font-2xl d-block mt-4"></i>
<div>basket-loaded</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-bell icons font-2xl d-block mt-4"></i>
<div>bell</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-bold icons font-2xl d-block mt-4"></i>
<div>bold</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-bookmark icons font-2xl d-block mt-4"></i>
<div>bookmark</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-briefcase icons font-2xl d-block mt-4"></i>
<div>briefcase</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-british-pound icons font-2xl d-block mt-4"></i>
<div>british-pound</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-brush icons font-2xl d-block mt-4"></i>
<div>brush</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-calculator icons font-2xl d-block mt-4"></i>
<div>calculator</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-calendar icons font-2xl d-block mt-4"></i>
<div>calendar</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cart icons font-2xl d-block mt-4"></i>
<div>cart</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-chart icons font-2xl d-block mt-4"></i>
<div>chart</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-check icons font-2xl d-block mt-4"></i>
<div>check</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-chevron-bottom icons font-2xl d-block mt-4"></i>
<div>chevron-bottom</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-chevron-left icons font-2xl d-block mt-4"></i>
<div>chevron-left</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-chevron-right icons font-2xl d-block mt-4"></i>
<div>chevron-right</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-chevron-top icons font-2xl d-block mt-4"></i>
<div>chevron-top</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-circle-check icons font-2xl d-block mt-4"></i>
<div>circle-check</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-circle-x icons font-2xl d-block mt-4"></i>
<div>circle-x</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cloud icons font-2xl d-block mt-4"></i>
<div>cloud</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cloud-download icons font-2xl d-block mt-4"></i>
<div>cloud-download</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cloud-upload icons font-2xl d-block mt-4"></i>
<div>cloud-upload</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-code icons font-2xl d-block mt-4"></i>
<div>code</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cog icons font-2xl d-block mt-4"></i>
<div>cog</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-comment-square icons font-2xl d-block mt-4"></i>
<div>comment-square</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-credit-card icons font-2xl d-block mt-4"></i>
<div>credit-card</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cursor icons font-2xl d-block mt-4"></i>
<div>cursor</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-dashboard icons font-2xl d-block mt-4"></i>
<div>dashboard</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-delete icons font-2xl d-block mt-4"></i>
<div>delete</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-dollar icons font-2xl d-block mt-4"></i>
<div>dollar</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-drop icons font-2xl d-block mt-4"></i>
<div>drop</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-envelope-closed icons font-2xl d-block mt-4"></i>
<div>envelope-closed</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-envelope-letter icons font-2xl d-block mt-4"></i>
<div>envelope-letter</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-envelope-open icons font-2xl d-block mt-4"></i>
<div>envelope-open</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-euro icons font-2xl d-block mt-4"></i>
<div>euro</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-file icons font-2xl d-block mt-4"></i>
<div>file</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-globe icons font-2xl d-block mt-4"></i>
<div>globe</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-graph icons font-2xl d-block mt-4"></i>
<div>graph</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-home icons font-2xl d-block mt-4"></i>
<div>home</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-inbox icons font-2xl d-block mt-4"></i>
<div>inbox</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-info icons font-2xl d-block mt-4"></i>
<div>info</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-italic icons font-2xl d-block mt-4"></i>
<div>italic</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-justify-center icons font-2xl d-block mt-4"></i>
<div>justify-center</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-justify-left icons font-2xl d-block mt-4"></i>
<div>justify-left</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-justify-right icons font-2xl d-block mt-4"></i>
<div>justify-right</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-laptop icons font-2xl d-block mt-4"></i>
<div>laptop</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-layers icons font-2xl d-block mt-4"></i>
<div>layers</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-lightbulb icons font-2xl d-block mt-4"></i>
<div>lightbulb</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-list icons font-2xl d-block mt-4"></i>
<div>list</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-location-pin icons font-2xl d-block mt-4"></i>
<div>location-pin</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-lock-locked icons font-2xl d-block mt-4"></i>
<div>lock-locked</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-lock-unlocked icons font-2xl d-block mt-4"></i>
<div>lock-unlocked</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-magnifying-glass icons font-2xl d-block mt-4"></i>
<div>magnifying-glass</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-map icons font-2xl d-block mt-4"></i>
<div>map</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-monitor icons font-2xl d-block mt-4"></i>
<div>monitor</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-moon icons font-2xl d-block mt-4"></i>
<div>moon</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-note icons font-2xl d-block mt-4"></i>
<div>note</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-options icons font-2xl d-block mt-4"></i>
<div>options</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-paperclip icons font-2xl d-block mt-4"></i>
<div>paperclip</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-pencil icons font-2xl d-block mt-4"></i>
<div>pencil</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-people icons font-2xl d-block mt-4"></i>
<div>people</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-phone icons font-2xl d-block mt-4"></i>
<div>phone</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-pie-chart icons font-2xl d-block mt-4"></i>
<div>pie-chart</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-print icons font-2xl d-block mt-4"></i>
<div>print</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-puzzle icons font-2xl d-block mt-4"></i>
<div>puzzle</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-rss icons font-2xl d-block mt-4"></i>
<div>rss</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-screen-desktop icons font-2xl d-block mt-4"></i>
<div>screen-desktop</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-screen-smartphone icons font-2xl d-block mt-4"></i>
<div>screen-smartphone</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-settings icons font-2xl d-block mt-4"></i>
<div>settings</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-share icons font-2xl d-block mt-4"></i>
<div>share</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-shield icons font-2xl d-block mt-4"></i>
<div>shield</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-sort-ascending icons font-2xl d-block mt-4"></i>
<div>sort-ascending</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-sort-descending icons font-2xl d-block mt-4"></i>
<div>sort-descending</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-speech icons font-2xl d-block mt-4"></i>
<div>speech</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-speedometer icons font-2xl d-block mt-4"></i>
<div>speedometer</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-star icons font-2xl d-block mt-4"></i>
<div>star</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-sun icons font-2xl d-block mt-4"></i>
<div>sun</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-tablet icons font-2xl d-block mt-4"></i>
<div>tablet</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-tags icons font-2xl d-block mt-4"></i>
<div>tags</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-task icons font-2xl d-block mt-4"></i>
<div>task</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-thumb-down icons font-2xl d-block mt-4"></i>
<div>thumb-down</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-thumb-up icons font-2xl d-block mt-4"></i>
<div>thumb-up</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-trash icons font-2xl d-block mt-4"></i>
<div>trash</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-underline icons font-2xl d-block mt-4"></i>
<div>underline</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-user icons font-2xl d-block mt-4"></i>
<div>user</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-user-female icons font-2xl d-block mt-4"></i>
<div>user-female</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-user-follow icons font-2xl d-block mt-4"></i>
<div>user-follow</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-user-unfollow icons font-2xl d-block mt-4"></i>
<div>user-unfollow</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-wrench icons font-2xl d-block mt-4"></i>
<div>wrench</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-yen icons font-2xl d-block mt-4"></i>
<div>yen</div>
</CCol>
</CRow>
</CCardBody>
</CCard>
</div>
</template>
<script>
// import { iconSet } from '@coreui/icons'
// const iconNames = Object.keys(iconSet)
<script>
import { freeSet } from '@coreui/icons'
export default {
name: 'CoreUIIcons',
// iconNames,
freeSet
}
</script>
src/views/icons/Flags.vue
+5 -5
View File
@@ -20,8 +20,8 @@
sm="2"
:key="key"
>
<CIcon :height="42" :content="$options.iconSet[flag]"/>
<div>{{flag}}</div>
<CIcon :height="42" :content="flag"/>
<div>{{key}}</div>
</CCol>
</template>
</CRow>
@@ -31,15 +31,15 @@
</template>
<script>
import { iconSet } from '@coreui/icons/flags'
import { flagSet } from '@coreui/icons'
export default {
name: 'Flags',
iconSet,
flagSet,
computed: {
// Avoid duplication caused by displaying 1x1 and 4x3 formats
// (adding Q to name makes icon quadratic)
displayedFlags () {
return Object.keys(this.$options.iconSet).filter(icon => !icon.includes('Q'))
return this.$options.flagSet
}
}
}
src/views/notifications/Alerts.vue
+2 -12
View File
@@ -107,16 +107,7 @@
<CAlert
color="secondary"
closeButton
fade
:show.sync="alert2"
>
Dismissible Alert with fade effect!
</CAlert>
<CAlert
color="secondary"
:show.sync="alert3"
class="alert-dismissible"
>
Dismissible Alert with custom button!
@@ -124,7 +115,7 @@
class="position-absolute"
color="secondary"
style="right:10px;top: 50%;transform: translateY(-50%);"
@click="alert3 = false"
@click="alert2 = false"
>
Close
</CButton>
@@ -186,8 +177,7 @@ export default {
dismissSecs: 10,
dismissCountDown: 10,
alert1: true,
alert2: true,
alert3: true
alert2: true
}
},
methods: {
src/views/notifications/Badges.vue
+9 -9
View File
@@ -51,17 +51,17 @@
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>pills</small>
<small>shape="pill"</small>
</CCardHeader>
<CCardBody>
<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>
<CBadge shape="pill" color="primary">Primary</CBadge>
<CBadge shape="pill" color="secondary">Secondary</CBadge>
<CBadge shape="pill" color="success">Success</CBadge>
<CBadge shape="pill" color="danger">Danger</CBadge>
<CBadge shape="pill" color="warning">Warning</CBadge>
<CBadge shape="pill" color="info">Info</CBadge>
<CBadge shape="pill" color="light">Light</CBadge>
<CBadge shape="pill" color="dark">Dark</CBadge>
</CCardBody>
</CCard>
<CCard>
src/views/notifications/Modals.vue
+1
View File
@@ -91,6 +91,7 @@
<CModal
title="Modal title"
:show.sync="primaryModal"
color="primary"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
src/views/users/User.vue
+1 -1
View File
@@ -6,7 +6,7 @@
User id: {{ $route.params.id }}
</CCardHeader>
<CCardBody>
<CTable
<CDataTable
striped
small
fixed
src/views/users/Users.vue
+2 -2
View File
@@ -3,7 +3,7 @@
<CCol col="12" xl="8">
<transition name="slide">
<CCard header-html="Users" body-wrapper>
<CTable
<CDataTable
hover
striped
:items="items"
@@ -27,7 +27,7 @@
</CBadge>
</td>
</template>
</CTable>
</CDataTable>
</CCard>
</transition>
</CCol>
src/views/widgets/Widgets.vue
+4 -4
View File
@@ -276,7 +276,7 @@
text="Products sold"
color="warning"
>
<CIcon name="basketLoaded" height="36"/>
<CIcon name="basket" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="28%"
@@ -315,7 +315,7 @@
color="warning"
inverse
>
<CIcon name="basketLoaded" height="36"/>
<CIcon name="basket" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="28%"
@@ -359,7 +359,7 @@
text="Products sold"
color="warning"
>
<CIcon name="basketLoaded" height="36"/>
<CIcon name="basket" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
@@ -418,7 +418,7 @@
color="warning"
inverse
>
<CIcon name="basketLoaded" height="36"/>
<CIcon name="basket" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">