面粉弹出组件
Popup 组件提供了一个可配置的弹出框. 我们开发了用于 面粉 模板, 但这是开源的,你可以用来做任何事情.
import Popup from "@flourish/popup";
var popup = Popup();
// Hide the popup if the user clicks on it
popup.on("click", function() { this.hide(); });
// Draw the popup pointing to position (100, 100)
popup.point(100, 100).draw();
它被开发成ES6模块,你可以使用它 滚出.js 财务报告和审定财务报表 卷起插孔-节点-溶解, (中文(简体) ), 或另一种ES6相容的模块捆绑器. 或者可以直接从网络中包含文件 :
<script src="https://cdn.flourish.rocks/popup-v1.full.min.js"></script>
交互式实例
全文参考
构造器
Popup() 构造一个新的弹出。 可能在同一页上出现几起弹出,
虽然你通常只需要一个。 构造者不采辩.
方法
.draw()
绘制或重新绘制弹出来反映其设置的当前值.
.hide()
藏出弹出.
### .on(event, handler)
附上事件处理器 。 唯一支持的事件是 click。您可以附加
同一事件的多个处理者,他们都会酌情开火.
□ 事件
这个 click 事件
当有人点击弹出时,点击事件会被发射. 事件处理器通过
将鼠标Event作为参数及其 this 对象是弹出实例.
设置
通过在弹出对象上调用同名方法来应用设置 以新值作为参数。 这些方法返回弹出对象,所以你 可以锁上它们。 例如,您可以设置位置和内容 :
popup.point(100, 50).html("Look at me!");
您可以通过调用没有的方法获取设置的当前值 参数,例如:.
var current_point = popup.point();
container
用于限制弹出量的DOM元素. 默认为 document.body。 。 。 .
point
点是两个位置的阵列 [x, y] 这决定了弹出点的位置.
point(arr)
在两个元素阵列中通过x和y位置, [x, y]。 。 。 .
point(x, y)
作为方便,您可以将 x 和 y 位置作为单独的参数通过.
point(container)
或者你可以通过一个可见的DOM元素,它把点设置到该元素的中心.
html
弹出的内容.
directions
按优先级顺序排列的一系列方向或指定单一方向的字符串。 弹出将使用第一个列出的方向 允许在其容器内绘制弹出.
支助方向如下:
bottom:将弹出框下边缘中央的小箭头画出, 所以弹出在点上.top:将弹出盒上边缘中央的小箭头画出, 所以弹出在点下.left:将弹出箱左侧边缘中央的小箭头画出, 所以弹出在右侧.right: 在弹出箱右侧边缘中央取出小箭头, 所以弹出在点的左边.topLeft: 在弹出箱左上角画出小箭头, 所以弹出在下方和右边.bottomLeft: 在弹出箱左下角画出小箭头, 所以弹出在右上方.topRight在弹出箱右上角画出小箭头, 所以弹出点在下方和左侧.bottomRight: 在弹出箱右下角画出小箭头, 所以弹出点在左上下方.bottomFlexible画出弹出箱底边缘的小箭头, 因此弹出(可能不对称地)位于点上.topFlexible画出弹出盒上边的小箭头, 所以弹出量(可能是不对称的)在点下.leftFlexible画出弹出盒左手边的小箭头, 因此弹出(可能不对称地)位于点的右边.rightFlexible画出弹出箱右边的小箭头, 因此弹出(可能是不对称的)到左边的点.
默认优先权顺序为上列顺序.
fallbackFit
如果弹出无法装入容器, 确定弹出会做什么
使用列出的任何方向。 可能值为 "horizontal" (这是默认),
"vertical",以及 null。 。 。 .
如果无法使用所列方向将弹出物装入容器:
- 如果倒计时 适应是
"horizontal"弹出会尽可能限制水平 但允许垂直地重叠其界限. - 如果倒计时 适应是
"vertical"弹出会尽可能限制垂直 ,但允许横向重叠. - 如果倒计时 适应是
null,弹出会登录到控制台的警告并使用第一个列出的方向.
样式
您可以使用 CSS 格式化弹出 。 弹出容器有类 .flourish-popup, (中文(简体) ),
并包含 <svg> 有类的元素 .flourish-popup-svg (单位:千美元) <div> 与
类 .flourish-popup-content。 SVG 包含一个 <g> 可样式的元素
来改变弹出框本身的外观,您可以样式化内容 div
以更改弹出中 HTML 的外观.
例如,如果想要在黑色背景上写出白文本,您可以 写 :
.flourish-popup .flourish-popup-svg g { fill: black; }
.flourish-popup .flourish-popup-content { color: white; }
如果您想要半透明弹出, 您可以写 :
.flourish-popup .flourish-popup-svg g { opacity: 0.6; }
属性
.version
Popup.version 使用 语义版本。 。 。 .