sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 4 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/Paginations.vue
+19 -70
View File
@@ -1,121 +1,70 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Pagination</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/pagination" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div>
</div>
</CCardHeader>
<div>
<h6>CPagination</h6>
<CPagination v-model="currentPage2"
:itemsNumber="1111"
@change="hehe"
size="lg"
align="center"
:limit="6"
:noDots="false"
:noDoubleArrows="false"
:noArrows="false"
/>
<br>
<h6>Default</h6>
<b-pagination size="md" :total-rows="100" v-model="currentPage" :per-page="10">
</b-pagination>
<CPagination v-model="currentPage" :pages="10"/>
<br>
<h6>Small</h6>
<b-pagination size="sm" :total-rows="100" v-model="currentPage" :per-page="10">
</b-pagination>
<CPagination size="sm" v-model="currentPage" :pages="10"/>
<br>
<div class="d-sm-down-none">
<h6>Large</h6>
<b-pagination size="lg" :total-rows="100" v-model="currentPage" :per-page="10">
</b-pagination>
<CPagination size="lg" v-model="currentPage" :pages="10"/>
<br>
</div>
<div>currentPage: {{currentPage}}</div>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Pagination </strong>
<small>alignment</small>
</div>
</CCardHeader>
<div>
<h6>Left alignment (default)</h6>
<b-pagination :total-rows="100" v-model="currentPage" :per-page="10">
</b-pagination>
<CPagination v-model="currentPage" :pages="10"/>
<br>
<h6>Center alignment</h6>
<b-pagination align="center" :total-rows="100" v-model="currentPage" :per-page="10">
</b-pagination>
<CPagination align="center" :pages="10" v-model="currentPage"/>
<br>
<h6>Right (end) alignment</h6>
<b-pagination align="right" :total-rows="100" v-model="currentPage" :per-page="10">
</b-pagination>
<CPagination align="end" v-model="currentPage" :pages="10"/>
<br>
<div>currentPage: {{currentPage}}</div>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Pagination </strong>
<small>navigation</small>
</div>
<div>
<h6>Default</h6>
<b-pagination-nav base-url="#" :number-of-pages="10" v-model="currentPage"/>
<h6 class="mt-4">With link generator function</h6>
<b-pagination-nav :link-gen="linkGen" :number-of-pages="10" v-model="currentPage"/>
<br>
<div class="mt-4">currentPage: {{currentPage}}</div>
</div>
</b-card>
</CCard>
</div>
</div>
</template>
<script>
// import CPagination from './CPagination'
export default {
name: 'paginations',
// components: {
// CPagination
// },
data () {
return {
currentPage: 3,
currentPage2: 3
}
},
methods: {
linkGen (pageNum) {
return '#page/' + pageNum + '/foobar'
},
hehe (val) {
// console.log(this.currentPage)
}
}
// methods: {
// linkGen (pageNum) {
// return '#page/' + pageNum + '/foobar'
// },
// }
}
</script>