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.
Deck of Cards |
---|
|
Card |
---|
| Image Removed |
Card |
---|
| Image Removed |
|
Image Added
Referente a esse componente são apresentadas as seguintes configurações:
Geral
...
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. 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 do banner, 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>DICA!</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. 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 indica que pode ser definida uma medida específica para cada lado e o ícone indica que será definida uma medida igual para todos os lados. |
Banner
...
Image Added Veja a imagem
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.
...