generated from AkaraChen/package-starter
/
index.html
112 lines (109 loc) 路 4.31 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style/button/ant.css">
<link rel="stylesheet" href="./style/dialog/ant.css">
<link rel="stylesheet" href="./style/drawer/ant.css">
<link rel="stylesheet" href="./style/message/ant.css">
<link rel="stylesheet" href="./style/notice/innei.css">
<script src="https://esm.sh/@akrc/seaweed@latest" type="module"></script>
<script src="https://unpkg.com/@akrc/nashi@latest/dist/legacy.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@akrc/fish@latest/fish.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/wc-github-corners@latest"></script>
<style>
body {
max-width: 768px;
margin: auto;
padding: 16px;
}
</style>
<title>Document</title>
</head>
<body>
<github-corners fill="#1890ff" repo="akarachen/ringo" blank></github-corners>
<header>
<h1>Ringo Playground</h1>
</header>
<div>
<p>Message</p>
<sw-button primary id="mi">Info</sw-button>
<sw-button type="warning" primary id="mw">Warning</sw-button>
<sw-button type="error" primary id="me">Error</sw-button>
<sw-button type="success" primary id="ms">Success</sw-button>
</div>
<div>
<p>Notice</p>
<sw-button primary id="ni">Info</sw-button>
<sw-button type="warning" primary id="nw">Warning</sw-button>
<sw-button type="error" primary id="ne">Error</sw-button>
<sw-button type="success" primary id="ns">Success</sw-button>
<sw-button primary id="ninnei">Innei Style</sw-button>
</div>
<div>
<p>Drawer</p>
<sw-button id="dl">Left</sw-button>
<sw-button id="dr">Right</sw-button>
</div>
<div>
<p>Dialog</p>
<sw-button id="dialog">Open</sw-button>
</div>
<script type="module">
import { message, notice, drawer, dialog } from './src/index.ts';
import NoticeInnei from './src/notice/impl/innei.ts'
const lorem = 'Lorem ipsum dolor sit amet consectetur adipisicing elit.Magnam quas, iure natus totam, nam quaerat provident doloremque ad reprehenderit necessitatibus molestias numquam maxime eum recusandae sapiente molestiae ipsa eius suscipit?'
const short = 'This is a short message.'
nashi('#mi').click(() => message({ text: lorem, type: 'info', showClose: true }))
nashi('#mw').click(() => message({ text: lorem, type: 'warning', showClose: true }))
nashi('#me').click(() => message({ text: lorem, type: 'error', showClose: true }))
nashi('#ms').click(() => message({ text: lorem, type: 'success', showClose: true }))
nashi('#ni').click(() => notice({ text: short, type: 'info' }))
nashi('#nw').click(() => notice({ text: short, type: 'warning' }))
nashi('#ne').click(() => notice({ text: short, type: 'error' }))
nashi('#ns').click(() => notice({ text: short, type: 'success' }))
nashi('#dl').click(() => drawer({
title: short,
content: lorem,
position: 'left',
buttons: [
{ text: 'Primary', close: true, primary: true },
{
text: 'Secondary', onClick: (close) => {
if (1 === 1) close();
},
}
],
}))
nashi('#dr').click(() => drawer({
title: short,
content: lorem,
position: 'right',
buttons: [
{ text: 'Primary', onClick: () => { }, close: true, primary: true },
{
text: 'Secondary', onClick: (close) => {
if (1 === 1) close();
},
}
],
}))
nashi('#dialog').click(() => {
dialog({
title: short,
text: lorem.slice(0, 100),
showClose: true
})
})
nashi('#ninnei').click(() => {
notice({
text: short,
type: 'info',
model: NoticeInnei,
})
})
</script>
</body>
</html>