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 permite importar formulários
públicos do que foram criados no TOTVS Forms
para e definidos como Públicos para a sua página.
Image Added
No Editor de páginas, ao passar o cursor do mouse sobre esse componente e acionar
são apresentadas as seguintes configurações:
Image Removed Veja a imagem
Configurar componente
Image Added são exibidas todas as configurações disponíveis.
Geral
Image Added
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> |
|
Formulário Formulário criado no TOTVS Forms que será importado para a página. Expandir conteúdo Configuração de largura do componente. Se essa opção estiver habilitada. o componente será redimensionado conforme a largura da tela. Logotipo Imagem de logo que deve ser apresentada no rodapé. A imagem deve ser um arquivo da galeria ou do próprio dispositivo.Mensagem de CopyrightTexto apresentado abaixo da logo e dos ícones. Painel |
---|
borderColor | #e8f6f0#fdf7e8 |
---|
bgColor | #e8f6f0#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/dicaimportante.png" width="24" height="24">
</div>
<div class="lms-callout-body">
<p class="lms-callout-text"><b>DICA><b>IMPORTANTE!</b><br>Insirab><br>Apenas formulários osdefinidos direitoscomo de<a marcahref registrada com o nome de sua empresa= "https://tdn.totvs.com/x/K645HQ#Forms|Editordeformul%C3%A1rios-Configura%C3%A7%C3%B5es" style="color: #e1af29">Públicos</a> podem ser incluídos na 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. Espaçamento internoexterno Configura o Configuração de espaçamento que deve ser apresentado no interior ao redor do componente, alterando a posição que o texto irá obedecer. O ícone Image Modified indica que pode ser definida uma medida específica para cada lado e o ícone Image Modified indica que será definida uma medida igual para todos os lados. |
Image Removed Veja a imagem
Gerencia e configura os itens que devem ser apresentados no rodapé.
Image Added
Importar formulário para a página
Image AddedVeja o passo a passo
01. Depois de criar sua página, acione Componentes
Image Added.
02. Clique no componente Formulário e arraste ele para sua página.
03. Na aba lateral que é aberta imediatamente ao soltar o componente na página, acione Selecionar.
04. Selecione o formulário que deseja adicionar na sua página.
Painel |
---|
borderColor | #f2f2f2 |
---|
bgColor | #f2f2f2 |
---|
|
Adicionar item
Essa opção permite adicionar ícones ao rodapé, e esses ícones direcionam para outros endereços webSerão exibidos apenas formulários públicos para seleção. |
05. Clique em Selecionar.
06. Defina as demais configurações disponíveis para o componente, se desejar.
07. Clique em Fechar configurações
Image Added.
Painel |
---|
borderColor | #e8f6f0 |
---|
bgColor | #e8f6f0 |
---|
|
|
<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>Insira os links de suas redes sociais, para demonstrar maior representatividade na webb><br>É possível ver os dados respondidos no formulário a partir da própria página. Veja os passos em <a href= "https://tdn.totvs.com/x/8I5qH#Pages|In%C3%ADcio-Verregistrosdosformul%C3%A1riosexistentesnoportal" style="color: #41d262">Ver registros dos formulários</a>.</p>
</div>
</div>
</div> |
|
Remover item
Remover o item do rodapé.
Configuração dos itens
Cada item tem a seguinte configuração:
Imagem
Imagem que deve ser apresentada no link do rodapé. A imagem deve ser um arquivo da galeria ou do próprio dispositivo.
Título
Configura o título do link.
URL
Endereço web que será aberto ao acionar o item.
Abrir em uma nova aba?
Indica se o endereço deve ser aberto em uma nova aba ou na atual.