Framework7 智能选择

2025年3月17日 | 阅读 12 分钟

Framework7 智能选择用于将表单选择更改为动态页面。 它使用一组复选框和单选输入。

智能选择可用于各种类型的表单

索引类型描述
1)智能选择布局智能选择布局用于使用 smart-select 类在选择元素内定义列表视图。
2)带搜索栏的智能选择智能选择用于通过使用搜索栏搜索元素,并通过将 data-searchbar 类设置为 true 来启用它。
3)自定义页面标题和返回链接文本它使您可以使用 data-page-title 和 data-back-text 属性为智能选择设置自定义页面标题和返回链接。
4)在弹出窗口中打开智能选择可以使用 data-open-in 属性在弹出窗口中打开。
5)在选择器中打开您可以通过将 data-open-in 属性设置为选择器来将智能选择显示为选择器模态框。
6)自定义图标、颜色和图像您可以使用 data-option-icon、data-option-color 和 data-option-image 属性分别在智能选择上定义自定义图标、颜色或图像。
7)多选和分组选项智能选择使您可以使用 multiple 和 optgroup 属性来使用多选和分组选项。
8)多选和最大长度智能选择使您可以使用 maxlength 属性选择有限数量的項目。

智能选择布局示例

立即测试

智能选择搜索栏示例

立即测试

自定义页面标题和返回链接文本示例

立即测试

在弹出窗口中打开示例

立即测试

在选择器中打开示例

立即测试

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

立即测试

多选和分组选项示例

立即测试

多选和最大长度示例

它使您可以使用 maxlength 属性选择有限数量的項目。

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

立即测试