Primer CSS Toasts 变体(1)

📌 相关文章

📜 Primer CSS Toasts 变体(1)

📅 最后修改于: 2023-12-03 15:33:47.591000 🧑 作者: Mango

Primer CSS Toasts 变体

Primer CSS是由Github开源的一套CSS框架，主要为开发者提供快速构建 GitHub 风格 Web 页面的解决方案。其中，Primer CSS Toasts 提供了一种轻量级的提示框方案，可以在需要的时候弹出提示框进行提示信息的展示。

特点

Primer CSS Toasts 变体具有以下特点：

简单易用：无需复杂的JS代码，只需引入CSS文件即可创建提示框。
丰富样式：支持多种样式，包括success、warning、error和notice等，用户可根据实际需求进行选择。
可定制化：支持用户自定义样式，包括提示框位置、背景颜色、字体颜色等等。
互动性：支持用户交互，包括点击提示框关闭提示框、点击链接跳转等。

使用方法

引入CSS文件

在HTML页面中添加以下代码：

<link rel="stylesheet" href="https://unpkg.com/@primer/css/dist/toasts/index.css">

创建提示框

在需要弹出提示框的位置添加以下代码：

<div class="toasts">
  <div class="toasts-item toasts-item-primary" role="alert">
    <div class="toasts-item-icon">
      <svg class="octicon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 12.42 3.58 16 8 16C12.42 16 16 12.42 16 8C16 3.58 12.42 0 8 0ZM8 14.6667C4.19334 14.6667 1.33334 11.8067 1.33334 8C1.33334 4.19334 4.19334 1.33334 8 1.33334C11.8067 1.33334 14.6667 4.19334 14.6667 8C14.6667 11.8067 11.8067 14.6667 8 14.6667ZM8.66667 4.66667H7.33334V8.66667L10 10.6667L10.6667 9.96667L8.66667 8.66667V4.66667Z" fill="#24292E"/></svg>
    </div>
    <div class="toasts-item-body">
      Toaster
    </div>
    <button type="button" class="toasts-close" aria-label="Dismiss">
      <svg class="octicon" width="12" height="12" viewBox="0 0 16 16" fill="#24292E" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.17157 8L12.8571 4.31346C13.0523 4.1182 13.0523 3.80107 12.8571 3.60582L11.3941 2.14286C11.1989 1.94761 10.8818 1.94761 10.6866 2.14286L7.99999 4.82941L5.31345 2.14286C5.11819 1.94761 4.80106 1.94761 4.6058 2.14286L3.14286 3.60582C2.94761 3.80107 2.94761 4.1182 3.14286 4.31345L5.82941 8L3.14286 11.6865C2.94761 11.8818 2.94761 12.199 3.14286 12.3943L4.6058 13.8571C4.80106 14.0524 5.11819 14.0524 5.31345 13.8571L7.99999 11.1706L10.6866 13.8571C10.8818 14.0524 11.1989 14.0524 11.3941 13.8571L12.8571 12.3943C13.0523 12.199 13.0523 11.8818 12.8571 11.6865L10.1716 8H9.17157Z" fill="#24292E"/></svg>
    </button>
  </div>
</div>

更改样式

可以通过更改CSS样式来定制自己的提示框外观，以下是一些常用的样式：

/* 提示框背景颜色 */
.toasts-item-primary {
  background-color: #6cb6ff;
}
.toasts-item-warning {
  background-color: #ffaf00;
}
.toasts-item-error {
  background-color: #d73a49;
}
.toasts-item-notice {
  background-color: #f5f5f5;
  color: #24292e;
}

/* 提示框位置 */
.toasts-top-right {
  top: 16px;
  right: 16px;
}
.toasts-top-left {
  top: 16px;
  left: 16px;
}
.toasts-bottom-right {
  bottom: 16px;
  right: 16px;
}
.toasts-bottom-left {
  bottom: 16px;
  left: 16px;
}

/* 字体颜色 */
.toasts-item-primary .toasts-item-body {
  color: #fff;
}
.toasts-item-warning .toasts-item-body {
  color: #fff;
}
.toasts-item-error .toasts-item-body {
  color: #fff;
}
.toasts-item-notice .toasts-item-body {
  color: #24292e;
}

/* 字体大小 */
.toasts-item-body {
  font-size: 14px;
}

/* 关闭按钮颜色 */
.toasts-close {
  color: #fff;
}

示例

