Skip to content

Commit 3e9b26d

Browse files
mrholekmrholek
committed
refactor: add new examples
1 parent 1101d8f commit 3e9b26d

File tree

3 files changed

+229
-0
lines changed

3 files changed

+229
-0
lines changed

‎src/_nav.js

+5
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,11 @@ export default [
232232
name: 'Modals',
233233
to: '/notifications/modals',
234234
},
235+
{
236+
component: 'CNavItem',
237+
name: 'Toasts',
238+
to: '/notifications/toasts',
239+
},
235240
],
236241
},
237242
{

‎src/router/index.js

+5
Original file line numberDiff line numberDiff line change
@@ -254,6 +254,11 @@ const routes = [
254254
name: 'Modals',
255255
component: () => import('@/views/notifications/Modals.vue'),
256256
},
257+
{
258+
path: '/notifications/toasts',
259+
name: 'Toasts',
260+
component: () => import('@/views/notifications/Toasts.vue'),
261+
},
257262
],
258263
},
259264
{

‎src/views/notifications/Toasts.vue

+219
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
<template>
2+
<CRow>
3+
<CCol :xs="12">
4+
<CCard class="mb-4">
5+
<CCardHeader> <strong>Vue Toast</strong> <small>Basic</small> </CCardHeader>
6+
<CCardBody>
7+
<p class="text-body-secondary small">
8+
Toasts are as flexible as you need and have very little required markup. At a minimum,
9+
we require a single element to contain your “toasted” content and strongly encourage a
10+
dismiss button.
11+
</p>
12+
<DocsExample href="components/toast.html">
13+
<CToast title="CoreUI for Vue.js" :autohide="false" :visible="true">
14+
<CToastHeader closeButton>
15+
<svg
16+
class="rounded me-2"
17+
width="20"
18+
height="20"
19+
xmlns="http://www.w3.org/2000/svg"
20+
preserveAspectRatio="xMidYMid slice"
21+
focusable="false"
22+
role="img"
23+
>
24+
<rect width="100%" height="100%" fill="#007aff"></rect>
25+
</svg>
26+
<strong class="me-auto">CoreUI for Vue.js</strong>
27+
<small>7 min ago</small>
28+
</CToastHeader>
29+
<CToastBody>Hello, world! This is a toast message.</CToastBody>
30+
</CToast>
31+
</DocsExample>
32+
<DocsExample href="components/toast.html">
33+
<CButton color="primary" @click="createToast">Send a toast</CButton>
34+
<CToaster placement="top-end">
35+
<CToast v-for="(toast, index) in toasts" visible :key="index">
36+
<CToastHeader closeButton>
37+
<span class="me-auto fw-bold">{{ toast.title }}</span>
38+
<small>7 min ago</small>
39+
</CToastHeader>
40+
<CToastBody>
41+
{{ toast.content }}
42+
</CToastBody>
43+
</CToast>
44+
</CToaster>
45+
</DocsExample>
46+
</CCardBody>
47+
</CCard>
48+
</CCol>
49+
<CCol :xs="12">
50+
<CCard class="mb-4">
51+
<CCardHeader> <strong>Vue Toast</strong> <small>Translucent</small> </CCardHeader>
52+
<CCardBody>
53+
<p class="text-body-secondary small">
54+
Toasts are slightly translucent to blend in with what&#39;s below them.
55+
</p>
56+
<DocsExample href="components/toast.html#translucent" tabContentClass="bg-dark">
57+
<CToast title="CoreUI for Vue.js" :autohide="false" :visible="true">
58+
<CToastHeader closeButton>
59+
<svg
60+
class="rounded me-2"
61+
width="20"
62+
height="20"
63+
xmlns="http://www.w3.org/2000/svg"
64+
preserveAspectRatio="xMidYMid slice"
65+
focusable="false"
66+
role="img"
67+
>
68+
<rect width="100%" height="100%" fill="#007aff"></rect>
69+
</svg>
70+
<strong class="me-auto">CoreUI for Vue.js</strong>
71+
<small>7 min ago</small>
72+
</CToastHeader>
73+
<CToastBody>Hello, world! This is a toast message.</CToastBody>
74+
</CToast>
75+
</DocsExample>
76+
</CCardBody>
77+
</CCard>
78+
</CCol>
79+
<CCol :xs="12">
80+
<CCard class="mb-4">
81+
<CCardHeader> <strong>Vue Toast</strong> <small>Stacking</small> </CCardHeader>
82+
<CCardBody>
83+
<p class="text-body-secondary small">
84+
You can stack toasts by wrapping them in a toast container, which will vertically add
85+
some spacing.
86+
</p>
87+
<DocsExample href="components/toast.html#stacking">
88+
<CToaster class="position-static">
89+
<CToast title="CoreUI for Vue.js" :autohide="false" :visible="true">
90+
<CToastHeader closeButton>
91+
<svg
92+
class="rounded me-2"
93+
width="20"
94+
height="20"
95+
xmlns="http://www.w3.org/2000/svg"
96+
preserveAspectRatio="xMidYMid slice"
97+
focusable="false"
98+
role="img"
99+
>
100+
<rect width="100%" height="100%" fill="#007aff"></rect>
101+
</svg>
102+
<strong class="me-auto">CoreUI for Vue.js</strong>
103+
<small>7 min ago</small>
104+
</CToastHeader>
105+
<CToastBody>Hello, world! This is a toast message.</CToastBody>
106+
</CToast>
107+
<CToast title="CoreUI for Vue.js" :autohide="false" :visible="true">
108+
<CToastHeader closeButton>
109+
<svg
110+
class="rounded me-2"
111+
width="20"
112+
height="20"
113+
xmlns="http://www.w3.org/2000/svg"
114+
preserveAspectRatio="xMidYMid slice"
115+
focusable="false"
116+
role="img"
117+
>
118+
<rect width="100%" height="100%" fill="#007aff"></rect>
119+
</svg>
120+
<strong class="me-auto">CoreUI for Vue.js</strong>
121+
<small>7 min ago</small>
122+
</CToastHeader>
123+
<CToastBody>Hello, world! This is a toast message.</CToastBody>
124+
</CToast>
125+
</CToaster>
126+
</DocsExample>
127+
</CCardBody>
128+
</CCard>
129+
</CCol>
130+
<CCol :xs="12">
131+
<CCard class="mb-4">
132+
<CCardHeader> <strong>Vue Toast</strong> <small>Custom content</small> </CCardHeader>
133+
<CCardBody>
134+
<p class="text-body-secondary small">
135+
Customize your toasts by removing sub-components, tweaking them with
136+
<a href="https://coreui.io/docs/4.0/utilities/api">utilities</a>, or by adding your own
137+
markup. Here we&#39;ve created a simpler toast by removing the default
138+
<code>&lt;CToastHeader&gt;</code>, adding a custom hide icon from
139+
<a href="https://icons.coreui.io">CoreUI Icons</a>, and using some
140+
<a href="https://coreui.io/docs/4.0/utilities/flex">flexbox utilities</a> to adjust the
141+
layout.
142+
</p>
143+
<DocsExample href="components/toast.html#custom-content">
144+
<CToast :autohide="false" class="align-items-center" :visible="true">
145+
<div class="d-flex">
146+
<CToastBody>Hello, world! This is a toast message.</CToastBody>
147+
<CToastClose class="me-2 m-auto" />
148+
</div>
149+
</CToast>
150+
</DocsExample>
151+
<p class="text-body-secondary small">
152+
Alternatively, you can also add additional controls and components to toasts.
153+
</p>
154+
<DocsExample href="components/toast.html#custom-content">
155+
<CToast :autohide="false" class="align-items-center" visible>
156+
<CToastBody>
157+
Hello, world! This is a toast message.
158+
<div class="mt-2 pt-2 border-top">
159+
<CButton type="button" color="primary" size="sm"> Take action </CButton>
160+
<CToastClose component="CButton" color="secondary" size="sm" class="ms-1"
161+
>Close</CToastClose
162+
>
163+
</div>
164+
</CToastBody>
165+
</CToast>
166+
</DocsExample>
167+
</CCardBody>
168+
</CCard>
169+
</CCol>
170+
<CCol :xs="12">
171+
<CCard class="mb-4">
172+
<CCardHeader> <strong>Vue Toast</strong> <small>Custom content</small> </CCardHeader>
173+
<CCardBody>
174+
<p class="text-body-secondary small">
175+
Building on the above example, you can create different toast color schemes with our
176+
<a href="https://coreui.io/docs/4.0/utilities/colors">color</a> and
177+
<a href="https://coreui.io/docs/4.0//utilities/background">background</a> utilities.
178+
Here we&#39;ve set <code>color=&#34;primary&#34;</code> and added
179+
<code>.text-white</code> class to the <code>&lt;Ctoast&gt;</code>, and then set
180+
<code>white</code> property to our close button. For a crisp edge, we remove the default
181+
border with <code>.border-0</code>.
182+
</p>
183+
<DocsExample href="components/toast.html#color-schemes">
184+
<CToast
185+
:autohide="false"
186+
color="primary"
187+
class="text-white align-items-center"
188+
:visible="true"
189+
>
190+
<div class="d-flex">
191+
<CToastBody>Hello, world! This is a toast message.</CToastBody>
192+
<CToastClose class="me-2 m-auto" white />
193+
</div>
194+
</CToast>
195+
</DocsExample>
196+
</CCardBody>
197+
</CCard>
198+
</CCol>
199+
</CRow>
200+
</template>
201+
202+
<script>
203+
export default {
204+
data() {
205+
return {
206+
toasts: [],
207+
}
208+
},
209+
210+
methods: {
211+
createToast() {
212+
this.toasts.push({
213+
title: 'new toast',
214+
content: 'Lorem ipsum dolor cet emit',
215+
})
216+
},
217+
},
218+
}
219+
</script>

0 commit comments

Comments
 (0)