Cookies help us deliver our services. By using our services, you agree to our use of cookies.More information
 Actions

Tabs/fr

< Tabs

Souvent, lorsque les utilisateurs veulent avoir des onglets dans des tableaux ou des formulaires dans MediaWiki, ils se tournent vers l’extension Header Tabs. Celle-ci fonctionne simplement en prenant tous vos en-têtes de premier niveau, tels que = General = en les transformant en onglets. L'avant-plan supprime la nécessité de l'extension des onglets d'en-tête en incluant la fonctionnalité de tabulation directement via le framework Foundation. Les onglets natifs de Foreground sont plus rapides, plus flexibles et réactifs par défaut.

Voici un exemple de ce à quoi ressemblent les onglets en utilisant l'extension "Header Tabs" :

Du texte à montrer dans l'onglet Lorem.

Du texte à montrer dans l'onglet Eleifend.

Du texte à montrer dans l'onglet Urna.

Du texte à montrer dans l'onglet Magna.

Le code pour générer ces onglets avec l'extension "Header Tabs" :

= Lorem =
Du texte à montrer dans l'onglet Lorem.
= Eleifend =
Du texte à montrer dans l'onglet Eleifend.
= Urna =
Du texte à montrer dans l'onglet Urna.
= Magna =
Du texte à montrer dans l'onglet Magna.

<headertabs />


Maintenant, utilisez les onglets intégrés à Foreground !

Lorem ipsum dolor sit amet, ornare neque quisque etiam posuere voluptatem erat, scelerisque ornare tellus duis arcu eget ullamcorper. Lectus orci tincidunt augue tristique. Libero mus augue tortor urna, mauris sollicitudin fusce vestibulum nec, erat blandit in placerat ultrices, facilisis interdum consectetuer. Maecenas in unde, dolor a est ornare placerat dicta, ut nostra. Vehicula aliquam erat arcu. Nibh integer vestibulum natoque lacinia quis. A felis euismod sapien, eu dapibus, adipiscing in risus fringilla, hendrerit maecenas in dolor, vel nullam a.

Eleifend vel ut ultrices, vestibulum elit eget tempus urna mauris pede, nec ipsum congue penatibus vehicula cras, suspendisse nunc vitae consectetuer feugiat mauris id, hac odio pellentesque suscipit hymenaeos mattis. Penatibus etiam habitasse, in donec libero vivamus orci fermentum, congue risus auctor in, libero diam velit eget ad, aenean nam etiam faucibus wisi. Fringilla ultricies quam erat placerat, nec purus sit proin. Nulla diam sapien in massa. Nonummy sollicitudin. Aliquet risus. Aenean commodo sit inventore ridiculus.

Urna sed. Integer pellentesque odio sem donec accumsan, vel amet ultrices lobortis ac neque, diam quam lobortis enim vestibulum, ut consectetuer class interdum sit neque donec. Venenatis ullamcorper et sagittis porttitor tincidunt, rhoncus mauris sagittis, sagittis risus mi ante elit volutpat libero. Hac placerat vitae curae, voluptas quam adipiscing urna, luctus elit duis, euismod ornare nec nisl ac ac, minim dolor et metus id vel quia. Malesuada vivamus dui ut nec aliquam vel. Explicabo eget placerat auctor nam, luctus vitae sed libero urna consectetuer, nulla lacus habitasse eligendi, lorem quia, mauris nisl tortor nascetur lacus vestibulum. Varius bibendum amet sapien, pellentesque velit aliquet vitae ac maxime, posuere ipsum pellentesque nisl risus viverra dictum. Consectetuer leo sapien enim orci vel, feugiat proin orci ut commodo nullam tellus, at donec tempus dapibus, orci massa commodo lectus vel ante, interdum leo dolor elit. Lacus wisi morbi urna, pede dictum praesent mi leo. Quis ipsum metus id sit mauris ipsum. Dui elit feugiat cum cras, suscipit a imperdiet et, enim lectus inventore donec aliquet, cubilia tincidunt. Aliquam potenti vestibulum feugiat molestie.

