blob: 93b4850b88800d81fbd63d61a82ed9c1a347c2e2 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<script>
import Alert from "$lib/components/alert.svelte";
</script>
<h1>Alerts</h1>
<section>
<h2>Info</h2>
<Alert type="info" message="This is message" title="This is title" />
</section>
<section>
<h2>Warning</h2>
<Alert type="warning" message="This is message" title="This is title" />
</section>
<section>
<h2>Error</h2>
<Alert type="error" message="This is message" title="This is title" />
</section>
<section>
<h2>Success</h2>
<Alert type="success" message="This is message" title="This is title" />
</section>
<section>
<h2>Actions</h2>
<Alert
type="info"
message="This is message"
title="This is title"
actions={[
{
id: "confirm",
text: "Yes!",
color: "green",
},
{
id: "cancel",
text: "No!",
color: "red",
},
]}
/>
</section>
<section>
<h2>Right link</h2>
<Alert
on:rightLinkCliked={() => alert("Right link clicked")}
rightLinkText="Link or action"
type="info"
/>
</section>
<section>
<h2>List</h2>
<Alert
title="This is title"
listItems={["Message 1", "Message 2"]}
type="info"
/>
</section>
<section>
<h2>Closeable</h2>
<Alert message="This is message" closeable type="info" />
</section>
|
