Pages
Özel Öğeler (Custom Element)
Özel Öğeler Nedir?
Custom Element (Özel Öğeler) bileşeni, görselleştirme arayüzüne herhangi bir SVG'yi gömme esnekliğini sunar.
Bu öğe, bir görsel vurgu veya dinamik bir arka plan olarak kullanılabilir.
Çok yönlülüğü sayesinde kullanıcı arayüzünü özgün tasarımlar ve animasyonlarla zenginleştirmek için idealdir.
Kullanım alanları:
- Tasarımı zenginleştiren dinamik vurgular eklemek
- Kart veya arayüz bileşenlerine arka plan sağlamak
- Animasyonlu SVG öğeleriyle etkileşimli görseller entegre etmek
- SVG tabanlı dekoratif öğelerle genel görünümü iyileştirmek
SVG içeriği özelleştirilebilir ve doğrudan içinde animasyon uygulanabilir.
Kullanım Senaryoları
| Kullanım | Açıklama | Örnek Kullanım |
|---|---|---|
| Özel Arka Plan | Kartlar veya bileşenler için görsel arka plan sağlar | Dashboard'ta kart arka planı |
| Görsel Vurgu | Belirli alanları vurgulamak veya stil katmak için kullanılır | Buton üzerinde vurgulu SVG simge |
| Dinamik Animasyonlar | Etkileşimli ve hareketli içerik için SVG animasyonu içerir | Dönen dişli veya fan simgesi |
| Estetik Geliştirme | Arayüz tasarımını genel olarak daha profesyonel hale getirir | SVG ile kenarlık veya arka plan ekleme |
Özel Arka Plan
Esnek SVG arka plan, kartlar, butonlar veya bölümler için stil sağlar.
- Kullanım: Kart veya içerik kutularının arkasında kullanılır
- Hedef: Kart bileşenleri, konteynerler, sayfa bölümleri
SVG doğrudan gömülmeli ve yerleşime uyarlanmalıdır.
Görsel Vurgu
Dekoratif bir SVG vurgusu, kullanıcı arayüzü bileşenlerini öne çıkarmak için kullanılır.
- Kullanım: Buton, ikon veya başlıkta görsel vurgu eklemek
- Örnek: Buton üzerine dönen SVG simgesi
Etki yaratmak için sade ama güçlü bir yöntemdir.
Dinamik Animasyonlar
Animasyonlu SVG desteği sayesinde, arayüzde hareket ve geri bildirim sunar.
- Kullanım: Sistem aktifken bir fan veya dişlinin hareketini göstermek
- Örnek: Fan simgesi sistem çalışırken döner
Kullanıcı deneyimini artırmak ve canlılık kazandırmak için idealdir.
Estetik Geliştirme
Arayüz görünümünü iyileştirmek için kullanılan dekoratif SVG öğesi.
- Kullanım: İçerik çevresinde çerçeve veya arka plan olarak
- Örnek: Karmaşık SVG deseni ile bölgeyi görsel olarak ayırmak
Minimum çaba ile yüksek kalite hissi sağlar.
Özet
Custom Element, kullanıcı arayüzünün görsel yönünü geliştirmek için oldukça esnek bir bileşendir.
Arka plan, vurgu, animasyon veya stil artırımı için özelleştirilebilir.
| Kullanım | En Uygun Olduğu Yer | Notlar |
|---|---|---|
| Özel Arka Plan | Kartlar ve kapsayıcılar için görsel taban | Esnek ve uyarlanabilir |
| Görsel Vurgu | Arayüz öğelerine vurgu ve şıklık katmak | Hafif ama etkili tasarım |
| Dinamik Animasyonlar | Etkileşimli ve hareketli SVG öğeleri | Hareketli görsel geri bildirim |
| Estetik Geliştirme | Arayüzün genel stilini iyileştirmek | SVG ile profesyonel görünüm sağlar |