语义-UI 评论内容

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

评论是显示用户反馈和与其他用户就内容进行交互的绝佳方式。语义 UI 为我们提供了样式化的注释元素。我们来看看各种评论内容。

语义 UI 注释变化：

• Avatar ：这个类允许我们添加代表用户社交形象的头像。
• Metadata ：这个类允许我们将元数据添加到评论中，例如来源日期，喜欢的数量，不喜欢的数量
• Actions ：这个类可以让我们与评论进行交互，比如保存评论、点赞评论、不喜欢评论等。
• 回复表单：这个类允许我们添加一个回复表单来评论。用户可以使用此表单直接回复评论。

句法：

 

   ...
   

    ...
   
 

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

示例 1：在下面的示例中，我们创建了一个评论头像。

HTML

 

    
    

 

    

        
GeeksforGeeks
        
Semantic UI Comment Content
        

        

        

            
Comments
            

              
                
              
              

                Mr. Anonymous
                

                  I am watching you. I know all about you.
                
                

                  Reply
                
              
            
            

                
                  
                
                

                  Praneeth
                  

                    Lol. You know nothing about me.
                  
                  

                    Reply
                  
                
            
        
    

输出：

语义-UI 评论内容

示例 2 ：在下面的示例中，我们创建了带有metadata的评论。

HTML

 

    
      

 

    

        
GeeksforGeeks
        
Semantic UI Comment Content
        

        

        

            
Comments
            

                
                    
                
                

                    Mr. Anonymous
                    

                        
5 minutes ago
                        

                            
                            100 Likes
                        
                        

                            
                            5 Likes
                        
                    
                    

                        I am watching you. I know all about you.
                    
                    

                        Reply
                    
                
            
            

                
                    
                
                

                    Praneeth
                    

                        
3 minutes ago
                        

                            
                            6 Likes
                        
                        

                            
                            58 Likes
                        
                    
                    

                        Lol. You know nothing about me.
                    
                    

                        Reply
                    
                
            
        
    

输出：

语义-UI 评论内容

示例 3：在下面的示例中，我们创建了带有操作的评论。

HTML

 

    
      

 

    

        
GeeksforGeeks
        
Semantic UI Comment Content
        

        

        

            
Comments
            

                
                    
                
                

                    Mr. Anonymous
                    

                        
5 minutes ago
                        

                            
                            100 Likes
                        
                        

                            
                            5 Likes
                        
                    
                    

                        I am watching you. I know all about you.
                    
                    

                        Reply
                        
                            
                            Like
                        
                        
                            
                            Dislike
                        
                        
                            Save
                        
                    
                
            
            

                
                    
                
                

                    Praneeth
                    

                        
3 minutes ago
                        

                            
                            6 Likes
                        
                        

                            
                            58 Likes
                        
                    
                    

                        Lol. You know nothing about me.
                    
                    

                        Reply
                        
                            
                            Like
                        
                        
                            
                            Dislike
                        
                        
                            Save
                        
                    
                
            
        
    

输出：

语义-UI 评论内容

示例 4：在下面的示例中，我们创建了带有回复表单的评论。

HTML

 

    
    

 

    

        
GeeksforGeeks
        
Semantic UI Comment Content
        

        

        

            
Comments
            

                
                    
                
                

                    Mr. Anonymous
                    

                        
5 minutes ago
                        

                            
                            100 Likes
                        
                        

                            
                            5 Likes
                        
                    
                    

                        I am watching you. I know all about you.
                    
                    

                        Reply
                        
                            
                            Like
                        
                        
                            
                            Dislike
                        
                        
                            Save
                        
                    
                
            
            

                
                    
                
                

                    Praneeth
                    

                        
3 minutes ago
                        

                            
                            6 Likes
                        
                        

                            
                            58 Likes
                        
                    
                    

                        Lol. You know nothing about me.
                    
                    

                        Reply
                        
                            
                            Like
                        
                        
                            
                            Dislike
                        
                        
                            Save
                        
                    
                    

                        

                          
                        
                        

                           Add Reply
                        
                    
                
            
        
    

输出：

语义-UI 评论内容

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