feat: card-header-actions

- `card-actions` replaced by `card-header-actions`
This commit is contained in:
xidedix
2018-04-05 15:20:42 +02:00
parent 03a2863522
commit 483f8d5455
17 changed files with 76 additions and 51 deletions
+4 -2
View File
@@ -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"/>
+15 -1
View File
@@ -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>
+5 -3
View File
@@ -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 -6
View File
@@ -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">
+10 -4
View File
@@ -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>
+2 -2
View File
@@ -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>
+2 -2
View File
@@ -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>
+2 -2
View File
@@ -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>
+2 -2
View File
@@ -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>
+2 -7
View File
@@ -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>
+2 -2
View File
@@ -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>
+2 -2
View File
@@ -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>
+2 -2
View File
@@ -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>