Angular uslublash

Angular-da uslublar qo‘llab-quvvatlanadigan, mavzuga mos foydalanuvchi interfeyslari uchun shablonlarda class/uslub bog‘lashlari va komponentli CSS-dan foydalanadi.

Stil berish asoslari

Bog‘lash: classlar uchun [class.foo]/[ngClass] va uslublar uchun [style.prop]/[ngStyle] dan foydalaning.
Mavzular: Yorug‘lik/qorong‘i yoki aksanlarni almashtirish uchun CSS o‘zgaruvchilarini almashtiring.
Inkapsulyatsiya: component uslublari sukut bo‘yicha qamrab olinadi; xost/mavzuni uslublash uchun :host va :host-context() dan foydalaning.

<div [class.active]="isActive" [ngClass]="{ big: big }" [style.color]="color" [ngStyle]="{ padding: pad + 'px' }">...</div>

Tegishli: Xususiyat/class/uslub bog‘lashlari uchun Ma’lumotlarni ulash, direktivani qo‘llash uchun shablonlar va componentlar ko‘lamli uslublar uchun Komponentlarga qarang.

Maslahat: Saqlash uchun inline uslublar ustida class bog‘lashlaridan foydalaning.

ngClass/ngStyle uchun CommonModule-ni mustaqil komponentlarga import qiling.

Mavzuni almashtirishni samarali amalga oshirish uchun CSS o‘zgaruvchilaridan foydalaning.

Inkapsulyatsiya: component uslublari sukut bo‘yicha qamrab olinadi.

component ildizini uslublash uchun :host va asosiy oqimga munosabat bildirish uchun :host-context(.theme-dark) dan foydalaning.

Asosiy uslublar

<div class="box"
  [class.highlight]="highlight"
  [ngClass]="{ big: big }"
  [style.color]="color"
  [style.borderColor]="color">...</div>

Yagona mantiqiy almashtirishlar uchun [class.foo] va bir nechta classlarni qo‘llashda [ngClass] dan foydalaning.

Qayta foydalanish mumkin bo‘lgan ko‘rinish va his qilish uchun classlardan foydalaning.

Bir martalik raqamli yoki dinamik qiymatlar (masalan, rang, kenglik, to‘ldirish) uchun [style.prop] dan foydalaning.

CSS sinflarida murakkab uslubni saqlang.

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  styles: [`
    .box { padding: 12px; border: 2px solid #ccc; margin-top: 8px; border-radius: 6px; }
    .highlight { background: #fffa8b; }
    .big { font-size: 24px; }
    .toolbar button { margin-right: 6px; }
  `],
  template: `
    <h3>Styling</h3>
    <div class="toolbar">
      <button (click)="toggleHighlight()">Toggle Highlight</button>
      <button (click)="toggleBig()">Toggle Big</button>
      <button (click)="setColor('crimson')">Crimson</button>
      <button (click)="setColor('seagreen')">Green</button>
      <button (click)="setColor('royalblue')">Blue</button>
    </div>

    <div class="box"
      [class.highlight]="highlight"
      [ngClass]="{ big: big }"
      [style.color]="color"
      [style.borderColor]="color">
      Styled box
    </div>
  `
})
export class App {
  highlight = false;
  big = false;
  color = 'royalblue';

