Руководство по стилизации Angular компонент
Angular - это популярный фреймворк, созданный Google. Как и другие популярные интерфейсные платформы, он использует архитектуру на основе компонентов для структурирования приложений.
В этой статье мы рассмотрим способы стилизации Angular компонент.
Использование styles в параметрах компоненты
Мы можем определить стили CSS в дополнение к содержимому шаблона в наших компонентах.
Один из способов сделать это - использовать свойство styles в нашем компоненте.
Например, мы можем написать это следующим образом:
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styles: [
`
h1 {
font-size: 50px;
}
`
]
})
export class AppComponent {}
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, чтобы он указывал на файл таблицы стилей для стилизации компонента.
Например, мы можем написать следующее:
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {}
h1 {
font-size: 50px;
}
Foo
В приведенном выше коде мы вставляем наши стили в app.component.css и указываем в styleUrls на этот файл в app.component.ts.
Мы можем указать более одного файла стиля в обоих styles и styleUrls.
Шаблонные встроенные стили
Мы можем добавить теги style в наши шаблоны, чтобы добавить шаблоны встроенных стилей.
Например, мы можем написать:
Foo
Код выше установит размер шрифта h1 на 50 пикселей.
Теги шаблона ссылки
Мы можем добавить теги ссылок в шаблоны для ссылки на другие стили.
Например, мы можем написать следующий код:
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html"
})
export class AppComponent {}
Foo
Мы видим, что мы удалили styleUrls из AppComponent и поместили тег link для ссылки на файл CSS.
Стили должны применяться из файла, на который мы ссылаемся в теге link.
CSS @imports
Мы можем импортировать файлы CSS со стандартным CSS правилом @import.
Например, мы можем написать следующий код:
h1 {
font-size: 50px;
}
@import url("./foo.css");
Foo
Внешние и глобальные файлы стилей
Мы можем добавить внешние глобальные стили в angular.json, чтобы включить их в сборку.
Чтобы зарегистрировать файл CSS, мы можем поместить в раздел styles, который по умолчанию установлен как styles.css.
Файлы стилей без CSS
Angular CLI поддерживает создание файлов стилей в SASS, LESS или Stylus.
Мы можем указать эти файлы в styleUrls с соответствующими расширениями (.scss, .less или .styl) , как показано в следующем примере:
h1 {
font-size: 70px;
}
Foo
Управление инкапсуляцией
Мы можем контролировать, как работает инкапсуляция вида, установив параметр encapsulation в коде компонента.
Ниже приведены возможности инкапсуляции:
ShadowDomинкапсуляция представления использует встроенную в браузер shadow реализацию DOM. Стили компонента включены в Shadow DOMNativeинкапсуляция представления использует устаревшую версию встроенной shadow реализации DOM браузераEmulatedэто вариант по умолчанию. Он эмулирует поведение shadow DOM, предварительно обрабатывая и переименовывая код CSS, чтобы эффективно разместить CSS в представлении компонента.Noneозначает, что Angular не устанавливает инкапсуляцию. Стили добавляются в глобальные стили.
Мы можем изменить настройку encapsulation следующим образом:
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
encapsulation: ViewEncapsulation.Native
})
export class AppComponent {}
