Exemples d'interfícies amb pestanyes i com construir-les

Inici » Pitó » Exemples d'interfícies amb pestanyes i com construir-les

Les interfícies amb pestanyes són un dels patrons de navegació més familiars en el programari modern, des d'aplicacions mòbils i taulers de control web fins a eines de desenvolupament complexes. Permeten als usuaris saltar entre diferents seccions o documents dins de la mateixa finestra, mantenint l'experiència ordenada, ràpida d'escanejar i fàcil d'aprendre. Quan estan dissenyades amb cura, les pestanyes redueixen dràsticament el desordre i deixen clar quin contingut és visible actualment.

Darrere d'aquesta simple filera d'etiquetes hi ha moltes decisions de disseny i opcions tècniques: pestanyes fixes o desplaçables, dissenys només d'icones, sistemes de pestanyes imbricades en constructors de pàgines, finestres amb pestanyes d'estil de document en aplicacions web progressives o widgets de pestanyes personalitzats creats amb marcs de treball com Bootstrap o Xajax. En aquesta guia, repassarem una àmplia gamma de exemples d'interfície amb pestanyes i enfocaments d'implementació, reunint totes les idees d'Android, la interfície d'usuari web, els manifests PWA i les solucions clàssiques de PHP + Ajax.

Interfícies amb pestanyes a Android amb TabLayout i ViewPager

A Android, el component principal de la navegació amb pestanyes a Material Design és el widget TabLayout., sovint combinat amb un ViewPager (o ViewPager2 en projectes més nous). L'equip de Material Design de Google descriu les pestanyes de manera molt senzilla: faciliten l'exploració i el canvi entre diferents vistes dins de la mateixa activitat.

Un TabLayout organitza les pestanyes horitzontalment i exposa dos modes de funcionament principals: fix i desplaçable.En el mode fix, totes les pestanyes són visibles alhora i l'amplada disponible es divideix entre elles. Aquest és el patró que s'utilitza en aplicacions com WhatsApp, on un grapat de seccions diferents sempre estan a un toc de distància i les pestanyes omplen tota la fila.

Les pestanyes desplaçables entren en joc quan el nombre de seccions o la longitud de les etiquetes supera l'amplada de la pantallaEn aquesta configuració, l'usuari pot lliscar horitzontalment per la barra de pestanyes per descobrir més opcions. L'aplicació Notícies i temps de Google és una bona referència per a un TabLayout desplaçable, on les categories de contingut superen el que una sola pantalla pot allotjar còmodament.

Cada pestanya d'un TabLayout normalment es correspon amb un fragment que es mostra dins d'un ViewPager.Quan l'usuari toca una pestanya, TabLayout actualitza l'estat seleccionat i ViewPager navega fins al fragment corresponent. De la mateixa manera, quan l'usuari fa lliscar el dit entre pàgines, l'indicador de pestanya seleccionada es mou per rastrejar el fragment visible actualment. Aquest acoblament estret normalment està connectat mitjançant setupWithViewPager(), que crea automàticament pestanyes i connecta detectors tant per a esdeveniments de desplaçament com de clic.

Les pestanyes de materials poden mostrar text, icones o una combinació d'ambdósAlgunes aplicacions, com ara Twitter a Android, es basen en gran mesura en icones recognoscibles en lloc d'etiquetes, cosa que estalvia espai i pot semblar més ràpid d'escanejar un cop els usuaris entenen el significat de cada símbol. TabLayout admet totes aquestes opcions, tant si es defineixen en XML com si es configuren mitjançant programació.

Creació d'una interfície bàsica amb pestanyes per a Android pas a pas

Per crear una interfície d'usuari amb pestanyes senzilla des de zero a Android Studio, normalment comenceu amb una activitat buida., sovint anomenat alguna cosa així com MainActivityi, a continuació, introduïu tres elements clau: un grapat de fragments, un TabLayout a l'XML del disseny i un ViewPager gestionat per un adaptador de paginació.

