Skip to content

Commit 720d00c

Browse files
tmorehousetmorehouse
authored
docs(modal): Additional examples
1 parent 565b0ab commit 720d00c

File tree

1 file changed

+151
-97
lines changed

1 file changed

+151
-97
lines changed

‎docs/components/modal/README.md

Lines changed: 151 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -5,57 +5,14 @@ support a number of use cases from user notification to completely custom conten
55
feature a handful of helpful sub-components, sizes, variants, accessibility, and more.
66

77
```html
8-
<template>
9-
<div>
10-
<b-btn v-b-modal.modal1>Launch demo modal</b-btn>
11-
<!-- Main UI -->
12-
<div class="mt-3 mb-3">
13-
Submitted Names:
14-
<ul>
15-
<li v-for="n in names">{{n}}</li>
16-
</ul>
17-
</div>
18-
<!-- Modal Component -->
19-
<b-modal id="modal1"
20-
ref="modal1"
21-
title="Submit your name"
22-
@ok="handleOk"
23-
@shown="clearName">
24-
<form @submit.stop.prevent="handleSubmit">
25-
<b-form-input type="text"
26-
placeholder="Enter your name"
27-
v-model="name"></b-form-input>
28-
</form>
29-
</b-modal>
30-
</div>
31-
</template>
8+
<div>
9+
<b-btn v-b-modal.modal1>Launch demo modal</b-btn>
3210

33-
<script>
34-
export default {
35-
data: {
36-
name: '',
37-
names: []
38-
},
39-
methods: {
40-
clearName() {
41-
this.name = '';
42-
},
43-
handleOk(e) {
44-
e.preventDefault();
45-
if (!this.name) {
46-
alert('Please enter your name');
47-
} else {
48-
this.handleSubmit()
49-
}
50-
},
51-
handleSubmit() {
52-
this.names.push(this.name);
53-
this.clearName();
54-
this.$refs.modal1.hide();
55-
}
56-
}
57-
}
58-
</script>
11+
<!-- Modal Component -->
12+
<b-modal id="modal1" title="Bootstrap-Vue">
13+
<p clas="my-4">Hello from modal!</p>
14+
</b-modal>
15+
</div>
5916

6017
<!-- modal-1.vue -->
6118
```
@@ -88,16 +45,20 @@ There are several methods that you can employ to toggle the visibility of `<b-mo
8845
Other elements can easily show modals using the `v-b-modal` directive.
8946

9047
```html
91-
<!-- Using modifiers -->
92-
<b-btn v-b-modal.myModal>Show Modal</b-btn>
48+
<div>
49+
<!-- Using modifiers -->
50+
<b-btn v-b-modal.myModal>Show Modal</b-btn>
9351

94-
<!-- Using value -->
95-
<b-btn v-b-modal="'myMmodal'">Show Modal</b-btn>
52+
<!-- Using value -->
53+
<b-btn v-b-modal="'myMmodal'">Show Modal</b-btn>
9654

97-
<!-- the modal -->
98-
<b-modal id="myMmodal">
55+
<!-- the modal -->
56+
<b-modal id="myMmodal">
9957
Hello From My Modal!
100-
</b-modal>
58+
</b-modal>
59+
</div>
60+
61+
<!-- modal-directive-1.vue -->
10162
```
10263

10364
Focus will automatically be returned to the trigger element once the modal closes.
@@ -133,7 +94,7 @@ export default {
13394
}
13495
</script>
13596

136-
<!-- modal-2.vue -->
97+
<!-- modal-methods-1.vue -->
13798
```
13899

139100
The `hide()` method accepts an optional argument. See section **Prevent Closing**
@@ -162,7 +123,7 @@ export default {
162123
}
163124
</script>
164125

