带链接的入门 CSS Toast

Primer CSS Toast 元素用于向用户显示重要消息以增强用户体验。

在本文中，我们将讨论带有 Link 的 Primer CSS Toast。通过在 toast 中包含一个链接，我们可以允许用户采取必要的措施来响应 toast 消息。为了在 toast 消息中包含一个链接，我们将操作文本包装在 元素中。

带链接类的入门 CSS Toast：

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

句法：

....Action....

示例 1：在此示例中，我们将在 toast 内容中包含一个操作。

HTML

  

    
    
    
    
    

  

    

        
GeeksforGeeks
        
Primer CSS - Toast with only Action
    
  
    

        
        

            
                
            
  
            
            
                
                    GeeksforGeeks Home
                
            
        
    

  

输出：

示例 2：在此示例中，我们将在 toast 消息中包含一个操作。

HTML

  

    
    
    
    
    

  

    

        
GeeksforGeeks
        
Primer CSS - Toast with Action with message
    
  
    

        
        

            
                
            
            
            Click here to go to
                
                    GeeksforGeeks Home
                
            
        
    

  

输出：

参考： https://primer.style/css/components/toasts#toast-with-link