UVIC - UCC
Web
Web
  • Inici
  • Nocions bàsiques d'HTML
    • Colors
  • Nocions bàsiques del web
  • Contingut
    • Text
    • Taules
    • Imatges i documents
    • Formularis
  • Components
    • Desplegables
    • Caixes de contacte
    • Pestanyes
    • Cartes (cards)
    • Marcs
    • Botons
    • Alertes
    • Icones
    • Carousel
  • Disposició
    • Columnes
  • Accessibilitat
    • Imatges
    • Enllaços
Con tecnología de GitBook
En esta página
  • Com es creen pestanyes
  • Per crear el menú de pestanyes:
  • Per crear el contingut de les pestanyes:
  • Les caixetes
  1. Components

Pestanyes

3 pàgines en una de sola

AnteriorCaixes de contacteSiguienteCartes (cards)

Última actualización hace 2 años

Les pestanyes ens permeten crear subpàgines dins d'un sol node, com per exemple qualsevol pàgina amb . També les podem utilitzar per dividir la informació dins de una pàgina, com per exemple a la part final del .

Quan parlem de pestanyes hem de distingir entre dues parts molt importants:

  • El menú de pestanyes: és la barra horitzontal en què l'usuari tria quina pestanya vol veure.

  • El contingut de les pestanyes: és el contenidor en què l'usuari veu el contingut de la pestanya seleccionada.

Com es creen pestanyes

Per crear el menú de pestanyes:

El menú de pestanyes té un aspecte similar a:

<nav>
	<div class="nav nav-tabs" id="nav-tab" role="tablist">
		<a class="nav-item nav-link active" id="nav-1-tab" data-bs-toggle="tab" href="#nav-1" role="tab" aria-controls="nav-1" aria-selected="true">titolPestanya01</a>
		<a class="nav-item nav-link" id="nav-2-tab" data-bs-toggle="tab" href="#nav-2" role="tab" aria-controls="nav-2" aria-selected="true">titolPestanya02</a>
		<a class="nav-item nav-link" id="nav-3-tab" data-bs-toggle="tab" href="#nav-3" role="tab" aria-controls="nav-3" aria-selected="true">titolPestanya03</a>
	</div>
</nav>

Un cop fet això, caldrà que substitueixis els textos "titolPestanya0n", pels títols reals que han de tenir les pestanyes.

Aquest codi afegirà un menú per a 3 pestanyes. En cas que no vulguis 3 pestanyes, cal que facis el següent:

  • Eliminar una pestanya: elimina l'última línia de codi abans del </div>.

  • Afegir una pestanya: duplica alguna de les línies de just abans del</div> i substitueix n pel número de pestanya.

Per crear el contingut de les pestanyes:

Un cop tens el menú creat, cal que creïs el contingut. Primerament, necessites una estructura HTML, així que pots copiar el codi següent a sota del codi del menú de pestanyes que has preparat abans.

<div class="tab-content">
	<div class="tab-pane fade show active" id="nav-1" role="tabpanel" aria-labelledby="nav-1-tab">
		<h2 class="bb">titolPestanya01</h2>
		<!--contingutPestanya01-->
	</div>
	<div class="tab-pane fade" id="nav-2" role="tabpanel" aria-labelledby="nav-2-tab">
		<h2 class="bb">titolPestanya02</h2>
		<!--contingutPestanya02-->
	</div>
	<div class="tab-pane fade" id="nav-3" role="tabpanel" aria-labelledby="nav-3-tab">
		<h2 class="bb">titolPestanya03</h2>
		<!--contingutPestanya03-->
	</div>
</div>

Fixa't que aquest codi està preparat per a 3 pestanyes. Si en necessites més, cal que copiîs el fragment següent de codi just abans de l'últim </div>:

<div class="tab-pane fade" id="nav-n" role="tabpanel" aria-labelledby="nav-n-tab">
    <h2 class="bb">titolPestanyaN</h2>
    <!--contingutPestanyaN-->
</div>

Un cop hagis copiat el codi, cal que substitueixis les n pel número de pestanya.

Les caixetes

Per crear un menú de pestanyes en aquest format de caixa especial cal que utilitzis l'estructura següent:

<nav>
	<ul class="nav nav-tabs uvic-numtabs" id="uvic-numtab" role="tablist">
		<li class="nav-item" role="presentation"><a class="nav-link" href="#content-tab-1" aria-controls="content-tab-1" aria-selected="false" data-bs-toggle="tab" id="tab-1" role="tab" tabindex="-1">
			<span class="num">01</span>
			<span>titolPestanya01</span>
		</a></li>
		<li class="nav-item" role="presentation"><a class="nav-link active" href="#content-tab-2" aria-controls="content-tab-2" aria-selected="true" data-bs-toggle="tab" id="tab-2" role="tab">
			<span class="num">02</span>
			<span>titolPestanya02</span>
		</a></li>
		<li class="nav-item" role="presentation"><a class="nav-link" href="#content-tab-3" aria-controls="content-tab-3" aria-selected="false" data-bs-toggle="tab" id="tab-3" role="tab" tabindex="-1">
			<span class="num">03</span>
			<span>titolPestanya03</span>
		</a></li>
	</ul>
</nav>

I l'estructura següent per a crear els continguts:

<div class="tab-content" id="uvic-numtab-content-1">
	<div aria-labelledby="home-tab" class="tab-pane fade show active" id="content-tab-1" role="tabpanel">
		<h2>titolPestanya01</h2>
		<!--contingutPestanya01-->
	</div>

	<div aria-labelledby="profile-tab" class="tab-pane fade" id="content-tab-2" role="tabpanel">
		<h2>titolPestanya02</h2>
		<!--contingutPestanya02-->
	</div>

	<div aria-labelledby="profile-tab" class="tab-pane fade" id="content-tab-3" role="tabpanel">
		<h2>titolPestanya03</h2>
		<!--contingutPestanya03-->
	</div>

	<div aria-labelledby="profile-tab" class="tab-pane fade" id="content-tab-4" role="tabpanel">
		<h2>titolPestanya04</h2>
		<!--contingutPestanya04-->
	</div>
</div>

Per crear el menú de pestanyes cal que enganxis l'estructura següent al del node.

Hi ha una versió alternativa de les pestanyes que utilitzem per remarcar processos. Un bon exemple és .

al nodes de matrícula
la informació detallada d'algun estudi
directori
codi font
Exemple visual de les pestanyes
Exemple de menú de pestanyes