📌  相关文章
📜  离子-复选框

📅  最后修改于: 2020-12-08 04:59:34             🧑  作者: Mango

离子复选框与切换几乎相同。这两种样式的样式不同，但用途相同。

添加复选框

创建复选框表单时，需要将复选框类名称添加到标签和输入元素。以下示例显示了两个简单的复选框，一个处于选中状态，另一个未被选中。

上面的代码将产生以下屏幕-

离子复选框

多个复选框

正如我们已经展示的，该列表将用于多个元素。现在，我们将为每个列表项使用item-checkbox类。

    
   
  • 
      Checkbox 1
      
   
    • 

   
  • 
      Checkbox 2
      
   
    • 

   
  • 
      Checkbox e
      
   
    • 

   
  • 
      Checkbox 4
      
   
    •

上面的代码将产生以下屏幕-

离子复选框列表

样式复选框

当您要设置复选框样式时，需要应用带有复选框前缀的任何Ionic颜色类。检查以下示例以查看其外观。在此示例中，我们将使用复选框列表。

    
   
  • 
      Checkbox 1
      
   
    • 

   
  • 
      Checkbox 2
      
   
    • 

   
  • 
      Checkbox 3
      
   
    • 

   
  • 
      Checkbox 4
      
   
    • 

   
  • 
      Checkbox 5
      
   
    • 

   
  • 
      Checkbox 6
      
   
    • 

   
  • 
      Checkbox 7
      
   
    • 

   
  • 
      Checkbox 8
      
   
    • 

   
  • 
      Checkbox 9
      
   
    •

上面的代码将产生以下屏幕-

离子复选框颜色