feat: Bootstrap Vue components changed to Coreui-Vue components
This commit is contained in:
woothu
@@ -1,19 +1,17 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CRow>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Alert</strong>
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/alert" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<p></p>
|
||||
<CAlert show variant="primary">Primary Alert</CAlert>
|
||||
@@ -25,16 +23,14 @@
|
||||
<CAlert show variant="light">Light Alert</CAlert>
|
||||
<CAlert show variant="dark">Dark Alert</CAlert>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> Alert
|
||||
<small> use <code>.alert-link</code> to provide links</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<CAlert show variant="primary">
|
||||
Primary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
@@ -59,19 +55,17 @@
|
||||
</CAlert>
|
||||
<CAlert show variant="dark">
|
||||
Dark Alert with
|
||||
<b-link href="#" class="alert-link">an example link</b-link>
|
||||
<CLink href="#" class="alert-link">an example link</CLink>
|
||||
.
|
||||
</CAlert>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CAlert show variant="success">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>
|
||||
@@ -84,15 +78,13 @@
|
||||
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
||||
</p>
|
||||
</CAlert>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> Alerts <small>dismissible</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<CAlert :show="true" dismissible disabled>
|
||||
Dismissible Alert!
|
||||
@@ -119,17 +111,15 @@
|
||||
>
|
||||
Dismissible Alert!
|
||||
</CAlert>
|
||||
<b-btn @click="showDismissibleAlert=true" variant="info" class="m-1">
|
||||
<CButton @click="showDismissibleAlert=true" variant="info" class="m-1">
|
||||
Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
|
||||
</b-btn>
|
||||
</CButton>
|
||||
</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> Alerts <small>auto dismissible</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<CAlert :show="dismissCountDown"
|
||||
dismissible
|
||||
@@ -145,32 +135,26 @@
|
||||
@dismissed="dismissCountdown=0"
|
||||
@dismiss-count-down="countDownChanged">
|
||||
Alert will dismiss after {{dismissCountDown}} seconds...
|
||||
<b-progress variant="info"
|
||||
<CProgress variant="info"
|
||||
:max="dismissSecs"
|
||||
:value="dismissCountDown"
|
||||
height="4px">
|
||||
</b-progress>
|
||||
</CProgress>
|
||||
</CAlert>
|
||||
<b-btn @click="showAlert" variant="info" class="m-1">
|
||||
<CButton @click="showAlert" variant="info" class="m-1">
|
||||
Show alert with timer
|
||||
</b-btn>
|
||||
</CButton>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import CAlert from './CAlert'
|
||||
// import CButtonClose from './CButtonClose'
|
||||
export default {
|
||||
name: 'alerts',
|
||||
// components: {
|
||||
// CAlert,
|
||||
// CButtonClose
|
||||
// },
|
||||
data () {
|
||||
return {
|
||||
dismissSecs: 10,
|
||||
|
||||
@@ -1,82 +1,72 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CRow>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<h2>Example heading <b-badge>New</b-badge></h2>
|
||||
<h3>Example heading <b-badge>New</b-badge></h3>
|
||||
<h4>Example heading <b-badge>New</b-badge></h4>
|
||||
<h5>Example heading <b-badge>New</b-badge></h5>
|
||||
<h6>Example heading <b-badge>New</b-badge></h6>
|
||||
<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>
|
||||
<div slot="footer">
|
||||
<b-button variant="primary">
|
||||
Notifications <b-badge variant="light" :style="{position: 'static'}">4</b-badge>
|
||||
</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card header="<i class='fa fa-align-justify'></i> Badge <small>contextual variations</small>"
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<CCardFooter slot="footer">
|
||||
<CButton variant="primary">
|
||||
Notifications <CBadge variant="light" :style="{position: 'static'}">4</CBadge>
|
||||
</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard header="<i class='fa fa-align-justify'></i> Badge <small>contextual variations</small>">
|
||||
<div>
|
||||
<b-badge variant="primary">Primary</b-badge>
|
||||
<b-badge variant="secondary">Secondary</b-badge>
|
||||
<b-badge variant="success">Success</b-badge>
|
||||
<b-badge variant="danger">Danger</b-badge>
|
||||
<b-badge variant="warning">Warning</b-badge>
|
||||
<b-badge variant="info">Info</b-badge>
|
||||
<b-badge variant="light">Light</b-badge>
|
||||
<b-badge variant="dark">Dark</b-badge>
|
||||
<CBadge variant="primary">Primary</CBadge>
|
||||
<CBadge variant="secondary">Secondary</CBadge>
|
||||
<CBadge variant="success">Success</CBadge>
|
||||
<CBadge variant="danger">Danger</CBadge>
|
||||
<CBadge variant="warning">Warning</CBadge>
|
||||
<CBadge variant="info">Info</CBadge>
|
||||
<CBadge variant="light">Light</CBadge>
|
||||
<CBadge variant="dark">Dark</CBadge>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card header="<i class='fa fa-align-justify'></i> Badge <small>pills</small>"
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
</CCard>
|
||||
<CCard header="<i class='fa fa-align-justify'></i> Badge <small>pills</small>">
|
||||
<div>
|
||||
<b-badge pill variant="primary">Primary</b-badge>
|
||||
<b-badge pill variant="secondary">Secondary</b-badge>
|
||||
<b-badge pill variant="success">Success</b-badge>
|
||||
<b-badge pill variant="danger">Danger</b-badge>
|
||||
<b-badge pill variant="warning">Warning</b-badge>
|
||||
<b-badge pill variant="info">Info</b-badge>
|
||||
<b-badge pill variant="light">Light</b-badge>
|
||||
<b-badge pill variant="dark">Dark</b-badge>
|
||||
<CBadge pill variant="primary">Primary</CBadge>
|
||||
<CBadge pill variant="secondary">Secondary</CBadge>
|
||||
<CBadge pill variant="success">Success</CBadge>
|
||||
<CBadge pill variant="danger">Danger</CBadge>
|
||||
<CBadge pill variant="warning">Warning</CBadge>
|
||||
<CBadge pill variant="info">Info</CBadge>
|
||||
<CBadge pill variant="light">Light</CBadge>
|
||||
<CBadge pill variant="dark">Dark</CBadge>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card header="<i class='fa fa-align-justify'></i> Badge <small>actionable</small>"
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
</CCard>
|
||||
<CCard header="<i class='fa fa-align-justify'></i> Badge <small>actionable</small>">
|
||||
<div>
|
||||
<b-badge href="#" variant="primary">Primary</b-badge>
|
||||
<b-badge href="#" variant="secondary">Secondary</b-badge>
|
||||
<b-badge href="#" variant="success">Success</b-badge>
|
||||
<b-badge href="#" variant="danger">Danger</b-badge>
|
||||
<b-badge href="#" variant="warning">Warning</b-badge>
|
||||
<b-badge href="#" variant="info">Info</b-badge>
|
||||
<b-badge href="#" variant="light">Light</b-badge>
|
||||
<b-badge href="#" variant="dark">Dark</b-badge>
|
||||
<CBadge href="#" variant="primary">Primary</CBadge>
|
||||
<CBadge href="#" variant="secondary">Secondary</CBadge>
|
||||
<CBadge href="#" variant="success">Success</CBadge>
|
||||
<CBadge href="#" variant="danger">Danger</CBadge>
|
||||
<CBadge href="#" variant="warning">Warning</CBadge>
|
||||
<CBadge href="#" variant="info">Info</CBadge>
|
||||
<CBadge href="#" variant="light">Light</CBadge>
|
||||
<CBadge href="#" variant="dark">Dark</CBadge>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,120 +0,0 @@
|
||||
import CButtonClose from './CButtonClose'
|
||||
|
||||
export default {
|
||||
name: 'CAlert',
|
||||
components: {CButtonClose},
|
||||
render (h) {
|
||||
if (!this.localShow) {
|
||||
// If not showing, render placeholder
|
||||
return h(false)
|
||||
}
|
||||
let dismissBtn = h(false)
|
||||
if (this.dismissible) {
|
||||
dismissBtn = this.$scopedSlots.default ?
|
||||
this.$scopedSlots.default({dismiss: this.dismiss}) :
|
||||
h(
|
||||
'CButtonClose',
|
||||
{ on: { click: this.dismiss }},
|
||||
[ this.$slots.dismiss ]
|
||||
)
|
||||
}
|
||||
const alert = h(
|
||||
'div',
|
||||
{class: this.classObject, attrs: { role: 'alert', 'aria-live': 'polite', 'aria-atomic': true}},
|
||||
[dismissBtn, this.$slots.default]
|
||||
)
|
||||
return !this.fade ? alert : h(
|
||||
'transition',
|
||||
{ props: { name: 'fade', appear: true } },
|
||||
[ alert ]
|
||||
)
|
||||
},
|
||||
model: {
|
||||
prop: 'show',
|
||||
event: 'input'
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
countDownTimerId: null,
|
||||
dismissed: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classObject () {
|
||||
return ['alert', `alert-${this.variant}`, this.dismissible ? 'alert-dismissible' : '']
|
||||
},
|
||||
localShow () {
|
||||
return !this.dismissed && (this.countDownTimerId || this.show)
|
||||
}
|
||||
},
|
||||
props: {
|
||||
variant: {
|
||||
type: String,
|
||||
default: 'info'
|
||||
},
|
||||
dismissible: {
|
||||
type: [Boolean, Object],
|
||||
default: false
|
||||
},
|
||||
show: {
|
||||
type: [Boolean, Number],
|
||||
default: false
|
||||
},
|
||||
fade: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show () {
|
||||
this.showChanged()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.showChanged()
|
||||
},
|
||||
destroyed /* istanbul ignore next */ () {
|
||||
this.clearCounter()
|
||||
},
|
||||
methods: {
|
||||
dismiss () {
|
||||
this.clearCounter()
|
||||
this.dismissed = true
|
||||
this.$emit('dismissed')
|
||||
this.$emit('input', false)
|
||||
if (typeof this.show === 'number') {
|
||||
this.$emit('dismiss-count-down', 0)
|
||||
this.$emit('input', 0)
|
||||
} else {
|
||||
this.$emit('input', false)
|
||||
}
|
||||
},
|
||||
clearCounter () {
|
||||
if (this.countDownTimerId) {
|
||||
clearInterval(this.countDownTimerId)
|
||||
this.countDownTimerId = null
|
||||
}
|
||||
},
|
||||
showChanged () {
|
||||
// Reset counter status
|
||||
this.clearCounter()
|
||||
// Reset dismiss status
|
||||
this.dismissed = false
|
||||
// No timer for boolean values
|
||||
if (this.show === true || this.show === false || this.show === null || this.show === 0) {
|
||||
return
|
||||
}
|
||||
// Start counter (ensure we have an integer value)
|
||||
let dismissCountDown = parseInt(this.show, 10) || 1
|
||||
this.countDownTimerId = setInterval(() => {
|
||||
if (dismissCountDown < 1) {
|
||||
this.dismiss()
|
||||
return
|
||||
}
|
||||
dismissCountDown--
|
||||
this.$emit('dismiss-count-down', dismissCountDown)
|
||||
this.$emit('input', dismissCountDown)
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import { mergeData } from 'vue-functional-data-merge'
|
||||
export default {
|
||||
name: 'CButtonClose',
|
||||
functional: true,
|
||||
render (h, { data, props, slots }) {
|
||||
const componentData = {
|
||||
staticClass: 'close',
|
||||
attrs: {
|
||||
type: props.type || 'button',
|
||||
'aria-label': props.ariaLabel || 'Close'
|
||||
}
|
||||
}
|
||||
if (!slots().default)
|
||||
componentData.domProps = { innerHTML: '×' }
|
||||
return h('button', mergeData(data, componentData), slots().default)
|
||||
}
|
||||
}
|
||||
@@ -1,138 +1,151 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12">
|
||||
<b-card header="<i class='fa fa-align-justify'></i> Bootstrap Modals">
|
||||
<b-button type="button" variant="secondary" @click="myModal = true" class="mr-1">Launch demo modal</b-button>
|
||||
<b-button type="button" variant="secondary" @click="largeModal = true" class="mr-1">Launch large modal</b-button>
|
||||
<b-button type="button" variant="secondary" @click="smallModal = true" class="mr-1">Launch small modal</b-button>
|
||||
<CRow>
|
||||
<CCol cols="12">
|
||||
<CCard header="<i class='fa fa-align-justify'></i> Bootstrap Modals">
|
||||
<CButton variant="secondary" @click="myModal = true" class="mr-1">Launch demo modal</CButton>
|
||||
<CButton variant="secondary" @click="largeModal = true" class="mr-1">Launch large modal</CButton>
|
||||
<CButton variant="secondary" @click="smallModal = true" class="mr-1">Launch small modal</CButton>
|
||||
<hr>
|
||||
<b-button type="button" variant="primary" @click="primaryModal = true" class="mr-1">Launch primary modal</b-button>
|
||||
<b-button type="button" variant="success" @click="successModal = true" class="mr-1">Launch success modal</b-button>
|
||||
<b-button type="button" variant="warning" @click="warningModal = true" class="mr-1">Launch warning modal</b-button>
|
||||
<b-button type="button" variant="danger" @click="dangerModal = true" class="mr-1">Launch danger modal</b-button>
|
||||
<b-button type="button" variant="info" @click="infoModal = true" class="mr-1">Launch info modal</b-button>
|
||||
<b-button type="button" variant="info" @click="cmodal = !cmodal" class="mr-1">CModal</b-button>
|
||||
|
||||
</b-card>
|
||||
</b-col><!--/.col-->
|
||||
</b-row><!--/.row-->
|
||||
<CButton variant="primary" @click="primaryModal = true" class="mr-1">Launch primary modal</CButton>
|
||||
<CButton variant="success" @click="successModal = true" class="mr-1">Launch success modal</CButton>
|
||||
<CButton variant="warning" @click="warningModal = true" class="mr-1">Launch warning modal</CButton>
|
||||
<CButton variant="danger" @click="dangerModal = true" class="mr-1">Launch danger modal</CButton>
|
||||
<CButton variant="info" @click="infoModal = true" class="mr-1">Launch info modal</CButton>
|
||||
<CButton variant="dark" @click="darkModal = !darkModal" class="mr-1">Launch dark modal</CButton>
|
||||
</CCard>
|
||||
</CCol><!--/.col-->
|
||||
</CRow><!--/.row-->
|
||||
</div>
|
||||
|
||||
<!-- Modal Component -->
|
||||
<b-modal title="Modal title" v-model="myModal" @ok="myModal = false">
|
||||
<CModal title="Modal title"
|
||||
:visible="myModal"
|
||||
@hide="myModal = false"
|
||||
>
|
||||
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-modal>
|
||||
<b-modal title="Modal title" size="lg" v-model="largeModal" @ok="largeModal = false">
|
||||
</CModal>
|
||||
<CModal title="Modal title"
|
||||
size="lg"
|
||||
v-model="largeModal"
|
||||
>
|
||||
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-modal>
|
||||
<b-modal title="Modal title" size="sm" v-model="smallModal" @ok="smallModal = false">
|
||||
</CModal>
|
||||
<CModal title="Modal title"
|
||||
size="sm"
|
||||
v-model="smallModal"
|
||||
>
|
||||
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-modal>
|
||||
</CModal>
|
||||
|
||||
<b-modal title="Modal title" class="modal-primary" v-model="primaryModal" @ok="primaryModal = false">
|
||||
<CModal title="Modal title"
|
||||
class="modal-primary"
|
||||
v-model="primaryModal"
|
||||
>
|
||||
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-modal>
|
||||
<b-modal title="Modal title" class="modal-success" v-model="successModal" @ok="successModal = false" ok-variant="success">
|
||||
</CModal>
|
||||
<CModal title="Modal title"
|
||||
class="modal-success"
|
||||
v-model="successModal"
|
||||
>
|
||||
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-modal>
|
||||
<b-modal title="Modal title" class="modal-warning" v-model="warningModal" @ok="warningModal = false" ok-variant="warning">
|
||||
</CModal>
|
||||
<CModal title="Modal title"
|
||||
class="modal-warning"
|
||||
v-model="warningModal"
|
||||
>
|
||||
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-modal>
|
||||
<b-modal title="Modal title" class="modal-danger" v-model="dangerModal" @ok="dangerModal = false" ok-variant="danger">
|
||||
</CModal>
|
||||
<CModal title="Modal title"
|
||||
class="modal-danger"
|
||||
v-model="dangerModal"
|
||||
>
|
||||
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-modal>
|
||||
<b-modal title="Modal title" class="modal-info" v-model="infoModal" @ok="infoModal = false" ok-variant="info">
|
||||
</CModal>
|
||||
<CModal title="Modal title"
|
||||
class="modal-info"
|
||||
v-model="infoModal"
|
||||
>
|
||||
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-modal>
|
||||
<CModal v-model="cmodal"
|
||||
</CModal>
|
||||
<CModal v-model="darkModal"
|
||||
:noBackdrop="false"
|
||||
:noCloseOnBackdrop="false"
|
||||
:noFade="false"
|
||||
:centered="true"
|
||||
title="Modal title 2"
|
||||
size="lg"
|
||||
variant="success"
|
||||
variant="dark"
|
||||
borderVariant="danger2"
|
||||
addModalClasses="hehe1"
|
||||
addDialogClasses="hehe2"
|
||||
addContentClasses="hehe3"
|
||||
:noHeader="true"
|
||||
:noHeader="false"
|
||||
:noBody="false"
|
||||
:noFooter="true"
|
||||
:noFooter="false"
|
||||
>
|
||||
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.
|
||||
<!-- <div slot="header" class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">new header</h5>
|
||||
<button type="button" class="close closeModal" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div> -->
|
||||
<div slot="body" class="modal-body">
|
||||
n
|
||||
</div>
|
||||
<div class="modal-footer" slot="footer">
|
||||
<button type="button" class="btn btn-secondary closeModal">Close2</button>
|
||||
<button type="button" class="btn btn-primary closeModal">OK2</button>
|
||||
</div>
|
||||
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.
|
||||
<template v-slot:header="{hide}">
|
||||
<h5 class="modal-title">Custom modal title</h5>
|
||||
<CButtonClose @click="hide()" class="text-white"/>
|
||||
</template>
|
||||
<template v-slot:footer="{hide}">
|
||||
<CButton @click="hide()" variant="danger">Discard</CButton>
|
||||
<CButton @click="hide()" variant="success">Accept</CButton>
|
||||
</template>
|
||||
</CModal>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import CModal from './CModal'
|
||||
export default {
|
||||
name: 'modals',
|
||||
// components: {
|
||||
// CModal
|
||||
// },
|
||||
data () {
|
||||
return {
|
||||
myModal: false,
|
||||
@@ -143,7 +156,7 @@ export default {
|
||||
warningModal: false,
|
||||
dangerModal: false,
|
||||
infoModal: false,
|
||||
cmodal: false
|
||||
darkModal: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user