Interpreting and analyzing WeChat mini-app components: 4. icon

Mini-program component interpretation and analysis: 4. icon, Icon component description:

Icon is an icon format used for system icons, software icons, etc.. Icon,. Ico. Common software or icons on windows desktops are generally in the ICON format. The icon is used in many places on the application, so that the program can easily express the operation status returned by the program. at a glance, the user can see the meaning returned by the application and improve the user experience, the commonly used icon is provided in the components of the applet. for detailed usage, see the following introduction!

Icon component usage instructions:

When using the icon, use the icon label, and then have the type and size attributes,

For more information about the specific attributes, see the final summary of the attributes. For more information about how to use tags, see the following code.

The running effect of the sample code is as follows:

The following is the WXML code:

[XML]View plain text Copy code

     
          
   
    
Icons
           
   
    
Icon
       
      
          
               
                
                    
     
      
Successful
                     
     
      
Used to indicate successful operation fulfillment
                 
            
           
               
                
                    
     
      
Prompt
                     
     
      
It is used to indicate information prompts. it is also often used to intercept operations without conditions, prompting the user's required information.
                 
            
           
               
                
                    
     
      
Common warning
                     
     
      
Used to indicate the circumstances that will cause certain consequences after the operation
                 
            
           
               
                
                    
     
      
Strong warning
                     
     
      
Used to indicate a situation that will cause serious irreparable consequences after the operation
                 
            
           
               
                
                    
     
      
Wait
                     
     
      
Used to indicate waiting
                 
            
           
               
                
                
                
                
                
                
                
            
       
  
 

The following is the WXSS code:

[CSS]View plain text Copy code

icon{    margin-right: 13px;}.page__bd {    padding-left: 40px;    padding-right: 40px;    text-align: left;}.icon-box{    margin-bottom: 25px;    display: flex;    align-items: center;}.icon-box__ctn{    flex-shrink: 100;}.icon-box__title{    font-size: 20px;}.icon-box__desc{    margin-top: 6px;    font-size: 12px;    color: #888888;}.icon_sp_area {    margin-top: 10px;    text-align: left;}

Main Attributes of the icon component:

Attribute	Type	Default value	Description
Type	String		Icon type, valid values: success, success_no_circle, info, warn, waiting, cancel, download, search, clear
Size	Int	23	Icon size, in px
Color	Color		Icon color, the same as css color

The above is the explanation and analysis of the applet components: 4. details of the icon. For more information, see other related articles in the first PHP community!