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 cria uma galeria de imagens em sua página. Ao clicar sobre cada imagem na galeria, será possível ampliar a imagem e observar sua legenda. 

Image Added

No Editor de páginas, ao passar o cursor sobre esse componente e acionar Image Added são

Esse componente cria uma galeria de imagens, que pode ter um título e uma descrição, além da possibilidade de configurar uma máscara de cor sobre cada imagem. 

Image Removed

...

apresentadas as seguintes configurações:


Geral

...

Image Added

Image Added Veja a imagem

Configura as propriedades gerais da galeria.

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>

Título
Título da galeria.

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>Escolha um título com palavras chave, e que combine com todas as imagens da galeria.</div>
	</div>
</div>

Tamanho do título
Tamanho da fonte do título.

Subtítulo

...


Descrição que deve ser apresentada abaixo do título.

...

Tamanho do subtítulo
Tamanho da fonte do subtítulo.

Máscara

...


Indica se o efeito máscara deve ser empregado nas imagens.

...

Cor do texto
Configura a cor do título e do texto da galeria.

Cores do gradiente
Define as cores que terá a máscara, ao passar o mouse pela imagem da galeria. Só será apresentado o gradiente caso o efeito máscara esteja habilitado para a galeria.

Expandir conteúdo
Configuração de largura do componente. Se

...

essa opção estiver habilitada. o componente será redimensionado conforme a largura da tela

...

.

Colunas

...

Clique no botão Image Removed para adicionar novas imagens. Cada imagem tem a seguinte configuração:

...


Quantas colunas de imagens devem ser apresentadas.

Imagens: insere, remove ou configura as imagens que devem ser apresentadas na galeria. 

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 Addedindica que será definida uma medida igual para todos os lados. 

Painel
borderColor

...

#fdf7e8
bgColor

...

#fdf7e8
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/

...

importante.png" width="24" height="24">
		</div>
		<div class="lms-callout-body">
			<p class="lms-callout-text"

...

><b>IMPORTANTE!</

...

b><br>A galeria

...

não

...

poderá

...

ser

...

excluída

...

caso

...

a

...

mesma

...

já

...

esteja

...

sendo

...

utilizada

...

em

...

outras

...

páginas. Nesse caso, uma mensagem informando o usuário será apresentada.</p>
		</div>
	</div>
</div>

Image Added

ImagensImage Added

Image Added Veja a imagem

Gerencia e configura as imagens que devem ser apresentadas na galeria. 

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Espaçamento interno
Configura o espaçamento que deve ser apresentado entre cada imagem da galeria. O ícone Image Added indica que pode ser definida uma medida específica para cada lado e o ícone Image Addedindica que será definida uma medida igual para todos os lados. 

Para gerenciar as imagens da galeria, são apresentadas as seguintes opções:

Image Added Incluir imagem

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

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>As imagens anexadas na galeria devem comportar nas resoluções recomendadas, assim não perderão qualidade ao serem publicadas.</p>
		</div>
	</div>
</div>

Image Added
Para facilitar a identificação de cada quadro, é apresentada uma miniatura da imagem definida. Para alterar o conteúdo, basta clicar na área desse quadro, e com isso será aberto o menu para configuração.


Configuração da imagem

Cada imagem tem a seguinte configuração:

Legenda 
Descrição que deve ser apresentada ao abrir a visualização da imagem na galeria, por exemplo, os direitos autorais.



Image Added