Skip to content

Commit efd433b

Browse files
xidedixxidedix
committed
fix: extract b-card html header to slot
1 parent 32dec72 commit efd433b

File tree

6 files changed

+56
-40
lines changed

6 files changed

+56
-40
lines changed

‎src/views/base/Cards.vue

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,18 @@
1313
</b-card>
1414
</b-col>
1515
<b-col sm="6" md="4">
16-
<b-card header="<i class='fa fa-check'></i> Card with icon">
16+
<b-card>
17+
<div slot="header"><i class='fa fa-check'></i> Card with icon</div>
1718
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.
1819
</b-card>
1920
</b-col>
2021
<b-col sm="6" md="4">
2122
<b-card>
2223
<div slot="header">
2324
Card with switch
24-
<label class="switch switch-sm switch-text switch-info float-right mb-0">
25-
<input type="checkbox" class="switch-input">
26-
<span class="switch-label" data-on="On" data-off="Off"></span>
27-
<span class="switch-handle"></span>
28-
</label>
25+
<div class="card-header-actions" style="height: 21px;">
26+
<c-switch size="sm" color="info" checked label />
27+
</div>
2928
</div>
3029
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.
3130
</b-card>
@@ -34,7 +33,9 @@
3433
<b-card>
3534
<div slot="header">
3635
Card with label
37-
<b-badge variant="success" class="float-right">Success</b-badge>
36+
<div class="card-header-actions">
37+
<b-badge variant="success">Success</b-badge>
38+
</div>
3839
</div>
3940
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.
4041
</b-card>
@@ -43,7 +44,9 @@
4344
<b-card>
4445
<div slot="header">
4546
Card with label
46-
<b-badge pill variant="danger" class="float-right">42</b-badge>
47+
<div class="card-header-actions">
48+
<b-badge pill variant="danger">42</b-badge>
49+
</div>
4750
</div>
4851
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.
4952
</b-card>
@@ -232,8 +235,13 @@
232235
</template>
233236

