Color Picker elementi, kullanıcıların bir renk paleti üzerinden kolay ve hızlı bir şekilde renk seçmesini sağlayan görsel bir input elementidir. Kullanıcılar, sunulan renk seçenekleri arasından seçim yaparak istedikleri renk değerini belirleyebilir.
Color Picker elementi; tasarım özelleştirmeleri, tema ayarları, etiketleme, durum renklendirme ve renk bazlı tercihler gibi görsel karar gerektiren senaryolarda kullanılır. Görsel geri bildirim sunması sayesinde kullanıcılar, seçtikleri rengi anında görerek daha bilinçli seçim yapabilir.
Color Picker elementi yalnızca web uygulamalarında desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Tema ve arayüz renk ayarları
Etiket, kategori veya durum renklendirmeleri
Grafik ve görsel bileşen renk seçimleri
Kullanıcıya özel tasarım ve kişiselleştirme ekranları
Renk bazlı filtreleme veya işaretleme senaryoları
2. Temel Özellikler
Görsel renk paleti üzerinden seçim: Kullanıcılar, sunulan renk paleti aracılığıyla renkleri sezgisel olarak seçebilir.
Anlık renk önizlemesi: Seçilen renk, kullanıcıya eş zamanlı olarak gösterilir ve görsel geri bildirim sağlar.
Standart renk değerleriyle çalışma: Seçilen renk değeri, uygulama içerisinde kullanılmak üzere yapılandırılabilir.
2.1. Color Picker Elementi Özellikleri
Renk Paleti Görüntüleme: Renk spektrumu veya palet üzerinden seçim yapabilirsiniz.
Manuel Renk Girişi: Kullanıcılar renk kodlarını manuel olarak girebilir (örn. #FF5733).
Ton ve Opaklık Seçimi: Ton (hue) ve opaklık (opacity) ayarlarını yapabilirsiniz.
Format Desteği: HEX, RGB, RGBA ve HSL gibi farklı formatları destekler.
Value: Statik bir değer ekleyebilir veya Symbol Picker aracılığıyla başka bir elementin içeriğini ya da aksiyon sonucunu dinamik olarak gösterebilirsiniz.
2.2. Elemente Eklenebilen Aksiyonlar
Color Picker elementi, kullanıcıların seçtiği renge bağlı olarak olay (event) bazlı aksiyonlar tetiklenmesini destekler. Aksiyonlar, elementin kendisine değil; renk seçimi değiştiğinde tetiklenen event’e bağlanır.
Color Picker elementi için aksiyonlar, Properties > Add Action alanı üzerinden aşağıdaki event aracılığıyla tanımlanabilir.
Desteklenen Aksiyon Tetikleyicisi
onChange: Kullanıcı Color Picker üzerinden seçilen rengi her değiştirdiğinde tetiklenir.
Kullanım amaçları:
Tema veya arayüz renklerini anlık olarak güncellemek
Seçilen renge bağlı görsel öğeleri (buton, kart, grafik vb.) değiştirmek
Renk bazlı filtreleme veya etiketleme işlemlerini tetiklemek
API veya workflow üzerinden renk bilgisini kaydetmek
Örnek senaryo: Kullanıcı tema rengini değiştirdiğinde, uygulamanın buton ve başlık renkleri anında güncellenir.
Aksiyonlara İlişkin Temel Kurallar
Color Picker elementi yalnızca onChange event’i üzerinden aksiyon tetikleyebilir.
Renk seçimi her değiştiğinde onChange event’i çalışır.
Aynı onChange event’i için birden fazla aksiyon tanımlanabilir.
Color Picker elementi, özellikle tema yönetimi ve görsel özelleştirme senaryolarında aksiyonlarla birlikte kullanıldığında güçlü ve sezgisel bir kullanıcı deneyimi sunar.
3. Color Picker Elementi Nasıl Kullanılır?
Bu bölümde Color Picker elementinin uçtan uca kullanımını örnek senaryo üzerinden ele alacağız.
Senaryo: Panel Renklerini Dinamik Olarak Güncelleme
Kullanıcı, arayüzde yer alan panelin görünümünü özelleştirmek için Color Picker elementini kullanır. Color Picker üzerinden seçilen renk, panelin arka plan rengini ve panel içerisinde bulunan metinlerin rengini dinamik olarak günceller. Böylece kullanıcı seçtiği rengin arayüz üzerindeki etkisini anlık olarak görebilir.
Senaryoda:
Ekranın üst bölümünde Arka Plan Rengi ve Yazı Rengi olmak üzere iki adet Color Picker elementi bulunur. Kullanıcı Arka Plan Rengi alanından bir renk seçtiğinde, sayfada yer alan Panel elementinin arka plan rengi seçilen değere göre güncellenir.
Benzer şekilde kullanıcı Yazı Rengi alanından bir renk seçtiğinde panel içerisinde bulunan başlık ve açıklama metinlerinin renkleri de seçilen değere göre dinamik olarak değiştirilir. Bu sayede kullanıcı panelin arka plan ve yazı renklerini ayrı ayrı belirleyerek arayüz görünümünü kolayca özelleştirebilir.
Panel içerisinde kullanıcıya örnek içerik göstermek amacıyla bir başlık ve açıklama metni bulunur.
Adım 1 - Color Picker Elementini Ekleme ve Aksiyon Tanımlama
Başlangıçta anasayfada:
Sol yan panelden Elements > Container > HorizontalStack elementini sayfaya sürükleyip bırakın.
Yazıyı Label > Properties > Value > “Arka Plan Rengi:” olarak güncelleyin.
Label yanına Horizontal Stack içerisine Elements > Select Input > ColorPicker elementini sürükleyip bırakın.
En dışta bulunan Row elementini seçin ve Duplicate seçeneğine basın.
Kopya üzerinde bulunan Label > Value alanını Yazı Rengi: olarak güncelleyin.
Sayfaya Elements > Container > Panel elementini sürükleyip bırakın.
Arka plan rengini dinamik değiştirebilmek için Panel > Properties > DynamicBackGroundColor > Components > ColorPicker1 > value tanımlamasını yapın.
Yazı rengini dinamik değiştirebilmek için Panel > Properties > DynamicFontColor > Components > ColorPicker2 > value tanımlamasını yapın.
Panel elementi boyutlarını Styling > Layout > Style > Width > 50 % ve Height > 25 vh olarak ayarlayın.
Panel içerisine Elements > Container > VerticalStack elementini sürükleyip bırakın.
Hizalamayı VerticalStack > Styling > Layout > Align alanında ortaya hizalayın.
Vertical Stack içerisine iki tane Elements > Display > Label elementini sürükleyip bırakın.
Label elementlerini Styling > Layout > Align alanında ortaya hizalayın.
Arka plan Color Picker elementinde renk seçildiğinde güncellenebilmesi için ColorPicker1 > Properties > onChange > Set Value Of aksiyonunu ekleyin.
Set Value Of içerisinde değiştirilecek component’i Panel1, value olarak ise Components > ColorPicker1 > value değerini seçin.
Yazı rengi Color Picker elementinde renk seçildiğinde güncellenebilmesi için ColorPicker2 > Properties > onChange > Set Value Of aksiyonunu ekleyin.
Set Value Of içerisinde değiştirilecek Component’i Panel1, value olarak ise Components > ColorPicker2 > value değerini seçin.
Preview:
Bu örnekte kullanıcı arayüzde yer alan panelin görünümünü özelleştirmek için Color Picker elementlerini kullanır. Ekranın üst kısmında bulunan Arka Plan Rengi ve Yazı Rengi seçim alanları sayesinde kullanıcı panelin arka plan rengini ve panel içerisindeki metinlerin rengini ayrı ayrı belirleyebilir.
Kullanıcı bir renk seçtiğinde, panelin arka planı ve panel içerisinde bulunan başlık ile açıklama metinleri seçilen değerlere göre anlık olarak güncellenir. Böylece kullanıcı farklı renk kombinasyonlarını deneyerek panel görünümünü kolayca kişiselleştirebilir.
4. Ortak Özellikler (Properties)
Color Picker elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:
Seçilen rengi görsel olarak destekleyin. Renk önizlemesi veya seçilen rengin uygulama üzerinde anında görünmesi, kullanıcı farkındalığını artırır.
onChange event’ini performans açısından dikkatli kullanın. Renk her değiştiğinde tetiklendiği için, yoğun görsel güncellemeler bu event’e bağlanırken dikkatli olunmalıdır.
Varsayılan (default) renk atamasını bilinçli yapın. Kullanıcıyı yönlendirmemek için gerekmedikçe varsayılan bir renk seçili gelmemesi önerilir.
6. Kısıtlamalar
Color Picker elementi yalnızca web uygulamalarında desteklenir.
Aksiyonlar yalnızca onChange event’i üzerinden tetiklenebilir.
