coliff/popover-css-inspector

显示 Bootstrap 弹出元素中的 CSS 属性。非常适合设计系统和风格指南

维护者

详细信息

github.com/coliff/popover-css-inspector

主页

源代码

问题

文档

资助包维护！
Paypal

安装: 0

依赖项: 0

建议者: 0

安全性: 0

星标: 6

关注者: 2

分支: 0

开放问题: 2

语言：JavaScript

dev-main 2024-10-01 10:47 UTC

MIT 5f12d1cbd57635842db406303ff0e2cdb7452c0a

cssbootstrapstyleinspector

This package is auto-updated.

Last update: 2024-10-01 10:48:06 UTC

README

LICENSE GitHub Super-Linter code style: prettier npm Version npm Downloads

Popover CSS Inspector

显示 Bootstrap 弹出元素中的 CSS 属性。非常适合设计系统和风格指南。

  • 易于使用 - 只需将 data-bs-custom-class="popover-css-inspector" 添加到元素（需要 Bootstrap 5 JavaScript）
  • 可自定义 - 使用您自己的 CSS 和 Bootstrap 的 Popover 选项
  • 弹出框在文档中保持静态，在滚动时不会重新定位
  • 支持 Bootstrap 5 暗黑模式
  • 隐藏 CSS 元素选项 - 例如，只需添加 data-css-inspector-hide="font-size" 以防止字体大小属性显示
  • 一些 CSS 属性默认隐藏，但可以启用 - 例如，只需添加 data-css-inspector-show="border" 以显示边框属性
  • 如果通过 data-bs-theme 属性更改主题，则重新加载 CSS 属性 - 完美地检查亮色和暗色模式之间的颜色值变化
  • 支持使用 data-bs-title 属性的可选标题。
  • 仅 3 KB 最小化和压缩后的大小！

Popover CSS Inspector

快速开始

提供多种快速开始选项

  • 下载最新版本
  • 克隆仓库 git clone https://github.com/coliff/popover-css-inspector.git
  • 使用 npm 安装 npm install popover-css-inspector
  • 使用 yarn 安装 yarn add popover-css-inspector
  • 使用 Composer 安装 composer require coliff/popover-css-inspector

使用方法

  1. 将 data-bs-custom-class="popover-css-inspector" 添加到您想要显示弹出框的元素上。例如，一个按钮。
<button
  type="button"
  class="btn btn-primary"
  data-bs-toggle="popover"
  data-bs-custom-class="popover-css-inspector">
  Button
</button>
  1. 加载脚本（推荐使用 async 或 defer）
<script src="/js/popover-css-inspector.min.js" defer></script>

  1. 一些 CSS 属性是可选的。例如，要显示边框属性，请将 data-css-inspector-show="border" 添加到元素中。

  2. 所有 CSS 属性都可以隐藏。例如，要隐藏字体大小属性，请将 data-css-inspector-hide="font-size" 添加到元素中。

  3. 可选。考虑将 pe-none 类添加到元素中，以防止弹出框被用户触发。

工作原理

脚本将查找任何具有 data-bs-custom-class="css-inspector" 属性的元素，并向其添加一个点击事件监听器。当点击时，它将获取元素的 CSS 属性并在 Bootstrap 弹出框中显示它们。

演示

演示页面

CSS 属性列表

除非其值为 null 或空值，否则默认显示这些 CSS 属性。如果需要，您还可以使用 data-attribute 进行选择。

注意：如果值为 none 或 null，则大多数属性都是隐藏的。

可选CSS属性列表

浏览器支持

与Bootstrap支持的浏览器兼容良好。Bootstrap支持的所有浏览器。

致谢

由Christian Oliff创建，GitHub Copilot协助。