以下是一个完整的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Primer CSS Toasts 变体</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://unpkg.com/@primer/css/dist/toasts/index.css" />
    <style>
      .toasts-item-primary {
        background-color: #6cb6ff; /* 蓝色 */
      }
      .toasts-item-warning {
        background-color: #ffaf00; /* 橙色 */
      }
      .toasts-item-error {
        background-color: #d73a49; /* 红色 */
      }
      .toasts-item-notice {
        background-color: #f5f5f5; /* 灰色 */
        color: #24292e;
      }
      .toasts-top-right {
        top: 16px;
        right: 16px;
      }
      .toasts-top-left {
        top: 16px;
        left: 16px;
      }
      .toasts-bottom-right {
        bottom: 16px;
        right: 16px;
      }
      .toasts-bottom-left {
        bottom: 16px;
        left: 16px;
      }
      .toasts-item-primary .toasts-item-body {
        color: #fff;
      }
      .toasts-item-warning .toasts-item-body {
        color: #fff;
      }
      .toasts-item-error .toasts-item-body {
        color: #fff;
      }
      .toasts-item-notice .toasts-item-body {
        color: #24292e;
      }
      .toasts-item-body {
        font-size: 14px;
      }
      .toasts-close {
        color: #fff;
      }
    </style>
  </head>
  <body>
    <button onclick="showToast()">Show Toast</button>

    <script>
      function showToast() {
        let toastContainer = document.createElement("div");
        toastContainer.classList.add("toasts-top-right");

        let toast = document.createElement("div");
        toast.classList.add("toasts-item", "toasts-item-primary");
        toast.setAttribute("role", "alert");

        let toastIcon = document.createElement("div");
        toastIcon.classList.add("toasts-item-icon");

        let toastSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        toastSvg.setAttribute("width", "16");
        toastSvg.setAttribute("height", "16");
        toastSvg.setAttribute("viewBox", "0 0 16 16");
        toastSvg.setAttribute("fill", "none");

        let toastPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
        toastPath.setAttribute("d", "M8 0C3.58 0 0 3.58 0 8C0 12.42 3.58 16 8 16C12.42 16 16 12.42 16 8C16 3.58 12.42 0 8 0ZM8 14.6667C4.19334 14.6667 1.33334 11.8067 1.33334 8C1.33334 4.19334 4.19334 1.33334 8 1.33334C11.8067 1.33334 14.6667 4.19334 14.6667 8C14.6667 11.8067 11.8067 14.6667 8 14.6667ZM8.66667 4.66667H7.33334V8.66667L10 10.6667L10.6667 9.96667L8.66667 8.66667V4.66667Z");
        toastPath.setAttribute("fill", "#24292E");

        let toastBody = document.createElement("div");
        toastBody.classList.add("toasts-item-body");
        toastBody.innerText = "This is a toast";

        let toastClose = document.createElement("button");
        toastClose.classList.add("toasts-close");
        toastClose.setAttribute("type", "button");
        toastClose.setAttribute("aria-label", "Dismiss");

        let toastCloseSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        toastCloseSvg.setAttribute("width", "12");
        toastCloseSvg.setAttribute("height", "12");
        toastCloseSvg.setAttribute("viewBox", "0 0 16 16");
        toastCloseSvg.setAttribute("fill", "#24292E");

        let toastClosePath = document.createElementNS("http://www.w3.org/2000/svg", "path");
        toastClosePath.setAttribute("fill-rule", "evenodd");
        toastClosePath.setAttribute("clip-rule", "evenodd");
        toastClosePath.setAttribute("d", "M9.17157 8L12.8571 4.31346C13.0523 4.1182 13.0523 3.80107 12.8571 3.60582L11.3941 2.14286C11.1989 1.94761 10.8818 1.94761 10.6866 2.14286L7.99999 4.82941L5.31345 2.14286C5.11819 1.94761 4.80106 1.94761 4.6058 2.14286L3.14286 3.60582C2.94761 3.80107 2.94761 4.1182 3.14286 4.31345L5.82941 8L3.14286 11.6865C2.94761 11.8818 2.94761 12.199 3.14286 12.3943L4.6058 13.8571C4.80106 14.0524 5.11819 14.0524 5.31345 13.8571L7.99999 11.1706L10.6866 13.8571C10.8818 14.0524 11.1989 14.0524 11.3941 13.8571L12.8571 12.3943C13.0523 12.199 13.0523 11.8818 12.8571 11.6865L10.1716 8H9.17157Z");

        toastCloseSvg.appendChild(toastClosePath);
        toastClose.appendChild(toastCloseSvg);
        toastSvg.appendChild(toastPath);
        toastIcon.appendChild(toastSvg);
        toast.appendChild(toastIcon);
        toast.appendChild(toastBody);
        toast.appendChild(toastClose);
        toastContainer.appendChild(toast);
        document.body.appendChild(toastContainer);

        toastClose.addEventListener("click", function(e) {
          e.preventDefault();
          toastContainer.remove();
        });
      }
    </script>
  </body>
</html>

总结

Primer CSS Toasts是一个轻量级的提示框方案，具有简单易用、丰富样式、可定制化和互动性等特点，可以广泛应用于Web页面的提示信息展示中。在使用过程中，用户可以通过引入CSS文件、创建提示框和更改样式等步骤实现对提示框的定制和使用。