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

feat: Bootstrap Vue components changed to Coreui-Vue components

Browse Source
This commit is contained in:
woothu
2019-02-18 17:27:13 +01:00
parent 6433e8ac1e
commit 2057ba6b5c
47 changed files with 7751 additions and 8387 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/Tabs.vue
+130 -91
View File
@@ -1,122 +1,118 @@
<template>
<div class="animated fadeIn">
<b-row>
<b-col xs="12" lg="6">
<b-card>
<div slot="header">
<CRow>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader slot="header">
Tabs
</div>
<b-tabs>
<b-tab title="Home" active>
<br> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
</CCardHeader>
<CTabs addTabClasses="mt-1">
<CTab title="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
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</b-tab>
<b-tab title="Profile" >
<br>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
</CTab>
<CTab title="Profile" >
2. 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
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</b-tab>
<b-tab title="Disabled" disabled>
<br>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
</CTab>
<CTab title="Disabled" disabled>
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
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</b-tab>
</b-tabs>
</b-card>
</b-col>
<b-col xs="12" lg="6">
<b-card>
<div slot="header">
</CTab>
</CTabs>
</CCard>
</CCol>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader slot="header">
Tabs
</CCardHeader>
<CTabs
pills
addNavClasses="mb-3"
>
<CTab title="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
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</CTab>
<CTab title="Profile" >
2. 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
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</CTab>
<CTab title="Disabled" disabled>
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
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</CTab>
</CTabs>
</CCard>
</CCol>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader slot="header">
Tabs with icons
</div>
<b-tabs>
<b-tab active>
</CCardHeader>
<CTabs addTabClasses="mt-1">
<CTab active>
<template slot="title">
<i class="icon-calculator"></i>
</template>
<br> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
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
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</b-tab>
<b-tab>
</CTab>
<CTab>
<template slot="title">
<i class="icon-basket-loaded"></i>
</template>
<br>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
2. 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
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</b-tab>
<b-tab>
</CTab>
<CTab>
<template slot="title">
<i class="icon-pie-chart"></i>
</template>
<br>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
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
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</b-tab>
</b-tabs>
</b-card>
</b-col>
<b-col xs="12" lg="6">
<b-card>
<div slot="header">
</CTab>
</CTabs>
</CCard>
</CCol>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader slot="header">
Tabs with icons
</div>
<b-tabs v-model="tabIndex[0]">
<b-tab active>
<template slot="title">
<i class="icon-calculator"></i> {{tabs[0]}}
</template>
<br> 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
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</b-tab>
<b-tab>
<template slot="title">
<i class="icon-basket-loaded"></i> {{tabs[1]}}
</template>
<br>2. 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
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</b-tab>
<b-tab>
<template slot="title">
<i class="icon-pie-chart"></i> {{tabs[2]}}
</template>
<br>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
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</b-tab>
</b-tabs>
</b-card>
</b-col>
<b-col xs="12" lg="6">
<b-card>
<div slot="header">
Tabs vertical
</div>
<b-card no-body>
<b-tabs card pills vertical nav-wrapper-class="w-40" v-model="tabIndex[1]">
<b-tab active>
</CCardHeader>
<CTabs
addTabClasses="mt-1"
card
>
<CTab active>
<template slot="title">
<i class="icon-calculator"></i> {{tabs[0]}}
</template>
@@ -125,8 +121,8 @@
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</b-tab>
<b-tab>
</CTab>
<CTab>
<template slot="title">
<i class="icon-basket-loaded"></i> {{tabs[1]}}
</template>
@@ -135,8 +131,8 @@
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</b-tab>
<b-tab>
</CTab>
<CTab>
<template slot="title">
<i class="icon-pie-chart"></i> {{tabs[2]}}
</template>
@@ -145,12 +141,55 @@
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</b-tab>
</b-tabs>
</b-card>
</b-card>
</b-col>
</b-row>
</CTab>
</CTabs>
</CCard>
</CCol>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader slot="header">
Tabs vertical
</CCardHeader>
<CTabs
card
pills
vertical="4"
v-model="tabIndex[1]"
>
<CTab active>
<template slot="title">
<i class="icon-calculator"></i> {{tabs[0]}}
</template>
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
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</CTab>
<CTab>
<template slot="title">
<i class="icon-basket-loaded"></i> {{tabs[1]}}
</template>
2. 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
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</CTab>
<CTab>
<template slot="title">
<i class="icon-pie-chart"></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
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</CTab>
</CTabs>
</CCard>
</CCol>
</CRow>
</div>
</template>