El primer bloc de construcció és un petit conjunt de classes Fragment, una per pestanya.Per exemple, podeu definir FragmentOne, FragmentTwo i FragmentThree, cadascun inflant el seu propi disseny XML (per exemple, fragment_one.xml). El codi per a cada fragment és senzill: infla la vista, vincula els widgets i proporciona el contingut rellevant per a aquesta pestanya.

A continuació, afegiu TabLayout i ViewPager al disseny de l'activitat principal.. . In En activity_main.xml declares un/a TabLayout element amb un ID com ara tab_layout I a ViewPager just a sota. Amb atributs com ara app:tabMode i app:tabGravity Tu controles si les pestanyes són fixes o desplaçables i si s'estenen per omplir l'amplada disponible. Configuració tabMode="fixed" i tabGravity="fill" distribuirà totes les pestanyes uniformement per la barra, cosa que es nota especialment en pantalles amples com les tauletes.

L'estilització de les pestanyes normalment es fa amb una referència d'estil personalitzada al TabLayout.A través d'un estil com @style/CustomTabLayout, podeu definir coses com ara el color de l'indicador (tabIndicatorColor), alçada de l'indicador (tabIndicatorHeight) i colors de text per als estats seleccionats i no seleccionats (tabTextColor i tabSelectedTextColor). Les mateixes propietats també es poden definir programàticament amb mètodes com setSelectedTabIndicatorColor() or setTabTextColors(), però centralitzar el disseny en XML facilita mantenir l'aspecte coherent.

Després de definir el disseny, adjunteu un adaptador de paginació que controla quin fragment apareix per a cada pestanya.Una implementació comuna s'estén FragmentPagerAdapter (o FragmentStatePagerAdapter o el més nou FragmentStateAdapter per ViewPager2) i sobreescriu tres mètodes: getItem() per subministrar el fragment per a una posició específica, getCount() per informar de quantes pàgines existeixen i getPageTitle() per lliurar el text de l'etiqueta de cada pestanya. Quan se selecciona la primera pestanya, titulada alguna cosa com ara "Element de la pestanya 1", getItem() tornarà FragmentOne, vinculant l'etiqueta al seu contingut.

Totes les peces s'uneixen en l'activitat onCreate() mètodeAllà podeu obtenir referències al TabLayout i al ViewPager de activity_main.xml, construeix l'adaptador amb el FragmentManager i configura'l al ViewPager. Una crida a tabLayout.setupWithViewPager(viewPager) acaba el cablejat, creant pestanyes per a cada entrada de l'adaptador i sincronitzant les interaccions de l'usuari. Si es llisca entre pàgines, s'actualitza la pestanya seleccionada i si es toquen pestanyes, es desplaça el paginador fins al fragment correcte.

Si necessiteu un control més precís sobre les accions de l'usuari, podeu adjuntar un OnTabSelectedListenerAquest receptor exposa tres retrollamades: onTabSelected() quan es selecciona una pestanya, onTabUnselected() quan perd el focus, i onTabReselected() quan l'usuari toca una pestanya ja activa. Aquests ganxos són ideals per carregar dades addicionals només quan es visualitza una pestanya o per activar animacions subtils quan canvia el focus.

Pestanyes desplaçables vs. fixes i ús d'icones en lloc de text

Material Design distingeix clarament entre pestanyes fixes i pestanyes desplaçables, i cadascuna té casos d'ús ideals.Es recomanen les pestanyes fixes quan teniu un nombre limitat d'etiquetes curtes que els usuaris vulguin comparar una al costat de l'altra. Són perfectes per a la navegació principal en pantalles tàctils, on la claredat i l'estabilitat importen més que encabir en un catàleg enorme de pàgines.

Les pestanyes desplaçables brillen quan les etiquetes són més llargues o necessiteu més de quatre pestanyes.Si intenteu encabir noms llargs en un TabLayout fix, Android començarà a ajustar les etiquetes en diverses línies o fins i tot a truncar-les, cosa que no només sembla desordenada, sinó que també perjudica la usabilitat. Amb el mode de desplaçament habilitat, l'usuari pot lliscar suaument la barra de pestanyes cap a l'esquerra i la dreta, i cada etiqueta té prou espai per ser llegible.

