Dinamik Sınıflar ve Stiller
Sınıfları ve stilleri reaktif olarak bağlayın.
Dinamik Sınıflar ve Stiller, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.
Şablonlarda Dinamik Biçimlendirme
Angular, kullanıcı arayüzünün veriler değiştikçe otomatik olarak güncellenmesi için sınıfları ve satır içi stilleri bileşen durumuna bağlamanıza olanak tanır.
Tek Sınıf Bağlaması
Bir CSS sınıfını boole ifadesine göre açıp kapatmak için [class.name] kullanın.
<div [class.active]="isActive">Item</div>
// component
isActive = true;ngClass ile Birden Çok Sınıf
ngClass, sınıf adlarını boole değerleriyle eşleyen bir nesne kullanarak aynı anda birkaç sınıf uygular.
<div [ngClass]="{ active: isActive, disabled: isDisabled }">
Item
</div>Diziler ve Dizelerle ngClass
ngClass ayrıca sınıf adlarından oluşan bir dizeyi veya bir diziyi kabul eder.
<div [ngClass]="'box highlighted'"></div>
<div [ngClass]="['box', 'rounded']"></div>Tek Stil Bağlaması
Tek bir satır içi CSS özelliğini bir değere bağlamak için [style.property] kullanın.
<p [style.color]="textColor">Hello</p>
// component
textColor = "tomato";Birimlerle Stil Bağlamaları
Sayısal değerleri piksel veya yüzde gibi birimlerle bağlamak için birim son eki ekleyin.
<div [style.width.px]="boxWidth"></div>
<div [style.height.%]="boxHeight"></div>
// component
boxWidth = 200;
boxHeight = 50;ngStyle ile Birden Çok Stil
ngStyle, bir nesneden aynı anda birkaç satır içi stil ayarlar.
<div [ngStyle]="{ color: textColor, 'font-size.px': size }">
Styled
</div>Çakışmada Sınıf Bağlaması Önceliklidir
Statik ve bağlı sınıflar çakıştığında Angular bunları birleştirir; bağlama, statik sınıfları kaldırmadan dinamik sınıfın bulunup bulunmayacağını denetler.
<div class="card" [class.active]="isActive"></div>
<!-- card always present; active toggles -->Duruma Tepki Verme
Bağlamalar değişiklik algılama sırasında yeniden değerlendirilir; bu nedenle bir bileşen özelliğini güncellemek öğeyi anında yeniden biçimlendirir.
toggle() {
this.isActive = !this.isActive;
}Sınıf mı Stil mi Seçilmeli
Bakımı kolaylaştırmak için CSS kurallarıyla sınıf bağlamalarını tercih edin; doğrudan stil bağlamalarını yalnızca hesaplanan genişlik veya renk gibi gerçekten dinamik değerler için kullanın.
Sinyallerle
Sınıf ve stil bağlamaları sinyallerle de çalışır; şablon ifadesinde sinyali çağırmanız yeterlidir.
<div [class.active]="isActive()"></div>
// component
isActive = signal(true);Hızlı Kontrol
Dinamik sınıflar ve stillerle ilgili anlayışınızı sınayın.
Özet
[class.name] ile tek bir sınıfı, ngClass ile birden çok sınıfı açıp kapatın; [style.prop] (isteğe bağlı birimle) ile tek bir stil, ngStyle ile birden çok stil ayarlayın. Bağlamalar, sinyaller de dâhil olmak üzere, duruma otomatik olarak tepki verir.
Sıkça Sorulan Sorular
“Dinamik Sınıflar ve Stiller” dersi ücretsiz mi?
Evet — “Dinamik Sınıflar ve Stiller” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.
“Dinamik Sınıflar ve Stiller” dersinde ne öğreneceğim?
Sınıfları ve stilleri reaktif olarak bağlayın. Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Angular Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Dinamik Sınıflar ve Stiller” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Bileşen Kapsamlı Stiller
- Görünüm Yalıtımı Modları
- Host ve Host-Context Biçimlendirmesi
- Dinamik Sınıflar ve Stiller