Angular Styling
Angular-ல் ஸ்டைலிங் பராமரிக்கக்கூடிய, தீம்-நட்பு UI-களுக்கு டெம்ப்ளேட்டுகளில் class/style bindings மற்றும் கூறு-ஸ்கோப் செய்யப்பட்ட CSS பயன்படுத்துகிறது.
ஸ்டைலிங் அடிப்படைகள்
- Bindings: Classes-க்கு [class.foo]/[ngClass] மற்றும் styles-க்கு [style.prop]/[ngStyle] பயன்படுத்தவும்.
- Themes: ஒளி/இருள் அல்லது accents மாற்ற CSS variables toggle செய்யவும்.
- Encapsulation: கூறு ஸ்டைல்கள் இயல்புநிலையில் ஸ்கோப் செய்யப்பட்டவை; host/theme ஸ்டைலிங்கிற்கு :host மற்றும் :host-context() பயன்படுத்தவும்.
ஸ்டைலிங் தொடரியல்
<div [class.active]="isActive" [ngClass]="{ big: big }" [style.color]="color" [ngStyle]="{ padding: pad + 'px' }">...</div>தொடர்புடையவை & உதவிகரமான குறிப்புகள்
- தொடர்புடையவை: Property/class/style bindings-க்கு Data Binding, directives apply செய்ய Templates, மற்றும் component-scoped styles-க்கு Components ஆகியவற்றை காணவும்.
- உதவிக்குறிப்பு: பராமரிப்பிற்காக inline styles-ஐ விட class bindings பயன்படுத்தவும்.
- Standalone components-ல் ngClass/ngStyle-க்கு CommonModule-ஐ இறக்குமதி செய்யவும்.
- திறம்பட தீம் toggle செய்ய CSS variables பயன்படுத்தவும்.
- Encapsulation: கூறு ஸ்டைல்கள் இயல்புநிலையில் ஸ்கோப் செய்யப்பட்டவை.
- கூறு root-ஐ ஸ்டைல் செய்ய :host பயன்படுத்தவும் மற்றும் parent theme-க்கு பதிலளிக்க :host-context(.theme-dark) பயன்படுத்தவும்.
அடிப்படை ஸ்டைலிங்
அடிப்படை ஸ்டைலிங் தொடரியல்
<div class="box"
[class.highlight]="highlight"
[ngClass]="{ big: big }"
[style.color]="color"
[style.borderColor]="color">...</div>ஒற்றை boolean toggle-களுக்கு [class.foo] பயன்படுத்தவும் மற்றும் பல classes apply செய்யும் போது [ngClass] பயன்படுத்தவும்.
மீண்டும் பயன்படுத்தக்கூடிய தோற்றத்திற்கு classes பயன்படுத்தவும்.
ஒரு முறை numeric அல்லது dynamic மதிப்புகளுக்கு [style.prop] பயன்படுத்தவும் (color, width, padding போன்றவை).
சிக்கலான ஸ்டைலிங்கை CSS classes-ல் வைத்திருங்கள்.
எடுத்துக்காட்டு
அடிப்படை ஸ்டைலிங் எடுத்துக்காட்டு
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);எடுத்துக்காட்டு விளக்கம்
- [class.highlight]: Boolean உடன் highlight class toggle செய்கிறது.
- [ngClass]: Object-லிருந்து பல classes apply செய்கிறது (எ.கா., { big: big }).
- [style.color]/[style.borderColor]: தற்போதைய color-க்கு style properties bind செய்கிறது.
- Toolbar: Buttons bindings demonstrate செய்ய கூறு state update செய்கின்றன.
குறிப்புகள்
- Bindings over literal class=: class="..." உடன் [ngClass] பயன்படுத்துவது classes overwrite செய்யலாம்.
- கணிக்கக்கூடிய toggle-களுக்கு [class.foo]/[ngClass] பயன்படுத்தவும்.
- Boolean values: [class.active]="'false'" போன்ற string booleans avoid செய்யவும்.
- Real booleans bind செய்யவும்: [class.active]="isActive".
- CommonModule இறக்குமதி செய்யவும்: ngClass/ngStyle standalone components-க்கு CommonModule-ல் உள்ளன.
டைனமிக் ஸ்டைலிங்
டைனமிக் ஸ்டைலிங் தொடரியல்
<div [ngClass]="{ fancy: fancy, rounded: rounded }"
[ngStyle]="{ color: color, padding: pad + 'px' }">...</div>Controls உடன் two-way binding ஸ்டைல்களை நேரடியாக மாற்ற உதவுகிறது.
[ngClass] booleans-அடிப்படையில் classes toggle செய்கிறது, மற்றும் [ngStyle] ஒரே நேரத்தில் பல style properties set செய்கிறது.
உதவிக்குறிப்பு
செயல்திறன் மற்றும் தெளிவுக்காக, style objects சிறியதாக மற்றும் கவனம் செலுத்தியதாக வைக்கவும்.
பெரிய காட்சி மாற்றங்களுக்கு classes favor செய்யவும்.
எடுத்துக்காட்டு
டைனமிக் ஸ்டைலிங் எடுத்துக்காட்டு
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);எடுத்துக்காட்டு விளக்கம்
- [(ngModel)]: Form controls-ஐ கூறு fields-க்கு two-way bind செய்கிறது.
- [ngClass]: Booleans-அடிப்படையில் fancy/rounded toggle செய்கிறது.
- [ngStyle]: கூறு state-லிருந்து பல style properties-ஐ ஒரே நேரத்தில் set செய்கிறது.
குறிப்பு
ngStyle சிறியதாக வைக்கவும்: பெரிய inline style objects பராமரிப்புக்கு கடினமாக இருக்கும்.
பெரும்பாலான ஸ்டைலிங்கை CSS classes-ல் நகர்த்தவும் மற்றும் dynamic bits-ஐ மட்டும் bind செய்யவும்.
Encapsulation (ஒடுக்கம்)
கூறு ஸ்டைல்கள் இயல்புநிலையில் அவற்றின் host உறுப்புக்கு ஸ்கோப் செய்யப்பட்டவை.
Host மற்றும் தீம்-உணர்வு ஸ்டைலிங்கிற்கு :host மற்றும் :host-context() பயன்படுத்தவும்.
முறைகள்
இயல்புநிலை Emulated ஆகும். குளோபல் ஸ்டைல்களுக்கு (மூன்றாம் தரப்பு overrides போன்றவை) None-ஐ மிதமாக பயன்படுத்தவும். ShadowDom ஸ்டைல்களை முழுமையாக தனிமைப்படுத்துகிறது.
Host ஸ்டைலிங்
:host wrapper tags தேர்ந்தெடுப்பதை விட பயன்படுத்தவும். வகைகளுக்கு (எ.கா., :host(.dense)) host-ல் classes உடன் இணைக்கவும்.
தீம் சூழல்
குளோபல் CSS கசிவு இல்லாமல் parent themes-க்கு ஏற்ப adapt செய்ய :host-context(.theme-dark) பயன்படுத்தவும்.
ஆழமான selectors-ஐத் தவிர்க்கவும்
கூறுகளுக்குள் .parent .child சங்கிலிகளை நம்ப வேண்டாம். அதற்கு பதிலாக CSS variables மூலம் tokens வெளிப்படுத்தவும்.
CSS Variables உடன் தீம்
CSS Variables உடன் தீம் தொடரியல்
<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 variables நேரத்தில் மாற்றக்கூடிய பெயரிடப்பட்ட வண்ண தொட்டிகளாகும்.
தொட்டிகளை மாற்ற ஒரு class toggle செய்யவும் (ஒளி/இருள்) மற்றும் உடனடி தீம் மாற்றங்களுக்கு accent variable bind செய்யவும்.
கோடு மாற்றங்கள் இல்லாமல் கூறுகள் தீம் மாற்றங்களுக்கு பதிலளிக்க நிறங்கள், இடைவெளி, மற்றும் நிழல்களுக்கு variables பயன்படுத்தவும்.
எடுத்துக்காட்டு
CSS Variables உடன் தீம் எடுத்துக்காட்டு
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);எடுத்துக்காட்டு விளக்கம்
- தீம் tokens: CSS variables (எ.கா., --bg, --fg, --accent) தீம் define செய்கின்றன.
- Toggle: Toolbar-ல் theme-dark add செய்வது variable values swap செய்கிறது.
- [style.--accent]: Custom CSS property bind செய்கிறது; box var(--accent) மூலம் அதை read செய்கிறது.
குறிப்புகள்
- நிறங்களை கடினமாக குறியிட வேண்டாம்: Literal colors bind செய்வது (எ.கா., [style.color]="'red'") theming-உடன் fight செய்யும்.
- CSS variables மற்றும் classes பயன்படுத்தவும்.
- Variables-ஐ கவனமாக ஸ்கோப் செய்யவும்: conflicts avoid செய்ய தீம் variables கூறு host அல்லது top-level theme wrapper-ல் வைக்கவும்.
- பயனர் விருப்பத்தை மதிக்கவும்: அறிவார்ந்த default set செய்ய @media (prefers-color-scheme: dark) பயன்படுத்தவும், பின்னர் toggling அனுமதிக்கவும்.
- Design tokens: Semantic tokens define செய்யவும் (எ.கா., --surface, --text, --accent) மற்றும் consistent theming-க்கு components-ல் அவற்றை reference செய்யவும்.