El canvi entre aquests modes es pot fer en XML mitjançant app:tabMode o programàticament amb setTabMode(). Passant TabLayout.MODE_FIXED produeix pestanyes fixes, mentre que TabLayout.MODE_SCROLLABLE crea una llista desplaçable horitzontalment. Val la pena recordar que si preveieu més de quatre categories, les directrius suggereixen fermament inclinar-se cap a la configuració desplaçable.

Una altra variació potent és utilitzar icones en lloc de text per a les etiquetes de les pestanyes.Trucant getTabAt(index) en una instància de TabLayout i després invocant setIcon(), assigneu un element dibuixable a una pestanya en particular. Això obre espai per a barres de pestanyes molt compactes, sobretot quan les icones són universalment enteses. Si encara substituïu getPageTitle() al vostre adaptador, podeu combinar text i icones; si ometeu aquesta substitució, acabareu amb pestanyes només d'icones.

El comportament de les tabulacions també és altament configurable sense tocar l'XML.Podeu crear pestanyes explícitament amb newTab(), en lloc de confiar en setupWithViewPager(), i podeu canviar el mode de pestanya sobre la marxa, respondre a la selecció mitjançant detectors o fins i tot inserir vistes de pestanyes personalitzades si necessiteu dissenys més elaborats que una simple etiqueta i icona.

Ús de plantilles d'Android Studio per estructurar activitats amb pestanyes

Escriure una interfície amb pestanyes des de zero és fantàstic per entendre com encaixa tot, però Android Studio pot generar una configuració funcional en qüestió de segons.L'IDE inclou plantilles per a patrons comuns, inclosa una "activitat amb pestanyes" disponible tant a Java com a Kotlin.

Quan inicieu un projecte nou, després de triar el nom de l'aplicació i els dispositius de destinació, podeu seleccionar "Activitat amb pestanyes" de la llista d'activitats.Al quadre de diàleg de configuració final hi ha una opció per seleccionar l'estil de navegació, com ara "Pestanyes de la barra d'accions (amb ViewPager)". Un cop confirmat, Android Studio genera una activitat amb TabLayout, ViewPager i fragments d'exemple connectats perquè pugueu executar-la i explorar-la immediatament.

Aquestes plantilles integrades són extremadament útils per a prototips i aplicacions senzilles. Configuren el codi estàndard, els dissenys d'exemple i la lògica de cablejat perquè pugueu centrar els vostres esforços en el contingut real i el comportament específic. En projectes existents, podeu afegir el mateix tipus d'activitat des del menú Fitxer inserint una nova "Activitat amb pestanyes" i seguint els mateixos passos.

Per a aplicacions més ambicioses amb navegació complexa o un llenguatge visual molt personalitzat, les plantilles de tercers poden accelerar encara més les coses.Els mercats com Envato ofereixen plantilles d'aplicacions Android preconstruïdes que inclouen interfícies amb pestanyes sofisticades i patrons de disseny de materials preconfigurats. Aquests kits són especialment útils quan voleu concentrar-vos en una funcionalitat única en lloc de recrear la navegació estàndard des de zero.

Pestanyes imbricades a Elementor per a dissenys web avançats

A la web, els creadors de pàgines com Elementor incorporen la idea de la interfície amb pestanyes als fluxos de treball de disseny d'arrossegar i deixar anar.Un patró particularment flexible són les pestanyes imbricades: pestanyes que es troben dins d'altres pestanyes, cosa que permet agrupar contingut relacionat en dissenys profundament estructurats però compactes sense sobrecarregar la pàgina.

Un bon primer pas a l'hora de dissenyar pestanyes imbricades és definir un llenguatge visual coherent.Per exemple, una pestanya pot combinar una imatge principal, un títol que resumeixi un lloc o un pla, una breu descripció de text i un botó. Un cop definida aquesta estructura, podeu variar la disposició real per pestanya (potser un sol bloc vertical en una, una disposició de dues columnes en una altra i una composició de tres files en una tercera), mantenint els mateixos elements perquè la interfície continuï sent cohesionada.