234237
<script>
238+
import { Switch as cSwitch } from '@coreui/vue'
239+
235240
export default {
236241
name: 'cards',
242+
components: {
243+
cSwitch
244+
},
237245
data: function () {
238246
return {
239247
show: true

‎src/views/base/ListGroups.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,8 @@
164164
<i class="fa fa-align-justify"></i><strong> List group </strong><small>inside cards</small>
165165
</div>
166166
<b-card-group deck>
167-
<b-card header="<b>Card with list group</b>">
167+
<b-card>
168+
<div slot="header"><b>Card with list group</b></div>
168169
<b-list-group>
169170
<b-list-group-item href="#">Cras justo odio</b-list-group-item>
170171
<b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>
@@ -177,7 +178,8 @@
177178
ad sit ipsum anim Lorem.
178179
</p>
179180
</b-card>
180-
<b-card no-body header="<b>Card with flush list group</b>">
181+
<b-card no-body>
182+
<div slot="header"><b>Card with flush list group</b></div>
181183
<b-list-group flush>
182184
<b-list-group-item href="#">Cras justo odio</b-list-group-item>
183185
<b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>

‎src/views/base/Table.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
2-
<b-card :header="caption">
2+
<b-card>
3+
<div slot="header" v-html="caption"></div>
34
<b-table :dark="dark" :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="captions" :current-page="currentPage" :per-page="perPage">
45
<template slot="status" slot-scope="data">
56
<b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>

‎src/views/notifications/Badges.vue

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -29,46 +29,49 @@
2929
</b-card>
3030
</b-col>
3131
<b-col cols="12" md="6">
32-
<b-card header="<i class='fa fa-align-justify'></i> Badge <small>contextual variations</small>"
32+
<b-card
3333
header-tag="header"
3434
footer-tag="footer">
35+
<div slot="header"><i class='fa fa-align-justify'></i> Badge <small>contextual variations</small></div>
3536
<div>
36-
<b-badge variant="primary">Primary</b-badge>
37-
<b-badge variant="secondary">Secondary</b-badge>
38-
<b-badge variant="success">Success</b-badge>
39-
<b-badge variant="danger">Danger</b-badge>
40-
<b-badge variant="warning">Warning</b-badge>
41-
<b-badge variant="info">Info</b-badge>
42-
<b-badge variant="light">Light</b-badge>
43-
<b-badge variant="dark">Dark</b-badge>
37+
<b-badge class="m-1" variant="primary">Primary</b-badge>
38+
<b-badge class="m-1" variant="secondary">Secondary</b-badge>
39+
<b-badge class="m-1" variant="success">Success</b-badge>
40+
<b-badge class="m-1" variant="danger">Danger</b-badge>
41+
<b-badge class="m-1" variant="warning">Warning</b-badge>
42+
<b-badge class="m-1" variant="info">Info</b-badge>
43+
<b-badge class="m-1" variant="light">Light</b-badge>
44+
<b-badge class="m-1" variant="dark">Dark</b-badge>
4445
</div>
4546
</b-card>
46-
<b-card header="<i class='fa fa-align-justify'></i> Badge <small>pills</small>"
47+
<b-card
4748
header-tag="header"
4849
footer-tag="footer">
50+
<div slot="header"><i class='fa fa-align-justify'></i> Badge <small>pills</small></div>
4951
<div>
50-
<b-badge pill variant="primary">Primary</b-badge>
51-
<b-badge pill variant="secondary">Secondary</b-badge>
52-
<b-badge pill variant="success">Success</b-badge>
53-
<b-badge pill variant="danger">Danger</b-badge>
54-
<b-badge pill variant="warning">Warning</b-badge>
55-
<b-badge pill variant="info">Info</b-badge>
56-
<b-badge pill variant="light">Light</b-badge>
57-
<b-badge pill variant="dark">Dark</b-badge>
52+
<b-badge class="m-1" pill variant="primary">Primary</b-badge>
53+
<b-badge class="m-1" pill variant="secondary">Secondary</b-badge>
54+
<b-badge class="m-1" pill variant="success">Success</b-badge>
55+
<b-badge class="m-1" pill variant="danger">Danger</b-badge>
56+
<b-badge class="m-1" pill variant="warning">Warning</b-badge>
57+
<b-badge class="m-1" pill variant="info">Info</b-badge>
58+
<b-badge class="m-1" pill variant="light">Light</b-badge>
59+
<b-badge class="m-1" pill variant="dark">Dark</b-badge>
5860
</div>
5961
</b-card>
60-
<b-card header="<i class='fa fa-align-justify'></i> Badge <small>actionable</small>"
62+
<b-card
6163
header-tag="header"
6264
footer-tag="footer">
65+
<div slot="header"><i class='fa fa-align-justify'></i> Badge <small>actionable</small></div>
6366
<div>
64-
<b-badge href="#" variant="primary">Primary</b-badge>
65-
<b-badge href="#" variant="secondary">Secondary</b-badge>
66-
<b-badge href="#" variant="success">Success</b-badge>
67-
<b-badge href="#" variant="danger">Danger</b-badge>
68-
<b-badge href="#" variant="warning">Warning</b-badge>
69-
<b-badge href="#" variant="info">Info</b-badge>
70-
<b-badge href="#" variant="light">Light</b-badge>
71-
<b-badge href="#" variant="dark">Dark</b-badge>
67+
<b-badge class="m-1" href="#" variant="primary">Primary</b-badge>
68+
<b-badge class="m-1" href="#" variant="secondary">Secondary</b-badge>
69+
<b-badge class="m-1" href="#" variant="success">Success</b-badge>
70+
<b-badge class="m-1" href="#" variant="danger">Danger</b-badge>
71+
<b-badge class="m-1" href="#" variant="warning">Warning</b-badge>
72+
<b-badge class="m-1" href="#" variant="info">Info</b-badge>
73+
<b-badge class="m-1" href="#" variant="light">Light</b-badge>
74+
<b-badge class="m-1" href="#" variant="dark">Dark</b-badge>
7275
</div>
7376
</b-card>
7477
</b-col>

‎src/views/notifications/Modals.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
<div class="animated fadeIn">
44
<b-row>
55
<b-col cols="12">
6-
<b-card header="<i class='fa fa-align-justify'></i> Bootstrap Modals">
6+
<b-card>
7+
<div slot="header"><i class='fa fa-align-justify'></i> Bootstrap Modals</div>
78
<b-button type="button" variant="secondary" @click="myModal = true" class="mr-1">Launch demo modal</b-button>
89
<b-button type="button" variant="secondary" @click="largeModal = true" class="mr-1">Launch large modal</b-button>
910
<b-button type="button" variant="secondary" @click="smallModal = true" class="mr-1">Launch small modal</b-button>

‎src/views/users/Users.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
<b-row>
33
<b-col cols="12" xl="6">
44
<transition name="slide">
5-
<b-card :header="caption">
5+
<b-card>
6+
<div slot="header" v-html="caption"></div>
67
<b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage" @row-clicked="rowClicked">
78
<template slot="id" slot-scope="data">
89
<strong>{{data.item.id}}</strong>

0 commit comments

Comments
 (0)