菜单 | NarraLeaf-React

用于渲染游戏内选项菜单的 GameMenu 与 Item 组件，含按键绑定与文字样式

GameMenu 渲染菜单容器，Item 渲染菜单项

示例

导入组件

import { useState } from "react";
import { GameMenu, Item, useGame } from "narraleaf-react";

实现菜单组件

function DefaultMenu({items}: { items: number[] }) {
    return (
        <GameMenu
            className="absolute flex flex-col items-center justify-center min-w-full w-full h-full"
        >
            {items.map((index) => (
                <Item
                    key={index}
                    className="bg-white p-2 mt-2 w-1/2"
                    defaultColor="black"
                />
            ))}
        </GameMenu>
    );
}

注册到游戏

function App() {
    const game = useGame();

    useEffect(() => {
        game.configure({
            menu: DefaultMenu,
        });
    }, []);

    return /* ... */
}

组件

GameMenu

菜单容器

children?: React.ReactNode - 子元素
...props: React.HTMLAttributes<HTMLDivElement> - 容器属性

Item

菜单项

已导出的 props 类型：ItemProps

className?: string - 类名
style?: React.CSSProperties - 样式
bindKey?: string - 快捷键，参见 Key_Values。按下时选中并执行对应操作
defaultColor?: Color - 文字回退颜色
fontSize?: React.CSSProperties["fontSize"]
fontWeight?: React.CSSProperties["fontWeight"]
fontWeightBold?: React.CSSProperties["fontWeight"]
fontFamily?: React.CSSProperties["fontFamily"]

选项文字使用与对话文本相同的渲染器。Sentence 与 Word 局部样式会覆盖默认值

菜单

示例

组件

GameMenu

Item

本页目录