Les pestanyes imbricades d'Elementor us permeten deixar anar qualsevol widget que vulgueu, no només text plaPodeu inserir taules de preus per mostrar els plans mensuals, semestrals i anuals dins de diferents pestanyes o combinar-les amb graelles de bucle per filtrar dinàmicament entrades de blog, productes o elements de cartera per categoria. Si alineeu les categories amb les pestanyes, els visitants poden fer clic ràpidament pel que els importa sense sortir de la pàgina actual.

Les pestanyes també són una manera potent de guiar els usuaris a través de processos o històries.Un exemple és utilitzar quatre pestanyes aproximadament com a passos en un flux de configuració: cada pestanya pot mostrar una icona, un número de pas i una etiqueta curta a la franja de pestanyes, mentre que el contingut del panell conté text i imatges únics per a aquesta etapa. Afegiu efectes de moviment o animacions subtils a les imatges i els elements i podeu crear una experiència narrativa guiada que sigui molt més atractiva que una pàgina estàtica llarga.

Per a quadres de comandament i vistes d'estil administratiu més avançats, els dissenyadors de vegades van un nivell més profund i utilitzen pestanyes imbricades dins de pestanyes imbricades.Imagineu una columna vertical de pestanyes al costat esquerre que actuen com a seccions principals, cadascuna amb un conjunt horitzontal de pestanyes secundàries per a subvistes. Amb una mica de CSS personalitzat (per exemple, utilitzant l'ID CSS de cada pestanya per girar etiquetes i comprimir la navegació vertical), podeu crear panells de control amb pestanyes altament funcionals completament amb contenidors i graelles de bucle de l'Elementor.

La principal conclusió és que les pestanyes imbricades ofereixen possibilitats gairebé infinites per estructurar el contingut.Tant si organitzeu visites guiades de funcions, opcions de preus, portafolis o taulers de control d'anàlisi, la combinació d'un llenguatge de disseny coherent i dissenys flexibles us permet agrupar una gran quantitat d'informació en un espai que alhora sembla intuïtiu d'explorar.

Mode d'aplicació amb pestanyes a les aplicacions web progressives

Les interfícies amb pestanyes no només es troben dins de les pàgines web; es poden integrar a la manera com les aplicacions web progressives s'executen com a finestres independents.A ChromeOS, un "mode d'aplicació amb pestanyes" especial permet que una PWA presenti la seva pròpia franja de pestanyes d'estil de document, similar al que esperaríeu d'un editor natiu o IDE.

Les PWA admeten diversos modes de visualització controlats mitjançant display membre al manifest de l'aplicació web. Les opcions inclouen fullscreen, standalone, minimal-ui i browser, i els navegadors recorren a una cadena definida si no s'admet un mode concret. Per a un control encara més precís, hi ha un display_override propietat, que permet als desenvolupadors especificar un ordre de reserva personalitzat.

El nou mode d'aplicació amb pestanyes omple un buit anterior proporcionant una interfície de document amb pestanyes (TDI) integrada per a les PWA.En lloc de crear pestanyes falses dins d'una pàgina amb HTML i JavaScript personalitzats, l'aplicació pot demanar al sistema que allotgi diversos documents o vistes en pestanyes reals de nivell superior dins d'una finestra PWA dedicada. Això és diferent de display: browser, que simplement obre l'aplicació en una pestanya normal del navegador amb la interfície d'usuari completa del navegador.

Els casos d'ús típics d'aquest mode inclouen aplicacions de productivitat, eines de comunicació i experiències de lectura.Una PWA d'editor de codi pot obrir diversos fitxers en pestanyes separades, un client de xat pot proporcionar una pestanya per sala o canal i una aplicació de lectura pot obrir enllaços d'articles en noves pestanyes d'aplicacions, tot mantenint-se ordenadament dins de la mateixa finestra en lloc d'omplir el navegador general.

