---
sourceDocument: Yokohama Mobile Configuração e navegação
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/yokohama/mobile

 Release :

    - yokohama

ft:locale :

    - pt-BR

ft:publication_title :

    - Yokohama Mobile Configuração e navegação

ft:clusterId :

    - mobile

bundleId :

    - mobile

workflow :

    - Platform


---

# Construtor de cartões para Mobile componentes

# Construtor de cartões para Mobile componentes {#ariaid-title1}

* Versão de lançamento: Yokohama
* 
* Atualizado 30 de jan. de 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 7 min. de leitura

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

## Adição e remoção de componentes {#mcb-elements__section_gqy_xn4_ynb}

## Botões {#mcb-elements__section_kfq_3b4_zcc}

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

| Propriedade | Descrição |
|-|-|
| ID do Elemento | O atributo de ID JSON exclusivo do botão. |
| Tela ||
| 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 seu botão. Aumente este valor para criar cantos arredondados para o botão. |
| Parte superior da margem | A margem superior do seu botão em pixels |
| Margem inferior | A margem inferior do seu 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 {#mcb-elements__ul_ppl_kc4_zcc} |
| Rótulo | O rótulo de texto do botão. Nota: Esta opção só aparecerá se for Rótulo ou Rótulo e ícone o formato está selecionado. |
| Ícone | O ícone que será exibido no seu botão. Escolha um ícone na lista suspensa fornecida. Nota: Esta opção só aparecerá se for Ícone ou Rótulo e ícone o formato está selecionado. |
| Nome acessível | O texto alternativo que será lido em voz alta para as pessoas que usam dispositivos de assistência para que elas saibam a finalidade do botão. Nota: Esta opção só aparecerá se Ícone o formato está selecionado. |
| Ações ||
| Múltiplo | Crie um menu de várias ações diferentes que os usuários podem escolher quando selecionam 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 {#mcb-elements__ul_q24_hd4_zcc} |
| 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 e a cor da variável do botão. 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. |
[Tabela 1. Propriedades de configuração do botão]

{#mcb-elements__table_a5m_jb4_zcc}

## Contêineres {#mcb-elements__section_y5k_yn4_ynb}

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 no contêiner são alinhados e distribuídos.  
{#mcb-elements__table_nm2_bp4_ynb__entry__2}

| Propriedade | Descrição |
|-|-|
| Propriedades ||
| ID do Elemento | O atributo de ID JSON exclusivo do contêiner. |
| Tela ||
| 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 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 contêiner. Aumente este valor para criar cantos arredondados para o contêiner. |
| Aparência ||
| Direção do contêiner | Determina a direção de orientação dos componentes no contêiner. Selecione entre estes valores: * Horizontal * Vertical {#mcb-elements__ul_p5f_dq4_ynb} |
| Alinhamento | Determina o alinhamento dos componentes no contêiner. Selecione entre estes valores: * Estender * Centro * Esquerda * Direita * Superior * Inferior {#mcb-elements__ul_prk_1q4_ynb} |
| Distribuição | Determina a distribuição dos componentes no contêiner. Selecione entre estes valores: * Igual * Automático {#mcb-elements__ul_d52_xp4_ynb} |
| Tipo de segundo plano | O tipo de plano de fundo que o contêiner terá. Selecione entre estes valores: * Nenhum(a) * Cor * Imagem {#mcb-elements__ul_nth_3dz_fdc} |
[Tabela 2. Propriedades de configuração do contêiner]

{#mcb-elements__table_nm2_bp4_ynb}

## Ícones {#mcb-elements__section_pwz_j2z_fdc}

Os componentes do ícone são usados para exibir um ícone no seu cartão. Você pode escolher um ícone no menu suspenso de ícones na tela Configuração.  
{#mcb-elements__table_qwz_j2z_fdc__entry__2}

| Propriedade | Descrição |
|-|-|
| Propriedades ||
| ID do Elemento | O atributo de ID JSON exclusivo do ícone. |
| Tela ||
| Í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 í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. |
[Tabela 3. Propriedades de configuração do ícone]

{#mcb-elements__table_qwz_j2z_fdc}

## Imagens {#mcb-elements__section_nr5_yn4_ynb}

Os 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. Avatar campo em a. Usuário registro.  
{#mcb-elements__table_lwl_gr4_ynb__entry__2}

| Propriedade | Descrição |
|-|-|
| Propriedades ||
| ID do Elemento | O atributo de ID JSON exclusivo da imagem. |
| Tela ||
| Altura | Altura da imagem em pixels. |
| Largura | Largura da imagem em pixels. |
| Parte superior da margem | A margem superior da imagem em pixels. |
| Margem certa | A margem direita da imagem em pixels. |
| Margem inferior | A margem inferior da imagem em pixels. |
| Margem esquerda | A margem esquerda da 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 da sua imagem. Esta propriedade só ficará visível se Usar campo mapeado está selecionado. |
| Anexo | A imagem anexada a ser usada. Esta propriedade só ficará visível se Usar campo mapeado não está selecionado. |
| Escala da imagem | O dimensionamento da sua imagem. Selecione entre estes valores: * Preencher * Ajuste {#mcb-elements__ul_xd5_1s4_ynb} |
[Tabela 4. Propriedades de configuração da imagem]

{#mcb-elements__table_lwl_gr4_ynb}

## Texto {#mcb-elements__section_eng_zn4_ynb}

Os componentes de texto exibem o texto no seu cartão. Pode ser texto estático ou texto do rótulo de valor de um campo. Use componentes de texto para as informações que seus usuários precisam ver primeiro ao exibir listas de registros.  
{#mcb-elements__table_pjv_jt4_ynb__entry__2}

| Propriedade | Descrição |
|-|-|
| Propriedades ||
| ID do Elemento | O atributo de ID JSON exclusivo do texto. |
| Tela ||
| Tipo de campo | O tipo de campo de texto. Selecione entre estes valores: * Valor do campo * Rótulo do campo * Texto estático {#mcb-elements__ul_qmd_rt4_ynb} |
| Valor do texto | O texto que aparece no componente de texto. Este valor só será usado quando você tiver selecionado Texto estático em Tipo de campo propriedade. |
| Altura | Altura do componente de texto em pixels. |
| Largura | Largura do componente de texto em pixels. |
| Parte superior da margem | A margem superior do componente de texto em pixels. |
| Margem certa | A margem direita do componente de texto em pixels. |
| Margem inferior | A margem inferior do 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 componente. Selecione entre estes valores: * Esquerda * Centro * Direita {#mcb-elements__ul_cln_w54_ynb} |
| 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. |
[Tabela 5. Propriedades de configuração de texto]

{#mcb-elements__table_pjv_jt4_ynb}

## Vídeos {#mcb-elements__section_kvf_qfz_fdc}

Os componentes de vídeo exibem um vídeo incorporado no seu cartão. Os URLs de vídeo do Youtube e do Viemo são compatíveis.  
{#mcb-elements__table_lvf_qfz_fdc__entry__2}

| Propriedade | Descrição |
|-|-|
| Propriedades ||
| ID do Elemento | O atributo de ID JSON exclusivo do vídeo. |
| Tela ||
| Usar campo mapeado | Escolha se o vídeo usará um campo mapeado. |
| Valor do campo | O valor do campo mapeado do seu vídeo. Esta propriedade só ficará visível se Usar campo mapeado está selecionado. |
| URL | O URL do vídeo a ser incorporado. Esta propriedade só ficará visível se Usar campo mapeado não está selecionado. |
| Modo de reprodução | Como o vídeo será exibido em um dispositivo móvel. Selecione entre estes valores: * Tela cheia * Em linha {#mcb-elements__ul_s5d_yfz_fdc} |
| 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. |
[Tabela 6. Propriedades de configuração de vídeo]

{#mcb-elements__table_lvf_qfz_fdc}