  toggleHighlight() { this.highlight = !this.highlight; }
  toggleBig() { this.big = !this.big; }
  setColor(c: string) { this.color = c; }
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

[class.highlight]: Ajratish classini mantiqiy bilan almashtiradi.
[ngClass]: Obyektdan bir nechta classlarni qo‘llaydi (masalan, { big: big }).
[style.color]/[style.borderColor]: Uslub xususiyatlarini joriy rangga bog‘lash.
Asboblar paneli: Tugmalar ulanishlarni namoyish qilish uchun component holatini yangilaydi.

Literal class orqali bog‘lanishlar=: [ngClass] bilan birga class="..." dan foydalanish classlarni qayta yozishi mumkin.

Bashoratli almashtirishlar uchun [class.foo]/[ngClass] dan foydalaning.

Mantiqiy qiymatlar: [class.active]="'false'" kabi mantiqiy stringlardan saqlaning.

Haqiqiy mantiqiy qiymatlarni bog‘lang: [class.active]="isActive".

CommonModule-ni import qilish: ngClass/ngStyle mustaqil componentlar uchun CommonModule-da yashaydi.

Dinamik uslublar

<div [ngClass]="{ fancy: fancy, rounded: rounded }"
     [ngStyle]="{ color: color, padding: pad + 'px' }">...</div>

Boshqaruv elementlari bilan ikki tomonlama ulanish uslublarni jonli ravishda o‘zgartirish imkonini beradi.

[ngClass] mantiqiy qiymatlarga asoslangan classlarni almashtiradi va [ngStyle] bir vaqtning o‘zida bir nechta uslub xususiyatlarini o‘rnatadi.

Maslahat: Ishlash va ravshanlik uchun uslub obyektlarini kichik va diqqat markazida saqlang.

Kattaroq vizual o‘zgarishlar uchun classlarni afzal ko‘ring.

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule],
  styles: [`
    .box { border: 2px solid #ccc; margin-top: 12px; border-radius: 6px; transition: all .15s ease-in-out; }
    .fancy { box-shadow: 0 2px 8px rgba(0,0,0,.15); background: #f9fbff; }
    .rounded { border-radius: 14px; }
    .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    .toolbar label { display: inline-flex; align-items: center; gap: 6px; }
  `],
  template: `
    <h3>Dynamic Styling</h3>

    <div class="toolbar">
      <label><input type="checkbox" [(ngModel)]="fancy"> Fancy</label>
      <label><input type="checkbox" [(ngModel)]="rounded"> Rounded</label>
      <label>Color <input type="color" [(ngModel)]="color"></label>
      <label>Padding <input type="range" min="0" max="40" [(ngModel)]="padding"> {{ padding }}px</label>
      <label>Font Size <input type="range" min="12" max="36" [(ngModel)]="fontSize"> {{ fontSize }}px</label>
    </div>

    <div class="box"
      [ngClass]="{ fancy: fancy, rounded: rounded }"
      [ngStyle]="{
        color: color,
        borderColor: color,
        padding: padding + 'px',
        fontSize: fontSize + 'px'
      }">
      Styled box
    </div>
  `
})
export class App {
  fancy = true;
  rounded = false;
  color = '#4169e1';
  padding = 12;
  fontSize = 18;
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

[(ngModel)]: Ikki tomonlama shakl boshqaruvlarini component maydonlariga bog‘laydi.
[ngClass]: Toggles fancy/rounded based on booleans.
[ngStyle]: component holatidan bir vaqtning o‘zida bir nechta uslub xususiyatlarini o‘rnatadi.

ngStyle-ni kichik tuting: Inline uslubidagi katta obyektlarni saqlash qiyin bo‘ladi.

Ko‘pgina uslublarni CSS sinflariga o‘tkazing va faqat dinamik bitlarni bog‘lang.

Inkapsulyatsiya

:host { display: block; }
:host(.dense) { padding: 8px; }
:host-context(.theme-dark) { color: #eee; }

component uslublari sukut bo‘yicha ularning xost elementi uchun qamrovlanadi.

Xost va mavzudan xabardor uslublar uchun :host va :host-context() dan foydalaning.

Rejimlar: Standart Emulated .

None’dan global stillar uchun (masalan, uchinchi tomon stillarini qayta yozishda) ehtiyotkorlik bilan foydalaning.

ShadowDom uslublarni to‘liq izolyatsiya qiladi.

Xost uslubi: o‘ram teglarini tanlashda :host dan foydalaning.

Variantlar uchun xostdagi classlar bilan birlashtiring (masalan, :host(.dense) ).

Mavzu konteksti: Global CSS-ni sizdirmasdan ota-onalar mavzulariga moslashish uchun :host-context(.theme-dark) dan foydalaning.

Chuqur selektorlardan saqlaning: componentlar ichidagi .parent .child zanjirlariga ishonmang.

Buning o‘rniga tokenlarni CSS o‘zgaruvchilari orqali ko‘rsating.

CSS o‘zgaruvchilari bilan mavzu

<div [class.theme-dark]="dark" class="toolbar">
  <button (click)="dark = !dark">Toggle {{ dark ? 'Light' : 'Dark' }}</button>
  <button (click)="setAccent('#e91e63')">Pink</button>
  <button (click)="setAccent('#00b894')">Green</button>
  <button (click)="setAccent('#ff9800')">Orange</button>
  <span class="swatch" [style.background]="accent"></span>
</div>

<div class="box" [style.--accent]="accent">
  This box follows the current theme and accent color.
</div>

CSS o‘zgaruvchilari ish vaqtida almashtirishingiz mumkin bo‘lgan bo‘yoq paqirlari deb ataladi.

Chelaklarni almashtirish uchun classni almashtiring (yorug‘lik/qorong‘i) va mavzuni tezkor o‘zgartirish uchun urg‘u o‘zgaruvchisini bog‘lang.

Ranglar, intervallar va soyalar uchun o‘zgaruvchilardan foydalaning, shunda componentlar mavzu o‘zgarishlariga kodni o‘zgartirmasdan javob bera oladi.

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  styles: [`
    :host { --bg: #ffffff; --fg: #222; --accent: #4169e1; }
    .theme-dark { --bg: #121212; --fg: #eaeaea; --accent: #4f8cff; }
    .toolbar { display: flex; gap: 8px; align-items: center; }
    .swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #ccc; display: inline-block; vertical-align: middle; }
    .box { margin-top: 10px; padding: 14px; border-radius: 8px; border: 2px solid var(--accent); background: var(--bg); color: var(--fg); transition: all .15s ease-in-out; }
    button { padding: 6px 10px; }
  `],
  template: `
    <h3>Theme with CSS Variables</h3>
    <div [class.theme-dark]="dark" class="toolbar">
      <button (click)="dark = !dark">Toggle {{ dark ? 'Light' : 'Dark' }}</button>
      <button (click)="setAccent('#e91e63')">Pink</button>
      <button (click)="setAccent('#00b894')">Green</button>
      <button (click)="setAccent('#ff9800')">Orange</button>
      <span class="swatch" [style.background]="accent"></span>
    </div>

    <div class="box" [style.--accent]="accent">
      This box follows the current theme and accent color.
    </div>
  `
})
export class App {
  dark = false;
  accent = '#4169e1';

  setAccent(c: string) { this.accent = c; }
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

Mavzu belgilari: CSS o‘zgaruvchilari (masalan, --bg, --fg, --accent) mavzuni belgilaydi.
Almashtirish: asboblar paneliga theme-dark qo‘shilishi o‘zgaruvchan qiymatlarni almashtiradi.
[style.--accent]: Maxsus CSS xususiyatini bog‘laydi; quti uni var(--accent) orqali o‘qiydi.

Don’t hard-code colors: Binding literal colors (e.g., [style.color]="'red'") fights theming.

CSS o‘zgaruvchilari va sinflaridan foydalaning.

O‘zgaruvchilar doirasi diqqat bilan: Mojarolarni oldini olish uchun mavzu o‘zgaruvchilarini component xostida yoki yuqori darajadagi mavzu o‘ramida saqlang.

Foydalanuvchining afzalliklarini hurmat qiling: Mantiqiy standartni o‘rnatish uchun @media (prefers-color-scheme: dark) dan foydalaning, so‘ngra almashtirishga ruxsat bering.

Dizayn tokenlari: Semantik tokenlarni aniqlang (masalan, --surface, --text, --accent) va izchil mavzular uchun komponentlarda ularga havola qiling.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish