Sekmeli arayüz örnekleri ve bunların nasıl oluşturulacağı

Ana Sayfa » Python » Sekmeli arayüz örnekleri ve bunların nasıl oluşturulacağı

Sekmeli arayüzler, modern yazılımlarda en yaygın kullanılan gezinme modellerinden biridir.Mobil uygulamalardan web kontrol panellerine ve karmaşık geliştirme araçlarına kadar birçok alanda kullanılırlar. Kullanıcıların aynı pencere içinde farklı bölümler veya belgeler arasında geçiş yapmalarını sağlayarak deneyimi düzenli, hızlı taranabilir ve öğrenmesi kolay hale getirirler. Özenle tasarlandıklarında, sekmeler karmaşayı önemli ölçüde azaltır ve hangi içeriğin şu anda görünür olduğunu netleştirir.

O basit etiket dizisinin ardında birçok tasarım kararı ve teknik seçenek bulunmaktadır.Sabit veya kaydırılabilir sekmeler, yalnızca simge içeren düzenler, sayfa oluşturucularda iç içe sekme sistemleri, Aşamalı Web Uygulamalarında belge tarzı sekmeli pencereler veya Bootstrap veya Xajax gibi çerçevelerle oluşturulmuş özel sekme widget'ları. Bu kılavuzda, çok çeşitli sekme türlerini ele alacağız. sekmeli arayüz örnekleri Android, web arayüzü, PWA manifestleri ve klasik PHP + Ajax çözümlerinden gelen tüm fikirleri bir araya getiren uygulama yaklaşımları.

Android'de TabLayout ve ViewPager ile sekmeli arayüzler

Android'de, Material Design'da sekmeli gezinmenin temel yapı taşı TabLayout bileşenidir.Genellikle ViewPager (veya daha yeni projelerde ViewPager2) ile birlikte kullanılırlar. Google'ın Material Design ekibi sekmeleri çok basit bir şekilde şöyle açıklıyor: Aynı etkinlik içindeki farklı görünümleri keşfetmeyi ve bunlar arasında geçiş yapmayı kolaylaştırırlar.

TabLayout, sekmeleri yatay olarak düzenler ve iki ana çalışma modu sunar: sabit ve kaydırılabilir.Sabit modda, her sekme aynı anda görünür ve mevcut genişlik aralarında bölünür. Bu, WhatsApp gibi uygulamalarda kullanılan modeldir; burada birkaç farklı bölüm her zaman tek dokunuşla erişilebilir ve sekmeler tüm satırı kaplar.

Kaydırılabilir sekmeler, bölüm sayısı veya etiket uzunluğu ekran genişliğini aştığında devreye girer.Bu yapılandırmada, kullanıcı daha fazla seçeneği ortaya çıkarmak için sekme çubuğunda yatay olarak kaydırabilir. Google'ın kendi Haberler ve Hava Durumu uygulaması, içerik kategorilerinin tek bir ekranın rahatça barındırabileceğinden daha fazla olduğu, kaydırılabilir bir TabLayout için iyi bir referanstır.

TabLayout'taki her sekme genellikle ViewPager içinde gösterilen bir Fragment'a karşılık gelir.Kullanıcı bir sekmeye dokunduğunda, TabLayout seçili durumunu günceller ve ViewPager ilgili fragmente gider. Benzer şekilde, kullanıcı sayfalar arasında kaydırdığında, seçili sekme göstergesi şu anda görünür olan fragmenti takip edecek şekilde hareket eder. Bu sıkı bağlantı normalde şu şekilde kurulur: setupWithViewPager()Bu, otomatik olarak sekmeler oluşturur ve hem kaydırma hem de tıklama olayları için dinleyiciler bağlar.

Malzeme sekmeleri metin, simge veya her ikisinin bir kombinasyonunu görüntüleyebilir.Android'deki Twitter gibi bazı uygulamalar, etiketler yerine tanınabilir simgelere ağırlık veriyor; bu da yer tasarrufu sağlıyor ve kullanıcılar her sembolün anlamını anladıklarında tarama işlemini daha hızlı hale getiriyor. TabLayout, XML'de tanımlanmış veya programatik olarak ayarlanmış olsun, tüm bu seçenekleri destekler.

Adım adım temel bir Android sekmeli arayüz oluşturma

