TOTVS Fluig

Atalhos

Árvore de páginas

Versões comparadas

Versão antiga 3

changes.mady.by.user Julia Larissa Schultz

Gravado em

comparado com

Nova versão Atual

changes.mady.by.user Denise De Deus

Gravado em

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
Aviso
titleAtenção!

A solução TOTVS Fluig No-Code será descontinuada em 30/10/2024 e não estará mais disponível para acesso a partir dessa data.

Mais informações podem ser obtidas em Descontinuação TOTVS Fluig No-Code.

Dica
titleDica!

Encontre os recursos existentes nos aplicativos TOTVS Fluig No-Code na nova solução que já está disponível: o TOTVS Collab.

Assim, você pode continuar usufruindo de todos os benefícios da gestão de projetos e tarefas, além de promover a colaboração no seu time!

Image Added

Esse componente possibilita incluir diversos textos, que são apresentados lado a lado horizontalmente

...

.

...

Cada conteúdo de texto pode

...

ter imagem, ícone e botões, para tornar o conteúdo mais completo. 

Image Removed

...

Image Added

No Editor de páginas, ao passar o cursor sobre esse componente e acionar Image Added são apresentadas as seguintes configurações:

...


GeralImage Added

Image Added Veja a imagem

Configura as propriedades gerais do componente.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Código da âncora
Código gerado automaticamente ao incluir o componente na página, mas pode ser alterado para facilitar a identificação.

Painel
borderColor#e8f6f0
bgColor#e8f6f0
HTML
<div class="lms">
	<div class="lms-callout">
		<div class="lms-callout-image">
			<img class="lms-callout-thumb" src="http://tdn.totvs.com/download/thumbnails/286221066/dica.png" width="24" height="24">
		</div>
		<div class="lms-callout-body">
			<p class="lms-callout-text"><b>DICA!</b><br>Com a âncora, você consegue direcionar o usuário para o ponto exato da página em que seu componente está inserido. Isso pode ser feito, por exemplo, com um item do componente <a href = "http://tdn.totvs.com/x/sY9qH" style="color: #41d262">Menu</a>, fazendo-o abrir essa âncora da página.</p>
		</div>
	</div>
</div>

Expandir conteúdo
Configuração de largura do componente. Se essa opção estiver habilitada. o componente será redimensionado conforme a largura da tela.

Alinhamento
Indica o alinhamento de todos os textos. Pode ser alinhado à esquerda, centralizado ou à direita.

...

Espaçamento externo

...

Configura o espaçamento que deve ser apresentado ao redor do componente. O ícone Image Added indica que pode ser definida uma medida específica para cada lado e o ícone Image Added indica que será definida uma medida igual para todos os lados. 

Image Added

Conteúdo de textoImage Added

Image Added Veja a imagem

Gerencia e configura os textos que devem ser apresentados. 

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Para gerenciar os textos, são apresentadas as seguintes opções:

Image Added Incluir texto

Image Added Remover texto
Essa opção é apresentada ao passar o mouse sobre o quadro do texto.

Image Added ou Image Added

O ícone Image Added no quadro referente ao texto indica que há uma imagem associada, e o ícone Image Added indica que o texto não tem imagem associada. Para facilitar a identificação de cada quadro, é apresentada ainda uma miniatura da imagem, quando associada. Para alterar o conteúdo, basta clicar na área desse quadro, e com isso será aberto o menu para configuração do texto.


Configuração do texto

Para cada texto é necessário configurar:

Imagem/Sem imagem
Indica se o conteúdo do texto será com ou sem imagem. A imagem deve ser um arquivo da galeria ou do próprio dispositivo

Imagem de fundo como ícone
Indica se deve ser habilitado o recurso para ajustar a imagem em formato de ícone, para evitar que ela tenha cortes ou distorções.

Título
Título da galeria.

Texto
Conteúdo de texto que deve ser apresentado abaixo do título.

Adicionar item
Essa opção permite adicionar botões ao conteúdo de texto, e esses botões direcionam para outros endereços web. Cada item tem a seguinte configuração:

...

.

