Primer CSS Popover 右下角

Primer CSS Popover 是一款基于 GitHub's Primer 设计体系的 CSS 库，用于创建弹出菜单、气泡提示等交互组件。其中，Popover 组件可以很容易地在页面中实现鼠标悬停或点击触发的弹出框，并且能够调整弹出框的位置和样式。

本文将主要介绍如何在 Primer CSS 中创建一个右下角的 Popover 组件。

准备工作

在开始之前，需要先引入 Primer CSS 库的相关样式文件。我们可以从官网下载需要的样式文件，或者在项目中使用 NPM 安装并引入。

<!-- 引入 CSS 文件 -->
<link rel="stylesheet" href="path/to/primer.css">
<!-- 或者引入 NPM 模块 -->
import 'primer/css/index.scss';

创建右下角 Popover

创建一个 Popover 组件，需要使用 HTML 结构和相应的 CSS 样式。例如，我们可以这样定义一个基本的 Popover：

<button class="popover-target">点击</button>
<div class="Popover right-bottom">
  <div class="Popover-message">这是一个 Popover</div>
</div>

Popover 的触发器需要使用类名 Popover-target，这里我们使用了一个按钮元素。Popover 的内容需要使用类名 Popover 和相应的位置类名（如 bottom-right）。我们这里使用了类名 right-bottom，代表 Popover 在触发器的右下角出现。

然后，我们需要使用 CSS 样式来定义 Popover 的具体样式，以及它的出现和隐藏动画：

.Popover {
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 100;
  display: none;
}

/* 出现动画 */
.Popover.is-open {
  display: block;
  opacity: 0;
  transform: translate(0, 10px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

/* 隐藏动画 */
.Popover.is-closing {
  opacity: 0;
  transform: translate(0, 5px);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}
.Popover.is-closed {
  display: none;
}

/* Popover 位置 */
.Popover.right-bottom {
  margin-top: 6px;
  margin-left: 6px;
}
.Popover.right-bottom:before {
  top: 0;
  right: 100%;
  margin-right: -10px;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #333;
}
.Popover.right-bottom .Popover-message {
  padding: 6px 12px;
  background: #333;
  color: #fff;
  border-radius: 3px;
}

在上面的 CSS 中，我们定义了 Popover 的样式和出现、隐藏动画。对于位置，我们使用了 margin 属性来调整 Popover 的偏移量，并且通过设置 :before 伪元素来绘制 Popover 的三角形箭头。最后，我们在 Popover 内部使用 .Popover-message 类来定义 Popover 的内容样式。

触发 Popover

定义了 Popover 的 HTML 结构和 CSS 样式之后，我们需要使用 JavaScript 来绑定 Popover 的触发器，并且在触发器上绑定相应的事件。例如，我们可以这样实现在按钮上绑定鼠标悬停事件：

const popoverTarget = document.querySelector('.popover-target');
popoverTarget.addEventListener('mouseover', () => {
  const popover = document.querySelector('.Popover');
  popover.classList.add('is-open');
});

在上面的代码中，我们使用 querySelector 方法来选择触发器和 Popover 元素，然后在鼠标悬停事件时给 Popover 添加 is-open 类来触发弹出动画。类似地，我们也可以在触发器上绑定点击事件来实现点击触发弹出框的效果。

总结

使用 Primer CSS Popover 右下角组件，我们可以很方便地实现鼠标悬停或点击触发的弹出框。通过采用合适的 HTML 结构和 CSS 样式定义 Popover，以及使用 JavaScript 实现 Popover 的触发逻辑，我们可以运用 Popover 在用户界面中实现比较复杂的交互效果。