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

refactor: restore valid docs links, and add new

Browse Source
This commit is contained in:
woothu
2019-07-30 16:53:42 +02:00
parent 2a45980ddb
commit 67dbabb4d2
25 changed files with 324 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Charts.vue
+17 -2
View File
@@ -1,8 +1,23 @@
<template> <template>
<div> <div>
<CCardGroup columns class="c-card-columns c-cols-2"> <CCardGroup columns class="c-card-columns c-cols-2">
<CCard header-html="Line Chart" body-wrapper> <CCard>
<CChartLineExample/> <CCardHeader>
Line Chart
<div class="c-card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Charts"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CChartLineExample/>
</CCardBody>
</CCard> </CCard>
<CCard header-html="Bar Chart" body-wrapper> <CCard header-html="Bar Chart" body-wrapper>
<CChartBarExample/> <CChartBarExample/>
src/views/base/Breadcrumbs.vue
+8 -3
View File
@@ -6,11 +6,16 @@
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
<!-- <div class="card-header-actions"> <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a
href="https://coreui.io/vue/docs/3.0/components/Breadcrumb"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small> <small class="text-muted">docs</small>
</a> </a>
</div> --> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CBreadcrumb :items="items" add-link-classes="sss" last-item-classes="aaa"/> <CBreadcrumb :items="items" add-link-classes="sss" last-item-classes="aaa"/>
src/views/base/Cards.vue
+36 -35
View File
@@ -2,7 +2,24 @@
<div> <div>
<CRow> <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card title" :body-html="loremIpsum"/> <CCard>
<CCardHeader>
Card title
<div class="c-card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/CardComponents"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
{{loremIpsum}}
</CCardBody>
</CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard footer-html="Card Footer" :body-html="loremIpsum" /> <CCard footer-html="Card Footer" :body-html="loremIpsum" />
@@ -28,7 +45,7 @@
/> />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. {{loremIpsum}}
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -39,7 +56,7 @@
<CBadge variant="success" class="c-float-right">Success</CBadge> <CBadge variant="success" class="c-float-right">Success</CBadge>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. {{loremIpsum}}
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -74,22 +91,22 @@
border-variant="success" border-variant="success"
body-wrapper body-wrapper
> >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card outline info" border-variant="info" body-wrapper> <CCard header-html="Card outline info" border-variant="info" body-wrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card outline warning" border-variant="warning" body-wrapper> <CCard header-html="Card outline warning" border-variant="warning" body-wrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card outline danger" border-variant="danger" body-wrapper> <CCard header-html="Card outline danger" border-variant="danger" body-wrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
@@ -97,32 +114,32 @@
<CRow> <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="c-card-accent-primary" header="Card with primary accent" body-wrapper> <CCard class="c-card-accent-primary" header="Card with primary accent" body-wrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="c-card-accent-secondary" header="Card with secondary accent" body-wrapper> <CCard class="c-card-accent-secondary" header="Card with secondary accent" body-wrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="c-card-accent-success" header="Card with success accent" body-wrapper> <CCard class="c-card-accent-success" header="Card with success accent" body-wrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="c-card-accent-info" header="Card with info accent" body-wrapper> <CCard class="c-card-accent-info" header="Card with info accent" body-wrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="c-card-accent-warning" header="Card with warning accent" body-wrapper> <CCard class="c-card-accent-warning" header="Card with warning accent" body-wrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="c-card-accent-danger" header="Card with danger accent" body-wrapper> <CCard class="c-card-accent-danger" header="Card with danger accent" body-wrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
@@ -191,27 +208,27 @@
<CRow> <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card title" class="c-bg-primary" body-wrapper> <CCard header-html="Card title" class="c-bg-primary" body-wrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card title" class="c-bg-success" body-wrapper> <CCard header-html="Card title" class="c-bg-success" body-wrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card title" class="c-bg-info" body-wrapper> <CCard header-html="Card title" class="c-bg-info" body-wrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card title" class="c-bg-warning" body-wrapper> <CCard header-html="Card title" class="c-bg-warning" body-wrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card title" class="c-bg-danger" body-wrapper> <CCard header-html="Card title" class="c-bg-danger" body-wrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
@@ -233,29 +250,13 @@
</CCardHeader> </CCardHeader>
<CCollapse :show="isCollapsed" :duration="400"> <CCollapse :show="isCollapsed" :duration="400">
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. {{loremIpsum}}
</CCardBody> </CCardBody>
</CCollapse> </CCollapse>
</CCard> </CCard>
</transition> </transition>
</CCol> </CCol>
</CRow> </CRow>
<!-- <CRow>
<CCol sm="6" md="4">
<CCard >
<CCardImg img-src="https://picsum.photos/600/300/?image=25"/>
<CCardHeader header-html="Card title"/>
<CCardBody style="max-height:200px;overflow-y:auto">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCardBody>
</CCard>
</CCol>
</CRow> -->
</div> </div>
</template> </template>
src/views/base/Carousels.vue
+6 -6
View File
@@ -7,16 +7,16 @@
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Carousel</strong> <strong> Bootstrap Carousel</strong>
<!-- <div class="card-header-actions"> <div class="c-card-header-actions">
<a <a
href="https://bootstrap-vue.js.org/docs/components/carousel" href="https://coreui.io/vue/docs/3.0/components/Carousel"
class="card-header-action" class="card-header-action"
rel="noreferrer noopener" rel="noreferrer noopener"
target="_blank" target="_blank"
> >
<small class="text-muted">docs</small> <small class="text-muted">docs</small>
</a> </a>
</div> --> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CCarousel <CCarousel
src/views/base/Collapses.vue
+9 -4
View File
@@ -7,11 +7,16 @@
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Collapse </strong> <strong> Bootstrap Collapse </strong>
<!-- <div class="card-header-actions"> <div class="c-card-header-actions">
<CLink class="card-header-action"> <a
href="https://coreui.io/vue/docs/3.0/components/Collapse"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small> <small class="text-muted">docs</small>
</CLink> </a>
</div> --> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CButton id="collapse1" variant="primary"> <CButton id="collapse1" variant="primary">
src/views/base/Forms.vue
+10
View File
@@ -5,6 +5,16 @@
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<strong>Credit Card </strong> <small>Form</small> <strong>Credit Card </strong> <small>Form</small>
<div class="c-card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/FormComponents"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow> <CRow>
src/views/base/Jumbotrons.vue
+9 -4
View File
@@ -7,11 +7,16 @@
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Jumbotron </strong> <strong> Bootstrap Jumbotron </strong>
<!-- <div class="card-header-actions"> <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a
<small class="c-text-muted">docs</small> href="https://coreui.io/vue/docs/3.0/components/Jumbotron"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a> </a>
</div> --> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2"> <CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
src/views/base/ListGroups.vue
+9 -4
View File
@@ -7,11 +7,16 @@
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap list group </strong> <strong> Bootstrap list group </strong>
<!-- <div class="c-card-header-actions"> <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/list-group" class="c-card-header-action" rel="noreferrer noopener" target="_blank"> <a
<small class="c-text-muted">docs</small> href="https://coreui.io/vue/docs/3.0/components/ListGroup"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a> </a>
</div> --> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CListGroup> <CListGroup>
src/views/base/Navbars.vue
+9 -4
View File
@@ -34,11 +34,16 @@
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Navbar </strong> <strong> Bootstrap Navbar </strong>
<!-- <div class="c-card-header-actions"> <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/navbar" class="c-card-header-action" rel="noreferrer noopener" target="_blank"> <a
<small class="c-text-muted">docs</small> href="https://coreui.io/vue/docs/3.0/components/Navbar"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a> </a>
</div> --> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CNavbar <CNavbar
src/views/base/Navs.vue
+9 -7
View File
@@ -4,14 +4,16 @@
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
<!-- <div class="c-card-header-actions"> <div class="c-card-header-actions">
<CLink <a
href="#" href="https://coreui.io/vue/docs/3.0/components/Nav"
class="c-card-header-action" class="card-header-action"
rel="noreferrer noopener"
target="_blank"
> >
<small class="c-text-muted">docs</small> <small class="text-muted">docs</small>
</CLink> </a>
</div> --> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CNav> <CNav>
src/views/base/Paginations.vue
+9 -4
View File
@@ -5,11 +5,16 @@
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Responsive bootstrap Pagination</strong> <strong> Responsive bootstrap Pagination</strong>
<!-- <div class="c-card-header-actions"> <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/pagination" class="c-card-header-action" rel="noreferrer noopener" target="_blank"> <a
<small class="c-text-muted">docs</small> href="https://coreui.io/vue/docs/3.0/components/Pagination"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a> </a>
</div> --> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h6>Default</h6> <h6>Default</h6>
src/views/base/Popovers.vue
+9 -4
View File
@@ -5,11 +5,16 @@
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Popovers</strong> <strong> Bootstrap Popovers</strong>
<!-- <div class="c-card-header-actions"> <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/popovers" class="c-card-header-action" rel="noreferrer noopener" target="_blank"> <a
<small class="c-text-muted">docs</small> href="https://coreui.io/vue/docs/3.0/components/Popover"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a> </a>
</div> --> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow> <CRow>
src/views/base/ProgressBars.vue
+10 -5
View File
@@ -5,11 +5,16 @@
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Progress</strong> <strong> Bootstrap Progress</strong>
<!-- <div class="c-card-header-actions"> <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/progress" class="c-card-header-action" rel="noreferrer noopener" target="_blank"> <a
<small class="c-text-muted">docs</small> href="https://coreui.io/vue/docs/3.0/components/Progress"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a> </a>
</div> --> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CProgress :value="counter" :max="max" show-progress animated></CProgress> <CProgress :value="counter" :max="max" show-progress animated></CProgress>
@@ -206,7 +211,7 @@ export default {
name: 'progress-bars', name: 'progress-bars',
data () { data () {
return { return {
counter: 45, counter: 73,
max: 100, max: 100,
max2: 50, max2: 50,
value: 33.333333333, value: 33.333333333,
src/views/base/Switches.vue
+12 -5
View File
@@ -4,11 +4,18 @@
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard v-if="true"> <CCard v-if="true">
<CCardHeader> <CCardHeader>
<h5> Radio switches
Radio switches <CBadge :variant="radio" class="c-mr-auto">{{radio}}</CBadge>
<CBadge :variant="radio" class="c-mr-auto">{{radio}}</CBadge> <div class="c-card-header-actions">
<CBadge variant="danger" class="c-float-right">NEW</CBadge> <a
</h5> href="https://coreui.io/vue/docs/3.0/components/Switch"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<!-- <CSwitch <!-- <CSwitch
src/views/base/Tables.vue
+68 -58
View File
@@ -2,66 +2,76 @@
<div> <div>
<CRow> <CRow>
<CCol sm="12"> <CCol sm="12">
<CCard header-html="CTable component functionality presentation" body-wrapper> <CCard>
<CTable <CCardHeader>
:items="getItems()" CTable component functionality presentation
:fields="fields" <div class="c-card-header-actions">
:per-page="6" <a
index-column href="https://coreui.io/vue/docs/3.0/components/Table"
filter-row class="card-header-action"
options-row rel="noreferrer noopener"
hover target="_blank"
:default-column-filter="{ role:'staff' }"
:default-sorters="['username', 'asc']"
:default-filter="2012"
dark-header
footer
pagination
>
<template #index-column="{index}">
<td
@click="toggleDetails(index)"
style="cursor:pointer"
class="c-text-center"
> >
<i <small class="text-muted">docs</small>
class="c-icons c-font-lg c-d-block cui-chevron-right" </a>
style="transition: transform 0.4s" </div>
:style="details.includes(index) ? 'transform:rotate(90deg)': ''" </CCardHeader>
></i> <CCardBody>
</td> <CTable
</template> :items="getItems()"
<template #status="{item}"> :fields="fields"
<td> :per-page="6"
<CBadge :variant="getBadge(item.status)"> index-column
{{item.status}} filter-row
</CBadge> options-row
</td> hover
</template> :default-column-filter="{ role:'staff' }"
<template #show_details="{item, index}"> :default-sorters="['username', 'asc']"
<td class="c-py-2"> :default-filter="2012"
<CButton dark-header
variant="outline-primary" footer
square pagination
size="sm" >
<template #index-column="{index}">
<td
@click="toggleDetails(index)" @click="toggleDetails(index)"
:text-html="details.includes(index) ? 'Hide' : 'Show'" style="cursor:pointer"
/> class="c-text-center"
</td> >
</template> <i
<template #details="{item, index}"> class="c-icons c-font-lg c-d-block cui-chevron-right"
<CCollapse :show="details.includes(index)"> style="transition: transform 0.4s"
<CCardBody> :style="details.includes(index) ? 'transform:rotate(90deg)': ''"
{{index + 1}} - {{item}} ></i>
</CCardBody> </td>
</CCollapse> </template>
</template> <template #status="{item}">
</CTable> <td>
<!-- <CPagination <CBadge :variant="getBadge(item.status)">
v-show="pages > 1" {{item.status}}
:activePage.sync="page" </CBadge>
:pages="pages" </td>
/> --> </template>
<template #show_details="{item, index}">
<td class="c-py-2">
<CButton
variant="outline-primary"
square
size="sm"
@click="toggleDetails(index)"
:text-html="details.includes(index) ? 'Hide' : 'Show'"
/>
</td>
</template>
<template #details="{item, index}">
<CCollapse :show="details.includes(index)">
<CCardBody>
{{index + 1}} - {{item}}
</CCardBody>
</CCollapse>
</template>
</CTable>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
src/views/base/Tabs.vue
+10
View File
@@ -5,6 +5,16 @@
<CCard> <CCard>
<CCardHeader> <CCardHeader>
Tabs Tabs
<div class="c-card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Tabs"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CTabs> <CTabs>
src/views/base/Tooltips.vue
+9 -4
View File
@@ -6,11 +6,16 @@
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Tooltips </strong> <strong> Bootstrap Tooltips </strong>
<small><code>v-c-tooltip</code> directive</small> <small><code>v-c-tooltip</code> directive</small>
<!-- <div class="c-card-header-actions"> <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="c-card-header-action" rel="noreferrer noopener" target="_blank"> <a
<small class="c-text-muted">docs</small> href="https://coreui.io/vue/docs/3.0/components/Tooltip"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a> </a>
</div> --> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow> <CRow>
src/views/buttons/BrandButtons.vue
+10
View File
@@ -5,6 +5,16 @@
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<strong>Brand Button</strong> <strong>Brand Button</strong>
<div class="c-card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<small>Usage </small> <small>Usage </small>
src/views/buttons/ButtonGroups.vue
+8 -3
View File
@@ -7,11 +7,16 @@
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap button group</strong> <strong> Bootstrap button group</strong>
<!-- <div class="card-header-actions"> <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/button-group" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small> <small class="text-muted">docs</small>
</a> </a>
</div> --> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<div> <div>
src/views/buttons/Dropdowns.vue
+8 -3
View File
@@ -7,11 +7,16 @@
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Dropdown</strong> <strong> Bootstrap Dropdown</strong>
<!-- <div class="card-header-actions"> <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/dropdown" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a
href="https://coreui.io/vue/docs/3.0/components/Dropdown"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small> <small class="text-muted">docs</small>
</a> </a>
</div> --> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<div> <div>
src/views/buttons/StandardButtons.vue
+10
View File
@@ -3,6 +3,16 @@
<CCard > <CCard >
<CCardHeader> <CCardHeader>
<strong>Standard buttons</strong> <strong>Standard buttons</strong>
<div class="c-card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow class="c-align-items-center"> <CRow class="c-align-items-center">
src/views/notifications/Alerts.vue
+8 -3
View File
@@ -7,11 +7,16 @@
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Alert</strong> <strong> Bootstrap Alert</strong>
<!-- <div class="card-header-actions"> <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/alert" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a
href="https://coreui.io/vue/docs/3.0/components/Alert"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small> <small class="text-muted">docs</small>
</a> </a>
</div> --> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<div> <div>
src/views/notifications/Badges.vue
+8 -3
View File
@@ -7,11 +7,16 @@
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Badge</strong> <strong> Bootstrap Badge</strong>
<!-- <div class="card-header-actions"> <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/badge" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a
href="https://coreui.io/vue/docs/3.0/components/Badge"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small> <small class="text-muted">docs</small>
</a> </a>
</div> --> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h2>Example heading <CBadge variant="primary">New</CBadge></h2> <h2>Example heading <CBadge variant="primary">New</CBadge></h2>
src/views/notifications/Modals.vue
+10
View File
@@ -6,6 +6,16 @@
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> Bootstrap Modals <i class="fa fa-align-justify"></i> Bootstrap Modals
<div class="c-card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Modal"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CButton variant="secondary" @click="myModal = true" class="c-mr-1"> <CButton variant="secondary" @click="myModal = true" class="c-mr-1">
src/views/widgets/Widgets.vue
+13
View File
@@ -12,6 +12,19 @@
:value="25" :value="25"
class="c-progress-xs c-my-3 c-mb-0" class="c-progress-xs c-my-3 c-mb-0"
/> />
<template #header>
<div class="c-card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
class="card-header-action c-position-absolute"
style="right:10px; top:10px"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</template>
</CWidgetProgress> </CWidgetProgress>
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">