📜  Semantic-UI 显示移动类型

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

Semantic-UI 显示移动类型

Semantic UI 是一个开源框架,它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同,并且有很多不同的元素可用于使您的网站看起来更神奇。

语义 UI 为我们提供了一种非常简单的方式来以非常简单的方式显示内容,而不是使用 CSS。 Semantic UI Reveal 是一项功能,当元素被激活时,会显示附加内容而不是以前的内容。语义 UI 提供不同类型的显示,如淡入淡出、移动和旋转。

在本文中,我们将通过示例代码了解 Semantic UI Reveal Move Type 及其实现。

语义 UI 显示移动类型:语义 UI 显示移动类型是一种显示方法,其中元素沿特定方向移动以显示附加信息以代替先前的内容。元素可以向右、向左、向上或向下移动以显示内容。

语义 UI 显示移动类型类:

  • left:该类用于设置向左移动以显示元素。
  • right:该类用于设置向右移动以显示元素。
  • up:该类用于设置向上移动以显示元素。
  • down:该类用于设置向下移动以显示元素。

句法:

....

注意:开发人员可以使用上述类为移动使用不同的显示类型。

示例1:我们可以观察元素向左移动以显示附加内容。

HTML


    Semantic-UI Reveal Move Type
    
    
    


    
        

            Geeksforgeeks         

        Semantic UI Reveal Move Type         

        
            
                             
                     
    
 


HTML


    Semantic-UI Reveal Move Type
    
     
    


     
         

            Geeksforgeeks          

         Semantic UI Reveal Move Type          

         
            
                             
                      
     
  


HTML


    Semantic-UI Reveal Move Type
     
     
    


     
         

Geeksforgeeks

         Semantic UI Reveal Move Type          

         
            
                             
                      
     
  


HTML


    Semantic-UI Reveal Move Type
    
     
    


     
         

Geeksforgeeks

         Semantic UI Reveal Move Type          

         
            
                             
                      
     
  


输出:

示例2:我们可以观察到元素向右移动以显示附加内容。

HTML



    Semantic-UI Reveal Move Type
    
     
    


     
         

            Geeksforgeeks          

         Semantic UI Reveal Move Type          

         
            
                             
                      
     
  

输出:

Semantic-UI 显示移动类型

Semantic-UI 显示移动类型

示例 3:我们可以观察元素移动到顶部以显示附加内容。

HTML



    Semantic-UI Reveal Move Type
     
     
    


     
         

Geeksforgeeks

         Semantic UI Reveal Move Type          

         
            
                             
                      
     
  

输出:

Semantic-UI 显示移动类型

Semantic-UI 显示移动类型

示例4:我们可以观察元素向下移动以显示附加内容。

HTML



    Semantic-UI Reveal Move Type
    
     
    


     
         

Geeksforgeeks

         Semantic UI Reveal Move Type          

         
            
                             
                      
     
  

输出:

Semantic-UI 显示移动类型

Semantic-UI 显示移动类型

参考: https://semantic-ui.com/elements/reveal.html#move