Magna pede, dignissim diam diam, in ac quis molestie felis, facilisis rhoncus, est vestibulum libero suspendisse. Ac sed eget est arcu, tempus hac, maecenas potenti eu, aliquam sit praesent vestibulum sapien aliquet. Accumsan aliquam velit aliquam cupidatat orci rhoncus, quis massa cum condimentum enim bibendum ante, leo odio suspendisse id vestibulum nibh. At donec sociis quis leo ac, consectetuer donec, tempus consectetuer congue dolor magna, libero nam in vivamus proin praesent, nulla in et sollicitudin cras. Lorem enim tincidunt convallis mauris a viverra, cras dictumst gravida, pulvinar ut commodo turpis, nonummy dui id.

Lorem ipsum dolor sit amet, ornare neque quisque etiam posuere voluptatem erat, scelerisque ornare tellus duis arcu eget ullamcorper. Lectus orci tincidunt augue tristique. Libero mus augue tortor urna, mauris sollicitudin fusce vestibulum nec, erat blandit in placerat ultrices, facilisis interdum consectetuer. Maecenas in unde, dolor a est ornare placerat dicta, ut nostra. Vehicula aliquam erat arcu. Nibh integer vestibulum natoque lacinia quis. A felis euismod sapien, eu dapibus, adipiscing in risus fringilla, hendrerit maecenas in dolor, vel nullam a.

Eleifend vel ut ultrices, vestibulum elit eget tempus urna mauris pede, nec ipsum congue penatibus vehicula cras, suspendisse nunc vitae consectetuer feugiat mauris id, hac odio pellentesque suscipit hymenaeos mattis. Penatibus etiam habitasse, in donec libero vivamus orci fermentum, congue risus auctor in, libero diam velit eget ad, aenean nam etiam faucibus wisi. Fringilla ultricies quam erat placerat, nec purus sit proin. Nulla diam sapien in massa. Nonummy sollicitudin. Aliquet risus. Aenean commodo sit inventore ridiculus.

Urna sed. Integer pellentesque odio sem donec accumsan, vel amet ultrices lobortis ac neque, diam quam lobortis enim vestibulum, ut consectetuer class interdum sit neque donec. Venenatis ullamcorper et sagittis porttitor tincidunt, rhoncus mauris sagittis, sagittis risus mi ante elit volutpat libero. Hac placerat vitae curae, voluptas quam adipiscing urna, luctus elit duis, euismod ornare nec nisl ac ac, minim dolor et metus id vel quia. Malesuada vivamus dui ut nec aliquam vel. Explicabo eget placerat auctor nam, luctus vitae sed libero urna consectetuer, nulla lacus habitasse eligendi, lorem quia, mauris nisl tortor nascetur lacus vestibulum. Varius bibendum amet sapien, pellentesque velit aliquet vitae ac maxime, posuere ipsum pellentesque nisl risus viverra dictum. Consectetuer leo sapien enim orci vel, feugiat proin orci ut commodo nullam tellus, at donec tempus dapibus, orci massa commodo lectus vel ante, interdum leo dolor elit. Lacus wisi morbi urna, pede dictum praesent mi leo. Quis ipsum metus id sit mauris ipsum. Dui elit feugiat cum cras, suscipit a imperdiet et, enim lectus inventore donec aliquet, cubilia tincidunt. Aliquam potenti vestibulum feugiat molestie.

Magna pede, dignissim diam diam, in ac quis molestie felis, facilisis rhoncus, est vestibulum libero suspendisse. Ac sed eget est arcu, tempus hac, maecenas potenti eu, aliquam sit praesent vestibulum sapien aliquet. Accumsan aliquam velit aliquam cupidatat orci rhoncus, quis massa cum condimentum enim bibendum ante, leo odio suspendisse id vestibulum nibh. At donec sociis quis leo ac, consectetuer donec, tempus consectetuer congue dolor magna, libero nam in vivamus proin praesent, nulla in et sollicitudin cras. Lorem enim tincidunt convallis mauris a viverra, cras dictumst gravida, pulvinar ut commodo turpis, nonummy dui id.


