feat: card-header-actions
- `card-actions` replaced by `card-header-actions`
This commit is contained in:
@@ -8,8 +8,10 @@
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Breadcrumb</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" target="_blank"><small class="text-muted">docs</small></a>
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<b-breadcrumb :items="items"/>
|
||||
|
||||
@@ -203,7 +203,21 @@
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card title" class="bg-secondary">
|
||||
<b-card class="bg-secondary">
|
||||
<div slot="header">
|
||||
Card with header actions
|
||||
<div class="card-header-actions">
|
||||
<b-link href="#" class="card-header-action btn-setting">
|
||||
<i class="icon-settings"></i>
|
||||
</b-link>
|
||||
<b-link class="card-header-action btn-minimize" v-b-toggle.collapse1>
|
||||
<i class="icon-arrow-up"></i>
|
||||
</b-link>
|
||||
<b-link href="#" class="card-header-action btn-close">
|
||||
<i class="icon-close"></i>
|
||||
</b-link>
|
||||
</div>
|
||||
</div>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
||||
@@ -2,14 +2,16 @@
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12">
|
||||
<b-col md="12" lg="9" >
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Carousel</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/carousel" target="_blank"><small class="text-muted">docs</small></a>
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/carousel" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -8,8 +8,10 @@
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Collapse</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/collapse" target="_blank"><small class="text-muted">docs</small></a>
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/collapse" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -31,7 +33,7 @@
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with<code>v-b-toggle</code>directive</small>
|
||||
<i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with <code>v-b-toggle</code> directive</small>
|
||||
</div>
|
||||
<div>
|
||||
<!-- Using modifiers -->
|
||||
@@ -56,7 +58,7 @@
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with<code>visibility</code></small>
|
||||
<i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with <code>visibility</code></small>
|
||||
</div>
|
||||
<div>
|
||||
<b-btn v-b-toggle.collapse3 class="m-1">Toggle Collapse</b-btn>
|
||||
@@ -73,7 +75,7 @@
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with<code>v-model</code></small>
|
||||
<i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with <code>v-model</code></small>
|
||||
</div>
|
||||
<div>
|
||||
<b-btn @click="showCollapse = !showCollapse"
|
||||
@@ -122,7 +124,7 @@
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Collapse</strong><small><code>accordion</code>support</small>
|
||||
<i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small><code>accordion</code> support</small>
|
||||
</div>
|
||||
<div role="tablist">
|
||||
<b-card no-body class="mb-1">
|
||||
|
||||
@@ -951,10 +951,16 @@
|
||||
<b-card no-body>
|
||||
<div slot="header">
|
||||
<i class="fa fa-edit"></i> Form Elements
|
||||
<div class="card-actions">
|
||||
<a href="#" class="btn btn-setting"><i class="icon-settings"></i></a>
|
||||
<b-btn class="btn btn-minimize" v-b-toggle.collapse1><i class="icon-arrow-up"></i></b-btn>
|
||||
<a href="#" class="btn btn-close"><i class="icon-close"></i></a>
|
||||
<div class="card-header-actions">
|
||||
<b-link href="#" class="card-header-action btn-setting">
|
||||
<i class="icon-settings"></i>
|
||||
</b-link>
|
||||
<b-link class="card-header-action btn-minimize" v-b-toggle.collapse1>
|
||||
<i class="icon-arrow-up"></i>
|
||||
</b-link>
|
||||
<b-link href="#" class="card-header-action btn-close">
|
||||
<i class="icon-close"></i>
|
||||
</b-link>
|
||||
</div>
|
||||
</div>
|
||||
<b-collapse id="collapse1" visible>
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Jumbotron</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/jumbotron" target="_blank">
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap list group</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/list-group" target="_blank">
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/list-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navbar</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/navbar" target="_blank">
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/navbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/nav" target="_blank">
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/nav" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Pagination</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/pagination" target="_blank">
|
||||
<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>
|
||||
@@ -65,11 +65,6 @@
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Pagination</strong>
|
||||
<small>navigation</small>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/pagination" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h6>Default</h6>
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Popovers</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/popovers" target="_blank">
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/popovers" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Progress</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/progress" target="_blank">
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/progress" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Tooltips</strong><small><code>v-b-tooltip</code>directive</small>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/tooltip" target="_blank">
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user