📌  相关文章
📜  材料设计精简版-文本字段

📅  最后修改于: 2020-10-22 05:57:35             🧑  作者: Mango

MDL提供了一系列CSS类，以应用各种预定义的视觉和行为增强功能并显示不同类型的文本输入。下表列出了可用的类及其效果。

Sr.No. Class Name & Description
1

mdl-textfield

Identifies container as an MDL component and is required on “outer” div element.
2

mdl-js-textfield

Sets basic MDL behavior to input and is required on “outer” div element.
3

mdl-textfield__input

Identifies element as textfield input and is required on input or textarea element.
4

mdl-textfield__label

Identifies element as textfield label and is required on label element for input or textarea elements.
5

mdl-textfield–floating-label

Applies floating label effect and is optional; goes on “outer” div element.
6

mdl-textfield__error

Identifies span as an MDL error message and is optional; goes on span element for MDL input element with pattern.
7

mdl-textfield–expandable

Identifies a div as an MDL expandable text field container; used for expandable input fields, and is required on “outer” div element.
8

mdl-button

Identifies label as an MDL icon button; used for expandable input fields, and is required on “outer” div’s label element.
9

mdl-js-button

Sets basic behavior to icon container; used for expandable input fields, and is required on “outer” div’s label element.
10

mdl-button–icon

Identifies label as an MDL icon container; used for expandable input fields, and is required on “outer” div’s label element.
11

mdl-input__expandable-holder

Identifies a container as an MDL component; used for expandable input fields, and is required on “inner” div element.
12

is-invalid

Identifies the textfield as invalid on initial load and is optional on mdl-textfield element.

例

下面的示例将帮助您理解使用mdl-textfield类显示不同类型的文本字段。

mdl_textfields.htm

现场演示

      
            
      
      
   
   
   
      

         
Simple Text FieldNumeric Text Field
            Disabled Text Field

         

             
               

                  

                     
                     
                  

               

            		
            
            
               

                  

                     
                     
                     Number required!
                  

               

            		
            
            
               

                  

                     
                     
                  

               

            		
         

         
         
Simple Text Field with Floating Label
            Numeric Text Field with Floating Label
             

         

             
               

                  

                     
                     
                  

               

            		
            
            
               

                  

                     
                     
                     Number required!
                  

               

            		
             
         

         
         
Multiline Text FieldExpandable Multiline Text Field
             

         

             
               

                  

                     
                     
                  

               

            		
            
            
               

                  

                     
                     

                        
                        
                     

                  

               

            		
             

结果

验证结果。