约夏克布丁
Popovers-Bootstrap 5和Material Design 2.0组件
将弹出式窗口(如iOS中的弹出窗口)添加到上任何元素的文档和示例 您的网站。
注意:阅读 API 标签以找到所有可用选项,然后 高级定制
基本例子
<button
type="button"
class="btn btn-lg btn-danger"
data-mdb-toggle="popover"
title="Popover title"
data-mdb-content="And here's some amazing content. It's very engaging. Right?"
>
Click to toggle popover
</button>
总览
使用弹出框时要了解的事项:
- 出于性能原因选择启用弹出式窗口,因此 您必须自己对其进行初始化。
- 长度为零的
title
和content
值将永远不会显示弹出窗口。 -
指定
container: 'body'
避免更复杂的渲染问题 组件(例如我们的输入组,按钮组等)。 - 在隐藏元素上触发弹出窗口将不起作用。
.disabled
或disabled
元素的弹出窗口必须在 包装器元素。-
从跨越多行的锚点触发时,弹出窗口将居中
在锚的总宽度之间在您的计算机上使用
.text-nowrap
<a>
s 避免这种行为。 - 弹出窗口必须先隐藏,然后才能从DOM中删除其相应元素。
- 影子DOM中的一个元素可以触发弹出窗口。
四个方向
共有四个选项:顶部,右侧,底部和左侧对齐。
<button
type="button"
class="btn btn-secondary"
data-mdb-container="body"
data-mdb-toggle="popover"
data-mdb-placement="top"
data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
>
Popover on top
</button>
<button
type="button"
class="btn btn-secondary"
data-mdb-container="body"
data-mdb-toggle="popover"
data-mdb-placement="right"
data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
>
Popover on right
</button>
<button
type="button"
class="btn btn-secondary"
data-mdb-container="body"
data-mdb-toggle="popover"
data-mdb-placement="bottom"
data-mdb-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus."
>
Popover on bottom
</button>
<button
type="button"
class="btn btn-secondary"
data-mdb-container="body"
data-mdb-toggle="popover"
data-mdb-placement="left"
data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
>
Popover on left
</button>
下次点击时关闭
使用 focus
触发器可消除用户下次点击其他对象时弹出的窗口
元素比切换元素。
下次单击时需要关闭的特定标记:
为了确保正确的跨浏览器和跨平台行为,您必须使用
<a>
标签, not 的<button>
标签,您也
必须包含一个
标签索引
属性。
<a
tabindex="0"
class="btn btn-lg btn-danger"
role="button"
data-mdb-toggle="popover"
data-mdb-trigger="focus"
title="Dismissible popover"
data-mdb-content="And here's some amazing content. It's very engaging. Right?"
>Dismissible popover</a
>
禁用元素
具有 disabled
属性的元素不是交互式的,这意味着用户不能
悬停鼠标或单击它们以触发弹出窗口(或工具提示)。解决方法是,您需要触发
包装器的弹出窗口 <div>
要么 <span>
并覆盖
禁用元素上的 pointer-events
。
对于禁用的弹出触发器,您可能还希望data-mdb-trigger="hover"
所以
该弹出窗口是对用户的即时视觉反馈,因为他们可能不会期望
点击在一个禁用的元素上。
<span
class="d-inline-block"
data-mdb-toggle="popover"
data-mdb-content="Disabled popover"
>
<button class="btn btn-primary" style="pointer-events: none" type="button" disabled>
Disabled button
</button>
</span>
约夏克布丁 - API
用法
通过JavaScript:
const exampleEl = document.getElementById('example')
const popover = new mdb.Popover(exampleEl, options)
Making popovers work for keyboard and assistive technology users
要允许键盘用户激活您的弹出框,您应该只将其添加到HTML元素中
传统上可以以键盘为焦点且具有交互性(例如链接或表单控件)。
尽管任意HTML元素(例如
<span>
s)可以通过添加
tabindex="0"
属性,这将添加潜在的令人讨厌和混乱的标签
停止针对键盘用户的非交互式元素和大多数辅助技术
目前在这种情况下不宣布弹出窗口的内容。此外,不要依赖
仅在 hover
上触发弹出式窗口,因为这会使它们
无法触发键盘用户。
虽然您可以使用
html
选项,我们强烈建议您避免添加过多的
内容。弹出式窗口目前的工作方式是,一旦显示,其内容将与
具有 aria- describeby
属性的触发元素。结果,整个
弹出窗口的内容将在很长一段时间内向辅助技术用户宣布,
流不间断。
此外,虽然还可以包括交互式控件(例如表单元素)
或链接)(通过将这些元素添加到
allowList
或允许的属性和标签),请注意,当前弹出框
不管理键盘焦点顺序。当键盘用户打开弹出窗口时,焦点仍然停留在
触发元素,并且弹出窗口通常不会立即跟随触发
文件的结构,无法保证前进/按下
TAB 会将键盘用户移至弹出窗口本身。简而言之,只需添加
弹出式窗口的交互式控件可能会使这些控件无法访问/无法使用
键盘用户和辅助技术用户,或者至少造成不合逻辑的情况
总体焦点顺序。在这种情况下,请考虑使用模式对话框。
选件
可以通过数据属性或JavaScript传递选项。对于数据属性,请附加
选项名称为 data-mdb-
,如 data-mdb-animation=""
.
注意:出于安全原因,消毒
,
无法使用数据提供 sanitizeFn
和 allowList
选项
属性。
Name | Type | Default | Description |
---|---|---|---|
animation |
boolean | true |
Apply a CSS fade transition to the popover |
container |
string | element | false | false |
Appends the popover to a specific element. Example:
|
content |
string | element | function | '' |
Default content value if
If a function is given, it will be called with its
|
customClass |
string | function | '' |
Add classes to the tooltip when it is shown. Note that these classes will be added in
addition to any classes specified in the template. To add multiple classes, separate
them with spaces: You can also pass a function that should return a single string containing additional class names. |
delay |
number | object | 0 |
Delay showing and hiding the popover (ms) - does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is: |
html |
boolean | false |
Insert HTML into the popover. If false, innerText property will be used to
insert content into the DOM. Use text if you're worried about XSS attacks.
|
placement |
string | function | 'right' |
How to position the popover - auto | top | bottom | left | right.
When a function is used to determine the placement, it is called with the popover DOM
node as its first argument and the triggering element DOM node as its second. The
|
selector |
string | false | false |
If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example. |
template |
string |
'<div class="popover" role="tooltip"><div
class="popover-arrow"></div><h3
class="popover-header"></h3><div
class="popover-body"></div></div>'
|
Base HTML to use when creating the popover.
The popover's
The popover's
The outermost wrapper element should have the
|
title |
string | element | function | '' |
Default title value if
If a function is given, it will be called with its
|
trigger |
string | 'click' |
How popover is triggered - click | hover | focus | manual. You may pass multiple
triggers; separate them with a space. manual cannot be combined with any
other trigger.
|
offset |
number | string | 0 | Offset of the popover relative to its target. For more information refer to Popper's offset docs. |
fallbackPlacement |
string | array | 'flip' | Allow to specify which position Popper will use on fallback. For more information refer to Popper's behavior docs |
boundary |
string | element | 'scrollParent' |
Overflow constraint boundary of the popover. Accepts the values of
'viewport' , 'window' , 'scrollParent' , or an
HTMLElement reference (JavaScript only). For more information refer to Popper's
preventOverflow docs.
|
sanitize |
boolean | true |
Enable or disable the sanitization. If activated 'template' ,
'content' and 'title' options will be sanitized.
|
allowList |
object | Default value |
Object which contains allowed attributes and tags |
sanitizeFn |
null | function | null |
Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
popperConfig |
null | object | null |
To change Bootstrap's default Popper config, see Popper's configuration |
Data attributes for individual popovers:
Options for individual popovers can alternatively be specified through the use of data
attributes, as explained above.
方法
异步方法和转换:
所有API方法都是异步并开始过渡。
转换开始后,他们会立即返回给呼叫者,但
在结束之前。另外,在
转换组件将被忽略。
Method | Description |
---|---|
show |
Reveals an element’s popover.
Returns to the caller before the popover has actually been shown
(i.e. before the shown.mdb.popover event occurs). This is considered a
“manual” triggering of the popover. Popovers whose title and content are both
zero-length are never displayed.
|
hide |
Hides an element’s popover.
Returns to the caller before the popover has actually been hidden
(i.e. before the hidden.mdb.popover event occurs). This is considered a
“manual” triggering of the popover.
|
toggle |
Toggles an element’s popover.
Returns to the caller before the popover has actually been shown or hidden
(i.e. before the shown.mdb.popover or hidden.mdb.popover event
occurs). This is considered a “manual” triggering of the popover.
|
dispose |
Hides and destroys an element’s popover. Popovers that use delegation (which are created
using
the selector option) cannot be
individually destroyed on descendant trigger elements.
|
enable |
Gives an element’s popover the ability to be shown. Popovers are enabled by default. |
disable |
Removes the ability for an element’s popover to be shown. The popover will only be able to be shown if it is re-enabled. |
toggleEnabled |
Toggles the ability for an element’s popover to be shown or hidden. |
update |
Updates the position of an element’s popover. |
getInstance |
Static method which allows you to get the popover instance associated with a DOM element. |
const exampleTriggerEl = document.getElementById('example')
const popover = new mdb.Popover(exampleTriggerEl)
popover.show()
大事记
Event type | Description |
---|---|
show.mdb.popover |
This event fires immediately when the show instance method is called.
|
shown.mdb.popover |
This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). |
hide.mdb.popover |
This event is fired immediately when the hide instance method has been
called.
|
hidden.mdb.popover |
This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). |
inserted.mdb.popover |
This event is fired after the show.mdb.popover event when the popover
template has been added to the DOM.
|
const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.mdb.popover', () => {
// do something...
})
进口
MDB UI KIT也可以与模块捆绑器一起使用。使用以下代码导入此组件:
import { Popover } from 'mdb-ui-kit';