Prusa WiseCp Tema - Dokümantasyon - Düğme (Button) Bileşeni

Düğme (Button) Bileşeni Nedir?

Web sayfasındaki düğmeler herhangi bir eylem gerçekleştirmek için kullanılırlar. İyi tasarlanmış, iyi görünümlü bir düğme, web tasarımında her zaman çok önemlidir. Düğmeler, web sayfalarında sayfa yönlendirme, etkileşim ve veri akışının anahtarını tutarlar. FonPageBuilder Düğme (Button) Bileşeni, web sayfalarınıza hızlı bir şekilde bir veya daha fazla düğme eklemek için özenle geliştirilmiştir. Sadece bazı düğme stil özelliklerini eklemeniz ve özelleştirmeniz yeterli.

Düğme (Button) Bileşenini sayfanıza ekledikten sonra Bileşen Düzenleme Araçlarındaki Bileşeni Düzenle ögesine tıkladığınızda açılan Bileşen Düzenleme Penceresindeki ögelerin detaylarına aşağıda erişebilirsiniz.

Genel Ayarlar

Bileşen Adı
: Sitenizdeki her bir dil için bileşeninize bir isim verin. Bu isim bileşene göre değişmekle birlikte genelde sadece Yönetici bilgilendirmesi içindir. Yönetim Paneli FonPageBuilder sayfa düzenleme ekranınızdaki satır ve sütunlarda bileşen bu isimle gösterilecektir. Böylece yerleşim düzeninizdeki bileşeni doğru ve kolayca teşhis edebilir ve seçebilirsiniz.

Bileşen Seçenekleri

Düğme (Button) Bileşeni içerisindeki Düğme - Ögeler başlığının karşısındaki Ekle düğmesine tıklayarak birden fazla Düğme Ögesi ekleyebilirsiniz. İlk ögenin bir kopyası alınarak çoğaltılır. Eklediğiniz her bir ögenin başlığının karşısındaki simgeler aracılığıyla ögeyi; düzenleyebilir, sıralayabilir ve silebililirsiniz.

Düğme Tekil Öge Düzenleme Penceresi:

Düğme Metni
: Sitenizdeki aktif her bir dil için Düğme Metni olarak kullanmak istediğiniz metni girin.
Düğme Metni Font Özellikleri
: Düğme metninin yazıtipi ayarlarını burada ayarlayabilirsiniz. Boş bırakılabilir. Boş bırakıldığında varsayılan düğme yazı ayarları kullanılır.
- Yazı Boyutu: Düğme metni yazı boyutunu girin. font-size
- Satır Yüksekliği: Düğme metni satır yüksekliğini girin. line-height
- Harf Mesafesi: Düğme metni harflerinin araasındaki mesafeyi girin. letter-spacing
- Yazı Stili:
  - : Altı Çizili - text-decoration: underline
  - : Eğik (Italic) - font-style: italic
  - : Büyük Harf - text-transform: uppercase
- Yazı Hizalama:
  - : Sola Hizalanmış - text-align: left
  - : Ortalanmış - text-align: center
  - : Sağa Hizalanmış - text-alin: right