Android Studio'da sıfırdan basit bir sekmeli kullanıcı arayüzü oluşturmak için genellikle boş bir aktivite ile başlarsınız.genellikle buna benzer bir şey olarak adlandırılır. MainActivityArdından üç temel bileşeni tanıtın: birkaç fragment, düzen XML'inizde bir TabLayout ve bir sayfalama adaptörü tarafından yönetilen bir ViewPager.

İlk yapı taşı, her sekme için bir tane olmak üzere küçük bir Fragment sınıfı kümesidir.Örneğin, şöyle tanımlayabilirsiniz: FragmentOne, FragmentTwo hem de FragmentThreeHer biri kendi XML düzenini şişiriyor (örneğin, fragment_one.xmlHer bir fragment için kod oldukça basittir: görünümü şişirin, gerekli widget'ları bağlayın ve o sekmeye ait içeriği sağlayın.

Ardından ana etkinlik düzeninize TabLayout ve ViewPager ekleyin.. içinde activity_main.xml siz bir beyanda bulunuyorsunuz TabLayout ID'si şu şekilde olan bir öğe: tab_layout ve ViewPager Hemen altında. Şu özelliklere sahip: app:tabMode hem de app:tabGravity Sekmelerin sabit mi yoksa kaydırılabilir mi olacağını ve mevcut genişliği dolduracak şekilde uzayıp uzamayacağını siz kontrol edersiniz. Ayarlar tabMode="fixed" hem de tabGravity="fill" Bu özellik, tüm sekmeleri çubuk üzerinde eşit şekilde dağıtır; bu da özellikle tablet gibi geniş ekranlarda daha belirgindir.

Sekmelerin stilini belirlemek genellikle TabLayout üzerinde özel bir stil referansı kullanılarak yapılır.Şu tarz aracılığıyla: @style/CustomTabLayoutGösterge rengi gibi şeyleri tanımlayabilirsiniz (tabIndicatorColor), gösterge yüksekliği (tabIndicatorHeight) ve seçili ve seçili olmayan durumlar için metin renkleri (tabTextColor hem de tabSelectedTextColorAynı özellikler, aşağıdaki gibi yöntemlerle programatik olarak da ayarlanabilir. setSelectedTabIndicatorColor() or setTabTextColors()Ancak tasarımı XML'de merkezileştirmek, görünümün tutarlı kalmasını kolaylaştırır.

Düzeni tanımladıktan sonra, her sekme için hangi Fragment'ın görüneceğini kontrol eden bir sayfalama adaptörü eklersiniz.Yaygın bir uygulama bunu genişletir. FragmentPagerAdapter (Ya da FragmentStatePagerAdapter ya da daha yenisi FragmentStateAdapter (ViewPager2 için) ve üç yöntemi geçersiz kılar: getItem() Belirli bir pozisyon için parçayı sağlamak, getCount() Kaç sayfa olduğunu bildirmek için ve getPageTitle() Her sekme için etiket metnini sunmak. "Sekme Öğesi 1" gibi bir başlığa sahip ilk sekme seçildiğinde, getItem() geri dönücek FragmentOneEtiketi içeriğiyle ilişkilendirerek.

Etkinliğin tüm parçaları bir araya geliyor. onCreate() yöntemOradan TabLayout ve ViewPager'a ait referansları alabilirsiniz. activity_main.xmlFragmentManager ile adaptörünüzü oluşturun ve ViewPager'a yerleştirin. Bir çağrı tabLayout.setupWithViewPager(viewPager) Kablolamayı tamamlar, adaptördeki her giriş için sekmeler oluşturur ve kullanıcı etkileşimlerini senkronize eder. Sayfalar arasında kaydırma, seçili sekmeyi günceller ve sekmelere dokunmak, sayfayı doğru bölüme kaydırır.

Kullanıcı eylemleri üzerinde daha ayrıntılı kontrol sağlamanız gerekiyorsa, bir bileşen ekleyebilirsiniz. OnTabSelectedListenerBu dinleyici üç geri çağırma işlevi sunar: onTabSelected() Bir sekme seçildiğinde, onTabUnselected() Odak noktasını kaybettiğinde ve onTabReselected() Kullanıcı zaten aktif olan bir sekmeye dokunduğunda. Bu kancalar, yalnızca bir sekme gerçekten görüntülendiğinde ek veri yüklemek veya odak değiştiğinde ince animasyonları tetiklemek için idealdir.

Kaydırılabilir sekmeler mi yoksa sabit sekmeler mi ve metin yerine simgeler mi kullanmalı?

Material Design, sabit sekmeler ve kaydırılabilir sekmeler arasında net bir ayrım yapar ve her birinin ideal kullanım alanları vardır.Kullanıcıların yan yana karşılaştırmak isteyebileceği sınırlı sayıda kısa etiketiniz olduğunda sabit sekmeler önerilir. Netlik ve istikrarın, çok sayıda sayfadan oluşan bir kataloğu sığdırmaktan daha önemli olduğu dokunmatik ekranlarda birincil gezinme için mükemmeldirler.

Etiketler daha uzun olduğunda veya dört sekmeden daha fazlasına ihtiyacınız olduğunda kaydırılabilir sekmeler çok işe yarar.Uzun isimleri sabit bir TabLayout'a sıkıştırmaya çalışırsanız, Android etiketleri birden fazla satıra yaymaya veya hatta kısaltmaya başlar; bu sadece dağınık görünmekle kalmaz, aynı zamanda kullanılabilirliği de olumsuz etkiler. Kaydırılabilir mod etkinleştirildiğinde, kullanıcı sekme şeridini sola ve sağa sorunsuz bir şekilde kaydırabilir ve her etiket okunabilir olması için yeterli alana sahip olur.

Bu modlar arasında geçiş, XML aracılığıyla yapılabilir. app:tabMode veya programatik olarak ile setTabMode(). Geçen TabLayout.MODE_FIXED sabit sekmeler üretirken TabLayout.MODE_SCROLLABLE Yatay olarak kaydırılabilir bir liste oluşturur. Dört kategoriden fazla kategori öngörüyorsanız, kılavuzlar kaydırılabilir yapılandırmaya yönelmenizi şiddetle tavsiye eder.

Sekme etiketlerinde metin yerine simgeler kullanmak da güçlü bir diğer varyasyondur.. Arayarak getTabAt(index) bir TabLayout örneği üzerinde ve ardından çağırarak setIcon()Belirli bir sekmeye bir çizilebilir öğe atarsınız. Bu, özellikle simgeler evrensel olarak anlaşıldığında, çok kompakt sekme çubukları için alan açar. Yine de geçersiz kılarsanız getPageTitle() Adaptörünüzde metin ve simgeleri birleştirebilirsiniz; bu geçersiz kılmayı atlarsanız, yalnızca simgelerden oluşan sekmeler elde edersiniz.

Sekme davranışı, XML'e dokunmadan da yüksek oranda yapılandırılabilir.Sekmeleri şu şekilde açıkça oluşturabilirsiniz: newTab(), buna güvenmek yerine setupWithViewPager()Ayrıca, sekme modunu anında değiştirebilir, dinleyiciler aracılığıyla seçime yanıt verebilir veya basit bir etiket ve simgeden daha ayrıntılı tasarımlara ihtiyacınız varsa özel sekme görünümleri ekleyebilirsiniz.

Android Studio şablonlarını kullanarak sekmeli etkinliklerin iskeletini oluşturma

Sekmeli bir arayüzü sıfırdan yazmak, her şeyin nasıl bir araya geldiğini anlamak için harika bir yöntemdir, ancak Android Studio saniyeler içinde sizin için çalışan bir kurulum oluşturabilir.IDE, Java ve Kotlin dillerinde kullanılabilen "Sekmeli Etkinlik" de dahil olmak üzere yaygın kalıplar için şablonlarla birlikte gelir.

Yeni bir proje başlattığınızda, uygulama adını ve hedef cihazları seçtikten sonra, etkinlik listesinden "Sekmeli Etkinlik"i seçebilirsiniz.Son yapılandırma iletişim kutusunda, "Eylem Çubuğu Sekmeleri (ViewPager ile)" gibi bir gezinme stili seçme seçeneği bulunur. Onayladığınızda, Android Studio, hemen çalıştırıp keşfedebilmeniz için TabLayout, ViewPager ve örnek parçalarla donatılmış bir etkinlik oluşturur.

Bu yerleşik şablonlar, prototipler ve basit uygulamalar için son derece kullanışlıdır.. Hazır kod şablonlarını, örnek düzenleri ve bağlantı mantığını oluşturarak, sizin asıl içeriğe ve belirli davranışlara odaklanmanızı sağlarlar. Mevcut projelerde, Dosya menüsünden yeni bir "Sekmeli Etkinlik" ekleyerek ve aynı adımları izleyerek aynı tür etkinliği ekleyebilirsiniz.

Karmaşık navigasyona veya çok özel bir görsel dile sahip daha iddialı uygulamalar için, üçüncü taraf şablonlar işleri daha da hızlandırabilir.Envato gibi pazar yerleri, gelişmiş sekmeli arayüzler ve Materyal Tasarım desenlerini içeren önceden oluşturulmuş Android uygulama şablonları sunar. Bu kitler, standart navigasyonu sıfırdan yeniden oluşturmak yerine benzersiz işlevselliğe odaklanmak istediğinizde özellikle kullanışlıdır.

Elementor'da gelişmiş web tasarımları için iç içe sekmeler

Web'de, Elementor gibi sayfa oluşturucular, sekmeli arayüz fikrini sürükle-bırak tasarım iş akışlarına taşıyor.Özellikle esnek bir tasarım deseni, iç içe sekmelerdir: diğer sekmelerin içinde yer alan sekmeler, ilgili içeriği sayfayı aşırı yüklemeden, derinlemesine yapılandırılmış ancak kompakt düzenlerde gruplandırmanıza olanak tanır.

İç içe sekmeler tasarlarken atılacak ilk iyi adım, tutarlı bir görsel dil tanımlamaktır.Örneğin, bir sekme, bir ana görseli, bir mekanı veya planı özetleyen bir başlığı, kısa bir metin açıklamasını ve bir düğmeyi bir araya getirebilir. Bu yapı oluşturulduktan sonra, arayüzün yine de tutarlı görünmesi için aynı öğeleri korurken, sekmeler arasında gerçek düzeni değiştirebilirsiniz – belki birinde tek bir dikey blok, diğerinde iki sütunlu bir düzenleme ve üçüncüsünde üç satırlı bir kompozisyon.

Elementor'un iç içe sekmeleri, yalnızca düz metin değil, istediğiniz herhangi bir widget'ı eklemenize olanak tanır.Aylık, altı aylık ve yıllık planları farklı sekmeler içinde göstermek için fiyat tabloları ekleyebilir veya bunları döngü ızgaralarıyla birleştirerek blog gönderilerini, ürünleri veya portföy öğelerini kategoriye göre dinamik olarak filtreleyebilirsiniz. Kategorileri sekmelerle hizalayarak, ziyaretçiler mevcut sayfadan ayrılmadan kendileri için önemli olanlara hızlıca tıklayabilirler.

Sekmeler, kullanıcıları süreçler veya hikayeler boyunca yönlendirmek için de güçlü bir yöntemdir.Örneğin, kurulum akışında dört veya daha fazla sekmeyi adım olarak kullanabilirsiniz: her sekme, sekme şeridinde bir simge, bir adım numarası ve kısa bir etiket gösterebilirken, panel içeriği o aşamaya özgü metin ve görseller içerebilir. Görsellere ve öğelere hareket efektleri veya ince animasyonlar ekleyerek, uzun ve statik bir sayfadan çok daha ilgi çekici, rehberli ve anlatısal bir deneyim oluşturabilirsiniz.

Daha gelişmiş kontrol panelleri ve yönetici tarzı görünümler için tasarımcılar bazen bir adım daha ileri giderek iç içe sekmeler kullanırlar.Sol tarafta dikey olarak sıralanmış, her biri alt görünümler için yatay olarak yerleştirilmiş ikincil sekmeler içeren birincil bölümlerden oluşan bir sütun hayal edin. Biraz özel CSS ile – örneğin, etiketleri döndürmek ve dikey navigasyonu sıkıştırmak için her sekmenin CSS kimliğini kullanarak – Elementor konteynerleri ve döngü ızgaralarıyla tamamen işlevsel sekmeli kontrol panelleri oluşturabilirsiniz.

Özetle, iç içe sekmeler içerik yapılandırması için neredeyse sonsuz olanaklar sunuyor.İster özellik turları, fiyatlandırma seçenekleri, portföyler veya analitik panolar düzenliyor olun, tutarlı bir tasarım dili ve esnek düzenlerin birleşimi, keşfetmesi sezgisel olan bir alana çok miktarda bilgi sığdırmanıza olanak tanır.

Aşamalı Web Uygulamalarında Sekmeli Uygulama Modu

Sekmeli arayüzler yalnızca web sayfalarının içinde yer almaz; bağımsız pencereler olarak çalışan Aşamalı Web Uygulamalarının (PWA) çalışma şekline de entegre edilebilirler.ChromeOS'te, özel bir "sekmeli uygulama modu", bir PWA'nın yerel bir editörden veya IDE'den bekleyeceğiniz gibi, kendi belge tarzı sekme şeridini sunmasına olanak tanır.

PWA'lar, çeşitli görüntüleme modlarını destekler ve bu modlar şu şekilde kontrol edilir: display web uygulaması manifest dosyasındaki üye. Seçenekler şunları içerir fullscreen, standalone, minimal-ui hem de browserTarayıcılar, belirli bir mod desteklenmiyorsa tanımlanmış bir zincir boyunca geri döner. Daha da ince ayar için ise bir seçenek mevcuttur. display_override Geliştiricilerin özel bir yedek sıralama belirlemesine olanak tanıyan özellik.

Yeni sekmeli uygulama modu, PWA'lar için yerleşik bir sekmeli belge arayüzü (TDI) sağlayarak önceki bir eksikliği gideriyor.Uygulama, özel HTML ve JavaScript kullanarak bir sayfa içinde sahte sekmeler oluşturmak yerine, sistemden özel bir PWA penceresi içinde gerçek üst düzey sekmelerde birden fazla belge veya görünüm barındırmasını isteyebilir. Bu, şunlardan farklıdır: display: browserBu seçenek, uygulamayı normal bir tarayıcı sekmesinde, tam tarayıcı arayüzüyle açar.

Bu modun tipik kullanım alanları arasında üretkenlik uygulamaları, iletişim araçları ve okuma deneyimleri yer almaktadır.Bir kod düzenleyici PWA, birden fazla dosyayı ayrı sekmelerde açabilir, bir sohbet istemcisi her oda veya kanal için bir sekme sağlayabilir ve bir okuma uygulaması makale bağlantılarını yeni uygulama sekmelerinde açabilir; bunların hepsi genel tarayıcıyı karmaşıklaştırmak yerine aynı pencere içinde düzenli bir şekilde kalır.

Bu yerleşik sekme modu ile geliştiriciler tarafından oluşturulan özel sekme arayüzleri arasında önemli farklılıklar vardır.Sistem düzeyindeki sekmeler, çok sayıda belgeyi sorunsuz bir şekilde işleyebilir, kaynak izolasyonundan faydalanabilir ve gezinme geçmişi, "Bu sayfanın bağlantısını kopyala", geçerli sekmeden dışa aktarma veya etkin belgeyi normal bir tarayıcı penceresinde açma gibi tarayıcı özellikleriyle derinlemesine entegre olabilir. Yalnızca sayfa içinde sekmeleri simüle ederseniz, bu yetenekler her bir alt görünüme değil, dış kabuğa uygulanır.

PWA sekmeli uygulama modunu nasıl yapılandırabilirsiniz?

PWA için sekmeli modu etkinleştirmek, manifest dosyasında uygun bir ayar yapılarak başlar. display_override zincirMinimum bir yapılandırma şunları belirtebilir: "display": "standalone" hem de "display_override": Bu, tarayıcının mümkünse sekmeli bir uygulama penceresini tercih etmesi, aksi takdirde standart bağımsız bir pencereye geri dönmesi gerektiği anlamına gelir.

Bunun ötesinde, tab_strip Üye özelliği, uygulamanın sekme çubuğunun davranışını özelleştirmenizi sağlar.Bu nesne iki isteğe bağlı alt özellik tanımlayabilir: home_tab hem de new_tab_buttonEğer atlarsanız tab_strip Özetle, tarayıcı, yeni sekmeler oluşturmak için uygulamanın başlangıç ​​URL'sini temel alarak varsayılan davranışı sergileyecektir.

Ana sayfa sekmesi kavramı özellikle önemlidir.Bu, uygulama penceresi açık olduğu sürece her zaman mevcut olması gereken ve tanımlanmış kapsamından uzaklaşmaması gereken sabitlenmiş bir sekmedir. Bu ana sekme içinde tıklanan tüm bağlantıların yeni uygulama sekmelerinde açılması beklenir. Bunu şu şekilde yapılandırabilirsiniz: home_tab.scope_patternsBu, URL kalıplarının bir listesidir (genellikle basit dosya yolları gibi). "/" or "/index.html"(manifest URL'sine göre)

MKS new_tab_button Bu giriş, kullanıcı arayüzünün "yeni sekme" özelliğinin nasıl davrandığını açıklar.Tek bir tane var. url Kullanıcının düğmeye tıkladığında hangi sayfanın açılacağını belirten üye, genellikle uygulamanın kapsamı dahilindeki bir şeydir, örneğin "/create"Eğer bu URL ana sekmenin kapsamı içinde yer alıyorsa, uygulama ayrı bir "yeni sekme" denetimi hiç göstermeyecektir, çünkü gezinmenin ana görünümden gerçekleştiği varsayılmaktadır.

Sekmeli bir uygulama penceresini yapılandıran örnek bir manifest dosyası (kavramsal olarak) şöyle görünebilir:: bir isim tanımlar, start_url, display ayarlandığında standalone, display_override içeren "tabbed", home_tab kapsamı şunları içerir / hem de /index.htmlVe new_tab_button ile yapılandırılmış "/create" URL. Bu kurulumla, kullanıcılar kalıcı bir ana sayfa sekmesine ve tek bir tıklamayla ek belgeleri açma özelliğine sahip olurlar.

Uygulamalar ayrıca çalışma zamanında sekmeli modda çalışıp çalışmadıklarını da algılayabilirler.. Kullanmak display-mode Medya özelliği için, şöyle bir CSS bloğu yazabilirsiniz: @media (display-mode: tabbed) stilleri ince ayar yapmak veya kullanmak window.matchMedia('(display-mode: tabbed)').matches Sekmeli uygulama modunun etkin olup olmadığını kontrol etmek ve buna göre kullanıcı arayüzü davranışını ayarlamak için JavaScript kodu.

Son olarak, Başlatma İşleyici API'si ile ilginç bir etkileşim söz konusu.Sekmeli bir PWA ayarlandığında... "client_mode": "navigate-new" Başlatma yapılandırmasında, uygulama başlatmaları birden fazla pencere açmak yerine mevcut bir uygulama penceresi içindeki yeni sekmelere yönlendirilebilir. Bu, kullanıcının çalışma alanını düzenli tutar ve tek, sekme merkezli bir uygulama ortamı fikrini güçlendirir.

PHP, Ajax ve Xajax kullanarak özel sekmeli gezinme menüsü oluşturma

PWA'larda sistem düzeyinde sekmeler ortaya çıkmadan çok önce, web geliştiricileri HTML, CSS, JavaScript ve sunucu tarafı kod kullanarak kendi sekmeli gezinme bileşenlerini oluşturuyorlardı.Klasik yaklaşımlardan biri, sekme içeriğini eşzamansız olarak yüklemek ve sayfayı tamamen yeniden yüklemeden güncellemek için PHP'yi Xajax çerçevesiyle birlikte kullanmaktır.

Bu örnekteki HTML yapısı oldukça basittir.Bir ambalaj <div> bir sınıf taşıyor pestanas ve onun içinde bir <ul> içeren <li> Her sekme için öğeler. Her liste öğesinin benzersiz bir kimliği vardır (örneğin, pestana0, pestana1, pestana2) ve etkin veya etkin olmadığını gösteren bir CSS sınıfı. Bu liste öğelerinin içindeki bağlantı etiketleri, örneğin Xajax tarafından oluşturulan bir JavaScript fonksiyonunu çağırır. javascript:void(xajax_cambia_contenido(0))Sekme indeksini sunucuya iletiyor.

Sekme listesinin altında, sekme gövdesi içeriği için özel bir alan bulunmaktadır., genellikle <div> kimlik numarası gibi cuerpopestanasKullanıcı herhangi bir sekmeye tıkladığında, Ajax çağrısı ilgili HTML parçasını alır ve bu içerik alanına ekler. Sayfa asla yeniden yüklenmez; yalnızca içerik kapsayıcısının iç HTML'si değişir.

CSS, sekmelerin etkileşimli görünmesi ve hissettirilmesinde merkezi bir rol oynar.İki temel sınıf tanımlanabilir: biri etkin olmayan sekmeler için (örneğin) li.pestanainactiva) ve bir diğeri de seçilen sekme için (örneğin li.pestanaseleccionadaStil farklılıkları – arka plan rengi, kenarlıklar, yazı tipi stilleri – kullanıcıya hangi sekmenin aktif olduğu konusunda net geri bildirim sağlar. Ek kurallar, etiketlerin istenen görsel kimliğe uyması için belirli bağlantı renklerini zorunlu kılar veya metin süslemelerini kaldırır.

Sunucu tarafında, aşağıdaki gibi bir PHP fonksiyonu: cambia_contenido() yanıtı düzenlerSekme indeksini parametre olarak alır ve bir yapı oluşturur. xajaxResponse Nesneyi bulur ve PHP'nin dize dizisinde eşleşen içeriği arar. Ardından bunu kullanır. addAssign() Sayfayı güncellemek için: tek bir çağrı ayarları yapar. innerHTML of cuerpopestanas Seçilen metne, bir başka değişiklik daha uygulanır. className Tıklanan sekmenin durumunu "seçili" olarak değiştirir ve bir döngü, kalan sekmeleri "pasif" durumuna sıfırlar.

Bu model, içeriğin nereden geldiği konusunda esnektir.Dizideki sabit kodlanmış metin dizeleri yerine, şablonlardan HTML oluşturabilir, veritabanından kayıtlar çekebilir veya dinamik olarak formlar ve etkileşimli widget'lar oluşturabilirsiniz. İstemci tarafının umurunda değil; kullanıcı sekmeler arasında geçiş yaptığında sekme gövdesinde görüntülenecek güncellenmiş işaretlemeyi alır.

Başlatma işlemi küçük bir JavaScript kod parçasıyla gerçekleştirilir.. Arayarak xajax_cambia_contenido(0) on window.onloadSayfa, DOM hazır olur olmaz otomatik olarak ilk sekmeyi seçer ve içeriğini yükler. Bu sayede, orijinal HTML'de herhangi bir gövde içeriğini elle kodlamanıza gerek kalmaz; sekme sistemi baştan itibaren tamamen Ajax tarafından yönlendirilir.

En iyi uygulamalarla mobil sekme çubukları tasarlama

Mobil cihazlarda, alt sekme çubuğu en önemli gezinme öğelerinden biridir ve dikkatle ele alınmayı hak eder.Dağınık veya tutarsız bir sekme çubuğu, özellikle her pikselin önemli olduğu küçük ekranlarda, kullanıcıları hızla kafa karışıklığına sürükleyebilir.

İlk yönergelerden biri, sekme çubuğundaki öğe sayısını sınırlamaktır.En fazla dört veya beş simge hedefleyin; bunun ötesine geçmek, dokunma hedeflerini ve etiketleri doğru bir şekilde vurmayı ve yorumlamayı zorlaştıracak kadar küçültme eğilimindedir. Gerçekten daha fazla gezinme seçeneğine ihtiyacınız varsa, ikincil menüleri veya çekmeceler gibi diğer düzenleri düşünün.

Simge seçimi de aynı derecede önemlidir.Her simge, bulunduğu bölümün temel amacını açıkça iletmeli ve hemen tanınabilir olmalıdır. Anlamı netleştirmek için metin etiketleri az miktarda kullanılabilir, ancak simgeleriniz iyi seçilmiş ve platform kurallarına uygunsa, kullanıcılar bunları hızla öğrenecek ve yalnızca görsellere güveneceklerdir.

Devletin belirttiği hususlar açık ve net olmalıdır.Etkin sekmeyi vurgulamak için renk, şekil veya boyut değişiklikleri kullanın; örneğin, renkli bir vurgu, çerçeve yerine dolu bir simge varyantı veya ince bir boyut artışı. Bu, kullanıcının şu anda hangi bölümü görüntülediğini açıkça gösterir. Aynı zamanda, sürekli görsel gürültü yaratabilecekleri ve gezinmeyi engelleyebilecekleri için, bildirim rozetlerinden veya sayısal sayaçlardan doğrudan sekme çubuğundan kaçınmak genellikle akıllıca olur.

Yerleştirme ve azim de çok önemlidir.Sekme çubuğu, ekranın alt kısmında, hem dikey hem de yatay yönlendirmelerde sürekli olarak görünür ve başparmakla erişilebilir olmalıdır. Klavyelerin, diyalog kutularının veya kayan işlem düğmelerinin arkasına gizlemeyin ve dokunmaları engelleyebilecek diğer bileşenlerle üst üste bindirmekten kaçının. Çubuğu sabit tutmak, kas hafızasını geliştirir ve gezinmeyi tahmin edilebilir kılar.

Web sekme arayüzleri için Bootstrap, Bootbox.js ve Font Awesome'dan yararlanma

Geleneksel web projeleri için Bootstrap 3 gibi çerçeveler, kolayca stillendirilebilen ve genişletilebilen kullanıma hazır sekme bileşenleri sunar; bkz. sıfırdan bir web sitesi nasıl oluşturulurAynı araç seti, düğmeler, açılır menüler, paneller ve modal pencereler sağlayarak, sekmelerin tasarımın geri kalanıyla doğal bir şekilde uyum sağladığı tutarlı arayüzler oluşturmayı kolaylaştırır.

Bootstrap'ın gezinme bileşenleri, yatay sekme şeritleri oluşturmak için hazır işaretleme ve sınıflar içerir.Standart gezinme sınıflarını sekmeye özgü olanlarla birleştirerek, minimum JavaScript ile içerik bölmeleri arasında geçiş yapabilirsiniz. Tüm öğeler aynı Bootstrap stil sistemini paylaştığı için, sekmeleriniz sitedeki menülerin, panellerin ve formların görünümüyle otomatik olarak uyumlu hale gelir.

Bootstrap'in görünümüne uygun bir şekilde uyarıları ve onayları yönetmek için birçok geliştirici Bootbox.js'ye başvuruyor.Bu küçük kütüphane, Bootstrap tarzı modal pencereleri kullanışlı JavaScript API'leriyle sarmalayarak, kullanıcılar sekmeler arasında geçiş yaptığında, kaydedilmemiş görünümleri kapatmaya çalıştığında veya potansiyel olarak yıkıcı eylemleri tetiklediğinde onay iletişim kutuları veya uyarılar göstermenizi sağlar; bunların hepsi CSS çerçevesi tarafından oluşturulan görsel tutarlılığı bozmadan yapılır.

İkonografi genellikle Font Awesome tarafından desteklenir.Bu kapsamlı simge seti Bootstrap ile sorunsuz bir şekilde entegre olur ve sekme etiketlerinde veya içerik alanlarında kullanabileceğiniz geniş bir sembol kataloğu sunar. İster ana sayfa, ayarlar, mesajlar ve dosyalar için genel simgelere, ister daha özel gliflere ihtiyacınız olsun, Font Awesome her seferinde özel resimler tasarlamak zorunda kalmadan anlam iletmenize yardımcı olur.

Bootstrap'in yapısal bileşenlerini, Bootbox.js modal pencerelerini ve Font Awesome simgelerini birleştirerekBu sayede, şık ve tutarlı bir görünüm sunan zengin sekmeli arayüzler oluşturabilirsiniz. Sekmeler, uyarılar ve simgeler aynı tasarım dilini paylaşır; bu da kullanıcı deneyiminin uyumsuz parçalardan bir araya getirilmiş gibi değil, kasıtlı olarak oluşturulmuş gibi görünmesini sağlar.

Android, web, PWA'lar ve PHP tabanlı siteler genelinde, sekmeli arayüzler, birden fazla görünümü veya belgeyi tek bir çerçevede düzenlemenin güvenilir bir yolu olmaya devam etmektedir.İster Material Design'ın ViewPager'lı TabLayout'unu, ister Elementor'daki iç içe sekmeleri, ister PWA'lar için ChromeOS sekmeli uygulama modunu, ister Xajax ve Bootstrap kullanan özel çözümleri tercih edin, temel amaç aynıdır: navigasyonu basit tutmak, içeriği keşfedilebilir kılmak ve bağlam değişikliklerini son derece net hale getirmek.