Hi ha diferències importants entre aquest mode de pestanya integrat i les interfícies d'usuari de pestanyes personalitzades creades pels desenvolupadors.Les pestanyes a nivell de sistema poden gestionar un gran nombre de documents amb elegància, beneficiar-se de l'aïllament de recursos i integrar-se profundament amb funcions del navegador com ara l'historial de navegació, "Copia l'enllaç d'aquesta pàgina", la transmissió des de la pestanya actual o l'obertura del document actiu en una finestra normal del navegador. Si només simuleu pestanyes dins de la pàgina, aquestes funcions s'apliquen a la capa externa, no a cada subvista individual.

Com configurar el mode d'aplicació amb pestanyes de PWA

L'activació del mode amb pestanyes per a una PWA comença al manifest, definint un valor apropiat. display_override cadenaUna configuració mínima podria especificar "display": "standalone" i "display_override": , és a dir, que el navegador hauria de preferir una finestra d'aplicació amb pestanyes si és possible i, en cas contrari, tornar a una finestra independent estàndard.

Més enllà d'això, el tab_strip El membre et permet personalitzar el comportament de la barra de pestanyes de l'aplicacióAquest objecte pot definir dues subpropietats opcionals: home_tab i new_tab_buttonSi ometeu tab_strip completament, el navegador proporcionarà un comportament predeterminat utilitzant l'URL d'inici de l'aplicació com a base per crear pestanyes noves.

El concepte de pestanya d'inici és particularment importantÉs una pestanya fixada que sempre ha d'estar present quan la finestra de l'aplicació estigui oberta i no hauria de navegar fora del seu àmbit definit. S'espera que qualsevol enllaç en què es faci clic dins d'aquesta pestanya d'inici s'obri en noves pestanyes de l'aplicació. La configureu mitjançant home_tab.scope_patterns, que és una llista de patrons d'URL (sovint noms de ruta simples com ara "/" or "/index.html") en relació amb l'URL del manifest.

L' new_tab_button l'entrada descriu com es comporta l'affordance de "nova pestanya" de la interfície d'usuariTé una sola url membre que especifica quina pàgina s'obrirà quan l'usuari faci clic al botó, normalment alguna cosa dins de l'abast de l'aplicació com ara "/create"Si aquesta URL cau dins l'abast de la pestanya d'inici, l'aplicació no exposarà cap control de "nova pestanya" separat, ja que se suposa que la navegació es produeix des de la vista d'inici.

Un exemple de manifest que connecta una finestra d'aplicació amb pestanyes podria tenir aquest aspecte (conceptualment): defineix un nom, start_url, display ajustat a standalone, display_override que conté "tabbed", un home_tab l'abast del qual abasta / i /index.html, I un new_tab_button configurat amb a "/create" URL. Amb aquesta configuració, els usuaris obtenen una pestanya d'inici persistent i la possibilitat d'obrir documents addicionals amb un sol clic.

Les aplicacions també poden detectar si s'executen en mode de pestanyes durant l'execució.. Utilitzant el display-mode funció multimèdia, podeu escriure un bloc CSS com ara @media (display-mode: tabbed) per afinar estils o utilitzar window.matchMedia('(display-mode: tabbed)').matches en JavaScript per comprovar si el mode d'aplicació amb pestanyes està actiu i ajustar el comportament de la interfície d'usuari en conseqüència.

Finalment, hi ha una interacció interessant amb l'API Launch Handler.Quan s'estableix una PWA amb pestanyes "client_mode": "navigate-new" En la seva configuració d'inici, els inicis d'aplicacions es poden dirigir a noves pestanyes dins d'una finestra d'aplicació existent en lloc de generar diverses finestres. Això manté l'espai de treball de l'usuari ordenat i reforça la idea d'un únic entorn d'aplicació centrat en pestanyes.

Creació de navegació amb pestanyes personalitzada amb PHP, Ajax i Xajax

