Prusa WiseCp Tema - Dokümantasyon - Sekmeler (Tabs) Bileşeni

Sekmeler (Tabs) Bileşeni Nedir?

Web Sitesi Sekmeleri, yerden tasarruf etmek için birlikte gruplandırılmış birden fazla "Div" ögesinden oluştuğu için Tarayıcı Sekmelerine benzer. Bu nedenle, Sekmeler eklentisi sınırlı alana sahip web sayfaları veya gruplandırdığınız özellikleri daha az yer kaplayan bir alanda gösterebilmeniz için yararlıdır. İyi tasarlandıklarında, okunabilirliği artırmaya ve dağınıklığı azaltmaya yardımcı olurlar. Sekmeler (Tabs) Bileşeni Bootstrap Tabs Bileşenini baz alır. Sekmeler (Tabs) bileşeni hakkında daha detaylı bilgi için Bootstrap Tabs Dokümantasyonunu inceleyebilirsiniz.

Sekmeler (Tabs) 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

Stil
: Sekmeler (Tabs) bileşeninin sayfanızda hangi stilde gösterilmesini istediğinizi seçin.

STİL ÖNİZLEMELERİ

Sekmeler (Tabs) Bileşeni gösterim stili demolarını görüntülemek için Sekme Stilleri sayfasını ziyaret edebilirsiniz.
Simge Göster
: Sekme başlıklarında simge gösterilip gösterilmeyeceğini seçin.
Sekmede Alt Başlık Göster
: Sekme başlıklarının altında kısa ve ek bir alt başlık göstermek isteyip istemediğinizi seçin.
Sekme Yönü
: Sekmelerin içeriğe göre hangi yönde olmasını istediğinizi seçin.
- Yatay: Sekmeler yatay olarak sekme içeriklerinin üstünde gösterilir (varsayılan görünüm).
- Dikey: Sekmeler dikey olarak sekme içeriklerinin solunda gösterilir.
İçerik Hizalama
: Sekmelerin sayfadadaki hizalamasını seçin. Bu seçenek sekme içerik bölümünü değil sadece sekme adlarının bulunduğu navigasyon düğmelerinin hizalanması içindir. Bu alan, "Sekme Yönü" olarak Yatay seçeneği seçildiğinde gösterilir.
- Sol: Sekmeler yatay düzlemde sayfada sola hizalanmış olarak görüntülenir.
- Orta: Sekmeler yatay düzlemde sayfada ortalanmış olarak gösterilir.
- Sağ: Sekmeler yatay düzlemde sayfada sağa hizalanmış olarak gösterilir.
Koyu Zemin İçerisinde mi?
: Sekmeler (Tabs) bileşeninin bulunduğu satır için bir arkaplan rengi veya resmi eklediyseniz Sekmeler (Tabs) ögeleri net şekilde görüntülenemeyebilir (okunaklı olmayabilir). Bu durumda bu seçeneği aktifleştirirseniz sekme ogelerinin metinleri ve stili beyaz olarak değiştirilecektir. Bu seçenek her sekme stili için geçerli değildir.

İçerik Ayarları

Sekmeler (Tabs) Bileşeni İçerik Ayarları bölümündeki Sekmeler - Ögeler başlığının karşısındaki Ekle düğmesine tıklayarak birden fazla Sekme Ö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.

Sekme Öge Düzenleme Penceresi:

Başlık
: Sitenizdeki aktif her bir dil için Sekme Başlığı olarak gösterilmesini istediğiniz metni girin.
Alt Başlık
: Sitenizdeki aktif her bir dil için Sekme Alt Başlığı olarak gösterilmesini istediğiniz metni girin. Bu alan, "Bileşen Seçenekleri" bölümünde Sekmede Alt Başlık Göster seçeneği etkinleştirilmişse gösterilir.
Simge
: Sekme başlığından önce göstermek istediğiniz FontAwesome simgesini seçin. Bu alan, "Bileşen Seçenekleri" bölümünde "Simge Göster" seçeneği etkinleştirilmişse gösterilir.
İçerik
: Sekme penceresi içerisinde göstermek istediğiniz metni yazın. HTML editör aracılığıyla metninizde istediğiniz biçimlendirmeyi gerçekleştirebilir, metninize resim, tablo vs. ekleyebilirsiniz.

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. Sekmeler (Tabs) 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-tabs-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.