DevGang
Авторизоваться

Руководство по стилизации Angular компонент

Фото Ханса ван Тола на Unsplash
Фото Ханса ван Тола на Unsplash

Angular - это популярный фреймворк, созданный Google. Как и другие популярные интерфейсные платформы, он использует архитектуру на основе компонентов для структурирования приложений.

В этой статье мы рассмотрим способы стилизации Angular компонент.

Использование styles в параметрах компоненты

Мы можем определить стили CSS в дополнение к содержимому шаблона в наших компонентах.

Один из способов сделать это - использовать свойство styles в нашем компоненте.

Например, мы можем написать это следующим образом:

app.component.ts
import { Component } from "@angular/core";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styles: [
    `
      h1 {
        font-size: 50px;
      }
    `
  ]
})
export class AppComponent {}
app.component.html

Foo

Затем мы должны увидеть Foo размером 50 пикселей на экране.

Стили в styles не наследуются никакими компонентами, вложенными в шаблон, или любым содержимым, проецируемым в компонент.

Мы можем использовать имена классов CSS и селекторы, которые имеют наибольшее значение в каждом компоненте.

Имена классов и селекторы не конфликтуют с именами классов и селекторами в других частях приложения.

Изменения в другом месте приложения не влияют на изменения в текущем компоненте.

Мы можем совмещать CSS-код каждого компонента с TypeScript и HTML-кодом компонента, что делает структуру проекта более чистой.

Кроме того, мы можем изменить или удалить код CSS без поиска по всему приложению, чтобы найти, где еще используется код.

Специальные селекторы

Angular приложения могут использовать специальные селекторы для стилей компонентов.

Они приходят к нам от селекторов для стилизации shadow DOM.

:host

Псевдоселектор :host добавляет стили к элементу в котором он размещен, а не элементы внутри шаблона компонента

Например, мы можем написать:

:host {
  display: block;
  border: 3px solid black;
}

Мы можем стилизовать стили хоста с помощью данного селектора, используя форму функции следующим образом:

:host(.active) {
  border-width: 1px;
}

:host-context

Мы можем использовать :host-context для применения стилей к некоторым условиям вне представления компонента.

Он работает так же, как селектор :host, который может использовать форму функции.

Он будет искать в компонентах-предках вплоть до корня документа для данного селектора.

Например, мы можем написать:

:host-context(.theme-light) h2 {
  background-color: #fff;
}

/deep/, >>> и ::ng-deep (Deprecated)

Мы можем использовать /deep/, >>> и ::ng-deep чтобы применить стили вне компонента, отключив инкапсуляцию компонент.

Например, мы можем написать:

:host /deep/ h3 {
  font-weight: bold;
}

Файлы стилей в метаданных компонента

Мы можем установить styleUrls, чтобы он указывал на файл таблицы стилей для стилизации компонента.

Например, мы можем написать следующее:

app.component.ts
import { Component } from "@angular/core";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {}
app.component.css
h1 {
  font-size: 50px;
}
app.component.html

Foo

В приведенном выше коде мы вставляем наши стили в app.component.css и указываем в styleUrls на этот файл в app.component.ts.

Мы можем указать более одного файла стиля в обоих styles и styleUrls.

Шаблонные встроенные стили

Мы можем добавить теги style в наши шаблоны, чтобы добавить шаблоны встроенных стилей.

Например, мы можем написать:

app.component.html

Foo

Код выше установит размер шрифта h1 на 50 пикселей.

Теги шаблона ссылки

Мы можем добавить теги ссылок в шаблоны для ссылки на другие стили.

Например, мы можем написать следующий код:

app.component.ts
import { Component } from "@angular/core";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html"
})
export class AppComponent {}
app.component.html

Foo

Мы видим, что мы удалили styleUrls из AppComponent и поместили тег link для ссылки на файл CSS.

Стили должны применяться из файла, на который мы ссылаемся в теге link.

CSS @imports

Мы можем импортировать файлы CSS со стандартным CSS правилом @import.

Например, мы можем написать следующий код:

foo.css
h1 {
  font-size: 50px;
}
app.component.css
@import url("./foo.css");
app.component.html

Foo

Внешние и глобальные файлы стилей

Мы можем добавить внешние глобальные стили в angular.json, чтобы включить их в сборку.

Чтобы зарегистрировать файл CSS, мы можем поместить в раздел styles, который по умолчанию установлен как styles.css.

Файлы стилей без CSS

Angular CLI поддерживает создание файлов стилей в SASS, LESS или Stylus.

Мы можем указать эти файлы в styleUrls с соответствующими расширениями (.scss.less или .styl) , как показано в следующем примере:

app.component.scss
h1  {
  font-size: 70px;
}
app.component.html

Foo

Управление инкапсуляцией

Мы можем контролировать, как работает инкапсуляция вида, установив параметр encapsulation в коде компонента.

Ниже приведены возможности инкапсуляции:

  1. ShadowDom инкапсуляция представления использует встроенную в браузер shadow реализацию DOM. Стили компонента включены в Shadow DOM
  2. Native инкапсуляция представления использует устаревшую версию встроенной shadow реализации DOM браузера
  3. Emulated это вариант по умолчанию. Он эмулирует поведение shadow DOM, предварительно обрабатывая и переименовывая код CSS, чтобы эффективно разместить CSS в представлении компонента.
  4. None означает, что Angular не устанавливает инкапсуляцию. Стили добавляются в глобальные стили.

Мы можем изменить настройку encapsulation следующим образом:

app.component.ts
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  encapsulation: ViewEncapsulation.Native
})
export class AppComponent {}

Источник:

#Angular
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

Оплатив хостинг 25$ в подарок вы получите 100$ на счет

Получить