-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathCDNLocalCheck.html
70 lines (61 loc) · 2.51 KB
/
CDNLocalCheck.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test AirComponents</title>
<!-- 引入 aircomponents 包的 CSS（如果有） -->
</head>
<script type="module" src='https://unpkg.com/@aircomponents/[email protected]/dist/aircomponents/aircomponents.esm.js'>
</script>
<body>
<!-- 按钮颜色展示 -->
<air-button color="primary">主按钮</air-button>
<air-button color="success">成功按钮</air-button>
<air-button color="info">信息按钮</air-button>
<air-button color="warning">警告按钮</air-button>
<air-button color="danger">危险按钮</air-button>
<air-button color="ghost">幽灵按钮</air-button>
<!-- 按钮样式展示 -->
<air-button variant="solid">实心按钮</air-button>
<air-button variant="outline">描边按钮</air-button>
<air-button variant="text">文字按钮</air-button>
<air-button variant="neo">霓虹按钮</air-button>
<air-button variant="default">默认按钮</air-button>
<!-- 图标按钮展示 -->
<air-button icon="⭐">图标按钮</air-button>
<air-button suffix-icon="✓">后缀图标按钮</air-button>
<air-button icon="🔄" suffix-icon="✓">双图标按钮</air-button>
<!-- 加载中、禁用、选中状态展示 -->
<air-button loading>加载中</air-button>
<air-button disabled>禁用按钮</air-button>
<air-button disabled icon="❌">禁用图标按钮</air-button>
<air-button selected>选中按钮</air-button>
<air-button selected icon="✔️">选中图标按钮</air-button>
<!-- 不同大小按钮展示 -->
<air-button size="small">小按钮</air-button>
<air-button size="medium">中按钮</air-button>
<air-button size="large">大按钮</air-button>
<!-- 按钮组展示 -->
<air-button-group direction="horizontal" spacing="10px">
<air-button color="primary">按钮 1</air-button>
<air-button color="success">按钮 2</air-button>
<air-button color="danger">按钮 3</air-button>
</air-button-group>
<air-button-group direction="vertical" spacing="8px">
<air-button color="primary">垂直按钮 1</air-button>
<air-button color="success">垂直按钮 2</air-button>
</air-button-group>
<!-- 按钮组件 -->
<air-button color="primary" variant="outline" id="myButton">按钮</air-button>
</body>
<script>
// 监听按钮的点击事件
const button = document.querySelector('#myButton');
button.addEventListener('buttonClick', (event) => {
const { selected } = event.detail;
console.log('按钮被点击');
alert(`按钮被点击`);
});
</script>
</html>