Skip to content

Commit b2db0a9

Browse files
jacobmllr95jacobmllr95
authored
chore(docs): use new slot syntax everywhere (#5895)
1 parent e48ed8b commit b2db0a9

File tree

23 files changed

+107
-107
lines changed

23 files changed

+107
-107
lines changed

‎src/components/avatar/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -385,7 +385,7 @@ Add textual content to the badge by supplying a string to the `badge` prop, or u
385385
<b-avatar badge="BV"></b-avatar>
386386
<b-avatar badge="7" variant="primary" badge-variant="dark"></b-avatar>
387387
<b-avatar badge-variant="info" src="https://placekitten.com/300/300">
388-
<template v-slot:badge><b-icon icon="star-fill"></b-icon></template>
388+
<template #badge><b-icon icon="star-fill"></b-icon></template>
389389
</b-avatar>
390390
</div>
391391
</template>

‎src/components/card/README.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -217,12 +217,12 @@ You can control the wrapper element tags used by setting the `header-tag` and `f
217217
</b-card>
218218

219219
<b-card title="Title" header-tag="header" footer-tag="footer">
220-
<template v-slot:header>
220+
<template #header>
221221
<h6 class="mb-0">Header Slot</h6>
222222
</template>
223223
<b-card-text>Header and footers using slots.</b-card-text>
224224
<b-button href="#" variant="primary">Go somewhere</b-button>
225-
<template v-slot:footer>
225+
<template #footer>
226226
<em>Footer Slot</em>
227227
</template>
228228
</b-card>
@@ -247,7 +247,7 @@ card.
247247
img-alt="Image"
248248
img-top
249249
>
250-
<template v-slot:header>
250+
<template #header>
251251
<h4 class="mb-0">Hello World</h4>
252252
</template>
253253

@@ -510,7 +510,7 @@ Integrate [`<b-nav>`](/docs/components/nav) into card headers easily.
510510
```html
511511
<div>
512512
<b-card title="Card Title" body-class="text-center" header-tag="nav">
513-
<template v-slot:header>
513+
<template #header>
514514
<b-nav card-header tabs>
515515
<b-nav-item active>Active</b-nav-item>
516516
<b-nav-item>Inactive</b-nav-item>
@@ -580,7 +580,7 @@ When using card groups with footers, their content will automatically line up.
580580
This is a wider card with supporting text below as a natural lead-in to additional content.
581581
This content is a little bit longer.
582582
</b-card-text>
583-
<template v-slot:footer>
583+
<template #footer>
584584
<small class="text-muted">Last updated 3 mins ago</small>
585585
</template>
586586
</b-card>
@@ -589,7 +589,7 @@ When using card groups with footers, their content will automatically line up.
589589
<b-card-text>
590590
This card has supporting text below as a natural lead-in to additional content.
591591
</b-card-text>
592-
<template v-slot:footer>
592+
<template #footer>
593593
<small class="text-muted">Last updated 3 mins ago</small>
594594
</template>
595595
</b-card>
@@ -599,7 +599,7 @@ When using card groups with footers, their content will automatically line up.
599599
This is a wider card with supporting text below as a natural lead-in to additional content.
600600
This card has even longer content than the first to show that equal height action.
601601
</b-card-text>
602-
<template v-slot:footer>
602+
<template #footer>
603603
<small class="text-muted">Last updated 3 mins ago</small>
604604
</template>
605605
</b-card>
@@ -623,7 +623,7 @@ automatically line up.
623623
This is a wider card with supporting text below as a natural lead-in to additional content.
624624
This content is a little bit longer.
625625
</b-card-text>
626-
<template v-slot:footer>
626+
<template #footer>
627627
<small class="text-muted">Last updated 3 mins ago</small>
628628
</template>
629629
</b-card>
@@ -632,7 +632,7 @@ automatically line up.
632632
<b-card-text>
633633
This card has supporting text below as a natural lead-in to additional content.
634634
</b-card-text>
635-
<template v-slot:footer>
635+
<template #footer>
636636
<small class="text-muted">Last updated 3 mins ago</small>
637637
</template>
638638
</b-card>
@@ -642,7 +642,7 @@ automatically line up.
642642
This is a wider card with supporting text below as a natural lead-in to additional content.
643643
This card has even longer content than the first to show that equal height action.
644644
</b-card-text>
645-
<template v-slot:footer>
645+
<template #footer>
646646
<small class="text-muted">Last updated 3 mins ago</small>
647647
</template>
648648
</b-card>
@@ -716,7 +716,7 @@ set them to display: inline-block as column-break-inside: avoid isn't a bulletpr
716716
This is a wider card with supporting text below as a natural lead-in to additional content.
717717
This card has even longer content than the first.
718718
</b-card-text>
719-
<template v-slot:footer>
719+
<template #footer>
720720
<small class="text-muted">Footer Text</small>
721721
</template>
722722
</b-card>

‎src/components/carousel/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
<!-- Slides with img slot -->
3939
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
4040
<b-carousel-slide>
41-
<template v-slot:img>
41+
<template #img>
4242
<img
4343
class="d-block img-fluid w-100"
4444
width="1024"

‎src/components/dropdown/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ precedence.
4040
</b-dropdown>
4141

4242
<b-dropdown>
43-
<template v-slot:button-content>
43+
<template #button-content>
4444
Custom <strong>Content</strong> with <em>HTML</em> via Slot
4545
</template>
4646
<b-dropdown-item href="#">An item</b-dropdown-item>
@@ -384,7 +384,7 @@ to `true`. This is useful when the dropdown is to be displayed as an icon.
384384
```html
385385
<div>
386386
<b-dropdown size="lg" variant="link" toggle-class="text-decoration-none" no-caret>
387-
<template v-slot:button-content>
387+
<template #button-content>
388388
&#x1f50d;<span class="sr-only">Search</span>
389389
</template>
390390
<b-dropdown-item href="#">Action</b-dropdown-item>

‎src/components/form-checkbox/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -734,7 +734,7 @@ modifier.
734734
<template>
735735
<div>
736736
<b-form-group>
737-
<template v-slot:label>
737+
<template #label>
738738
<b>Choose your flavours:</b><br>
739739
<b-form-checkbox
740740
v-model="allSelected"

‎src/components/form-radio/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ To have them appear _above_ the inputs generated by `options`, place them in the
9797
name="radio-options-slots"
9898
>
9999
<!-- Radios in this slot will appear first -->
100-
<template v-slot:first>
100+
<template #first>
101101
<b-form-radio value="first">Toggle this custom radio from slot first</b-form-radio>
102102
</template>
103103

‎src/components/form-select/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ options specified by the `options` prop, use the named slot `first`.
111111
<div>
112112
<b-form-select v-model="selected" :options="options" class="mb-3">
113113
<!-- This slot appears above the options from 'options' prop -->
114-
<template v-slot:first>
114+
<template #first>
115115
<b-form-select-option :value="null" disabled>-- Please select an option --</b-form-select-option>
116116
</template>
117117

@@ -313,7 +313,7 @@ option with an empty value as your first option.
313313

314314
```html
315315
<b-form-select v-model="selected" :options="options">
316-
<template v-slot:first>
316+
<template #first>
317317
<b-form-select-option value="" disabled>-- Please select an option --</b-form-select-option>
318318
</template>
319319
</b-form-select>

‎src/components/form-tags/README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -202,10 +202,10 @@ not validated.
202202
separator=" "
203203
></b-form-tags>
204204
<!-- The following slots are for b-form-group -->
205-
<template v-slot:invalid-feedback>
205+
<template #invalid-feedback>
206206
You must provide at least 3 tags and no more than 8
207207
</template>
208-
<template v-slot:description>
208+
<template #description>
209209
<div id="tags-validation-help">
210210
Tags must be 3 to 5 characters in length and all lower
211211
case. Enter tags separated by spaces or press enter.
@@ -571,7 +571,7 @@ of tags:
571571
:disabled="disabled || availableOptions.length === 0"
572572
:options="availableOptions"
573573
>
574-
<template v-slot:first>
574+
<template #first>
575575
<!-- This is required to prevent bugs with Safari -->
576576
<option disabled value="">Choose a tag...</option>
577577
</template>
@@ -605,7 +605,7 @@ If the custom input is using custom event names that mimic `input` and `change`,
605605
`.native` modifier for keydown, you can do something similar to below to bind the event handlers:
606606

607607
```html
608-
<template v-slot:default="{ inputAttrs, inputHandlers, removeTag, tags }">
608+
<template #default="{ inputAttrs, inputHandlers, removeTag, tags }">
609609
<custom-input
610610
:id="inputAttrs.id"
611611
:vistom-value-prop="inputAttrs.value"
@@ -732,7 +732,7 @@ pre-defined set of tags:
732732
</ul>
733733

734734
<b-dropdown size="sm" variant="outline-secondary" block menu-class="w-100">
735-
<template v-slot:button-content>
735+
<template #button-content>
736736
<b-icon icon="tag-fill"></b-icon> Choose tags
737737
</template>
738738
<b-dropdown-form @submit.stop.prevent="() => {}">

‎src/components/input-group/README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
<!-- Using slots -->
1414
<b-input-group class="mt-3">
15-
<template v-slot:append>
15+
<template #append>
1616
<b-input-group-text><strong class="text-danger">!</strong></b-input-group-text>
1717
</template>
1818
<b-form-input></b-form-input>
@@ -63,12 +63,12 @@ The slot content will automatically be wrapped by
6363
```html
6464
<div>
6565
<b-input-group>
66-
<template v-slot:prepend>
66+
<template #prepend>
6767
<b-input-group-text >Username</b-input-group-text>
6868
</template>
6969
<b-form-input></b-form-input>
7070

71-
<template v-slot:append>
71+
<template #append>
7272
<b-dropdown text="Dropdown" variant="success">
7373
<b-dropdown-item>Action A</b-dropdown-item>
7474
<b-dropdown-item>Action B</b-dropdown-item>
@@ -246,7 +246,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
246246
```html
247247
<div>
248248
<b-input-group>
249-
<template v-slot:prepend>
249+
<template #prepend>
250250
<b-dropdown text="Dropdown" variant="info">
251251
<b-dropdown-item>Action A</b-dropdown-item>
252252
<b-dropdown-item>Action B</b-dropdown-item>
@@ -255,7 +255,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
255255

256256
<b-form-input></b-form-input>
257257

258-
<template v-slot:append>
258+
<template #append>
259259
<b-dropdown text="Dropdown" variant="outline-secondary" v-for="i in 2" :key="i">
260260
<b-dropdown-item>Action C</b-dropdown-item>
261261
<b-dropdown-item>Action D</b-dropdown-item>

‎src/components/jumbotron/README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ Anything else between the opening and closing tags will be rendered at the botto
2626
```html
2727
<div>
2828
<b-jumbotron>
29-
<template v-slot:header>BootstrapVue</template>
29+
<template #header>BootstrapVue</template>
3030

31-
<template v-slot:lead>
31+
<template #lead>
3232
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
3333
featured content or information.
3434
</template>
@@ -87,9 +87,9 @@ jumbotron to use the default styling.
8787
```html
8888
<div>
8989
<b-jumbotron bg-variant="info" text-variant="white" border-variant="dark">
90-
<template v-slot:header>BootstrapVue</template>
90+
<template #header>BootstrapVue</template>
9191

92-
<template v-slot:lead>
92+
<template #lead>
9393
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
9494
featured content or information.
9595
</template>

‎src/components/media/README.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<div>
99
<b-card>
1010
<b-media>
11-
<template v-slot:aside>
11+
<template #aside>
1212
<b-img blank blank-color="#ccc" width="64" alt="placeholder"></b-img>
1313
</template>
1414

@@ -24,7 +24,7 @@
2424
</p>
2525

2626
<b-media>
27-
<template v-slot:aside>
27+
<template #aside>
2828
<b-img blank blank-color="#ccc" width="64" alt="placeholder"></b-img>
2929
</template>
3030

@@ -46,7 +46,7 @@
4646
```html
4747
<div>
4848
<b-media>
49-
<template v-slot:aside>
49+
<template #aside>
5050
<img src="..." alt="Media Aside">
5151
</template>
5252

@@ -81,7 +81,7 @@
8181
</p>
8282

8383
<b-media>
84-
<template v-slot:aside>
84+
<template #aside>
8585
<b-img blank blank-color="#ccc" width="64" alt="placeholder"></b-img>
8686
</template>
8787
<h5 class="mt-0">Nested Media</h5>
@@ -103,7 +103,7 @@ Change the order of content in media objects by adding `right-align` property.
103103
```html
104104
<div>
105105
<b-media right-align vertical-align="center">
106-
<template v-slot:aside>
106+
<template #aside>
107107
<b-img blank blank-color="#ccc" width="80" alt="placeholder"></b-img>
108108
</template>
109109
<h5 class="mt-0 mb-1">Media object</h5>
@@ -138,7 +138,7 @@ use spacing utilities wherever needed to fine tune.
138138
<div>
139139
<ul class="list-unstyled">
140140
<b-media tag="li">
141-
<template v-slot:aside>
141+
<template #aside>
142142
<b-img blank blank-color="#abc" width="64" alt="placeholder"></b-img>
143143
</template>
144144
<h5 class="mt-0 mb-1">List-based media object</h5>
@@ -150,7 +150,7 @@ use spacing utilities wherever needed to fine tune.
150150
</b-media>
151151

152152
<b-media tag="li" class="my-4">
153-
<template v-slot:aside>
153+
<template #aside>
154154
<b-img blank blank-color="#cba" width="64" alt="placeholder"></b-img>
155155
</template>
156156

@@ -163,7 +163,7 @@ use spacing utilities wherever needed to fine tune.
163163
</b-media>
164164

165165
<b-media tag="li">
166-
<template v-slot:aside>
166+
<template #aside>
167167
<b-img blank blank-color="#bac" width="64" alt="placeholder"></b-img>
168168
</template>
169169

‎src/components/modal/README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ Both methods return immediately after being called.
9090
<b-button id="show-btn" @click="$bvModal.show('bv-modal-example')">Open Modal</b-button>
9191

9292
<b-modal id="bv-modal-example" hide-footer>
93-
<template v-slot:modal-title>
93+
<template #modal-title>
9494
Using <code>$bvModal</code> Methods
9595
</template>
9696
<div class="d-block text-center">
@@ -555,7 +555,7 @@ the `header-border-variant` and `footer-border-variant` props respectively.
555555
</b-row>
556556
</b-container>
557557

558-
<template v-slot:modal-footer>
558+
<template #modal-footer>
559559
<div class="w-100">
560560
<p class="float-left">Modal Footer Content</p>
561561
<b-button
@@ -690,20 +690,20 @@ The scope available to the slots that support optional scoping are:
690690
<b-button @click="$bvModal.show('modal-scoped')">Open Modal</b-button>
691691

692692
<b-modal id="modal-scoped">
693-
<template v-slot:modal-header="{ close }">
693+
<template #modal-header="{ close }">
694694
<!-- Emulate built in modal header close button action -->
695695
<b-button size="sm" variant="outline-danger" @click="close()">
696696
Close Modal
697697
</b-button>
698698
<h5>Modal Header</h5>
699699
</template>
700700

701-
<template v-slot:default="{ hide }">
701+
<template #default="{ hide }">
702702
<p>Modal Body with button</p>
703703
<b-button @click="hide()">Hide Modal</b-button>
704704
</template>
705705

706-
<template v-slot:modal-footer="{ ok, cancel, hide }">
706+
<template #modal-footer="{ ok, cancel, hide }">
707707
<b>Custom Footer</b>
708708
<!-- Emulate built in modal footer ok and cancel button actions -->
709709
<b-button size="sm" variant="success" @click="ok()">

0 commit comments

Comments
 (0)