Angular 5: Semantic UI

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:

Angular 5 (datatable)

Bom, como mencionado acima esse é um post rápido, espero ter ajudado e até a próxima pessoal 😉

Compartilhe:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Table of Contents

Postagens Relacionadas

SaferatHome

Safer at Home

Safer at Home 26/02/2021(US) – Filmes – 0h 0min –   Nota: 0/10   Sinopse     Elenco Mais informações Título Original Safer at Home
SouLunaOUltimoShow

Sou Luna: O Último Show

O elenco de “Sou Luna” se apresenta ao vivo pela última vez no mítico estádio Luna Park em Buenos Aires. Vamos acompanhá-los na intimidade dos bastidores e r…
Chansondouce

Chanson douce

Chanson douce () – Drama, Crime – 1h 40min –   Nota: 6/10   Sinopse     Elenco Leïla Bekhti Como – Myriam Karin Viard
OutpostInfernoNegro

Outpost 2: Inferno Negro

O ano é 1945, 2ª Guerra Mundial, e um cientista alemão de nome Klausener está trabalhando em uma tecnologia nova e assustadora que tem o poder de criar um ex…