El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Estils de components

Següent ►
►

En aquest tema, aprendrem com aplicar estils als components en Angular. Els estils són una part essencial del desenvolupament web, ja que permeten donar una aparença visual atractiva i coherent a les aplicacions. Angular proporciona diverses maneres d'aplicar estils als components, incloent estils en línia, estils en fitxers CSS externs i estils encapsulats.

Objectius

  • Entendre com aplicar estils en línia als components.
  • Aprendre a utilitzar fitxers CSS externs per estilitzar components.
  • Comprendre el concepte d'encapsulament d'estils en Angular.
  • Explorar l'ús de pre-processadors CSS com SASS en Angular.

Estils en línia

Els estils en línia es defineixen directament dins del component utilitzant la propietat styles del decorador @Component. Aquesta és una manera ràpida i senzilla d'aplicar estils específics a un component.

Exemple

import { Component } from '@angular/core';

@Component({
  selector: 'app-inline-styles',
  template: `
    <h1>Component amb estils en línia</h1>
    <p>Aquest paràgraf està estilitzat en línia.</p>
  `,
  styles: [`
    h1 {
      color: blue;
    }
    p {
      font-size: 16px;
      color: green;
    }
  `]
})
export class InlineStylesComponent { }

Explicació

  • La propietat styles conté un array de cadenes de text que defineixen els estils CSS.
  • Els estils s'apliquen només al component en què es defineixen, gràcies a l'encapsulament d'estils d'Angular.

Estils en fitxers CSS externs

Una altra manera d'aplicar estils és utilitzant fitxers CSS externs. Això permet una millor organització i mantenibilitat dels estils, especialment en aplicacions grans.

Exemple

import { Component } from '@angular/core';

@Component({
  selector: 'app-external-styles',
  template: `
    <h1>Component amb estils externs</h1>
    <p>Aquest paràgraf està estilitzat amb un fitxer CSS extern.</p>
  `,
  styleUrls: ['./external-styles.component.css']
})
export class ExternalStylesComponent { }

Fitxer CSS extern (external-styles.component.css)

h1 {
  color: red;
}

p {
  font-size: 18px;
  color: purple;
}

Explicació

  • La propietat styleUrls conté un array de rutes a fitxers CSS externs.
  • Els estils definits en aquests fitxers s'apliquen només al component en què es refereixen.

Encapsulament d'estils

Angular encapsula els estils per defecte, assegurant que els estils d'un component no afectin altres components. Això es fa afegint atributs únics als elements HTML del component.

Exemple

import { Component } from '@angular/core';

@Component({
  selector: 'app-encapsulation',
  template: `
    <h1>Component amb encapsulament d'estils</h1>
    <p>Aquest paràgraf està estilitzat amb encapsulament.</p>
  `,
  styles: [`
    h1 {
      color: orange;
    }
    p {
      font-size: 20px;
      color: brown;
    }
  `]
})
export class EncapsulationComponent { }

Explicació

  • Els estils encapsulats s'apliquen només al component en què es defineixen.
  • Angular utilitza atributs únics per assegurar que els estils no es propaguen a altres components.

Ús de pre-processadors CSS (SASS)

Angular suporta l'ús de pre-processadors CSS com SASS, que permeten utilitzar característiques avançades com variables, mixins i nesting.

Exemple

Fitxer SASS (styles.component.scss)

$primary-color: #3498db;

h1 {
  color: $primary-color;
}

p {
  font-size: 16px;
  color: darken($primary-color, 20%);
}

Component

import { Component } from '@angular/core';

@Component({
  selector: 'app-sass-styles',
  template: `
    <h1>Component amb estils SASS</h1>
    <p>Aquest paràgraf està estilitzat amb SASS.</p>
  `,
  styleUrls: ['./styles.component.scss']
})
export class SassStylesComponent { }

Explicació

  • Els fitxers SASS es compilen a CSS abans de ser aplicats al component.
  • Això permet utilitzar característiques avançades de SASS per millorar la mantenibilitat i la reutilització dels estils.

Exercicis pràctics

Exercici 1: Estils en línia

Crea un component amb estils en línia que canviï el color del text i la mida de la font d'un paràgraf.

Solució

import { Component } from '@angular/core';

@Component({
  selector: 'app-inline-exercise',
  template: `
    <p>Paràgraf estilitzat en línia.</p>
  `,
  styles: [`
    p {
      color: blue;
      font-size: 18px;
    }
  `]
})
export class InlineExerciseComponent { }

Exercici 2: Estils externs

Crea un component que utilitzi un fitxer CSS extern per estilitzar un títol i un paràgraf.

Solució

Component

import { Component } from '@angular/core';

@Component({
  selector: 'app-external-exercise',
  template: `
    <h1>Títol estilitzat externament</h1>
    <p>Paràgraf estilitzat externament.</p>
  `,
  styleUrls: ['./external-exercise.component.css']
})
export class ExternalExerciseComponent { }

Fitxer CSS extern (external-exercise.component.css)

h1 {
  color: green;
}

p {
  font-size: 20px;
  color: red;
}

Resum

En aquesta secció, hem après com aplicar estils als components en Angular utilitzant estils en línia, fitxers CSS externs i pre-processadors CSS com SASS. També hem explorat el concepte d'encapsulament d'estils, que assegura que els estils d'un component no afectin altres components. Aquests coneixements són essencials per crear aplicacions Angular amb una aparença visual atractiva i coherent.

◄ Anterior
◄
Següent ►
►

Curs d'Angular 2+

Mòdul 1: Introducció a Angular

Mòdul 2: Conceptes bàsics de TypeScript

Mòdul 3: Components i plantilles

Mòdul 4: Directives i pipes

Mòdul 5: Serveis i injecció de dependències

Mòdul 6: Enrutament i navegació

Mòdul 7: Formularis en Angular

Mòdul 8: Client HTTP i observables

Mòdul 9: Gestió d'estat

Mòdul 10: Proves en Angular

Mòdul 11: Temes avançats

Mòdul 12: Desplegament i millors pràctiques

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats