@@ -65,8 +65,8 @@ Toasts are as flexible as you need and have very little required markup. At a mi
6565
6666::: demo
6767<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 " >
7070 <CToastHeader closeButton>
7171 <span class="me-auto fw-bold">{{toast.title}}</span>
7272 <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
8080``` vue
8181<template>
8282 <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" >
8585 <CToastHeader closeButton>
8686 <span class="me-auto fw-bold">{{toast.title}}</span>
8787 <small>7 min ago</small>
@@ -181,7 +181,7 @@ Toasts are slightly translucent to blend in with what's below them.
181181You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
182182
183183::: demo
184- <CToaster class =" position-relative " >
184+ <CToaster class =" position-static " >
185185<CToast :autohide =" false " visible >
186186<CToastHeader closeButton >
187187<svg
@@ -222,7 +222,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
222222:::
223223
224224``` vue
225- <CToaster>
225+ <CToaster class="position-static" >
226226 <CToast :autohide="false" visible>
227227 <CToastHeader closeButton>
228228 <svg
0 commit comments