📜  Framework7 Smart Select

📅  最后修改于: 2021-01-02 06:06:46             🧑  作者: Mango

Framework7智能选择

Framework7 Smart Select可以轻松地将表单选择更改为动态页面。它使用一组复选框和单选输入。

智能选择可以多种形式使用:

Index Type Description
1) Smart Select Layout Smart select layout is used to define a list view inside the select element using smart-select class.
2) Smart Select with Search Bar Smart select is used to search the elements by using search bar and enables it by setting the data-searchbar class to true.
3) Custom Page Title and Back Link Text It facilitates you to set the custom page title and back link for smart select using data-page-title and data-back-text attributes.
4) Open in Popup Smart select can be open as popup by using the data-open-in attribute to popup.
5) Open in Picker You can display smart select as picker modal by setting the data-open-in attribute to picker.
6) Custom Icons, Colors and Images You can define custom icon, color or image on the smart select by using the data-option-icon, data-option-color and data-option-image attributes respectively.
7) Multiple Select and Optgroup Smart select facilitates you to use multiple select and group options by using the multiple and optgroup attributes.
8) Multiple Select and Maxlength Smart select facilitates you to select limited number items by using the maxlength attribute.

Smart Select布局示例




   
      
      
      
      Smart Select Layout
      
      
   

   
      
     
      
         
      
   


Smart Select搜索栏示例




   
      
      
      
      Smart Select Search Bar
      
      
   

   
      
      
      
         
      
   


自定义页面标题和反向链接文本示例




   
      
      
      
      Custom Page Title and Back Link Text
      
      
   

   
      
      
      
         
      
   


在弹出窗口中打开示例




   
      
      
      
      Open in Popup
      
      
   

   
      
      
      
         
      
   


在选择器中打开示例




   
      
      
      
      Open in Picker
      
      
   

   
      
      
      
         
      
   


自定义图标,颜色和图像示例




   
      
      
      
      Custom icons, colors and images
      
      
   

   
      

多重选择和选择组示例

多选和最大长度示例

通过使用maxlength属性,它可以帮助您选择数量有限的项目。

在此示例中,maxlength为3。因此,您最多可以选择3辆汽车。