Framework7 - Seleção Inteligente
Descrição
A seleção inteligente é uma maneira fácil de alterar as seleções de forma para páginas dinâmicas usando grupos de caixas de seleção e entradas de rádio.
Podemos usar a seleção inteligente em vários tipos, conforme especificado na tabela abaixo -
| S.Não | Tipo e descrição |
|---|---|
| 1 | Layout de seleção inteligente O layout de seleção inteligente define uma exibição de lista dentro do elemento selecionado usando a classe de seleção inteligente . |
| 2 | Seleção inteligente com barra de pesquisa A seleção inteligente pesquisa os elementos usando a barra de pesquisa e a ativa definindo a classe data-searchbar como true. |
| 3 | Título da página personalizada e texto do link traseiro Você pode definir o título da página personalizada e o link de retorno para a seleção inteligente usando os atributos data-page-title e data-back-text . |
| 4 | Abrir em Popup A seleção inteligente pode ser aberta como pop-up usando o atributo data-open-in para pop - up . |
| 5 | Abrir no selecionador A seleção inteligente pode ser exibida como selecionador modal, definindo o atributo data-open-in para selecionador . |
| 6 | Ícones, cores e imagens personalizadas Você pode definir o ícone, a cor ou a imagem personalizada na seleção inteligente usando os atributos de dados-opção-ícone , dados-opção-cor e dados-opção-imagem, respectivamente. |
| 7 | Seleção múltipla e Optgroup A seleção inteligente permite usar várias opções de seleção e grupo usando os atributos multiple e optgroup . |
| 8 | Multiple Select e Maxlength A seleção inteligente permite selecionar um número limitado de itens usando o atributo maxlength . |
Você pode ter mais alguns tipos de seleção inteligente, que podem ser usados em diferentes cenários, conforme listado na tabela abaixo -
| S.Não | Tipo e descrição | Atributo |
|---|---|---|
| 1 | Close Smart Select On User Select Você pode fechar a seleção inteligente quando o usuário selecionar qualquer opção. |
data-back-on-select = "true" |
| 2 | Smart Select With Virtual List A lista virtual pode ser usada com a seleção inteligente se você tiver várias opções. |
data-virtual-list = "true" |
| 3 | Smart Select Color Themes Você pode especificar os temas de cores para formulário e barra de navegação na página de seleção inteligente. |
data-form-theme = "color" data-navbar-theme = "color" |
| 4 | Set Smart Select Value By Option Text O valor da seleção inteligente pode ser definido usando o valor da opção. |
smart-select-value |
| 5 | Open Smart Select Using JavaScript Você pode abrir a seleção inteligente usando o método JavaScript. |
myApp.smartSelectOpen (smartSelect)
|
| 6 | Adding Options Dynamically Você pode adicionar opções dinamicamente à seleção inteligente, mesmo se já estiverem abertas. |
myApp.smartSelectAddOption (selecionar, opçãoHTML, índice)
|