Molt abans que les PWA tinguessin pestanyes a nivell de sistema, els desenvolupadors web han estat creant els seus propis components de navegació amb pestanyes utilitzant HTML, CSS, JavaScript i codi del costat del servidor.Un enfocament clàssic utilitza PHP juntament amb el framework Xajax per carregar el contingut de les pestanyes de manera asíncrona i actualitzar la pàgina sense recarregar completament.

L'estructura HTML en aquest exemple és força senzillaUn embolcall <div> porta una classe com pestanas i dins seu un <ul> conté <li> elements per a cada pestanya. Cada element de la llista té un identificador únic (com ara pestana0, pestana1, pestana2) i una classe CSS que indica si està activa o inactiva. Les etiquetes d'àncora dins d'aquests elements de la llista criden una funció JavaScript generada per Xajax, per exemple javascript:void(xajax_cambia_contenido(0)), passant l'índex de pestanyes al servidor.

Sota la llista de pestanyes hi ha un contenidor dedicat per al contingut del cos de la pestanya., sovint a <div> amb un DNI com cuerpopestanasQuan l'usuari fa clic a qualsevol pestanya, la crida Ajax obté el fragment HTML corresponent i l'injecta en aquesta àrea de contingut. La pàgina en si no es torna a carregar mai; només canvia l'HTML intern del contenidor de contingut.

El CSS juga un paper central per fer que les pestanyes semblin i es sentin interactives.Es poden definir dues classes clau: una per a pestanyes inactives (per exemple li.pestanainactiva) i una altra per a la pestanya seleccionada (com ara li.pestanaseleccionada). Les diferències d'estil (color de fons, vores, estils de lletra) donen a l'usuari informació clara sobre quina pestanya està activa. Les regles addicionals forcen colors d'enllaç específics o eliminen la decoració del text perquè les etiquetes coincideixin amb la identitat visual desitjada.

Al costat del servidor, una funció PHP com ara cambia_contenido() orquestra la respostaRep l'índex de tabulació com a paràmetre, crea un xajaxResponse objecte i busca el contingut coincident en una matriu de cadenes PHP. Aleshores utilitza addAssign() per actualitzar la pàgina: una trucada estableix el innerHTML of cuerpopestanas al text seleccionat, un altre canvia el className de la pestanya en què s'ha fet clic a l'estil "seleccionat" i un bucle restableix les pestanyes restants a la classe "inactiva".

Aquest patró és flexible pel que fa a l'origen del contingut.En lloc de cadenes de text codificades de manera fixa a la matriu, podeu muntar HTML a partir de plantilles, extreure registres d'una base de dades o compondre formularis i widgets interactius dinàmicament. Al costat del client no li importa; només rep el marcatge actualitzat per mostrar-lo al cos de la pestanya quan l'usuari canvia de pestanya.

La inicialització es gestiona amb un petit fragment de JavaScriptTrucant xajax_cambia_contenido(0) on window.onload, la pàgina selecciona automàticament la primera pestanya i carrega el seu contingut tan bon punt el DOM està a punt. D'aquesta manera, no cal codificar cap contingut del cos a l'HTML original: el sistema de pestanyes està completament controlat per Ajax des del principi.

Dissenyar barres de pestanyes mòbils amb les millors pràctiques

Al mòbil, la barra de pestanyes inferior és un dels elements de navegació més importants i mereix una atenció especial.Una barra de pestanyes desordenada o inconsistent pot confondre els usuaris ràpidament, sobretot en pantalles petites on cada píxel compta.

Una de les primeres directrius és limitar el nombre d'elements a la barra de pestanyesIntenta utilitzar quatre o cinc icones com a màxim; si superes aquest límit, els objectius tàctils i les etiquetes es redueixen fins al punt que són difícils de tocar amb precisió i d'interpretar. Si realment necessites més opcions de navegació, considera menús secundaris o altres patrons com ara calaixos.

