语义 UI 注释状态

Semantic UI是一个开源框架，它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同，并且有很多不同的元素可用于使您的网站看起来更令人惊叹。它使用一个类将 CSS 添加到元素中。

评论是显示用户反馈和与其他用户就内容进行交互的绝佳方式。 Semantic UI 为我们提供了一个 Semantic UI 风格的评论元素。让我们看看各种评论状态。

语义 UI 注释状态：

• Collapsed ：语义 UI 允许我们使用折叠状态隐藏用户视图中的评论。用户可以随意查看评论。

句法：

  

    ...
  
  ...

注意：通过使用语义 UI 类的组合，根据需要使用上述语法。请参阅下面的示例以更好地理解这些类。

示例 1：在下面的示例中，我们创建了可以随意折叠的标准注释。

HTML

  

    Semantic UI Comment States
    
    
    
    
    

  

  
    
        GeeksforGeeks
        Semantic UI Comment States
        
        
        
               Toggle Comments
        
        
            Comments
            
              
                
              
              
                Mr. Anonymous
                
                  I am watching you. I know all about you.
                
                
                  Reply
                
              
            
            
                
                  
                
                
                  Praneeth
                  
                    Lol. You know nothing about me.
                  
                  
                    Reply
                  
                
            
        
    
  
    
        const toggleComments = () => {
            const comments = document.querySelector(".comments");
            comments.classList.toggle("collapsed");
        }
    

输出：

语义 UI 注释状态

示例 2：在下面的示例中，我们创建了带有可以随意折叠的回复表单的标准评论。

HTML

  

    Semantic UI Comment States
    
  
    
    
  
    
    

  

  
    
        GeeksforGeeks
        Semantic UI Comment States
        
        
        
              Toggle Comments
        
        
            Comments
            
              
                
              
              
                Mr. Anonymous
                
                  I am watching you. I know all about you.
                
                
                  Reply
                
              
            
            
                
                  
                
                
                  Praneeth
                  
                    Lol. You know nothing about me.
                  
                  
                    
                      
                    
                    
                       Add Reply
                    
                  
                
             
        
    
  
    
        const toggleComments = () => {
            const comments = document.querySelector(".comments");
            comments.classList.toggle("collapsed");
        }
    

输出：

语义 UI 注释状态

参考： https://semantic-ui.com/views/comment.html