@actus/svelte 中文文档教程
@actus/svelte
使用 @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
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