Primer CSS Popover 左下角介绍

简介

Primer CSS 是 GitHub 官方的 CSS 样式库，使用了 CSS 和 JavaScript 技术实现组件式的 UI 开发。其中，Popover 组件可以实现弹出式的提示信息显示。本文将重点介绍如何使用 Primer CSS 实现一个左下角的 Popover。

实现方法

HTML 结构

Popover 组件需要定义一个触发器（trigger）和一个弹出窗体（popover），因此需要使用以下 HTML 结构：

<button class="btn" aria-label="more options">点击我</button>

<div class="Popover position-relative">
  <div class="Popover-message Popover-message--bottom-left d-block p-4">
    这是一个左下角的 Popover。
  </div>
</div>

其中，第一个按钮是触发器，.Popover 和 .Popover-message 则是 Popover 的标准类名和修饰类名，.Popover-message--bottom-left 表示 Popover 窗体在触发器下面靠左显示，.d-block 和 .p-4 则是调整样式的类名。

CSS 样式

通过 CSS 样式定义 Popover 的样式：

.Popover-message {
  z-index: 99;
  background: #f6f8fa;
  border: 1px solid #d1d5da;
  border-radius: 3px;
  box-shadow: 0 3px 12px rgba(27,31,35,0.15);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  min-width: 200px;
}

这里的 .Popover-message 是 Popover 窗体的样式，设置了背景颜色、文字颜色、边框、圆角、阴影、字体大小、行高等样式。

JavaScript

使用 JavaScript 实现弹出和隐藏 Popover：

var btn = document.querySelector('.btn');
var popover = document.querySelector('.Popover');

btn.addEventListener('click', function() {
  popover.classList.toggle('is-active');
});

这里使用了两个关键的类名，分别是 .is-active 和 .position-relative，前者表示 Popover 窗体是否可见，后者则是 Popover 窗体相对于触发器所在的父元素定位。

效果预览

实现效果如下：

结论

通过本文可以学习到如何使用 Primer CSS 实现一个左下角的 Popover，掌握了 Popover 的 HTML 结构、CSS 样式和 JavaScript 脚本，还可以进一步拓展和优化实现的效果。