Componentes do MCB

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 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 JSON ID 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 seu 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 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 aparecerá somente 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 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 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.

Contêineres

Os componentes 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.

Tabela 2. Propriedades de configuração do contêiner
Propriedade	Descrição
Propriedades
ID do Elemento	O atributo JSON ID 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 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 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 no 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 seu cartão. Você pode escolher um ícone no menu suspenso de ícones na tela Configuração.

Tabela 3. Propriedades de configuração do ícone
Propriedade	Descrição
Propriedades
ID do Elemento	O atributo JSON ID exclusivo do ícone.
Exibição
Ícone	O ícone a ser exibido.
Parte superior da margem	A margem superior do ícone em pixels.
Margem certa	A margem direita do ícone em pixels.
Margem inferior	A margem inferior do í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.

Imagens

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 um Usuário registro.

Tabela 4. Propriedades de configuração da imagem
Propriedade	Descrição
Propriedades
ID do Elemento	O atributo JSON ID 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 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 para sua imagem. Esta propriedade só ficará visível se Usar campo mapeado 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 um destes valores: Preencher Ajuste

Texto

Os componentes de texto exibem 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 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ó 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 seu componente. Selecione um destes valores: Esquerda Centro Direita
Número máximo de linhas	O número máximo de linhas do 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: Não é possível mudar a cor de fundo de um componente de texto, mas é possível 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 em 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 JSON ID 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 do seu vídeo. Esta propriedade só ficará visível se Usar campo mapeado 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 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.