Skip to content

Commit 8ff2bfb

Browse files
committed
refactor(CToaster): remove utility class from component
1 parent 5086f06 commit 8ff2bfb

File tree

2 files changed

+7
-7
lines changed

2 files changed

+7
-7
lines changed

packages/coreui-vue/src/components/toast/CToaster.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const CToaster = defineComponent({
3131
'div',
3232
{
3333
class: [
34-
'toaster toast-container p-3',
34+
'toaster toast-container',
3535
{
3636
'position-fixed': props.placement,
3737
'top-0': props.placement && props.placement.includes('top'),

packages/docs/components/toast.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -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.
181181
You 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

Comments
 (0)