添加斑马线下拉菜单

Question

我正在使用适用于 Windows 的 GlazeWM，GlazeWM 可以与 Zebar 配合使用。我使用 React 创建自己的小部件栏，现在我想在单击日期小部件时添加日历之类的内容。但该日历无法显示在 Zebar 之外。如何做到这一点？

下面是我调用日历的代码。

import { useState, useEffect } from "react"
import { createProviderGroup } from "zebar"

import { CalendarIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover"

const providers = createProviderGroup({
    date: { type: "date", formatting: "EEE d MMM t" },
})

const Center = () => {
    const [output, setOutput] = useState(providers.outputMap)

    useEffect(() => {
        providers.onOutput(() => setOutput(providers.outputMap));
    }, [])

    return (
        <div className="center">
            <Popover>
                <PopoverTrigger asChild>
                    <Button
                        variant={"outline"}
                        className={cn(
                            "w-[240px] justify-start text-left font-normal",
                            "text-muted-foreground"
                        )}
                    >
                        <CalendarIcon />
                        {output.date?.formatted}
                    </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0 pt-1" align="start">
                    <Calendar
                        mode="single"
                        initialFocus
                    />
                </PopoverContent>
            </Popover>
        </div>
    )
}

export default Center

Answer 1

1. 为日历创建一个单独的窗口： 尝试在单独的浮动窗口中打开日历，该窗口专门设计为显示在 Zebar 上方。您可以使用 Electron 等工具为日历创建一个单独的窗口，该窗口将浮动在所有其他窗口之上。
2. 确保 z-index 设置正确： 如果您在主应用程序中显示日历，请确保日历的 z-index 设置为高于 Zebar 的 z-index。这将允许它出现在 Zebar 小部件上方。
3. 使用 Electron 在 Zebar 上方创建窗口： 如果前面的解决方案很复杂，请考虑使用 Electron 创建一个单独的 BrowserWindow，将显示在 Zebar 上方。 Electron 允许您控制窗口堆叠行为，从而更轻松地在 Zebar 上方显示日历窗口。