Aviso |
---|
|
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 |
---|
|
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
O banner é um componente incluído
...
para dar destaque a algum conteúdo de imagem ou vídeo. O banner é composto por slides, que são alternados
...
automaticamente de acordo com o intervalo de transição.
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:
...
...
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. Setas Indica se as setas devem ser apresentadas nas laterais |
...
do banner, quando houver mais de um slide para o banner. Paginação Indica se devem ser apresentados os ícones de navegação na parte inferior |
...
Composição de banner
Gerencia e configura os banners que devem ser apresentados. Se for incluído mais de um banner, a visualização deles é alternada automaticamente conforme o intervalo de transição.
Para cada banner é necessário configurar:
Painel |
---|
Imagem / Vídeo Indica se o conteúdo do banner será de imagem ou vídeo. Tanto a imagem quanto o vídeo devem ser arquivos da galeria ou do próprio dispositivo. Os formatos aceitos de imagem são: JPG, JPEG, GIF ou PNG, e de vídeo são: MP4 ou OGG. Caso o vídeo tenha duração maior que o intervalo de transição e tenham sido incluídos mais banners a apresentar, a visualização do vídeo será interrompida, para dar lugar ao próximo banner. Título Título do banner. Subtítulo Descrição que deve ser apresentada abaixo do título. Cor do texto Configura a cor do texto de cada banner. Alinhamento horizontal: indica o alinhamento horizontal do título e do subtítulo. Pode ser alinhado à esquerda, centralizado ou à direita. Alinhamento vertical: indica o alinhamento vertical do título e do subtítulo. Pode ser alinhado acima, centralizado ou abaixo. Adicionar item: essa opção permite adicionar botões ao banner, e esses botões direcionam para outros endereços web. Cada item tem a seguinte configuração: - 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 label do botão.
- Cor do texto: configura a cor do label do botão.
- Cor do botão: configura a cor que deve ser apresentada para o botão.
|
...
Altura: configura a altura dos banners. Caso as imagens sejam maiores do que a altura reservada para os banners, elas são automaticamente redimensionadas para se adequarem à altura definida. Caso a imagem seja muito pequena, ela pode ficar distorcida.
Intervalo de transição
Intervalo de transição automática dos banners, em milissegundos. Por padrão, o tempo é de 5000 milissegundos (5 segundos).
, quando houver mais de um slide para o banner. |
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><br>Habilite as setas ou a paginação quando houver mais de um slide no banner, para aumentar a navegabilidade do usuário. |
|
|
...
</p>
</div>
</div>
</div> |
|
Máscara Indica se uma máscara escura deve ser empregada sobre a imagem ou vídeo, para passar maior contraste e facilitar a leitura do texto do slide. Image Added Veja a imagem Animação de transição Indica se haverá animação ao alternar entre os slides, para dar uma sensação de movimento ao conteúdo do componente. Intervalo de transição Intervalo de transição automática dos slides, em milissegundos. Por padrão, o tempo é de 5000 milissegundos (5 segundos). Altura Configura a altura do banner. Caso as imagens sejam maiores do que a altura reservada para o banner, elas são automaticamente redimensionadas para se adequarem à altura definida. Caso a imagem seja muito pequena, ela pode ficar distorcida. Espaçamento externo Configura o espaçamento que deve ser apresentado ao redor do componente banner. 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. |
Image Added
Gerencia e configura os slides que devem ser apresentados. Se for incluído mais de um slide, a visualização deles é alternada automaticamente conforme o intervalo de transição.
Painel |
---|
borderColor | #f2f2f2 |
---|
bgColor | #f2f2f2 |
---|
|
Para gerenciar os slides do banner, são apresentadas as seguintes opções: Image Added Incluir slide
Image Added Remover slide Essa opção é apresentada ao passar o mouse sobre o quadro do slide.
Image Added ou Image Added O ícone Image Added no quadro referente ao slide indica que há uma imagem associada, e o ícone Image Addedindica que o slide tem um vídeo associado. Para facilitar a identificação de cada quadro, é apresentada ainda uma miniatura da imagem. Para alterar o conteúdo, basta clicar na área desse quadro, e com isso será aberto o menu para configuração do slide.
Configuração do slide
Para cada slide é necessário configurar: Imagem / Vídeo Indica se o conteúdo do slide será de imagem ou vídeo. Tanto a imagem quanto o vídeo devem ser arquivos da galeria ou do próprio dispositivo. Os formatos aceitos para imagem são: JPG, JPEG, GIF ou PNG. Os formatos aceitos para vídeo são MP4 ou OGG, com o limite de 15MB de tamanho. Caso o vídeo tenha duração maior que o intervalo de transição e tenham sido incluídos mais slides a apresentar, a visualização do vídeo será interrompida, para dar lugar ao próximo slide. 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>Procure imagens que representem bem o que você quer dizer. Você pode optar por inserir um vídeo também. Mas lembre-se: tanto em imagens quanto vídeos, procure utilizar resolução superior à 720p e inferior a 1080p, com boa qualidade e proporções <i>widescreen</i> (16:9). Procure ferramentas de otimização de imagem para evitar que fique pesado carregá-las dentro do slide. |
|
|
...
</p>
</div>
</div>
</div> |
|
Título Título do slide. Subtítulo Descrição que deve ser apresentada abaixo do título. Pode ter até 5.000 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>Deixe uma mensagem objetiva para o visitante, desse modo a leitura fica mais agradável atraindo a atenção para clicar.</p>
</div>
</div>
</div> |
|
Cor do texto Configura a cor do texto do slide. Alinhamento horizontal Indica o alinhamento horizontal do título e do subtítulo. Pode ser alinhado à esquerda, centralizado ou à direita. Alinhamento vertical Indica o alinhamento vertical do título e do subtítulo. Pode ser alinhado acima, centralizado ou abaixo. Espaçamento interno Configura o espaçamento que deve ser apresentado no interior de cada slide, 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 slide, 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
Cada botão do slide 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 Veja a imagem |
Image Added