阿尔卑斯浮离UI
将浮动UI功能添加到高山3.x组件.
此套件只支持高山 ^3. x.
关于
此插件添加一个 $float 魔术和一 x-float 给阿尔卑斯山的指令,附有修改符 浮动 UI 函数.
安装
光盘N
包括以下内容: <script> 标记在 <head> 在阿尔卑斯山之前 此插件可以选择使用x- trap, 但是您也必须包括Alpine Focus插件, 也可以使用它 .
<script src="https://cdn.jsdelivr.net/npm/@awcodes/[email protected]/dist/cdn.min.js" defer></script>
<!-- optional unless you want to use x-trap -->
<script defer src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"></script>
国家预防机制
npm install @awcodes/alpine-floating-ui
此插件可以选择使用x- trap, 但是您也必须包括Alpine Focus插件, 也可以使用它 .
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 教程 用于关于造型的信息.
使用量
$float 魔术
要创建浮动UI组件,请使用 $float 在触发元素上施放魔法 x-ref 给你的"小屋"。 别忘了 x-data 的根元素.
<style>
.panel { display: none; }
</style>
<div class="component" x-data>
<button @click="$float()">I have a floating panel. Woot!</button>
<div x-ref="panel" class="panel">I'm floating</div>
</div>
x-float 指令
要创建带有 x- float 的浮动 UI 组件, 请将指令添加到您带有 x- ref 的浮动元素中以命名 。 然后点击事件触发面板 $refs 以瞄准面板.
触发器上的可用方法是 toggle, (中文(简体) ), open,以及 close。 。 。 .
用中间软件 x-float 只需在您需要使用的中间软件上链条即可.
<div class="component" x-data>
<button @click="$refs.panel.toggle">Trigger</button>
<div x-ref="panel" class="panel" x-float.placement.bottom-start.flip.offset>
<p>I'm floating</p>
</div>
</div>
浮动 UI 配置
第一个论点是: $float 应当是一个对象.
此对象目前接受“ 位置 ” 、 “ flip ” 、 “ offset” 、 “ sort” 、 “ arrow” 和“ hide” 中间软件用于浮动 UI 。 见 浮动 UI 教程 这些选项的信息.
默认选项是:
{
placement: 'bottom',
middleware: [autoPlacement()],
}
与 $float 魔术
要使用每个中间软件的默认选项通过一个空对象作为值.
<button @click="$float({
offset: 10,
flip: {},
hide: {
strategy: 'referenceHidden'
}
})"></button>
与 x-float 指令
所有设置都应在 x- float 指令的表达式中配置,但 placement 指令本身应直接使用。 见 https://floating-ui.com/docs/computePosition# 出处 安置选项.
<div
x-ref="panel"
class="panel"
x-float.placement.top.flip.offset.hide="{
offset: 30,
hide: {
strategy: 'referenceHidden'
}
}"
>
箭头中端软件
要使用箭头中间软件,您必须提供一个元素,作为箭头使用,在HTML中放置在您的面板内,并传递到箭头中间软件中,作为元素的$ref.
与 $float 魔术
<div class="component" x-data>
<button @click="$float({
offset: 10,
arrow: {
element: $refs.arrow
}
})">I'm a fancy button with a fancy arrow panel</button>
<div x-ref="panel" class="panel">
I'm floating 2!
<div x-ref="arrow" class="arrow"></div>
</div>
</div>
与 x-float 指令
<div class="component" x-data>
<button @click="$refs.panel.toggle">I'm a fancy button with a fancy arrow panel</button>
<div
x-ref="panel"
class="panel"
x-float.flip.offset.trap.arrow="{
offset: 30,
arrow: {
element: $refs.arrow
}
}"
>
<p>I'm floating 2!</p>
<div x-ref="arrow" class="arrow"></div>
</div>
</div>
箭头的样式( 这只是一个例子, 无论如何你都可以随意样式它):
.arrow {
position: absolute;
background-color: inherit;
width: 8px;
height: 8px;
transform: rotate(45deg);
}
X-拖放系统
可转述的第二个论点 $float 是每个浮基元素的插件选项的对象.
与 $float 魔术
<button @click="$float({
offset: 10,
placement: 'bottom-start',
},{
trap: true
})"></button>
与 x-float 指令
<div
x-ref="panel"
class="panel"
x-float.trap
>
版本
本项目遵循 语义版本 准则.
许可证
版权(c) 2022 Adam Weston和撰稿人
麻省理工学院颁发的执照,见 利比里亚 详细情况.