refactor: minor bug fixes and refactors
This commit is contained in:
woothu
+175
-179
@@ -1,190 +1,186 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Bootstrap Alert</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/3.0/components/Alert"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<p></p>
|
||||
<CAlert show variant="primary">Primary Alert</CAlert>
|
||||
<CAlert show variant="secondary">Secondary Alert</CAlert>
|
||||
<CAlert show variant="success">Success Alert</CAlert>
|
||||
<CAlert show variant="danger">Danger Alert</CAlert>
|
||||
<CAlert show variant="warning">Warning Alert</CAlert>
|
||||
<CAlert show variant="info">Info Alert</CAlert>
|
||||
<CAlert show variant="light">Light Alert</CAlert>
|
||||
<CAlert show variant="dark">Dark Alert</CAlert>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i> Alert
|
||||
<small> use <code>.alert-link</code> to provide links</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CAlert show variant="primary">
|
||||
Primary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show variant="secondary">
|
||||
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show variant="success">
|
||||
Success Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show variant="danger">
|
||||
Danger Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show variant="warning">
|
||||
Warning Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show variant="info">
|
||||
Info Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show variant="light">
|
||||
Light Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show variant="dark">
|
||||
Dark Alert with
|
||||
<CLink href="#" class="alert-link">an example link</CLink>
|
||||
.
|
||||
</CAlert>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CAlert show variant="success">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>
|
||||
Aww yeah, you successfully read this important alert message.
|
||||
This example text is going to run a bit longer so that you can see
|
||||
how spacing within an alert works with this kind of content.
|
||||
</p>
|
||||
<hr>
|
||||
<p class="mb-0">
|
||||
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
||||
</p>
|
||||
</CAlert>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i> Alerts
|
||||
<small>dismissible</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CAlert
|
||||
variant="secondary"
|
||||
closeButton
|
||||
:show.sync="dismissibleAlerts[0]"
|
||||
>
|
||||
Dismissible Alert!
|
||||
</CAlert>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Bootstrap Alert</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/3.0/components/Alert"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<p></p>
|
||||
<CAlert show variant="primary">Primary Alert</CAlert>
|
||||
<CAlert show variant="secondary">Secondary Alert</CAlert>
|
||||
<CAlert show variant="success">Success Alert</CAlert>
|
||||
<CAlert show variant="danger">Danger Alert</CAlert>
|
||||
<CAlert show variant="warning">Warning Alert</CAlert>
|
||||
<CAlert show variant="info">Info Alert</CAlert>
|
||||
<CAlert show variant="light">Light Alert</CAlert>
|
||||
<CAlert show variant="dark">Dark Alert</CAlert>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i> Alert
|
||||
<small> use <code>.alert-link</code> to provide links</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CAlert show variant="primary">
|
||||
Primary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show variant="secondary">
|
||||
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show variant="success">
|
||||
Success Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show variant="danger">
|
||||
Danger Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show variant="warning">
|
||||
Warning Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show variant="info">
|
||||
Info Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show variant="light">
|
||||
Light Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show variant="dark">
|
||||
Dark Alert with
|
||||
<CLink href="#" class="alert-link">an example link</CLink>
|
||||
.
|
||||
</CAlert>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CAlert show variant="success">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>
|
||||
Aww yeah, you successfully read this important alert message.
|
||||
This example text is going to run a bit longer so that you can see
|
||||
how spacing within an alert works with this kind of content.
|
||||
</p>
|
||||
<hr>
|
||||
<p class="mb-0">
|
||||
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
||||
</p>
|
||||
</CAlert>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i> Alerts
|
||||
<small>dismissible</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CAlert
|
||||
variant="secondary"
|
||||
closeButton
|
||||
:show.sync="dismissibleAlerts[0]"
|
||||
>
|
||||
Dismissible Alert!
|
||||
</CAlert>
|
||||
|
||||
<CAlert
|
||||
variant="secondary"
|
||||
closeButton
|
||||
fade
|
||||
:show.sync="dismissibleAlerts[1]"
|
||||
>
|
||||
Dismissible Alert with fade effect!
|
||||
</CAlert>
|
||||
<CAlert
|
||||
variant="secondary"
|
||||
closeButton
|
||||
fade
|
||||
:show.sync="dismissibleAlerts[1]"
|
||||
>
|
||||
Dismissible Alert with fade effect!
|
||||
</CAlert>
|
||||
|
||||
<CAlert
|
||||
variant="secondary"
|
||||
:show.sync="dismissibleAlerts[2]"
|
||||
v-slot="{dismiss}"
|
||||
class="alert-dismissible"
|
||||
>
|
||||
Dismissible Alert with custom button!
|
||||
<CButton
|
||||
class="position-absolute"
|
||||
variant="secondary"
|
||||
style="right:10px;top: 50%;transform: translateY(-50%);"
|
||||
textHtml="<i>Close</i>"
|
||||
@click="dismiss"
|
||||
/>
|
||||
</CAlert>
|
||||
<CButton
|
||||
@click="showDismissibleAlerts"
|
||||
<CAlert
|
||||
variant="secondary"
|
||||
:show.sync="dismissibleAlerts[2]"
|
||||
v-slot="{dismiss}"
|
||||
class="alert-dismissible"
|
||||
>
|
||||
Dismissible Alert with custom button!
|
||||
<CButton
|
||||
class="position-absolute"
|
||||
variant="secondary"
|
||||
style="right:10px;top: 50%;transform: translateY(-50%);"
|
||||
textHtml="<i>Close</i>"
|
||||
@click="dismiss"
|
||||
/>
|
||||
</CAlert>
|
||||
<CButton
|
||||
@click="showDismissibleAlerts"
|
||||
variant="info"
|
||||
class="m-1"
|
||||
>
|
||||
Show dismissible alerts
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i> Alerts
|
||||
<small>auto dismissible</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CAlert
|
||||
:show.sync="dismissCountDown"
|
||||
closeButton
|
||||
variant="warning"
|
||||
fade
|
||||
>
|
||||
Alert will dismiss after
|
||||
<strong>{{dismissCountDown}}</strong> seconds...
|
||||
</CAlert>
|
||||
|
||||
<CAlert
|
||||
:show.sync="dismissCountDown"
|
||||
closeButton
|
||||
variant="info"
|
||||
>
|
||||
Alert will dismiss after {{dismissCountDown}} seconds...
|
||||
<CProgress
|
||||
variant="info"
|
||||
class="m-1"
|
||||
>
|
||||
Show dismissible alerts
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i> Alerts
|
||||
<small>auto dismissible</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CAlert
|
||||
:show.sync="dismissCountDown"
|
||||
closeButton
|
||||
variant="warning"
|
||||
fade
|
||||
>
|
||||
Alert will dismiss after
|
||||
<strong>{{dismissCountDown}}</strong> seconds...
|
||||
</CAlert>
|
||||
|
||||
<CAlert
|
||||
:show.sync="dismissCountDown"
|
||||
closeButton
|
||||
variant="info"
|
||||
>
|
||||
Alert will dismiss after {{dismissCountDown}} seconds...
|
||||
<CProgress
|
||||
variant="info"
|
||||
:max="dismissSecs"
|
||||
:value="dismissCountDown"
|
||||
height="4px"
|
||||
/>
|
||||
</CAlert>
|
||||
<CButton @click="showAlert" variant="info" class="m-1">
|
||||
Show alert with timer
|
||||
</CButton>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
:max="dismissSecs"
|
||||
:value="dismissCountDown"
|
||||
height="4px"
|
||||
/>
|
||||
</CAlert>
|
||||
<CButton @click="showAlert" variant="info" class="m-1">
|
||||
Show alert with timer
|
||||
</CButton>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'alerts',
|
||||
name: 'Alerts',
|
||||
data () {
|
||||
return {
|
||||
dismissSecs: 10,
|
||||
|
||||
@@ -1,95 +1,91 @@
|
||||
<template functional>
|
||||
<div class="wrapper">
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Bootstrap Badge</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/3.0/components/Badge"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h2>Example heading <CBadge variant="primary">New</CBadge></h2>
|
||||
<h3>Example heading <CBadge variant="primary">New</CBadge></h3>
|
||||
<h4>Example heading <CBadge variant="primary">New</CBadge></h4>
|
||||
<h5>Example heading <CBadge variant="primary">New</CBadge></h5>
|
||||
<h6>Example heading <CBadge variant="primary">New</CBadge></h6>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton variant="primary">
|
||||
Notifications
|
||||
<CBadge variant="light" :style="{position: 'static'}">4</CBadge>
|
||||
</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<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>
|
||||
<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>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<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>
|
||||
<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>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<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>
|
||||
<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>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Bootstrap Badge</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/3.0/components/Badge"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h2>Example heading <CBadge variant="primary">New</CBadge></h2>
|
||||
<h3>Example heading <CBadge variant="primary">New</CBadge></h3>
|
||||
<h4>Example heading <CBadge variant="primary">New</CBadge></h4>
|
||||
<h5>Example heading <CBadge variant="primary">New</CBadge></h5>
|
||||
<h6>Example heading <CBadge variant="primary">New</CBadge></h6>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton variant="primary">
|
||||
Notifications
|
||||
<CBadge variant="light" :style="{position: 'static'}">4</CBadge>
|
||||
</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<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>
|
||||
<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>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<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>
|
||||
<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>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<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>
|
||||
<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>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'badges'
|
||||
name: 'Badges'
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -176,7 +176,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'modals',
|
||||
name: 'Modals',
|
||||
data () {
|
||||
return {
|
||||
myModal: false,
|
||||
|
||||
Reference in New Issue
Block a user