Utilização de imagens e logos oficiais em aplicações com PO-UI

A biblioteca POUI possibilita a customização de cores e fontes através da utilização de temas, para a TOTVS foi criado o pacote https://github.com/totvs/po-theme-totvs.

Porém os logos e imagens são propriedades intelectuais, por isso eles foram separados em um pacote e disponibilizado no npm privado mantido pela engenharia no endereço (https://npm.totvs.io/)

Esse tutorial demonstrará como utilizar esses recursos na sua aplicação, o exemplo completo está nesse repositório ( https://code.engpro.totvs.com.br/POUI-TOTVS/exemplo_totvs_common_assets)

Guia passo a passo

Em uma aplicação Angular com o POUI e o tema da TOTVS já instalados e configurados siga os seguintes passos:

1. Configure seu npm para o npm privado utilizando o seguinte comando: 

   npm set registry https://npm.totvs.io/

2. Realize o login com o comando a seguir e entre com seu usuário(sem o @totvs.com.br) e senha de rede da totvs.

   npm login

3. Instale a biblioteca de logos e imagens com o comando:

   
   

   npm install @totvs/common-assets

4. No seu projeto no arquivo angular.json localize a tag assets e adicione o seguinte conteúdo:

   
   

   		"assets": [
   			...
                 {
                   "glob": "**/*",
                   "input": "./node_modules/@totvs/common-assets/common-assets/logos/",
                   "output": "assets/images"
                 }
               ]

5. Agora você pode referenciar as imagens direto da pasta assets. A seguir um exemplo de uso com o componente Page Login:

<po-page-login
  p-product-name="Human Resources"
  p-logo="./assets/images/totvs/totvs.svg"
  p-secondary-logo="./assets/images/totvs/totvs.svg"
>
</po-page-login>

Artigos relacionados