📜  Primer CSS Toasts 默认

📅  最后修改于: 2022-05-13 01:56:39.351000             🧑  作者: Mango

Primer CSS Toasts 默认

Primer CSS是一个 CSS 框架,旨在使用预制设计系统引导您的 Web 项目,其中包括间距、排版、颜色以及许多组件和实用程序。它遵循 BEM(块、元素和修饰符)方法来命名 CSS 类。

Primer CSS Toasts用于向用户显示实时反馈。要创建默认 toast,使用Toast类。默认吐司包括一个图标和一条消息。 Toast 消息也可以被格式化。建议使用信息图标并将吐司信息保持在 140 个字符以内。

Primer CSS Toasts 默认类:

  • Toast:这个类是 Primer CSS toast 元素的主要容器。
  • Toast-icon:这个类包装了 toast 图标。
  • Toast-content:此类包含 toast 消息。

句法:

...

示例 1:此示例显示使用Toast类创建默认 toast。

HTML


  

    

  

    
        GeeksforGeeks
        Primer CSS - Default Toast
    
  
    
  
        
        
            
  
                
                
                    
                
            
  
            
                GeeksforGeeks is Awesome.
            
        
    

  


HTML


  

    

  

    
        
            GeeksforGeeks
        
          
        Primer CSS - Default Toast with Formatted message
    
  
    
  
        
        
            
  
                
                
                    
                
            
  
            
                GeeksforGeeks is Awesome.
            
        
    

  


输出:

示例 2:此示例显示带有格式化 toast 消息的默认文本。

HTML



  

    

  

    
        
            GeeksforGeeks
        
          
        Primer CSS - Default Toast with Formatted message
    
  
    
  
        
        
            
  
                
                
                    
                
            
  
            
                GeeksforGeeks is Awesome.
            
        
    

  

输出:

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