Linha Datasul

Árvore de páginas

Versões comparadas

Versão antiga 4

changes.mady.by.user Rodrigo Silva Costa

Gravado em

comparado com

Nova versão 5

changes.mady.by.user Rodrigo Silva Costa

Gravado em

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
Section
Column
width100%
Totvs custom tabs box items
defaultyes
referenciaGuia de Estilos
Painel
borderColor#FFFFFF
bgColor#FFFFFF

Guia de Estilos - Novo Facelift

Section
Informações
iconfalse
Deck of Cards
idNEWS
Card
idICON
labelConceito
Section
Column
width50%

Image Modified

Column
width50%

Ícones minimalistas

O novo conceito de ícones minimalistas tem sido cada vez mais popular nos últimos anos. Os novos ícones apresentam um design limpo e moderno, com cores sólidas e monocromáticas, que conferem um visual mais uniforme e organizado ao produto. Além disso, esses ícones têm o objetivo de facilitar o reconhecimento das funcionalidades dos aplicativos de forma rápida e intuitiva.

Para criação de novos ícones, poderão ser utilizados os ícones disponíveis na biblioteca PO-UI. Caso não exista ícone disponível, um novo ícone poderá ser criado respeitando as devidas medidas dos atuais, com as cores apresentadas na aba "Paleta de Cores" deste documento.

50%
Card
idTOOLBAR
labelÍcones de Toolbar
Section
Column
width50%
HTML
<html>
  <head>
    <title>Três Caixas com Cor de Fundo #CCCCCC</title>
    <style>
      .boxmenu {
        width: 90px;
        height: 90px;
        background-color: #164659;
        display: inline-block;
		margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 20px;
      }
       .boxenable {
        width: 90px;
        height: 90px;
        background-color: #f2f0ce;
        display: inline-block;
        margin-left: 90px;
        margin-bottom: 20px;
       } 
       .boxdisable {
        width: 90px;
        height: 90px;
        background-color: #999882;
        display: inline-block;
        margin-right: 20px;
        margin-bottom: 20px;
      } 
      .text {
        display: inline-block;
        vertical-align: top;
        font-family: Courier New;
        font-weight: bold;
        }   
	 </style>
  </head>
  <body>
    <div class="boxmenu"></div>
    <div class="text">RGB:  22    70    89<br>HEX: #164659 </div>
    <br>
     <div class="text">RGB: 242   240   206<br>HEX: #F2F0CE </div>
     <div class="boxenable"></div>
    <br>
     <div class="boxdisable"></div>
    <div class="text">RGB: 153   152   130<br>HEX: #999882 </div>
    <br>
   </body>
</html>
Column
width

Ícones de Toolbar

Os ícones desenhados para toolbar devem manter o formato de largura 28 pixels e altura 27 pixels para garantir uma aparência uniforme e organizada na barra de ferramentas. Além disso, é importante salvá-los em formato PNG para manter a qualidade da imagem e sem perda de dados.


Estado
colourGreen
titleHABILITADO



Card
idSCREEN
labelÍcones de Tela
Section
Column
width50%
HTML
<html>
  <head>
    <title>Três Caixas com Cor de Fundo #CCCCCC</title>
    <style>
      .boxmenu {
        width: 90px;
        height: 90px;
        background-color: #164659;
        display: inline-block;
		margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 20px;
      }
       .boxenable {
        width: 90px;
        height: 90px;
        background-color: #f2f0ce;
        display: inline-block;
        margin-left: 90px;
        margin-bottom: 20px;
       } 
       .boxdisable {
        width: 90px;
        height: 90px;
        background-color: #999882;
        display: inline-block;
        margin-right: 20px;
        margin-bottom: 20px;
      } 
      .text {
        display: inline-block;
        vertical-align: top;
        font-family: Courier New;
        font-weight: bold;
        }   
	 </style>
  </head>
  <body>
    <div class="boxmenu"></div>
    <div class="text">RGB:  22    70    89<br>HEX: #164659 </div>
    <br>
     <div class="text">RGB: 242   240   206<br>HEX: #F2F0CE </div>
     <div class="boxenable"></div>
    <br>
     <div class="boxdisable"></div>
    <div class="text">RGB: 153   152   130<br>HEX: #999882 </div>
    <br>
   </body>
</html>
Column
width50%

Ícones de Tela

Os ícones de tela devem ser criados de acordo com o tamanho dos botões, para garantir uma proporção adequada e uma boa aparência na interface. Além disso, é necessário salvá-los em formato BMP (24-bits), para que a qualidade da imagem seja mantida.