/
index.html
46 lines (39 loc) 路 1.97 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo components</title>
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="../node_modules/lit/polyfill-support.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
</head>
<body style="margin: 0; display: flex; flex-direction: column; align-items: center;">
<stlzd-header>
<div>
<p>Stylized</p>
</div>
<div>
<stlzd-button variant="basic">Login</stlzd-button>
<stlzd-button>Create account</stlzd-button>
</div>
</stlzd-header>
<stlzd-button>Primary button</stlzd-button>
<stlzd-button variant="basic">Basic button</stlzd-button>
<stlzd-button disabled>Disabled button</stlzd-button>
<stlzd-command-line command="npm install stylizedjs"></stlzd-command-line>
<stlzd-alert>Just for your information</stlzd-alert>
<stlzd-alert variant="success">Something worked perfectly as expected</stlzd-alert>
<stlzd-alert variant="warning">Warning! This is a warning example</stlzd-alert>
<stlzd-alert variant="error">Something broke or not working properly</stlzd-alert>
<stlzd-input type="text" placeholder="Enter your fullname"></stlzd-input>
<stlzd-input type="date"></stlzd-input>
<stlzd-input type="password" placeholder="Enter your password"></stlzd-input>
<script type="module" src="./dist/components/header/header.js"></script>
<script type="module" src="./dist/components/button/button.js"></script>
<script type="module" src="./dist/components/command-line/command-line.js"></script>
<script type="module" src="./dist/components/alert/alert.js"></script>
<script type="module" src="./dist/components/input/input.js"></script>
</body>
</html>