通知

通知块加粗，提醒用户某些内容

通知是一个简单的彩色块，旨在引起用户对某些内容的注意。因此，它可以用作视口角上的固定通知。这就是它支持使用 delete 元素的原因。

示例

Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML

<div class="notification">
  <button class="delete"></button>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
  <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
  nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam,
  et dictum <a>felis venenatis</a> efficitur.
</div>

颜色 #

通知元素在 $colors Sass 映射定义的所有不同颜色中均可用。

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML

<div class="notification is-link">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML

<div class="notification is-primary">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML

<div class="notification is-info">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML

<div class="notification is-success">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML

<div class="notification is-warning">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML

<div class="notification is-danger">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

浅色 #

每种颜色还有其浅色版本。只需附加 is-light 修饰符即可获得通知的浅色版本。

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML

<div class="notification is-link is-light">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML

<div class="notification is-primary is-light">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML

<div class="notification is-info is-light">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML

<div class="notification is-success is-light">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML

<div class="notification is-warning is-light">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

示例

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

HTML

<div class="notification is-danger is-light">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

JavaScript 示例 #

Bulma 包不带任何 JavaScript。不过，这是一个实现示例，它在纯 JavaScript 中为页面上的任何 Bulma delete 元素设置 click 处理程序。

<div class="notification">
  <button class="delete"></button>
  Lorem ipsum
</div>

document.addEventListener('DOMContentLoaded', () => {
  (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
    const $notification = $delete.parentNode;

    $delete.addEventListener('click', () => {
      $notification.parentNode.removeChild($notification);
    });
  });
});

Sass 和 CSS 变量 #

Sass 变量

CSS 变量

值

$notification-code-background-color

var(--bulma-notification-code-background-color)

var(--bulma-scheme-main)

$notification-radius

var(--bulma-notification-radius)

var(--bulma-radius)

$notification-padding

var(--bulma-notification-padding)

1.375em 1.5em

如何支持 Bulma

#native_company# #native_desc#