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

refactor: template changes to implement new CCard syntax

Browse Source
This commit is contained in:
woothu
2019-03-05 11:19:23 +01:00
parent 7e3646e438
commit 403122ddfb
36 changed files with 2725 additions and 2895 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/ProgressBars.vue
+24 -24
View File
@@ -2,7 +2,7 @@
<div class="wrapper">
<div class="animated fadeIn">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Progress</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/progress" class="card-header-action" rel="noreferrer noopener" target="_blank">
@@ -10,7 +10,7 @@
</a>
</div>
</CCardHeader>
<div>
<CCardBody>
<CProgress :value="counter" :max="max" show-progress animated></CProgress>
<CProgress class="mt-1" :max="max" show-value>
<CProgressBar :value="counter*(6/10)" variant="success"/>
@@ -18,13 +18,13 @@
<CProgressBar :value="counter*(1.5/10)" variant="danger"/>
</CProgress>
<CButton class="mt-4" @click="clicked">Click me</CButton>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
</CCardHeader>
<div>
<CCardBody>
<h6>No label</h6>
<CProgress :value="value" :max="max2" class="mb-3"></CProgress>
<h6>Value label</h6>
@@ -35,39 +35,39 @@
<CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"></CProgress>
<h6>Progress label with precision</h6>
<CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"></CProgress>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>width</small>
</CCardHeader>
<div>
<CCardBody>
<h6>Default width</h6>
<CProgress :value="value3" class="mb-3"></CProgress>
<h6>Custom widths</h6>
<CProgress :value="value3" class="w-75 mb-2"></CProgress>
<CProgress :value="value3" class="w-50 mb-2"></CProgress>
<CProgress :value="value3" class="w-25"></CProgress>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>height</small>
</CCardHeader>
<div>
<CCardBody>
<h6>Default height</h6>
<CProgress :value="value3" show-progress class="mb-3"></CProgress>
<h6>Custom heights</h6>
<CProgress height="2rem" :value="value3" show-progress class="mb-2"></CProgress>
<CProgress height="20px" :value="value3" show-progress class="mb-2"></CProgress>
<CProgress height="2px" :value="value3"></CProgress>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>variants</small>
</CCardHeader>
<div>
<CCardBody>
<div :key="index" v-for="(bar, index) in bars" class="row mb-1">
<div class="col-sm-2">{{ bar.variant }}:</div>
<div class="col-sm-10 pt-1">
@@ -77,13 +77,13 @@
></CProgress>
</div>
</div>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>striped</small>
</CCardHeader>
<div>
<CCardBody>
<CProgress :value="25" variant="success" :striped="striped" class="mb-2"></CProgress>
<CProgress :value="50" variant="info" :striped="striped" class="mb-2"></CProgress>
<CProgress :value="75" variant="warning" :striped="striped" class="mb-2"></CProgress>
@@ -91,13 +91,13 @@
<CButton variant="secondary" @click="striped = !striped">
{{ striped ? 'Remove' : 'Add'}} Striped
</CButton>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>animated</small>
</CCardHeader>
<div>
<CCardBody>
<CProgress :value="25" variant="success" striped :animated="animate" class="mb-2"></CProgress>
<CProgress :value="50" variant="info" striped :animated="animate" class="mb-2"></CProgress>
<CProgress :value="75" variant="warning" striped :animated="animate" class="mb-2"></CProgress>
@@ -105,13 +105,13 @@
<CButton variant="secondary" @click="animate = !animate">
{{ animate ? 'Stop' : 'Start'}} Animation
</CButton>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>multiple bars</small>
</CCardHeader>
<div>
<CCardBody>
<CProgress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"></CProgressBar>
<CProgressBar variant="success" :value="values[1]"></CProgressBar>
@@ -132,7 +132,7 @@
<CProgressBar variant="success" :value="values[1]" animated show-progress></CProgressBar>
<CProgressBar variant="info" :value="values[2]" striped show-progress></CProgressBar>
</CProgress>
</div>
</CCardBody>
</CCard>
</div>
</div>