-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (128 loc) · 4.5 KB
/
index.html
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!-- このページはデプロイしない -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PopToast.js</title>
<!-- Custom poptoast.css -->
<link rel="stylesheet" href="poptoast.css">
<!-- Highlight.js -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/github-dark.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/highlight.min.js"></script>
<script>
hljs.highlightAll();
</script>
</head>
<body class="container">
<h1>PopToast.js</h1>
<p>美しいtoastを表示するためのカスタマイズ性の高いJavaScriptライブラリ</p>
<p><a href="https://github.com/AbeShunyah/PopToastJS">GitHub</a></p>
<h2>デモ</h2>
<button id="show-default" class="btn">Toast(success)を表示する</button>
<button id="show-warning" class="btn">Toast(warning)を表示する</button>
<button id="show-error" class="btn">Toast(error)を表示する</button>
<button id="show-info" class="btn">Toast(info)を表示する</button>
<button id="show-customized" class="btn">Toast(カスタマイズ版)を表示する</button>
<p> </p>
<h2>使用方法</h2>
<h3>CDN</h3>
<pre>
<code>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AbeShunyah/PopToastJS@main/poptoast.css">
<script src="https://cdn.jsdelivr.net/gh/AbeShunyah/PopToastJS@main/poptoast.js"></script>
</code>
</pre>
<h3>コード</h3>
<pre>
<!-- HTMLでは、特定の文字はHTMLエンティティに変換しなければならない場合があります。
これは、それらの文字がHTMLのマークアップと混同されるのを避けるためです。
例えば < は < に、 > は > になります。
highlight.jsでは、HTMLエンティティがエスケープされているコードを期待しています。
そのため、上記のようにコードブロック内の < や > をエスケープすることで、
highlight.jsは正常に機能します。 -->
<code class="javascript">
const toast = new PopToast();
const buttonShowDefault = document.querySelector('#show-default');
buttonShowDefault.addEventListener('click', () => {
toast.show('こんにちは!これはPopToastです。', {type: 'success'});
});
</code>
</pre>
<footer>
Thanks: Bootstrap Icons
</footer>
<!-- Scripts -->
<script src="/poptoast.js"></script>
<script>
const toast = new PopToast();
const buttonShowDefault = document.querySelector('#show-default');
const buttonShowWarning = document.querySelector('#show-warning')
const buttonShowError = document.querySelector('#show-error');
const buttonShowInfo = document.querySelector('#show-info')
const buttonShowCustomized = document.querySelector('#show-customized');
buttonShowDefault.addEventListener('click', () => {
toast.show('こんにちは!これはPopToastです。', {
type: 'success'
});
});
buttonShowWarning.addEventListener('click', () => {
toast.show('こんにちは!これはwarningのPopToastです。', {
type: 'warning'
});
});
buttonShowError.addEventListener('click', () => {
toast.show('こんにちは!これはerrorのPopToastです。', {
type: 'error'
});
});
buttonShowInfo.addEventListener('click', () => {
toast.show('こんにちは!これはinfoのPopToastです。', {
type: 'info'
});
});
buttonShowCustomized.addEventListener('click', () => {
toast.show('こんにちは!これはカスタマイズされたPopToastです。', {
type: 'error',
duration: 5000,
position: 'bottom-right',
closeable: false,
style: {
color: 'blue'
}
});
});
</script>
</body>
<style>
body {
color: #333;
}
.container {
max-width: 880px;
margin: 0 auto;
padding-left: 16px;
padding-right: 16px;
}
.btn {
background-color: #fff;
border-radius: 4px;
margin: 4px;
padding: 8px 16px;
cursor: pointer;
outline: none;
background-color: #217afa;
color: #ffffff;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
border: none;
transition: 0.3s;
}
.btn:hover {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
}
footer {
margin-top: 80px;
text-align: center;
}
</style>
</html>