@duskmoon-dev/el-popover (日语)
由 Web 组件构建的浮动内容弹出式组件 .
安装
bun add @duskmoon-dev/el-popover
使用量
自动注册
import '@duskmoon-dev/el-popover/register';
<el-dm-popover>
<button slot="trigger">Click me</button>
<div>Popover content goes here</div>
</el-dm-popover>
手工登记
import { ElDmPopover, register } from '@duskmoon-dev/el-popover';
// Register with default tag name
register();
// Or register with custom tag name
customElements.define('my-popover', ElDmPopover);
职位安排
| 安置情况 | 说明 |
|---|
top | 在触发器上方 |
bottom | 触发器下方( 默认) |
left | 触发器左侧 |
right | 触发权 |
top-start | 上方, 对齐开始 |
top-end | 以上, 与结束对齐 |
bottom-start | 以下, 调整为启动 |
bottom-end | 以下, 与结束一致 |
属性
| 属性 | 类型 | 默认 | 说明 |
|---|
open | boolean | false | 弹出器是否打开 |
trigger | string | 'click' | 触发 : click, (中文(简体) ), hover, (中文(简体) ), focus |
placement | string | 'bottom' | 弹出后安置 |
offset | number | 8 | 离触发距离 |
arrow | boolean | true | 显示箭头 |
槽数
| 槽 | 说明 |
|---|
trigger | 触发元素 |
| (默认) | 弹出后内容 |
CSS 组件
| 编 | 说明 |
|---|
popover | 弹出容器 |
content | 内容包装 |
arrow | 箭头元素 |
活动
| 活动 | 细节 | 说明 |
|---|
open | - 说吧 | 弹出后开火 |
close | - 说吧 | 弹出后开火 |
实例
基础
<el-dm-popover>
<button slot="trigger">Open Popover</button>
<div>
<h4>Popover Title</h4>
<p>Some popover content here.</p>
</div>
</el-dm-popover>
职位安排
<el-dm-popover placement="top">
<button slot="trigger">Top</button>
<div>Top popover</div>
</el-dm-popover>
<el-dm-popover placement="right">
<button slot="trigger">Right</button>
<div>Right popover</div>
</el-dm-popover>
Hover 触发器
<el-dm-popover trigger="hover">
<span slot="trigger">Hover me</span>
<div>This appears on hover</div>
</el-dm-popover>
焦点触发器
<el-dm-popover trigger="focus">
<input slot="trigger" placeholder="Focus me" />
<div>Help text appears on focus</div>
</el-dm-popover>
无箭头
<el-dm-popover arrow="false">
<button slot="trigger">No arrow</button>
<div>Popover without arrow</div>
</el-dm-popover>
程序控制
const popover = document.querySelector('el-dm-popover');
// Open
popover.open = true;
// Close
popover.open = false;
许可证
麻省理工学院