Ensembles d'onglets multiples

Vous pouvez créer un groupe d'onglets horizontaux en utilisant un balisage minimal.

BALISAGE HTML
<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel3">Tab 3</a></li>
  <li class="tab-title"><a href="#panel4">Tab 4</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel1">
    <p>Ceci est le premier panneau de l'exemple de l'onglet de base. Vous pouvez placer toutes sortes de contenu ici, y compris une grille.</p>
  </div>
  <div class="content" id="panel2">
    <p>Ceci est le deuxième panneau de l'exemple de l'onglet de base. Ceci est le deuxième panneau de l'exemple de l'onglet de base.</p>
  </div>
  <div class="content" id="panel3">
    <p>Ceci est le troisième panneau de l'exemple de l'onglet de base. Ceci est le troisième panneau de l'exemple de l'onglet de base.</p>
  </div>
  <div class="content" id="panel4">
    <p>Ceci est le quatrième panneau de l'exemple de l'onglet de base. Ceci est le quatrième panneau de l'exemple de l'onglet de base.</p>
  </div>
</div>
RENDU HTML

Ceci est le premier panneau de l'exemple de l'onglet de base. Vous pouvez placer toutes sortes de contenu ici, y compris une grille.

Ceci est le deuxième panneau de l'exemple de l'onglet de base. Ceci est le deuxième panneau de l'exemple de l'onglet de base.

Ceci est le troisième panneau de l'exemple de l'onglet de base. Ceci est le troisième panneau de l'exemple de l'onglet de base.

Ceci est le quatrième panneau de l'exemple de l'onglet de base. Ceci est le quatrième panneau de l'exemple de l'onglet de base.


Onglets verticaux

Vous pouvez créer un groupe d'onglets verticaux en utilisant un balisage minimal. L'ajout de la classe vertical modifie l'orientation des tabulations horizontales.

BALISAGE HTML
<ul class="tabs vertical" data-tab>
  <li class="tab-title active"><a href="#panel11">Onglet 1</a></li>
  <li class="tab-title"><a href="#panel21">Onglet 2</a></li>
  <li class="tab-title"><a href="#panel31">Onglet 3</a></li>
  <li class="tab-title"><a href="#panel41">Onglet 4</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel11">
    <p>Ceci est le premier panneau de l'exemple de l'onglet de base. Vous pouvez placer toutes sortes de contenu ici, y compris une grille.</p>
  </div>
  <div class="content" id="panel21">
    <p>Ceci est le deuxième panneau de l'exemple de l'onglet de base. Ceci est le deuxième panneau de l'exemple de l'onglet de base.</p>
  </div>
  <div class="content" id="panel31">
    <p>Ceci est le troisième panneau de l'exemple de l'onglet de base. Ceci est le troisième panneau de l'exemple de l'onglet de base.</p>
  </div>
  <div class="content" id="panel41">
    <p>Ceci est le quatrième panneau de l'exemple de l'onglet de base. Ceci est le quatrième panneau de l'exemple de l'onglet de base.</p>
  </div>
</div>


RENDU HTML

Ceci est le premier panneau de l'exemple de l'onglet de base. Vous pouvez placer toutes sortes de contenu ici, y compris une grille.

Ceci est le deuxième panneau de l'exemple de l'onglet de base. Ceci est le deuxième panneau de l'exemple de l'onglet de base.

Ceci est le troisième panneau de l'exemple de l'onglet de base. Ceci est le troisième panneau de l'exemple de l'onglet de base.

Ceci est le quatrième panneau de l'exemple de l'onglet de base. Ceci est le quatrième panneau de l'exemple de l'onglet de base.