- Yazı Genişliği: Başlık metninin kalınlığını seçin - font-weight
Link
: Sitenizdeki aktif her bir dil için düğmeye tıklandığında kullanıcıların yönlendirilmesini istediğiniz url adresini girin.
Link Hedefi
: Düğmeye tıklandığında düğme linkinin aynı pencerede mi yoksa yeni pencerede mi açılacağını belirtin.
Düğme Tipi
: Düğme gösterim renk tipini seçin.
1. Varsayılan: Tema CSS dosyanızdaki varsayılan düğme stilini kullanır. btn-default
2. Birincil: Tema CSS dosyanızdaki birincil düğme stilini kullanır. btn-primary
3. İkincil: Tema CSS dosyanızdaki ikincil düğme stilini kullanır. btn-secondary
4. Başarılı: Tema CSS dosyanızdaki başarılı düğme stilini kullanır. btn-succcess
5. Bilgi: Tema CSS dosyanızdaki bilgi düğme stilini kullanır. btn-info
6. Uyarı: Tema CSS dosyanızdaki uyarı düğme stilini kullanır. btn-warning
7. Tehlike: Tema CSS dosyanızdaki tehlike düğme stilini kullanır. btn-danger
8. Koyu: Tema CSS dosyanızdaki koyu (karanlık) düğme stilini kullanır. btn-dark
9. Açık: Tema CSS dosyanızdaki açık (aydınlık) düğme stilini kullanır. btn-light
10. Link: Tema CSS dosyanızdaki link düğme stilini kullanır. btn-link
11. Özel: Düğme normal ve hover durumları için renklerini özel olarak seçebilirsiniz. btn-custom
Düğme Stili
: Düğme gösterim stilini seçin.
1. Varsayılan: Düz (Flat) Gösterim
2. Gradient: Gradient (Renk Geçişli) Gösterim
Düğme Şekli
: Düğme gösterim şeklini seçin.
1. Yuvarlak Köşeli
2. Düz Köşeli
3. Yuvarlatılmış
Düğme Boyutu
: Düğmenin boyutunu seçin.
1. Varsayılan
2. Çok Büyük
3. Büyük
4. Orta
5. Küçük
6. Özel Düğme padding değerlerini kendiniz girebilirsniz.
Özel Düğme Boyutu (Padding (İç Boşluk))
: Özel düğme boyutu için düğme padding değerini her bir ekran genişliği için responsive olarak ayarlayabilirsiniz. "Düğme Boyutu" alanından Özel seçeneği seçildiğinde gösterilir.
Düğme Metin Rengi:
: Düğme metni rengini normal ve hover (üzerine gelinme) durumları için seçebilirsiniz.
"Düğme Tipi" olarak Özel ve "Düğme Stili" olarak Varsayılan veya Gradient seçenekleri seçildiğinde gösterilir.
Düğme Arkaplan:
: Düğme arkaplan rengini normal ve hover (üzerine gelinme) durumları için seçebilirsiniz.
"Düğme Tipi" olarak Özel ve "Düğme Stili" olarak Varsayılan seçenekleri seçildiğinde gösterilir.
Düğme Gradient:
: Düğme arkaplan gradient geçiş renklerini normal ve hover (üzerine gelinme) durumları için seçebilirsiniz. "Düğme Tipi" olarak Özel ve "Düğme Stili" olarak Gradient seçenekleri seçildiğinde gösterilir.
- Başlangıç Rengi: Gradient başlangıç rengi
- Başlangıç Rengi Konumu: Gradient başlangıç renginin konumunu 0-100 arasında girin.
- Bitiş Rengi: Gradient bitiş rengi
- Bitiş Rengi Konumu: Gradient bitiş renginin konumunu 0-100 arasında girin.
- Gradient Tipi: Linear (Düz) veya Radial (Dairesel) gradient tipinden birini seçin
- Gradient Açısı: Gradient renk geçişinin yönünü belirtmek için 0-360° arasında bir değer girin
Tam Geniş Düğme
: Düğme bulunduğu alan içerisinde tam genişlikte (100%) blok olarak gösterilir. Genellikle tekil düğmeler için kullanılması tavsiye edilir.
Dahili Kayan Link
: Düğme için "Link" alanında sayfa içndeki bir ögeye (Örn: #dugme-hedef-dahili-bolumu) dahili olarak link verdiyseniz, kullanıcılar düğmeye tıkladığında ilgili ögeye yumuşak ve kayan bir şekilde yönlendirilirler.
Simge Göster
: Düğme içerisinde FontAwesome simgesi göstermek istiyorsanız bu seçeneği etkinleştirin.
Simge
: Düğme içerisinde göstermek istediğiniz düğme simgesini seçin. Bu alan, "Simge Göster" seçeneği etkinleştirilmişse gösterilir.
Simge Konumu
: Düğme simgesinin düğme metninden önce mi sonra mı gösterileceğini belirtin. Bu alan, "Simge Göster" seçeneği etkinleştirilmişse gösterilir.

Düğme Bileşeni Diğer Seçenekleri:

Düğmeler Arası Mesafe
: Birden fazla düğme eklediyseniz (Düğme Grubu) her bir düğme arasındaki mesafeyi buradan ayarlayabilirsiniz.
İçerik Hizalama
: Düğmelerin bulundukları sütun/satır içerisinde nasıl hizalanacağını responsive olarak her bir ekran genişliği için ayrı ayrı seçebilirsiniz.

Bileşen Stil Ayarları

Sınıf
: Bileşen için özel CSS sınıfı/sınıfları tanımlamak isterseniz burayı kullanabilrsiniz. Daha sonra CSS stil dosyanızdan ilgili sınıf ile ilgili biçimlendirmeleri buraya başvurarak gerçekleştirebilirsiniz. Örneğin:light-grey-rounded-box
Dahili Stil
: Bileşen için css biçimlendirmesini harici tema css dosyalarınız yerine doğrudan bu alana yazacağınız css kodu ile gerçekleştirebilirsiniz. Eklediğiniz css biçimlendirmesini sadece bu bileşen için aktif olmasını ve aynı css sınıfına sahip olan sayfadaki diğer ögeleri etkilememesini istiyorsanız stil kodunuz içerisinde @widgetId ibaresinden sonra stil kodunuzu ekleyebilirsiniz. @widgetId önyüzde, sistem tarafından otomatik oluşturulurulan id ile değiştirilir. Düğme (Button) Bileşeni içerisinde biçimlendirebileceğiniz css sınıflarını, site önyüzünüzde bileşenin bulunduğu sayfadayken Tarayıcınızda F12 - Geliştirici araçlarından Code Inspection ile .fon-button-widget css sınıfı altından inceleyebilirsiniz.
```
												
@widgetId .light-grey-rounded-box{
	background-color: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 5px;
}
												
											
```

Bileşen Penceresi Kayıt Düğmeleri

Sayfayı Kaydet
: Bileşende gerçekleştirdiğiniz değişiklikler ve sayfada gerçekleştirdiğiniz tüm değişiklikler veritabanına kaydedilir ve aktif Bileşen Düzenleme Penceresi kapatılır.
Kaydet & Düzenle
: Bileşende gerçekleştirdiğiniz değişiklikler bileşen kodu içerisine kaydedilir ve aktif Bileşen Düzenleme Penceresi kapatılır. Sayfanızda yaptığınız değişikler henüz kaydedilmemiştir. Sayfanızı kaydetmek için mutlaka sayfanın sağ kenarında bulunan MENU çubuğu altından Kaydet düğmesine tıklamanız gerekir.