index.html

<!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.png" 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>
        <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" style="display: inline-block;margin-bottom: 10px;">
            <img src="dist/bunny.png" width="81" alt="bunny">
            <p>进入仓库</p>
        </a>
        <p>
            <a class="bny-btn bg-secondary" target="_blank"
                href="https://github.com/workbunny/bunny-ui/releases">立即下载</a>
        </p>
        <p>
            <img src="https://badgen.net/github/release/workbunny/bunny-ui" alt="Version">
        </p>
    </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" 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" selected 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 class="bny-tab-item" hx-get="doc/breadcrumb.md">面包屑</div>
                <div class="bny-tab-item" hx-get="doc/dropdown.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>