语义 UI 形状类型

Semantic UI 是一个现代框架，用于为网站开发无缝设计，它为用户提供了轻量级的组件体验。它使用预定义的 CSS 和 jQuery 来整合不同的框架。

Semantic UI Shape 为我们提供了三种不同类型的形状，即形状、立方体和文本。

语义 UI 形状类型：

• 形状：使用它，形状可以是一个 3D 对象，包括任何平面内容。
• 立方体：使用它是为了格式化立方体形状，以便每一面都是立方体的面。
• 文本：使用它来格式化文本形状以允许显示文本的侧面。

句法：

   ...

以下示例说明了语义 UI 形状类型。

示例 1：以下示例演示了人形类。

HTML

    
    


    
        
Geeksforgeeks
        Semantic-UI Shape Types    
        

        

          

            

              

                

                  
                
                

                  
John Dey
                  

                    Founder of Geeksforgeeks
                  
                  

                    Sandeep Jain. Founder at GeeksforGeeks.
                    DSA Self Paced CourseIndian Institute 
                    of Technology, Roorkee. 
                  
                
                

                  
                    Created 2009
                  
                  
                    
                    100M+
                  
                
              
            
          
        
    

输出：

语义 UI 形状类型

示例 2：在此示例中，我们将使用一个看起来像骰子的立方体形状。

HTML

    
        Semantic UI Shape Types
    
    
    
       
    
    
    
    
    

  

    
        Geeksforgeeks
        Semantic UI Shape Types
      
        
        
      
        
        
            
            
                
                This is side 1
                
            
            
            
            
                
                This is side 2
                
            
            
            
            
                
                This is side 3
                
            
            
            
            
                
                This is side 4
                
            
            
            
            
                
                This is side 5
                
            
            
            
            
                
                This is side 6
                
            
            
        
        
        
        
      
        
        
        Flip-Up
        
        
        Flip-Right
        
    
    
      
        // Initialize the shape
        $('.shape').shape();
      
        $('.up').click(function () {
      
        // Make the shape flip up
        $('.shape').shape('flip up');
        })
      
        $('.right').click(function () {
      
        // Make the shape flip to the right
        $('.shape').shape('flip right');
        })
    

输出：

语义 UI 形状类型

示例 3：在此示例中，我们将使用文本形状，以便我们可以在将文本放在骰子上时将其抬起。

HTML

      
    
    
      
    
    
      
    
    
    


    
        Geeksforgeeks
         Semantic UI Shape Types 
        
        
        
      
        
        
            
            Welcome to geeksforgeeks
            
            
            A computer science portal.
            
            
            You can information about
            anything related to computers.
            
            
            You can even contribute
            to help others and earn money.
            
        
        
        
        
      
        
        
        Flip-Up
        
        
        Flip-Right
        
      
    
    
      
        // Initialize the shape
        $('.shape').shape();
        $('.up').click(function () {
      
        // Make the shape flip up
        $('.shape').shape('flip up');
        })
        $('.right').click(function () {
      
        // Make the shape flip to the right
        $('.shape').shape('flip right');
        })
    

输出：

语义 UI 形状类型

参考： https://semantic-ui.com/modules/shape.html