@@ -65,8 +65,8 @@ Toasts are as flexible as you need and have very little required markup. At a mi
65
65
66
66
::: demo
67
67
<CButton color="primary" @click ="createToast">Send a toast</CButton >
68
- <CToaster placement =" top-end " >
69
- <CToast v-for =" (toast, index) in toasts " visible >
68
+ <CToaster class = " p-3 " placement =" top-end " >
69
+ <CToast v-for =" (toast, index) in toasts " visible :key = " index " >
70
70
<CToastHeader closeButton>
71
71
<span class="me-auto fw-bold">{{toast.title}}</span>
72
72
<small>7 min ago</small>
@@ -80,8 +80,8 @@ Toasts are as flexible as you need and have very little required markup. At a mi
80
80
``` vue
81
81
<template>
82
82
<CButton color="primary" @click="createToast">Send a toast</CButton>
83
- <CToaster placement="top-end" visible >
84
- <CToast v-for="(toast, index) in toasts">
83
+ <CToaster class="p-3" placement="top-end">
84
+ <CToast v-for="(toast, index) in toasts" visible :key="index" >
85
85
<CToastHeader closeButton>
86
86
<span class="me-auto fw-bold">{{toast.title}}</span>
87
87
<small>7 min ago</small>
@@ -181,7 +181,7 @@ Toasts are slightly translucent to blend in with what's below them.
181
181
You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
182
182
183
183
::: demo
184
- <CToaster class =" position-relative " >
184
+ <CToaster class =" position-static " >
185
185
<CToast :autohide =" false " visible >
186
186
<CToastHeader closeButton >
187
187
<svg
@@ -222,7 +222,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
222
222
:::
223
223
224
224
``` vue
225
- <CToaster>
225
+ <CToaster class="position-static" >
226
226
<CToast :autohide="false" visible>
227
227
<CToastHeader closeButton>
228
228
<svg
0 commit comments