refactor: template changes to implement new CCard syntax
This commit is contained in:
woothu
+118
-108
@@ -4,7 +4,7 @@
|
||||
<CRow>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
<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">
|
||||
@@ -12,139 +12,149 @@
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<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>
|
||||
<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 cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i> Alert
|
||||
<small> use <code>.alert-link</code> to provide links</small>
|
||||
</CCardHeader>
|
||||
<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>
|
||||
<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 cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
|
||||
</CCardHeader>
|
||||
<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>
|
||||
<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 cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i> Alerts <small>dismissible</small>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<CAlert :show="true" dismissible disabled>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CAlert :show="true" dismissible disabled>
|
||||
Dismissible Alert!
|
||||
</CAlert>
|
||||
<!-- :dismissible="{attrs: {disabled:'disabled', 'aria-label':'close it'}, class:'hehe' } -->
|
||||
<CAlert :show="true"
|
||||
dismissible>
|
||||
Dismissible Alert!
|
||||
<CButtonClose slot-scope="{ dismiss }"
|
||||
@click="dismiss"
|
||||
aria-label="close it"
|
||||
style="color:red">
|
||||
ok
|
||||
</CButtonClose>
|
||||
</CAlert>
|
||||
<CAlert show dismissible>
|
||||
Dismissible Alert!
|
||||
</CAlert>
|
||||
<CAlert variant="danger"
|
||||
dismissible
|
||||
fade
|
||||
:show="showDismissibleAlert"
|
||||
@dismissed="showDismissibleAlert=false"
|
||||
>
|
||||
Dismissible Alert!
|
||||
</CAlert>
|
||||
<!-- :dismissible="{attrs: {disabled:'disabled', 'aria-label':'close it'}, class:'hehe' } -->
|
||||
<CAlert :show="true"
|
||||
dismissible>
|
||||
Dismissible Alert!
|
||||
<CButtonClose slot-scope="{ dismiss }"
|
||||
@click="dismiss"
|
||||
aria-label="close it"
|
||||
style="color:red">
|
||||
ok
|
||||
</CButtonClose>
|
||||
</CAlert>
|
||||
<CAlert show dismissible>
|
||||
Dismissible Alert!
|
||||
</CAlert>
|
||||
<CAlert variant="danger"
|
||||
dismissible
|
||||
fade
|
||||
:show="showDismissibleAlert"
|
||||
@dismissed="showDismissibleAlert=false"
|
||||
>
|
||||
Dismissible Alert!
|
||||
</CAlert>
|
||||
<CButton @click="showDismissibleAlert=true" variant="info" class="m-1">
|
||||
Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
|
||||
</CButton>
|
||||
</div>
|
||||
<CButton @click="showDismissibleAlert=true" variant="info" class="m-1">
|
||||
Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
|
||||
</CButton>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i> Alerts <small>auto dismissible</small>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<CAlert :show="dismissCountDown"
|
||||
dismissible
|
||||
variant="warning"
|
||||
@dismissed="dismissCountdown=0"
|
||||
@dismiss-count-down="countDownChanged">
|
||||
Alert will dismiss after <strong>{{dismissCountDown}}</strong> seconds...
|
||||
</CAlert>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CAlert :show="dismissCountDown"
|
||||
dismissible
|
||||
variant="warning"
|
||||
@dismissed="dismissCountdown=0"
|
||||
@dismiss-count-down="countDownChanged">
|
||||
Alert will dismiss after <strong>{{dismissCountDown}}</strong> seconds...
|
||||
</CAlert>
|
||||
|
||||
<CAlert :show="dismissCountDown"
|
||||
dismissible
|
||||
variant="info"
|
||||
@dismissed="dismissCountdown=0"
|
||||
@dismiss-count-down="countDownChanged">
|
||||
Alert will dismiss after {{dismissCountDown}} seconds...
|
||||
<CProgress variant="info"
|
||||
:max="dismissSecs"
|
||||
:value="dismissCountDown"
|
||||
height="4px">
|
||||
</CProgress>
|
||||
</CAlert>
|
||||
<CButton @click="showAlert" variant="info" class="m-1">
|
||||
Show alert with timer
|
||||
</CButton>
|
||||
</div>
|
||||
<CAlert :show="dismissCountDown"
|
||||
dismissible
|
||||
variant="info"
|
||||
@dismissed="dismissCountdown=0"
|
||||
@dismiss-count-down="countDownChanged">
|
||||
Alert will dismiss after {{dismissCountDown}} seconds...
|
||||
<CProgress variant="info"
|
||||
:max="dismissSecs"
|
||||
:value="dismissCountDown"
|
||||
height="4px">
|
||||
</CProgress>
|
||||
</CAlert>
|
||||
<CButton @click="showAlert" variant="info" class="m-1">
|
||||
Show alert with timer
|
||||
</CButton>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
Reference in New Issue
Block a user