Como Ocultar um Controle para Cima e para Baixo em um Campo Numérico¶

Os campos numéricos exibem um incrementador de controle de cima para baixo, por padrão, quando o campo está no estado de edição. Um usuário pode clicar nos botões para cima ou para baixo para aumentar ou diminuir um valor numérico correspondente. Pode haver casos em que você queira ocultar esse controle para cima e para baixo, e este artigo orientará você sobre como ocultá-lo.

Exemplo mostrando o controle Up-Down visível

Exemplo mostrando o controle Up-Down oculto

Crie uma Interface de Tema Personalizada (chrome, Safari, Edge, Opera)¶

1. Navegue até IDE > Configurações adicionais
2. Clique no botão Interfaces Temáticas
3. Clique em +Interface

4. Forneça as seguintes informações:

   • Imóveis = Controles
   • Grupo = Campos
   • Coleção = Cliente
   • Nome = Controle de cima para baixo
   • Seletor = input::-webkit-outer-spin-button, input::-webkit-inner-spin-button

5. Clique no ícone de marca de seleção para salvar

Crie uma Interface de Tema Personalizada (firefox)¶

1. Navegue até IDE > Configurações adicionais
2. Clique no botão Interfaces Temáticas
3. Clique em +Interface

4. Forneça as seguintes informações:

   • Imóveis = Controles
   • Grupo = Campos
   • Colecionador = Cliente
   • Nome = Controle para cima e para baixo (Firefox)
   • Seletor = input[type=number]

5. Clique no ícone de marca de seleção para salvar

Opção 1: Aplicar o Tema Personalizado em Todo o Site¶

Siga estas etapas se quiser aplicar essa personalização em um aplicativo inteiro.

1. Navegue até IDE > Aparência
2. Selecione a Coleção atribuída ao seu aplicativo
3. Vá para Tema Base
4. Selecione Controles em Componentes
5. Selecione Campos em Subcomponentes
6. Clique no botão + Estilo

7. Forneça as seguintes informações:

   1. Área = Controle para cima e para baixo
   2. Tipo de estilo = Exibição
   3. 1-Display = ; -webkit-appearance: none; margin: 0
   4. 2-Opacidade = 0

8. Clique em Salvar

9. Clique no botão + Estilo

10. Forneça as seguintes informações:

    1. Área = Controle para cima e para baixo (Firefox)
    2. Tipo de estilo = Exibição
    3. 1-Display = ;-moz-appearance: textfield

11. Clique em Salvar

Opção 2: Aplicar o Tema Personalizado a um Controle Específico¶

Siga estas etapas se desejar aplicar essa personalização em um nível granular, por exemplo, a um controle específico.

1. Navegue até IDE > Aparência
2. Selecione o Cliente Coleção
3. Clique no botão + Tema
4. Atribua um Nome do tema. Por exemplo: Ocultar controle para cima e para baixo
5. Defina Tipo como Campo
6. Clique em Salvar
7. Selecione Controles em Componentes
8. Selecione Campos em Subcomponentes
9. Clique no botão + Estilo

10. Forneça as seguintes informações:

    1. Área = Controle para cima e para baixo
    2. Tipo de estilo = Exibição
    3. 1-Display = ; -webkit-appearance: none; margin: 0
    4. 2-Opacidade = 0

11. Clique em Salvar

12. Clique no botão + Estilo

13. Forneça as seguintes informações:

    1. Área = Controle para cima e para baixo (Firefox)
    2. Tipo de estilo = Exibição
    3. 1-Display = ;-moz-appearance: textfield

14. Clique em Salvar

Aplicar Tema a um Controle¶

1. Navegue até a página com o controle para modificar
2. Vá para Gaveta de ação > Designer ao vivo
3. Selecione o controle na visualização de design da página
4. Vá para Mais > Estilos
5. Clique em + Formatação Condicional
6. Selecione Incondicional
7. Clique no botão Escolher estilo
8. Localize o tema personalizado. Por exemplo: Ocultar controle para cima e para baixo
9. Clique no botão + Escolher
10. Navegue de volta para a visualização do aplicativo, atualize o navegador e teste a atualização