Primer CSS Popover 底部

简介

Primer CSS popover 底部是一个基于 CSS 和 JavaScript 的弹出提示框，它可以方便地在您的网站或应用程序中添加一个简单但有用的功能。

这个样式库由 Github 开发并维护，其中的详细文档和示例可以在官网上找到。Popovers 是其中一个很受欢迎的组件，它可以在用户与页面元素交互时，轻松地向他们提供必要的信息或者操作选项。

特性

• 轻巧、易用。
• 易于自定义和扩展。
• 具有良好的可访问性和响应性。
• 通过面板将内容呈现在弹出框中，并可根据需要设置遮罩层。
• 具有四个方向的布局：顶部，底部，右侧，左侧。

安装

在您的项目中使用 Primer CSS popover 底部，只需要包含以下样式表和脚本文件：

<!-- 弹出框基本样式 -->
<link rel="stylesheet" href="https://primer.github.io/css/components/popover.css">

<!-- 弹出框底部布局 -->
<link rel="stylesheet" href="https://primer.github.io/css/components/popover-container-bottom.css">

<!-- 引入弹出框脚本 -->
<script src="https://primer.github.io/primer/components/popover.js"></script>

使用

在页面中添加一个触发弹出框的元素，例如一个按钮或者图标。给该元素添加 data-popover 属性，并设置其值为您要弹出的内容的选择器。然后，使用 JavaScript 代码初始化并配置弹出框即可。

<button class="btn" data-popover="#my-popover">Open Popover</button>

<div id="my-popover" class="Popover" role="tooltip" aria-hidden="true">
  <div class="Popover-message Popover-message--bottom">
    <h3 class="Popover-title">My Popover Title</h3>
    <div class="Popover-body">This is some popover content.</div>
  </div>
</div>

<script>
  const popover = new Popover(document.querySelector('[data-popover="#my-popover"]'), {
    placement: 'bottom',
    contentEl: document.querySelector('#my-popover'),
    skid: 8,
  })
</script>

自定义

您可以使用 CSS 样式来自定义该弹出框的样式，例如背景色，边框颜色以及字体颜色。您也可以在 JavaScript 初始化代码中传入 key: value 对象，以自定义更多的选项和参数。

.Popover {
  background-color: #333;
  border: solid 1px #222;
  color: #fff;
  font-size: 14px;
}

const popover = new Popover(document.querySelector('[data-popover="#my-popover"]'), {
  placement: 'bottom',
  contentEl: document.querySelector('#my-popover'),
  skid: 8,
  hideOnClick: true,
})

参考链接

• 官方文档
• 源代码