L'elecció de la icona és igualment críticaCada icona ha de transmetre clarament el propòsit principal de la seva secció i ser immediatament recognoscible. Les etiquetes de text es poden utilitzar amb moderació per aclarir el significat, però si les icones estan ben escollides i són coherents amb les convencions de la plataforma, els usuaris les aprendran ràpidament i confiaran només en els elements visuals.

La indicació de l'estat ha de ser inequívocaFeu servir canvis de color, forma o mida per ressaltar la pestanya activa; per exemple, un accent de color, una variant d'icona plena en comptes d'un contorn o un petit augment de mida. Això fa que sigui evident quina secció està veient l'usuari actualment. Al mateix temps, generalment és aconsellable evitar les notificacions o els comptadors numèrics directament a la barra de pestanyes, ja que poden crear soroll visual constant i distreure de la navegació.

La col·locació i la persistència també importen moltLa barra de pestanyes ha d'estar a la part inferior de la pantalla, visible i accessible amb el polze tant en orientació vertical com horitzontal. No l'amagueu darrere de teclats, quadres de diàleg o botons d'acció flotants, i eviteu superposar-la amb altres components que puguin interceptar els tocs. Mantenir la barra estable fomenta la memòria muscular i manté la navegació predictible.

Aprofitant Bootstrap, Bootbox.js i Font Awesome per a les interfícies d'usuari de pestanyes web

Per a projectes web tradicionals, els frameworks com Bootstrap 3 ofereixen components de pestanyes preconfigurats que es poden estilitzar i ampliar fàcilment; vegeu com crear un lloc web des de zeroEl mateix conjunt d'eines proporciona botons, menús desplegables, panells i modals, cosa que facilita el muntatge d'interfícies cohesionades on les pestanyes encaixen naturalment amb la resta del disseny.

Els components de navegació de Bootstrap inclouen marcatge prefabricat i classes per crear franges de pestanyes horitzontals.Si combineu les classes de navegació estàndard amb les classes específiques de les pestanyes, podeu canviar entre els panells de contingut amb un mínim de JavaScript. Com que tots els elements comparteixen el mateix sistema d'estil Bootstrap, les pestanyes s'alinearan automàticament amb l'aspecte dels menús, panells i formularis de tot el lloc web.

Per gestionar les alertes i les confirmacions d'una manera que coincideixi amb l'aspecte de Bootstrap, molts desenvolupadors es basen en Bootbox.js.Aquesta petita biblioteca combina modals d'estil Bootstrap amb API de JavaScript pràctiques, de manera que podeu mostrar diàlegs de confirmació o alertes quan els usuaris canvien de pestanya, intenten tancar vistes no desades o desencadenen accions potencialment destructives, tot sense trencar la coherència visual establerta pel marc de treball CSS.

La iconografia sovint funciona amb Font AwesomeAquest extens conjunt d'icones s'integra perfectament amb Bootstrap, oferint-vos un enorme catàleg de símbols per utilitzar dins de les etiquetes de les pestanyes o les àrees de contingut. Tant si necessiteu icones genèriques per a la pàgina d'inici, la configuració, els missatges i els fitxers com glifs més especialitzats, Font Awesome us ajuda a comunicar el significat sense haver de dissenyar imatges personalitzades cada vegada.

Combinant els components estructurals de Bootstrap, els modals de Bootbox.js i les icones de Font Awesome, podeu crear interfícies amb pestanyes riques que semblin polides i coherents. Les pestanyes, les alertes i les icones comparteixen el mateix llenguatge de disseny, cosa que fa que l'experiència de l'usuari sembli intencionada en lloc de feta amb peces que no coincideixen.

A Android, el web, les PWA i els llocs web basats en PHP, les interfícies amb pestanyes continuen sent una manera fiable d'organitzar diverses vistes o documents en un sol marc.Tant si opteu per TabLayout de Material Design amb un ViewPager, pestanyes imbricades a Elementor, el mode d'aplicació amb pestanyes de ChromeOS per a PWA o solucions personalitzades amb Xajax i Bootstrap, l'objectiu principal és el mateix: mantenir la navegació senzilla, el contingut visible i els canvis de context clars com el cristal·lí.