Primer CSS Toasts 变体

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

Primer CSS提供 Toast，用于向用户显示实时和时间敏感的响应。在本文中，我们将讨论 Toast 的变体。它用于使用错误、警告和成功修饰符来传达不同的状态。

Primer CSS Toasts Variations 类：

• Toast：这个类是 Primer CSS 的 toast 元素的主要容器。
• Toast-icon：该类用于定义吐司图标。
• Toast-success：这个类用于创建绿色的吐司图标。
• Toast-content：此类包含 toast 消息以及链接。
• Toast-error：此类包含 toast 错误消息。

句法：

    
          
    
            
    
        ...
    

示例 1：下面是使用Toast–error类演示如何使用 Primer CSS Toasts 变体的示例。

HTML

  

        
    

  

    
        
GeeksforGeeks
        
Primer CSS Toast Variations
          
        

            
                
            
              
            
                GeeksforGeeks, Computer Science portal.
            
        
    

  

输出：

Primer CSS Toasts 变体

示例 2：下面是使用Toast-warning类演示如何使用 Primer CSS Toasts 变体的示例。

HTML

  

        
    

  

    
        
GeeksforGeeks
        
Primer CSS Toast Variations
          
        

            
                
            
  
            
                GeeksforGeeks, Computer Science portal.
            
        
    

  

输出：

Primer CSS Toasts 变体

参考： https://primer.style/css/components/toasts#variations