@actus/svelte 中文文档教程

发布于 3年前 浏览 6 项目主页 更新于 3年前

@actus/svelte

bar

使用 @actus/core 状态机的 Svelte UI 组件/绑定。

Component Usage

将它安装在你的 Svelte 项目中:

npm install @actus/svelte

并导入它

import Actus from '@actus/svelte'

如前所述,在任何 UI 框架中实现它应该是微不足道的,看看 src/Component.svelte 查看它是如何使用 Svelte 制作的。

除了 commands 之外的所有道具都是可选的。

<Actus
    {commands}
    toggleKey="p"
    ctrlKey={false}
    placeholder="Type your best commands"
    theme={{
        "--color": "rgba(212, 208, 199, 1.00)",
        "--result-description-color": "rgba(212, 208, 199, 1.00)",
        "--background-color": "rgba(36, 36, 36, 1.00)",
        "--active-result-background-color": "rgba(64, 64, 64, 1.00)",
        "--active-result-description-color": "rgba(255, 255, 255, 1.00)",
        "--active-result-title-color": "rgba(255, 255, 255, 1.00)",
        "--scale": "1.3",
    }}
/>

Demo

这是一个演示:https://ti99l.csb.app

@actus/svelte

bar

Svelte UI component / bindings that uses the @actus/core state machine.

Component Usage

Install it in your Svelte project with:

npm install @actus/svelte

and import it

import Actus from '@actus/svelte'

As mentioned, it should be trivial to implement this in any UI framework, have a look in src/Component.svelte to see how it's made using Svelte.

All props except commands are optional.

<Actus
    {commands}
    toggleKey="p"
    ctrlKey={false}
    placeholder="Type your best commands"
    theme={{
        "--color": "rgba(212, 208, 199, 1.00)",
        "--result-description-color": "rgba(212, 208, 199, 1.00)",
        "--background-color": "rgba(36, 36, 36, 1.00)",
        "--active-result-background-color": "rgba(64, 64, 64, 1.00)",
        "--active-result-description-color": "rgba(255, 255, 255, 1.00)",
        "--active-result-title-color": "rgba(255, 255, 255, 1.00)",
        "--scale": "1.3",
    }}
/>

Demo

Here's a demo: https://ti99l.csb.app

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文