-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
121 lines (117 loc) · 5.53 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
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bunny-ui</title>
<meta name="keywords" content="HTMX|兔子UI|JS|JAVASCRIPT|WEBUI库|HTMX拓展">
<meta name="description"
content="一套 HTMX 开发模式的 Web UI 组件库，使用 AJAX、CSS 过渡、WebSockets 和 服务器推送事件，通过 属性 构建 现代用户界面，结合 简单性 和 超文本的强大功能。">
<!-- bunny-ui -->
<link rel="shortcut icon" href="dist/bunny.jpg" type="image/x-icon">
<link rel="stylesheet" href="dist/bunny.css">
<link rel="stylesheet" href="dist/iconfont/iconfont.css">
<script src="dist/bunny.js"></script>
<!-- markedjs -->
<script src="marked.min.js"></script>
<!-- highlightjs -->
<link rel="stylesheet" href="vs2015.min.css">
<script src="highlight.min.js"></script>
</head>
<body>
<p style="padding-top: 4.5rem;">
<button class="bny-btn" id="is_dark">
<i class="icon icon-yueliang"></i>
</button>
</p>
<div align="center">
<a href="https://github.com/workbunny/bunny-ui">
<img src="dist/bunny.jpg" width="81" alt="bunny">
<p>进入仓库</p>
</a>
<a class="bny-btn bg-secondary" target="_blank" href="https://github.com/workbunny/bunny-ui/releases">立即下载</a>
</div>
<br>
<div class="container">
<div class="bny-tab" hx-ext="bny-tab">
<div class="bny-tab-title shadow">
<div class="bny-tab-item" hx-get="doc/color.md">颜色</div>
<div class="bny-tab-item" selected hx-get="doc/btn.md">按钮</div>
<div class="bny-tab-item" hx-get="doc/form.md">表单</div>
<div class="bny-tab-item" hx-get="doc/card.md">卡片</div>
<div class="bny-tab-item" hx-get="doc/tab.md">选项卡</div>
<div class="bny-tab-item" hx-get="doc/code.md">代码</div>
<div class="bny-tab-item" hx-get="doc/tips.md">提示</div>
<div class="bny-tab-item" hx-get="doc/marquee.md">走马灯</div>
<div class="bny-tab-item" hx-get="doc/alert.md">警示</div>
<div class="bny-tab-item" hx-get="doc/flexbox.md">弹性盒子</div>
<div class="bny-tab-item" hx-get="doc/typography.md">排版</div>
<div class="bny-tab-item" hx-get="doc/list.md">列表</div>
<div class="bny-tab-item" hx-get="doc/menu.md">菜单</div>
<div class="bny-tab-item" hx-get="doc/subsidiary.md">辅助</div>
<div class="bny-tab-item" hx-get="doc/class.md">公共类</div>
<div class="bny-tab-item" hx-get="doc/table.md">表格</div>
<div class="bny-tab-item" hx-get="doc/pop-up.md">弹出框</div>
<div class="bny-tab-item" hx-get="doc/panel.md">面板</div>
<div class="bny-tab-item" hx-get="doc/icon.md">图标</div>
<div class="bny-tab-item" hx-get="doc/loading.md">加载</div>
<div class="bny-tab-item" hx-get="doc/nav.md">导航栏</div>
<div class="bny-tab-item" hx-get="doc/anim.md">动画</div>
<div class="bny-tab-item" hx-get="doc/badges.md">徽章</div>
</div>
<div class="bny-tab-body" id="marked"></div>
</div>
</div>
<script>
// 主题切换函数
const changeTheme = () => {
document.querySelector('html').classList.toggle('dark')
}
const changeBtn = (func, $eve) => {
const x = $eve.clientX
const y = $eve.clientY
// 计算鼠标点击位置距离视窗的最大圆半径
const endRadius = Math.hypot(
Math.max(x, innerWidth - x),
Math.max(y, innerHeight - y),
)
document.documentElement.style.setProperty('--x', x + 'px')
document.documentElement.style.setProperty('--y', y + 'px')
document.documentElement.style.setProperty('--r', endRadius + 'px')
// 判断浏览器是否支持document.startViewTransition
if (document.startViewTransition) {
// 如果支持就使用document.startViewTransition方法
document.startViewTransition(() => {
func.call() // 这里的函数是切换主题的函数，调用changeBtn函数时进行传入
})
} else {
// 如果不支持，就使用最原始的方式，切换主题
func.call()
}
}
htmx.on("#is_dark", "click", function (e) {
let find = htmx.find("i", this)
if (find.getAttribute("class") == "icon icon-yueliang") {
find.setAttribute("class", "icon icon-taiyang")
changeBtn(changeTheme, e)
} else {
find.setAttribute("class", "icon icon-yueliang")
changeBtn(changeTheme, e)
}
})
</script>
<script>
const marked_body = htmx.find("#marked")
htmx.on("htmx:beforeSwap", function (evt) {
if (evt.detail.target.parentNode === marked_body) {
evt.detail.serverResponse = marked.parse(evt.detail.serverResponse)
}
})
htmx.on("htmx:afterSwap", function (evt) {
if (evt.detail.target?.parentNode === marked_body) {
hljs.highlightAll();
}
})
</script>
</body>
</html>