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/notifications/Badges.vue
+29 -20
View File
@@ -1,25 +1,26 @@
<template>
<template functional>
<div class="wrapper">
<div class="animated fadeIn">
<CRow>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Badge</strong>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Badge</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/badge" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<div>
<CCardBody>
<h2>Example heading <CBadge>New</CBadge></h2>
<h3>Example heading <CBadge>New</CBadge></h3>
<h4>Example heading <CBadge>New</CBadge></h4>
<h5>Example heading <CBadge>New</CBadge></h5>
<h6>Example heading <CBadge>New</CBadge></h6>
</div>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton variant="primary">
Notifications <CBadge variant="light" :style="{position: 'static'}">4</CBadge>
</CButton>
@@ -27,8 +28,12 @@
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCard header="<i class='fa fa-align-justify'></i> Badge <small>contextual variations</small>">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>contextual variations</small>
</CCardHeader>
<CCardBody>
<CBadge variant="primary">Primary</CBadge>
<CBadge variant="secondary">Secondary</CBadge>
<CBadge variant="success">Success</CBadge>
@@ -37,10 +42,14 @@
<CBadge variant="info">Info</CBadge>
<CBadge variant="light">Light</CBadge>
<CBadge variant="dark">Dark</CBadge>
</div>
</CCardBody>
</CCard>
<CCard header="<i class='fa fa-align-justify'></i> Badge <small>pills</small>">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>pills</small>
</CCardHeader>
<CCardBody>
<CBadge pill variant="primary">Primary</CBadge>
<CBadge pill variant="secondary">Secondary</CBadge>
<CBadge pill variant="success">Success</CBadge>
@@ -49,10 +58,14 @@
<CBadge pill variant="info">Info</CBadge>
<CBadge pill variant="light">Light</CBadge>
<CBadge pill variant="dark">Dark</CBadge>
</div>
</CCardBody>
</CCard>
<CCard header="<i class='fa fa-align-justify'></i> Badge <small>actionable</small>">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>actionable</small>
</CCardHeader>
<CCardBody>
<CBadge href="#" variant="primary">Primary</CBadge>
<CBadge href="#" variant="secondary">Secondary</CBadge>
<CBadge href="#" variant="success">Success</CBadge>
@@ -61,7 +74,7 @@
<CBadge href="#" variant="info">Info</CBadge>
<CBadge href="#" variant="light">Light</CBadge>
<CBadge href="#" variant="dark">Dark</CBadge>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
@@ -71,10 +84,6 @@
<script>
export default {
name: 'badges',
data () {
return {
}
}
name: 'badges'
}
</script>