# @awcodes/alpine-floating-ui 中文文档 规范地址：https://npmcn.com/package/%40awcodes/alpine-floating-ui/ 版本：3\.6\.4 npm 元数据更新时间：2025-10-04T18:28:12.221Z 中文译文更新时间：2026-11-07T08:35:29.066Z 软件包许可：未声明 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40awcodes/alpine-floating-ui 原文对照：https://npmcn.com/package/%40awcodes/alpine-floating-ui/?lang=original 项目主页：https://github.com/awcodes/alpine-floating-ui#readme 源码仓库：https://github.com/awcodes/alpine-floating-ui ## 关键信息（来自 npm 元数据） - 包体积（解压后）：983 kB，37 个文件 - 模块格式：ES Module - TypeScript 类型：未声明 - 运行依赖：0 个 - 首次发布：2022-03-31T17:01:59.465Z - 最新版本发布：2025-10-04T18:28:12.046Z - 近 30 天下载量：20755（2026-10-07 至 2026-11-05，npm 官方下载统计） - 已发布版本数：23（近 12 个月 0 个） ## 中文简介 将浮动UI功能添加到高山3.x组件. ## 安装 ```sh npm install @awcodes/alpine-floating-ui ``` 也可以使用：`pnpm add @awcodes/alpine-floating-ui`、`yarn add @awcodes/alpine-floating-ui`、`bun add @awcodes/alpine-floating-ui` ## README # 阿尔卑斯浮离UI 将浮动UI功能添加到高山3.x组件. > 此套件只支持高山 ^3. x. ## 关于 此插件添加一个 `$float` 魔术和一 `x-float` 给阿尔卑斯山的指令,附有修改符 [浮动 UI](https://floating-ui.com/) 函数. ## 安装 ### 光盘N 包括以下内容: ` ``` ### 国家预防机制 ```bash npm install @awcodes/alpine-floating-ui ``` 此插件可以选择使用x- trap, 但是您也必须包括Alpine Focus插件, 也可以使用它 . ```js import Alpine from "alpinejs"; import Focus from "@alpinejs/focus"; // optional unless you want to use x-trap import AlpineFloatingUI from "@awcodes/alpine-floating-ui"; Alpine.plugin(Focus); // optional unless you want to use x-trap Alpine.plugin(AlpineFloatingUI); window.Alpine = Alpine; window.Alpine.start(); ``` ## 支助科 见 [浮动 UI 教程](https://floating-ui.com/docs/tutorial) 用于关于造型的信息. ## 使用量 ### `$float` 魔术 要创建浮动UI组件,请使用 `$float` 在触发元素上施放魔法 `x-ref` 给你的"小屋"。 别忘了 `x-data` 的根元素. ```html
I'm floating
``` ### `x-float` 指令 要创建带有 x- float 的浮动 UI 组件, 请将指令添加到您带有 x- ref 的浮动元素中以命名 。 然后点击事件触发面板 `$refs` 以瞄准面板. 触发器上的可用方法是 `toggle`, (中文(简体) ), `open`,以及 `close`。 。 。 . 用中间软件 `x-float` 只需在您需要使用的中间软件上链条即可. ```html

I'm floating

``` ## 浮动 UI 配置 第一个论点是: `$float` 应当是一个对象. 此对象目前接受“ 位置 ” 、 “ flip ” 、 “ offset” 、 “ sort” 、 “ arrow” 和“ hide” 中间软件用于浮动 UI 。 见 [浮动 UI 教程](https://floating-ui.com/docs/tutorial) 这些选项的信息. 默认选项是: ```js { placement: 'bottom', middleware: [autoPlacement()], } ``` ### 与 `$float` 魔术 要使用每个中间软件的默认选项通过一个空对象作为值. ```html ``` ### 与 `x-float` 指令 所有设置都应在 x- float 指令的表达式中配置,但 `placement` 指令本身应直接使用。 见 [https://floating-ui.com/docs/computePosition# 出处](https://floating-ui.com/docs/computePosition#placement) 安置选项. ```html
``` ## 箭头中端软件 要使用箭头中间软件,您必须提供一个元素,作为箭头使用,在HTML中放置在您的面板内,并传递到箭头中间软件中,作为元素的$ref. ### 与 `$float` 魔术 ```html
I'm floating 2!
``` ### 与 `x-float` 指令 ```html

I'm floating 2!

``` 箭头的样式( 这只是一个例子, 无论如何你都可以随意样式它): ```css .arrow { position: absolute; background-color: inherit; width: 8px; height: 8px; transform: rotate(45deg); } ``` ## X-拖放系统 可转述的第二个论点 `$float` 是每个浮基元素的插件选项的对象. ### 与 `$float` 魔术 ```html ``` ### 与 `x-float` 指令 ```html
``` ## 版本 本项目遵循 [语义版本](https://semver.org/) 准则. ## 许可证 版权(c) 2022 Adam Weston和撰稿人 麻省理工学院颁发的执照,见 [利比里亚](https://npmcn.com/package/%40awcodes/alpine-floating-ui/LICENSE.md) 详细情况. ## 常见问题 ### @awcodes/alpine-floating-ui 是什么？ 将浮动UI功能添加到高山3\.x组件\. ### 如何安装 @awcodes/alpine-floating-ui？ 在项目目录运行 npm install @awcodes/alpine-floating-ui，或使用 pnpm add / yarn add / bun add。 ### @awcodes/alpine-floating-ui 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/awcodes\_\_alpine-floating-ui 是否存在。 ### @awcodes/alpine-floating-ui 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @awcodes/alpine-floating-ui 可以商用吗？ @awcodes/alpine-floating-ui 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。 ### @awcodes/alpine-floating-ui 的下载量有多少？ 根据 npm 官方下载统计，@awcodes/alpine-floating-ui 在 2026/10/07 – 2026/11/05 这 30 天内被下载 20,755 次，日均约 692 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @awcodes/alpine-floating-ui 还在维护吗？ 最新版本 3\.6\.4 发布于 2025/10/05（1\.1 年前）；至今共发布 23 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/04/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。