Painel
borderColor#e8f6f0
bgColor#e8f6f0
HTML
<style type="text/css">
    .lms * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    .lms-text-center {
      text-align: center;
    }

    .lms-full-height {
      height: 100%;
    }

    /* Component LMS Callout */

    .lms-callout {
      border: none;
      padding: 0px;

      display: -moz-box;
      -moz-flex-flow: row wrap;
      -moz-justify-content: center;
      -moz-align-items: center;

      display: -ms-flexbox;
      -ms-flex-flow: row wrap;
      -ms-justify-content: center;
      -ms-align-items: center;
      
      display: -webkit-flex;
      display: -webkit-box;
      -webkit-flex-flow: row wrap;
      -webkit-justify-content: center;
      -webkit-align-items: center;

      display: flex;
      flex-flow: row wrap;      
      justify-content: center;
      align-items: center;
    }
  
    .lms-callout .lms-callout-image {
      width: 24px;
    }

    .lms-callout .lms-callout-body {
      width: calc(100% - 24px);
      padding-left: 20px;
    }

	.lms-callout .lms-callout-citacao {
      border: 0px solid;
      border-left-width: 3px;
      border-left-color: #f36f21;
	  margin: 4px;
	  margin-left: 25px;
	  padding-left: 8px;
      font-size: 13px;
	}

    .lms-callout .lms-callout-thumb {
      width: 24px;
      height: 24px;
    }

    .lms-callout .lms-callout-text {
      color: #58595b;
      line-height: 1.75;
      margin: 0;
    }
</style>
<div class="lms">
	<div class="lms-callout">
		<div class="lms-callout-image">
			<img class="lms-callout-thumb" src="http://tdn.totvs.com/download/thumbnails/286221066/dica.png" width="24" height="24">
		</div>
		<div class="lms-callout-body">
			<p class="lms-callout-text"

...

><b>DICA!</

...

b><br>Utilize imagens para chamar a atenção, mas prefira imagens com proporção 4:3 ou 4:4 para evitar que fiquem desconfiguradas.</p>
		</div>
	</div>
</div>

Imagem de fundo como ícone
Indica se deve ser habilitado o recurso para ajustar a imagem em formato de ícone, para evitar que ela tenha cortes ou distorções.

Título
Título da galeria. Pode ter até 255 caracteres.

...

Painel
borderColor#e8f6f0
bgColor#e8f6f0
HTML
<div class="lms">
	<div class="lms-callout">
		<div class="lms-callout-image">
			<img class="lms-callout-thumb" src="http://tdn.totvs.com/download/thumbnails/286221066/dica.png" width="24" height="24">
		</div>
		<div class="lms-callout-body">
			<p class="lms-callout-text"><b>DICA!</b><br>Escolha títulos com palavras chaves, que atraiam a atenção de quem estiver fazendo uma leitura rápida

...

.</p>
		</div>
	</div>
</div>

Texto
Conteúdo de texto que deve ser apresentado abaixo do título.

Espaçamento interno
Configura o espaçamento que deve ser apresentado no interior de cada conteúdo de texto, alterando a posição que o texto irá obedecer. O ícone Image Added indica que pode ser definida uma medida específica para cada lado e o ícone Image Added indica que será definida uma medida igual para todos os lados. 

Image Added Adicionar item
Essa opção permite adicionar botões ao conteúdo de texto, e esses botões direcionam para outros endereços web.

Image Added Remover
Essa opção permite remover o botão em questão.

Image Added

BotõesImage Added

Image Added Veja a imagem

Cada botão tem a seguinte configuração:

Painel
borderColor#f2f2f2
bgColor#f2f2f2

URL
Endereço web que será aberto ao acionar o botão.

Abrir em uma nova aba?
Indica se o endereço deve ser aberto em uma nova aba ou na atual.

Texto
Configura o texto do botão.

Cor do texto
Configura a cor do texto do botão.

Cor do botão
Configura a cor do botão.

Cor da borda
Configura a cor da borda do botão.

Largura da borda
Configura a largura da borda do botão. Caso seja informado 0, o botão fica sem borda.

Cantos arredondados
Configura o quanto os cantos do botão serão arredondados. Caso 1, os cantos permanecem quadrados. 



Image Added