Amaze UI

Popover


气泡式弹出层组件,本组件无需创建 HTML 结构。

基础用法

Copy
<button class="am-btn am-btn-primary" data-am-popover="{content: '文字内容'}">点击触发弹窗</button>

设置 content 属性来进行弹出的内容修改。

在线运行

弹出方向

Copy
<button class="am-btn am-btn-primary" data-am-popover="{position: 'left', content: '文字内容'}">向左弹出</button>
<button class="am-btn am-btn-primary" data-am-popover="{position: 'bottom', content: '文字内容'}">向下弹出</button>
<button class="am-btn am-btn-primary" data-am-popover="{position: 'right', content: '文字内容'}">向右弹出</button>

设置 position 属性来进行对应的弹出位置调整。

  • left 左侧弹出。
  • bottom 下方弹出。
  • right 右侧弹出。

在线运行

尺寸用法

Popover 提供了不同的尺寸。

Copy
<button
  class="am-btn am-btn-primary"
  data-am-popover="{theme: 'primary sm', content: '点击显示的 sm 大小'}">
  sm 大小
</button>
<button
  class="am-btn am-btn-primary"
  data-am-popover="{theme: 'primary', content: '点击显示的 默认 大小'}">
  默认 大小
</button>
<button
  class="am-btn am-btn-primary"
  data-am-popover="{theme: 'primary lg', content: '点击显示的 lg 大小'}">
  lg 大小
</button>

通过 theme 选项可以设置 Popover 的尺寸。

  • sm
  • lg

在线运行

主题用法

Popover 提供了不同的主题颜色。

Copy
<button
  class="am-btn am-btn-primary"
  data-am-popover="{theme: 'primary', content: '点击显示的 Primary'}">
  Primary
</button>

<button
  class="am-btn am-btn-primary"
  data-am-popover="{theme: 'secondary', content: '点击显示的 secondary'}">
  secondary
</button>

<button
  class="am-btn am-btn-primary"
  data-am-popover="{theme: 'warning', content: '点击显示的 warning'}">
  Warning
</button>

<button
  class="am-btn am-btn-primary"
  data-am-popover="{theme: 'success', content: '点击显示的 success'}">
  success
</button>

<button
  class="am-btn am-btn-primary"
  data-am-popover="{theme: 'danger', content: '点击显示的 danger'}">
  danger
</button>

通过 theme 选项可以设置 Popover 的颜色。

  • primary
  • secondary
  • warning
  • success
  • danger

在线运行

触发方式

Copy
<button class="am-btn am-btn-success" data-am-popover="{content: ' Hover/Focus 显示的 Popover', trigger: 'hover focus'}">Hover/Focus 显示 Popover</button>

设置 trigger 属性来改变触发方式,默认为 click

  • click
  • hover
  • focus

在线运行

使用方式

通过 Data API

在元素上添加 data-am-popover 属性并设置相关参数。上面的演示都是通过 Data API 实现的。

<button data-am-popover="{content: '设置的文字内容', trigger: 'hover'}">Popover
</button>

通过 JS

Copy
<button class="am-btn am-btn-danger" id="my-popover">Popover via JS</button>
<script>
$(function() {
  $('#my-popover').popover({
    content: 'Popover via JavaScript'
  })
})
</script>

通过 $().popover(options) 方式添加元素 Popover 交互。

在线运行

参数说明

参数类型描述
contentstringPopover 显示的内容
triggerstring交互方式,click / hover / focus,默认为 click
themestringPopover 样式,颜色:primary / secondary / success / warning / danger;尺寸: sm / lg。同时设置颜色和尺寸使用一个半角空格 分隔。
positionstringPopover 的位置,top / bottom / left / right,默认为 top

方法

参数描述
.popover(options)激活元素的 Popover 交互功能,options 为对象
.popover('toggle')交替 Popover 状态
.popover('open')显示 Popover
.popover('close')关闭 Popover
.popover('setContent', content)设置弹出层内容

自定义事件

事件定义在触发 Popover 交互的元素上。

事件名称描述
open.popover.amuiopen 方法被调用是立即触发
close.popover.amuiclose 方法被调用是立即触发