#14: 💅 Adicionando estilos - CSS
Com o Angular, podemos estilizar os componentes de uma forma que não afete o resto da nossa aplicação. Dessa forma, é uma boa prática encapsular o estilo relacionado aos componentes.
Também podemos definir regras gerais de estilo para serem usadas em toda a nossa aplicação. Isso é bom para criar a mesma aparência para todos os nossos componentes. Por exemplo, podemos decidir qual paleta de cores será usada como o tema do nosso aplicativo. Então, se quisermos mudar as cores ou oferecer temas diferentes, podemos mudá-lo em um só lugar em vez de cada componente.
O Angular nos oferece diferentes métodos de encapsulamento de estilo, mas nós seguiremos com o padrão.
O Angular-CLI já gerou um estilo geral no src/style.css
. Cole o código a seguir no arquivo de estilo:
Como o projeto irá acessar este arquivo? No arquivo de configuração Angular-CLI
.angular-cli.json
emprojects.todo-list.architect.build.options.styles
você pode definir os arquivos relacionados para que a ferramenta de compilação o reconheça e adicione ao projeto. Você pode abrir as ferramentas de desenvolvimento do navegador e observar o estilo dentro do elemento:
Nós adicionamos estilos diretamente nos elementos (html, body, div, span, h1, p, ul, li) o que afeta diretamente o nosso aplicativo. Nós também adicionamos estilos utilizando as classes/seletores CSS. Nós precisamos adicionar as classes nos elementos relevantes.
No app-root
, adicione a classe app-title
no elemento h1:
-> src/app/app.component.ts
No input-button
, adicione a classe btn
no elemento botão:
-> src/app/input-button/input-button.component.ts
Agora, vamos adicionar estilos específicos de nossos componentes.
Adicione o estilo a seguir no input-button.component.css
:
Como essa folha de estilo fica atrelada ao componente input-button
? Dê olha olhada no arquivo input-button.component.ts
. Uma das propriedades que o objeto passa para o decorator @Component
é o styleUrls
. Ele é uma lista de folhas de estilo (stylesheets) que será utilizado pelo Angular e encapsula o estilo que pertence ao componente.
O seletor :host
é aplicado no elemento que pertence a esse componente - <app-input-button>
. Este elemento não faz parte do modelo deste componente. Aparece no modelo do seu pai. É assim que podemos controlar seu estilo a partir do componente.
Nós precisamos adiiconar a classe todo-input
no elemento input
:
-> src/app/input-button-unit/input-button-unit.component.ts
Agora vamos adicionar o estilo específico do componente list-manager
. Abra o arquivo list-manager.component.css
e cole o código a seguir:
-> src/app/list-manager/list-manager.component.css
Nós vamos encapsular o conteúdo desse componente utilizando um elemento <div>
com toda a classe todo-app
:
-> src/app/list-manager/list-manager.component.ts
Por fim vamos adicionar o seguinte estilo no todo-item.component.css
:
-> src/app/todo-item/todo-item.component.css
Encapsule o conteúdo do componente todo-item
com um elemento <div>
e a classe todo-item
Nós vamos utilizar as classes todo-checkbox
e o todo-title
nos próximos capítulos
Você pode mudar o estilo como você quiser - o tamanho dos elementos, as cores - tudo o que você quiser!
Observe: você pode usar arquivos SCSS no projeto, o que é uma maneira mais agradável de escrever estilo e possui excelentes recursos que ajudam o desenvolvedor. Os arquivos SCSS são compilados para o css quando o projeto é criado.
Last updated