@blobatar/ svelte (英语)

Svelte 适配器用于 斑点 ——定型几何活字.

安装

bun add @blobatar/svelte blobatar

使用量

<script>
  import { Blobatar } from "@blobatar/svelte";
</script>

<Blobatar name="username" />

跟着指针

眼睛可以跟踪光标. 那层是运动系统的一部分 它需要JavaScript,所以它是一个单独的子路径,在您的 捆绑,除非您导入它 :

<script>
  import { Blobatar } from "@blobatar/svelte";
  import { gaze } from "@blobatar/svelte/gaze";
  import "blobatar/motion.css";
  import "blobatar/gaze.css"; // required — the eyes hold still without it

  const eyes = gaze({ travel: 3, target: "pointer" });
</script>

<Blobatar {@attach eyes} name="[email protected]" animate="always" size={200} />

附加而非动作,它需要斯维尔特5.29或更新:a 动作只能写在它应用的元素和此处的元素上 属于 <Blobatar>。附件跨越边界,这就是 这是双行集成,而不是停止使用组件的理由.

travel 是外出,是选择地层的地层 --mo-track-travel 开始于 0px,所以一个带有样式表的页面 游览无处可去 司机跑来跑去 眼睛也动不了 这是在 视图框单位——blobatar为100横,所以 3 是面额的3% 大约1.5到4读取良好。 别管它了 风格表是拥有它的, 这是一条更好的道路 对于整个田地的blobatar, 因为财产 继承,或任何响应的:

.hero .mo-eyes { --mo-track-travel: 3px; }

选择一个,而不是两个. travel 写在眼睛上 所以这里 它超越了这样的规则—— 与反应钩的作用相反 对于斯维尔特的特定原因:斯维尔特重写 <svg>整个 style 属性,当一个道具改变时,所以写在那里的属性会消失 这是第一次 name 对.

当blobatar上架时,选项中的所有内容都会被读取一次。 目标 更改为 lookAt,以你自己的影响:

const eyes = gaze({ travel: 3 });
$effect(() => eyes.lookAt(watching ? "pointer" : "rest"));

两者都采取相同的做法:客户端坐标的一分,元素 (单位:千美元)eyes.lookAt(button), (中文(简体) ), "pointer" 为光标, "rest" 把眼睛停放起来 在中间,不恢复闲置的目光,或 null 白费什么的 把它拿回来。 最终要求的胜利,无论谁要求的,并瞄准 {\fn华文楷体\fs20\bord1\shad1\1che0e0e0\2ch000000}活活活被活活活活活活活活活活活活活活活活活被活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活 可以直接通过 lookAt 每按键不重交.

保持结果为 const调用 gaze() 模板中的内含重建 当读取状态发生变化时, 驱动程序会改变, 而一个新的驱动程序会从 眼睛在中间.

什么这个包裹船

斯维尔特,不是JavaScript. Svelte 组件只在内部变成可转换代码 您的编译器, 因此这里没有构建输出, 也没有被发明出来 软件包可以通过 svelte 导出条件, 每个 Svelte 应用工具链( e)vite-plugin-svelte斯维尔特基特, svelte-check) (中文(简体) ). 捆绑器 没有它就无法解决这个包, 而不是给你一个 文件无法执行 .

需要svelte 5:组件用活字写出.

道具

许可证

麻省理工学院