sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 4 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/Navs.vue
+57 -42
View File
@@ -2,28 +2,33 @@
<div class="wrapper">
<div class="animated fadeIn">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/nav" class="card-header-action" rel="noreferrer noopener" target="_blank">
<!-- <div class="card-header-actions">
<CLink
href="#"
class="card-header-action"
>
<small class="text-muted">docs</small>
</a>
</div>
</CLink>
</div> -->
</CCardHeader>
<div>
<CCardBody>
<CNav>
<CNavItem active>Active</CNavItem>
<CNavItem title="Link"/>
<CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>icons</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>icons</small>
</CCardHeader>
<div>
<CCardBody>
<CNav>
<CNavItem active>
<i class="icon-basket-loaded"></i>
@@ -36,13 +41,15 @@
</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>tab style</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>tab style</small>
</CCardHeader>
<div>
<CCardBody>
<CNav tabs>
<CNavItem active>
Active
@@ -55,61 +62,67 @@
</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header" @click="item++">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>pill style</small>
<CCardHeader @click="item++">
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>pill style</small>
</CCardHeader>
<div>
<CCardBody>
<CNav pills>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>fill tabs</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>fill tabs</small>
</CCardHeader>
<div>
<CCardBody>
<CNav fill tabs>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>justified tabs</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>justified tabs</small>
</CCardHeader>
<div>
<CCardBody>
<CNav justified tabs>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>dropdown support</small>
</CCardHeader>
<div>
<CCardBody>
<CNav pills>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CDropdown id="nav7_ddown"
nav
placement="bottom-end"
button-content="Dropdown"
buttonContent="Dropdown"
>
<!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> -->
<CDropdownItem>one</CDropdownItem>
@@ -118,24 +131,26 @@
<CDropdownItem>three</CDropdownItem>
</CDropdown>
</CNav>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>vertical variation</small>
</CCardHeader>
<CRow>
<CCol cols="3" class="m-0">
<CNav vertical pills >
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCol>
</CRow>
<CCardBody>
<CRow>
<CCol cols="3" class="m-0">
<CNav vertical pills >
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCol>
</CRow>
</CCardBody>
</CCard>
</div>
</div>