带 Dismiss 的入门 CSS 警报

Primer CSS是一个免费的开源 CSS 框架，它建立在创建基本样式元素（如间距、排版和颜色）基础的系统之上。这种系统化的方法确保我们的模式是稳定的并且可以相互操作。它的 CSS 方法受到面向对象的 CSS 原则、函数式 CSS 和 BEM 架构的影响。它具有高度可重用性和灵活性。它是使用 GitHub 的设计系统创建的。

在本文中，我们将了解有关 Dismiss 的 Primer CSS Alerts。

Primer CSS Alerts with Dismiss 在 flash 消息的右侧添加了一个关闭图标，允许用户关闭 flash 消息

flash-color-class：这些类用于为警报提供不同的颜色，例如：

• flash-warn：该类用于将颜色更改为黄色。
• flash：该类用于将颜色更改为蓝色。
• flash-error：该类用于将颜色更改为红色。
• flash-success：该类用于将颜色更改为绿色。

句法：

        {Icon}
    

图标：为了提供关闭图标，我们可以使用任何 SVG、CSS 图标等。

让我们通过示例了解更多信息

示例 1：在此示例中，我们将使用 SVG 图标来创建警报。然后这些 SVG 图标写在 标签下。单击此按钮后，我们将触发关闭警报的函数：

HTML

  

    
    

  

    

        GeeksforGeeks
    
      
    
 Alert With Dismiss
      
    

        Hi Geeks ! I am an Informative Alert
        

                                                      

       

        Hi Geeks ! I am an Warning Alert