Angular 5: Semantic UI
Esse será um post rápido sobre como adicionar a biblioteca Semantic UI em um projeto criado com Angular na versão 5. Caso tenha interesse em saber um pouco mais sobre Semantic UI, segue link da sua documentação Doc Semanatic UI. Nessa doc você encontrara informação sobre o seu template e alguns exemplos que você pode implementar no seu APP.
O primeiro passo será a criação de um novo projeto. Para isso, execute o comando abaixo no seu terminal:
ng new ng-semanatic
Esse comando irá criar um novo projeto chamado ng-semantic. Assim que ele finalizar, baixe o pacote da Semanatic UI para o seu projeto.
npm install semantic-ui -s
Você irá precisar passar algumas informação para esse install, eu deixei as default:
1º Set-up Semantic UI Automatic (Use default locations and all components) automatic
2º We detected you are using NPM Nice! Is this your project folder? Yes
3º Where should we put Semantic UI inside your project? semantic/ eu deixei nesse default
Com o pacote importado, atualize o trecho de código abaixo no seu arquivo angular-cli.json:
"styles": [ "../node_modules/semantic-ui/dist/semantic.min.css", "styles.css" ],
Exemplo com datatable
Para verificar se a biblioteca foi configurada corretamente, atualize o seu arquivo app.component.html com o trecho de código abaixo:
Abaixo você tem o resultado dessa implementação:
Bom, como mencionado acima esse é um post rápido, espero ter ajudado e até a próxima pessoal 😉
