Easy UI

Appearance

Notification 通知 ​

用于系统级通知或轻量级提醒，常用于页面右上角或指定位置短暂提示。

引入 ​

html
<script type="module">
  import "./node_modules/easy-component-ui/dist/components/ea-notification.js";
</script>
js
import "easy-component-ui/ea-notification";

自定义样式 ​

移步到 CSS Part。

基础用法 ​

从 placement 指定的位置出现，默认 3 秒后自动消失。

Closes automatically Won't close automatically Module-Instance notify
查看代码
html
<div class="demo">
  <ea-button
    plain
    onclick="
          window.$notify({
            heading: 'Title',
            message: 'This is a message that automatically close',
          })
        "
  >
    Closes automatically
  </ea-button>
  <ea-button
    plain
    onclick="
          window.$notify({
            heading: 'Prompt',
            message: 'This is a message that does not automatically close',
            duration: 0,
          })
        "
  >
    Won't close automatically
  </ea-button>
  <ea-button id="moduleInstanceBtn" plain> Module-Instance notify </ea-button>
</div>
js
const basicExample = {
  moduleInstanceBtn: document.getElementById("moduleInstanceBtn"),

  init() {
    this.moduleInstanceBtn.addEventListener("click", () => {
      EaNotification({
        heading: "Title",
        message: "This is a message that automatically close",
      });
    });
  },
};
basicExample.init();

不同类型 ​

支持 success / warning / info / error / primary 类型，通过 variant 改变样式。

InfoPrimarySuccessWarningError
查看代码
html
<div id="typeSection" class="demo">
  <ea-button
    plain
    onclick="window.$notify.info({ heading: 'Info', message: 'This is a info message.' })"
    >Info</ea-button
  >
  <ea-button
    variant="primary"
    plain
    onclick="window.$notify.primary({ heading: 'Primary', message: 'This is a primary message.' })"
    >Primary</ea-button
  >
  <ea-button
    variant="success"
    plain
    onclick="window.$notify.success({ heading: 'Success', message: 'Congrats, this is a success message.' })"
    >Success</ea-button
  >
  <ea-button
    variant="warning"
    plain
    onclick="window.$notify.warning({ heading: 'Warning', message: 'Warning, this is a warning message.' })"
    >Warning</ea-button
  >
  <ea-button
    variant="danger"
    plain
    onclick="window.$notify.error({ heading: 'Error', message: 'Oops, this is a error message.' })"
    >Error</ea-button
  >
</div>
js
EaNotification.info({ heading: "Info", message: "This is a info message." });
EaNotification.primary({
  heading: "Primary",
  message: "This is a primary message.",
});
EaNotification.success({
  heading: "Success",
  message: "Congrats, this is a success message.",
});
EaNotification.warning({
  heading: "Warning",
  message: "Warning, this is a warning message.",
});
EaNotification.error({
  heading: "Error",
  message: "Oops, this is a error message.",
});

自定义位置 ​

支持 top-right、top-left、bottom-right、bottom-left 四个位置，通过 placement 配置。

Top Right Bottom Right Bottom Left Top Left
查看代码
html
<div id="placementSection" class="demo">
  <ea-button plain> Top Right </ea-button>
  <ea-button plain> Bottom Right </ea-button>
  <ea-button plain> Bottom Left </ea-button>
  <ea-button plain> Top Left </ea-button>
</div>
js
const placementExample = {
  btns: document.querySelectorAll("#placementSection ea-button"),

  init() {
    this.btns.forEach(btn => {
      btn.addEventListener("click", () => {
        EaNotification({
          heading: "Custom Position",
          message: "This is a message",
          placement: btn.textContent.trim().toLowerCase().replace(" ", "-"),
        });
      });
    });
  },
};
placementExample.init();

使用 HTML 片段作为正文内容 ​

将 dangerouslyUseHTMLString 设为 true 可以让 message 被当作 HTML 片段渲染。

Use HTML string
查看代码
html
<div class="demo" id="useHTMLSection">
  <ea-button
    plain
    onclick="
          window.$notify({
            heading: 'HTML String',
            dangerouslyUseHTMLString: true,
            message: '<strong>This is <i>HTML</i> string</strong>',
          })
        "
  >
    Use HTML string
  </ea-button>
</div>
js
EaNotification({
  heading: "HTML String",
  dangerouslyUseHTMLString: true,
  message: "<strong>This is <i>HTML</i> string</strong>",
});

隐藏关闭按钮 ​

通过 showClose 控制是否显示右上角关闭按钮。

Hide close button
查看代码
html
<div class="demo">
  <ea-button
    plain
    onclick="
          window.$notify({
            heading: 'Info',
            message: 'This is a message without close button',
            showClose: false,
          })
        "
  >
    Hide close button
  </ea-button>
</div>

Notification API ​

Notification Attributes ​

参数说明类型可选值默认值
heading标题string—''
message正文内容string—''
variant通知类型enum'success' | 'warning' | 'info' | 'error' | 'primary''info'
icon自定义图标string—''
duration显示时间（毫秒）。设为 0 则不会自动关闭number—3000
placement出现位置enum'top-right' | 'top-left' | 'bottom-right' | 'bottom-left''top-right'
show-close是否显示关闭按钮boolean—false
close-icon关闭按钮图标string—'xmark'
z-indexz-index 值number—0
dangerouslyUseHTMLString是否把 message 当作 HTML 渲染boolean—false
append-to指定挂载容器，支持选择器或 HTMLElementCSSSelector—'body'
onClose关闭回调函数Function——

Notification CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container通知整体根元素
icon类型图标
content内容区域
header标题区域
title标题文本
close-icon关闭按钮
main正文内容区域

Notification Slots ​

名称说明
default默认插槽，用于自定义正文内容

Notification Events ​

事件名说明回调参数(event.detail)
ea-show显示时触发—
ea-shown显示完毕时触发—
ea-hide隐藏时触发—
ea-hidden隐藏完毕时触发—
ea-close关闭时触发—

Notification Methods ​

名称描述类型
close关闭当前的 Notification 实例Function: () => void

Notification CSS Custom Properties ​

属性名说明默认值
--ea-notification-y垂直偏移量0
--ea-notification-show-x水平显示偏移量var(--spacing-lg)
--ea-notification-fade-out-x水平隐藏偏移量100%
--ea-notification-padding内边距var(--spacing-lg)
--ea-notification-border-color边框颜色var(--grey-200)
--ea-notification-border-radius圆角var(--border-radius-sm)
--ea-notification-box-shadow阴影var(--box-shadow-md)
--ea-notification-width宽度300px
--ea-notification-title-font-size标题字号var(--font-size-lg)
--ea-notification-message-font-size正文字号var(--font-size-md)
--ea-notification-title-color标题颜色var(--grey-900)
--ea-notification-message-color正文颜色var(--grey-700)
--ea-notification-icon-size图标尺寸var(--font-size-lg)
--ea-notification-transition过渡动画时长var(--transition-normal)
--ea-notification-gap间距var(--spacing-md)
--ea-notification-close-icon-color关闭图标颜色var(--grey-500)
--ea-notification-z-index层级2000