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
Esse componente possibilita incluir na sua página
...
...
para apresentar textos formatados, com a opção de incluir botões, mostrar imagem e
...
até mesmo incorporar um vídeo para ser apresentado em pop-up.
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 parágrafo.
Texto
Texto que deve ser apresentado no parágrafo. É possível configurar o tamanho da fonte, será terá negrito, itálico ou sublinhado, alinhamento e links.
Cor do texto
Configura a cor do texto do parágrafo.
Expandir conteúdo
Configuração de largura do componente. Se essa opção estiver habilitada. o componente será redimensionado conforme a largura da tela.
Mostrar imagem?
Indica se deve ser apresentada a imagem referente ao parágrafo.
Alinhar imagem à direita?
Indica se a imagem será alinhada à direita. Por padrão, ela é alinhada à esquerda.
Imagem
Imagem que deve ser apresentada no parágrafo. A imagem deve ser um arquivo da galeria ou do próprio dispositivo.
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 |
---|
| |
|
...
<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> |
|
|
Itens
Insere, remove ou configura os itens que devem ser apresentados no parágrafo.
...
Adicionar item: essa opção permite adicionar ícones ao parágrafo, e esses itens direcionam para outros endereços web. Cada item tem a seguinte configuração:
...
Texto Texto que deve ser apresentado no parágrafo. Pode ter até 10.000 caracteres. É possível configurar o tamanho da fonte, se será negrito (Ctrl + B), itálico (Ctrl + I) ou sublinhado (Ctrl + U), alinhamento horizontal e link (Ctrl + K). Cor do texto Configura |
...
...
...
Expandir conteúdo Configuração de largura do componente. Se essa opção estiver habilitada. o componente será redimensionado conforme a largura da tela. Exibir imagem Indica se deve ser apresentada a imagem referente ao parágrafo. Exibir vídeo Indica se deve ser apresentado um vídeo, ao clicar sobre a imagem do parágrafo. Alinhar imagem à direita Indica se a imagem será alinhada à direita. Por padrão, ela é alinhada à esquerda. Imagem Imagem que deve ser apresentada no parágrafo. A imagem deve ser um arquivo da galeria ou do próprio dispositivo |
...
. 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>Ao inserir a imagem, sempre escolha uma opção que represente bem e chame a atenção para o parágrafo. Dê preferência para imagens com proporção 4:3 para manter a qualidade da imagem. |
|
|
...
</p>
</div>
</div>
</div> |
|
Título do vídeo Configura o título da pop-up a ser aberta, ao acionar a opção de visualização do vídeo. Link do vídeo incorporado Configura o vídeo a ser apresentado. Para que o vídeo seja apresentado corretamente, é necessário acessar o link incorporado. Image Added Assista ao vídeo 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. Espaçamento interno Configura o espaçamento que deve ser apresentado no interior do componente, entre a imagem e o texto. 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 itens que devem ser apresentados no parágrafo.
Painel |
---|
borderColor | #f2f2f2 |
---|
bgColor | #f2f2f2 |
---|
|
Image Added Adicionar item Essa opção permite adicionar botões ao parágrafo, e esses botões direcionam para outros endereços web. Image Added Remover Essa opção permite remover o botão em questão.
Configuração do botão Cada item tem a seguinte configuração:Título Configura o texto do botã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. Cor do texto Configura a cor do texto do botão. Cor do fundo 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 0, os cantos permanecem quadrados. |
Image Added