Construtor de cartões para Mobile componentes

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 7 min. de leitura

    • Saiba mais sobre os componentes que compõem os cartões móveis

    Adição e remoção de componentes

    Botões

    Os componentes do botão permitem que os usuários executem uma ação quando o botão é selecionado. Use os botões para adicionar ações aos seus cartões.

    Tabela 1. Propriedades de configuração do botão
    Propriedade Descrição
    ID do Elemento O atributo de ID JSON exclusivo do botão.
    Exibição
    Altura Altura do botão em pixels
    Largura Largura do botão em pixels. Se esta propriedade for deixada em branco, o botão preencherá o espaço disponível.
    Raio de canto O raio do canto do botão. Aumente este valor para criar cantos arredondados para o botão.
    Parte superior da margem A margem superior do botão em pixels
    Margem inferior A margem inferior do botão em pixels
    Margem esquerda A margem esquerda do botão em pixels
    Margem certa A margem direita do botão em pixels
    Largura da borda Largura da borda do botão em pixels.
    Propriedades do botão
    Formato

    Determine se o botão aparecerá com um rótulo de texto, ícone ou ambos.

    Selecione uma das seguintes opções:
    • Rótulo
    • Ícone
    • Rótulo e ícone
    Rótulo O rótulo de texto do botão.
    Nota:
    Esta opção só aparecerá se o formato Rótulo ou Rótulo e ícone estiver selecionado.
    Ícone O ícone que será exibido no botão. Escolha um ícone na lista suspensa fornecida.
    Nota:
    Esta opção só aparecerá se o formato Ícone ou Rótulo e ícone estiver selecionado.
    Nome acessível O texto alternativo que será lido em voz alta para as pessoas que usam dispositivos assistivos para que elas saibam a finalidade do botão.
    Nota:
    Esta opção só aparecerá se o formato Ícone estiver selecionado.
    Ações
    Múltiplo Crie um menu de várias ações diferentes que os usuários podem escolher ao selecionar o botão.
    Função

    Escolha uma função predefinida ou configurável. As funções configuráveis são obtidas da tabela sys_sg_button.

    Funções predefinidas disponíveis:
    • Cancelar
    • Continuar
    • Sair
    Aparência do botão
    Estilo de texto e ícone O estilo de formatação do texto, ícone ou ambos.
    Variável da cor de fundo A variável de cor do plano de fundo do botão.
    Cor de fundo A cor do plano de fundo do botão. O valor desta propriedade é um código de cor HTML, por exemplo , #A0522D para Sienna.
    Variável de cor de texto e ícone O texto do botão e a variável de cor do ícone.
    Cor de texto e ícone O texto do botão e a cor variável. O valor desta propriedade é um código de cor HTML, por exemplo , #A0522D para Sienna.
    Variável de cor da borda A variável de cor da borda do botão.
    Cor da borda A cor da borda do botão. O valor desta propriedade é um código de cor HTML, por exemplo , #A0522D para Sienna.

    Contêineres

    Os componentes de contêineres contêm outros componentes. Um contêiner pode conter qualquer componente de cartão, incluindo outro contêiner. Use contêineres para organizar os componentes do cartão e determinar como os componentes dentro do contêiner são alinhados e distribuídos.

    Tabela 2. Propriedades de configuração do contêiner
    Propriedade Descrição
    Propriedades
    ID do Elemento O atributo de ID JSON exclusivo do contêiner.
    Exibição
    Altura Altura do contêiner em pixels
    Largura Largura do contêiner em pixels. Se esta propriedade for deixada em branco, o contêiner preencherá o espaço disponível.
    Parte superior da margem A margem superior do contêiner em pixels
    Margem inferior A margem inferior do seu contêiner em pixels
    Margem esquerda A margem esquerda do contêiner em pixels
    Margem certa A margem direita do contêiner em pixels
    Raio de canto O raio do canto do seu contêiner. Aumente este valor para criar cantos arredondados para o contêiner.
    Aparência
    Direção do contêiner Determina a direção da orientação dos componentes dentro do contêiner. Selecione um destes valores:
    • Horizontal
    • Vertical
    Alinhamento Determina o alinhamento dos componentes no contêiner. Selecione um destes valores:
    • Estender
    • Centro
    • Esquerda
    • Direita
    • Superior
    • Inferior
    Distribuição Determina a distribuição dos componentes dentro do contêiner. Selecione um destes valores:
    • Igual
    • Automático
    Tipo de segundo plano O tipo de plano de fundo que o contêiner terá. Selecione um destes valores:
    • Nenhum(a)
    • Cor
    • Imagem

    Ícones

    Os componentes de ícone são usados para exibir um ícone no cartão. Você pode escolher um ícone no menu suspenso Ícone na tela Configuração.

    Tabela 3. Propriedades de configuração do ícone
    Propriedade Descrição
    Propriedades
    ID do Elemento O atributo de ID JSON exclusivo do ícone.
    Exibição
    Ícone O ícone a ser exibido.
    Parte superior da margem A margem superior do seu ícone em pixels.
    Margem certa A margem direita do seu ícone em pixels.
    Margem inferior A margem inferior do seu ícone em pixels.
    Margem esquerda A margem esquerda do seu ícone em pixels.
    Aparência
    Variável de cor A variável de cor do seu ícone.
    Cor A cor do seu ícone. O valor desta propriedade é um código de cor HTML, por exemplo , #A0522D para Sienna.

    Imagens

    Componentes de imagem são usados para exibir uma imagem. Você define uma imagem a ser exibida selecionando um campo no registro que contém uma imagem, por exemplo, o campo Avatar em um registro de usuário.

    Tabela 4. Propriedades de configuração de imagem
    Propriedade Descrição
    Propriedades
    ID do Elemento O atributo de ID JSON exclusivo da imagem.
    Exibição
    Altura Altura da imagem em pixels.
    Largura Largura da imagem em pixels.
    Parte superior da margem A margem superior da sua imagem em pixels.
    Margem certa A margem direita da sua imagem em pixels.
    Margem inferior A margem inferior da sua imagem em pixels.
    Margem esquerda A margem esquerda da sua imagem em pixels.
    Raio de canto O raio do canto da sua imagem. Aumente este valor para criar cantos arredondados para sua imagem.
    Imagem
    Usar campo mapeado Escolha se a imagem usará um campo mapeado.
    Valor do campo O valor do campo mapeado para sua imagem. Esta propriedade só ficará visível se Usar campo mapeado estiver selecionado.
    Anexo A imagem anexada a ser usada. Esta propriedade só ficará visível se Usar campo mapeado não estiver selecionado.
    Escala da imagem O escalonamento da sua imagem. Selecione um destes valores:
    • Preencher
    • Ajuste

    Texto

    Os componentes de texto exibem o texto no cartão. Pode ser texto estático ou texto do rótulo de valor de um campo. Use componentes de texto nas informações que os usuários precisam ver primeiro ao exibir listas de registros.

    Tabela 5. Propriedades de configuração de texto
    Propriedade Descrição
    Propriedades
    ID do Elemento O atributo de ID JSON exclusivo do texto.
    Exibição
    Tipo de campo O tipo de campo de texto. Selecione um destes valores:
    • Valor do campo
    • Rótulo do campo
    • Texto estático
    Valor do texto O texto que aparece no componente de texto. Este valor só é usado quando você seleciona Texto estático na propriedade Tipo de campo.
    Altura Altura do seu componente de texto em pixels.
    Largura Largura do componente de texto em pixels.
    Parte superior da margem A margem superior do seu componente de texto em pixels.
    Margem certa A margem direita do seu componente de texto em pixels.
    Margem inferior A margem inferior do seu componente de texto em pixels.
    Margem esquerda A margem esquerda do componente de texto em pixels.
    Aparência
    Estilo de texto O estilo de formatação do seu texto.
    Alinhamento do texto Alinhamento do texto no seu componente. Selecione um destes valores:
    • Esquerda
    • Centro
    • Direita
    Número máximo de linhas O número máximo de linhas para o texto no seu elemento.
    Variável de cor de texto A variável de cor do seu texto.
    Cor do texto A cor do seu texto. O valor desta propriedade é um código de cor HTML, por exemplo , #A0522D para Sienna.
    Nota:
    Você não pode mudar a cor de fundo de um componente de texto, mas pode colocar o componente de texto em um componente de contêiner e mudar a cor de fundo do contêiner.

    Vídeos

    Os componentes de vídeo exibem um vídeo incorporado ao seu cartão. Os URLs de vídeo do Youtube e do Viemo são compatíveis.

    Tabela 6. Propriedades de configuração de vídeo
    Propriedade Descrição
    Propriedades
    ID do Elemento O atributo de ID JSON exclusivo do vídeo.
    Exibição
    Usar campo mapeado Escolha se o vídeo usará um campo mapeado.
    Valor do campo O valor do campo mapeado para o seu vídeo. Esta propriedade só ficará visível se Usar campo mapeado estiver selecionado.
    URL O URL do vídeo a ser incorporado. Esta propriedade só ficará visível se Usar campo mapeado não estiver selecionado.
    Modo de reprodução Como o vídeo será exibido em um dispositivo móvel. Selecione um destes valores:
    • Tela cheia
    • Em linha
    Largura Largura do componente de vídeo em pixels.
    Altura Altura do componente de vídeo em pixels.
    Parte superior da margem A margem superior do componente de vídeo em pixels.
    Margem certa A margem direita do componente de vídeo em pixels.
    Margem inferior A margem inferior do componente de vídeo em pixels.
    Margem esquerda A margem esquerda do componente de vídeo em pixels.