165-
<!-- modal-3.vue -->
126+
<!-- modal-v-model-1.vue -->
166127
```
167128

168129
When using the `v-model` property, do not use the `visible` property at the same time.
@@ -173,7 +134,7 @@ When using the `v-model` property, do not use the `visible` property at the same
173134
You can emit `bv::show::modal` and `bv::hide::modal` event on `$root` with the first
174135
argument set to the modal's id. An optional second argument can specify the element
175136
to return focus to once the modal is closed. The second argument can be a CSS selector,
176-
and element reference, or a component reference.
137+
an element reference, or a component reference.
177138

178139
```html
179140
<b-button @click="showModal" ref="btnShow">
@@ -209,29 +170,60 @@ the `preventDefault()` method of the event object passed to your `ok` (**OK** bu
209170
`cancel` (**Cancel** button) and `hide` event handlers.
210171

211172
```html
212-
<b-modal id="modalPrevent" @hide="save">
213-
Hello From Modal!
214-
<b-alert variant="danger" :show="message ? true : false">
215-
{{ message }}
216-
</b-alert>
217-
</b-modal>
218-
```
173+
<template>
174+
<div>
175+
<b-btn v-b-modal.modalPrevent>Launch demo modal</b-btn>
176+
<!-- Main UI -->
177+
<div class="mt-3 mb-3">
178+
Submitted Names:
179+
<ul>
180+
<li v-for="n in names">{{n}}</li>
181+
</ul>
182+
</div>
183+
<!-- Modal Component -->
184+
<b-modal id="modalPrevent"
185+
ref="modal"
186+
title="Submit your name"
187+
@ok="handleOk"
188+
@shown="clearName">
189+
<form @submit.stop.prevent="handleSubmit">
190+
<b-form-input type="text"
191+
placeholder="Enter your name"
192+
v-model="name"></b-form-input>
193+
</form>
194+
</b-modal>
195+
</div>
196+
</template>
219197

220-
```js
221-
data: {
222-
saved: false,
223-
message: null
224-
},
225-
methods: {
226-
save(e) {
227-
if(!this.saved) {
228-
this.message = 'Please save your work';
229-
e.preventDefault();
230-
} else {
231-
this.message = null;
232-
}
198+
<script>
199+
export default {
200+
data: {
201+
name: '',
202+
names: []
203+
},
204+
methods: {
205+
clearName() {
206+
this.name = '';
207+
},
208+
handleOk(evt) {
209+
// Prevent modal from closing
210+
evt.preventDefault();
211+
if (!this.name) {
212+
alert('Please enter your name');
213+
} else {
214+
this.handleSubmit()
215+
}
216+
},
217+
handleSubmit() {
218+
this.names.push(this.name);
219+
this.clearName();
220+
this.$refs.modal.hide();
233221
}
222+
}
234223
}
224+
</script>
225+
226+
<!-- modal-prevent-1.vue -->
235227
```
236228

237229
**Note**: events `ok` and `cancel` are emitted by modal's built in **OK** and **Cancel**
@@ -252,8 +244,8 @@ The `ok`, `cancel`, and `hide` event object contains several properties and meth
252244
You can set the value of `trigger` by passing an argument to the component's
253245
`hide()` method for advanced control.
254246

255-
**Note:** `ok` and `cancel` events will be only emitted when the argument to `hide()` is strictly `ok`
256-
or `cancel` respectively. The argument passed to `hide()` will be placed into the
247+
**Note:** `ok` and `cancel` events will be only emitted when the argument to `hide()` is strictly `'ok'`
248+
or `'cancel'` respectively. The argument passed to `hide()` will be placed into the
257249
`trigger` property of the event object.
258250

259251

@@ -318,6 +310,69 @@ variants such as `danger`, `warning`, `info`, `success`, `dark`, `light`, etc.
318310
The variants for the bottom border of the header and top border of the footer can be
319311
controlled by the `header-border-variant` and `footer-border-variant` props respectively.
320312

313+
<template>
314+
<b-btn @click="show=true" variant="primary">Show Modal</b-btn>
315+
<b-modal v-model="show"
316+
title="Modal Variants"
317+
:header-bg-variant="headerBgVariant"
318+
:header-text-variant="headerTextVariant"
319+
:body-bg-variant="bodyBgVariant"
320+
:body-text-variant="bodyTextVariant"
321+
:footer-bg-variant="footerBgVariant"
322+
:footer-text-variant="footerTextVariant">
323+
<b-container fluid>
324+
<b-row class="mb-1 text-center">
325+
<b-col cols="3"> </b-col>
326+
<b-col>Background</b-col>
327+
<b-col>Text</b-col>
328+
</b-row>
329+
<b-row class="mb-1">
330+
<b-col cols="3">Header</b-col>
331+
<b-col><b-form-select :options="variants" v-model="headerBgVariant" /></b-col>
332+
<b-col><b-form-select :options="variants" v-model="headerTextVariant" /></b-col>
333+
</b-row>
334+
<b-row class="mb-1">
335+
<b-col cols="3">Body</b-col>
336+
<b-col><b-form-select :options="variants" v-model="bodyBgVariant" /></b-col>
337+
<b-col><b-form-select :options="variants" v-model="bodyTextVariant" /></b-col>
338+
</b-row>
339+
<b-row>
340+
<b-col cols="3">Footer</b-col>
341+
<b-col><b-form-select :options="variants" v-model="footerBgVariant" /></b-col>
342+
<b-col><b-form-select :options="variants" v-model="footerTextVariant" /></b-col>
343+
</b-row>
344+
</b-container>
345+
<div slot="modal-footer" class="w-100">
346+
<p class="float-left">Modal Footer Content</p>
347+
<b-btn size="sm" class="float-right" variant="primary" @click="show=false">
348+
Close
349+
</b-btn>
350+
</div>
351+
</b-modal>
352+
</template>
353+
354+
<script>
355+
export default {
356+
data() {
357+
return {
358+
show: false,
359+
variants: [
360+
'primary','secondary','success','warning','danger','info','light','dark'
361+
],
362+
headerBgVariant: 'dark',
363+
headerTextVariant: 'light',
364+
bodyBgVariant: 'light',
365+
bodyTextVariant: 'dark',
366+
footerBgVariant: 'warning',
367+
footerTextVariant: 'dark'
368+
};
369+
}
370+
};
371+
</script>
372+
373+
<!-- modal-variant-1.vue -->
374+
375+
321376
## Accessibility
322377

323378
`<b-modal>` provides several accessibility features, including auto focus, return
@@ -337,23 +392,22 @@ an element already has focus within the `<b-modal>`.
337392

338393
```html
339394
<b-modal @shown="focusMyElement">
340-
<b-button>I Don't Have Focus</b-button>
341-
<br>
342-
<b-form-input type="text"></b-form-input>
343-
<br>
344-
<!-- element to gain focus when modal is opened -->
345-
<b-form-input ref="focusThis" type="text"></b-form-input>
346-
<br>
347-
<b-form-input type="text"></b-form-input>
348-
<br>
395+
<b-button>I Don't Have Focus</b-button>
396+
<br>
397+
<b-form-input type="text"></b-form-input>
398+
<br>
399+
<!-- element to gain focus when modal is opened -->
400+
<b-form-input ref="focusThis" type="text"></b-form-input>
401+
<br>
402+
<b-form-input type="text"></b-form-input>
349403
</b-modal>
350404
```
351405

352406
```js
353407
methods: {
354-
focusMyElement(e) {
355-
this.$refs.focusThis.focus();
356-
}
408+
focusMyElement(e) {
409+
this.$refs.focusThis.focus();
410+
}
357411
}
358412
```
359413

@@ -387,19 +441,19 @@ been specified via the `return-focus` prop.
387441

388442
#### Specify Return Focus via Event
389443

390-
When using the `show::modal` event (emitted on `$root`), you can specify a second argument
444+
When using the `bv::show::modal` event (emitted on `$root`), you can specify a second argument
391445
which is the element to return focus to. This argument accepts the same types
392446
as the `return-focus` prop.
393447

394448
```js
395-
this.$root.$emit('show::modal', 'modal1', '#focusThisOnClose');
449+
this.$root.$emit('bv::show::modal', 'modal1', '#focusThisOnClose');
396450
```
397451

398452
*Tip:* if using a click event (or similar) to trigger modal to open, pass the
399453
event's `target` property:
400454

401455
```html
402-
<b-btn @click="$root.$emit.('show::modal', 'modal1', $event.target)">
456+
<b-btn @click="$root.$emit.('bv::show::modal', 'modal1', $event.target)">
403457
Open Modal
404458
</b-btn>
405459
```

0 commit comments

Comments
 (0)