多頁簽


    <script>
        import "@/lib/IframeTabs"
    </script>
    <section>
        <!-- 這是僅僅適用於顯示IFRAME的頁簽集合 -->
        <na-iframe-tabs id="tabs" active="jigsaw" size="lg"></na-iframe-tabs>
    </section>
    <script>
        import type { IframeAttrs } from "@/lib/IframeTabs"

        const base = import.meta.env.BASE_URL

        async function onload() {
            const tabs = document.querySelector("na-iframe-tabs")
            tabs!.data = [
                {
                    key: "jigsaw",
                    src: "https://nanarino.github.io/jigsaw/?img=0",
                    title: "拼圖1",
                    closeable: false,
                },
                {
                    key: "jigsaw1",
                    src: "https://nanarino.github.io/jigsaw/?img=1",
                    title: "拼圖2",
                    closeable: true, // 默認為 true
                },
                {
                    key: "jigsaw2",
                    src: "https://nanarino.github.io/jigsaw/?img=2",
                    title: "拼圖3",
                },
                {
                    key: "python",
                    src: base + "games/python",
                    title: "貪吃蛇",
                },
                {
                    key: "outerHTML",
                    src: "",
                    title: "文本",
                    outerHTML: `<pre><code class="na-font-mono">
                        ╭◜◝ ͡ ◜ ╮ 
                        (    好想    ) 
                        ╰◟ ͜ ╭◜◝ ͡ ◜ ͡ ◝  ╮
                        　 　 (  有人v50   )
                        ╭◜◝ ͡ ◜◝ ͡  ◜ ╮◞ ╯
                        (   请我吃KFC  ) 
                        ╰◟ ͜ ◞ ͜ ◟ ͜ ◞◞╯ ╭◜◝ ͡ ◜ ͡ ◝  ╮
                                        (  有人v50   )
                        ╭◜◝ ͡ ◜◝ ͡  ◜ ╮ ╰◟ ◞ ͜ ◟ ͜ ◞╯
                        (   请我吃KFC  ) 
                        ╰◟ ͜ ◞ ͜ ◟ ͜ ◞◞╯
                        ₍ᐢ..ᐢ₎ᐝ
                    </code></pre>`
                },
            ]
            // 由于 `tabs.data` 是不可變的, 無法響應 `pop`, `push`, `splice`

            tabs!.addEventListener("tab-change", e => {
                // e.preventDefault() 阻止切換頁簽
                const tab = (e as CustomEvent<IframeAttrs>).detail
                console.log("tab-change", tab)
            })
            tabs!.addEventListener("tab-close", e => {
                // e.preventDefault() 阻止關閉頁簽
                const tab = (e as CustomEvent<IframeAttrs>).detail
                console.log("tab-close", tab)
            })
        }

        onload()
    </script>