{"id":390,"date":"2024-06-25T12:47:47","date_gmt":"2024-06-25T10:47:47","guid":{"rendered":"https:\/\/wp-dsfr.fr\/demo\/?page_id=390"},"modified":"2024-09-02T13:42:04","modified_gmt":"2024-09-02T11:42:04","slug":"onglet","status":"publish","type":"page","link":"https:\/\/wp-dsfr.fr\/demo\/liste-des-blocs-wordpress-du-dsfr\/onglet\/","title":{"rendered":"Onglet"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Onglet<\/h1>\n\n\n\n<p>Le composant onglet permet aux utilisateurs de naviguer dans diff\u00e9rentes sections de contenu au sein d\u2019une m\u00eame page. Le syst\u00e8me d&rsquo;onglet aide \u00e0 regrouper diff\u00e9rents contenus dans un espace limit\u00e9 et permet de diviser un contenu dense en sections accessibles individuellement afin de faciliter la lecture pour l&rsquo;utilisateur.<\/p>\n\n\n\n<p>Si le nombre d\u2019onglets d\u00e9passe la largeur du container, un scroll horizontal permet de naviguer entre les diff\u00e9rents onglets.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Exemple d&rsquo;onglet<\/h2>\n\n\n\n<div class=\"fr-tabs\" aria-label=\"\">\n<ul class=\"fr-tabs__list\" role=\"tablist\">\n<li role=\"presentation\"><button role=\"tab\" class=\"fr-tabs__tab\" id=\"fr-tabs-bo09u-tab-0\" aria-controls=\"fr-tabs-bo09u-panel-0\" aria-selected=\"true\">Onglet d&rsquo;exemple<\/button><\/li>\n\n\n\n<li role=\"presentation\"><button role=\"tab\" class=\"fr-tabs__tab\" id=\"fr-tabs-bo09u-tab-1\" aria-controls=\"fr-tabs-bo09u-panel-1\" aria-selected=\"false\">Second exemple<\/button><\/li>\n\n\n\n<li role=\"presentation\"><button role=\"tab\" class=\"fr-tabs__tab fr-icon-checkbox-circle-line fr-tabs__tab--icon-left\" id=\"fr-tabs-bo09u-tab-2\" aria-controls=\"fr-tabs-bo09u-panel-2\" aria-selected=\"false\">Troisi\u00e8me exemple<\/button><\/li>\n<\/ul>\n\n\n\n<div class=\"fr-tabs__panel fr-tabs__panel--selected\" role=\"tabpanel\" tabindex=\"0\" id=\"fr-tabs-bo09u-panel-0\" aria-labelledby=\"fr-tabs-bo09u-tab-0\"><div>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"fr-tabs__panel\" role=\"tabpanel\" tabindex=\"0\" id=\"fr-tabs-bo09u-panel-1\" aria-labelledby=\"fr-tabs-bo09u-tab-1\"><div>\n<ul class=\"wp-block-list\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit<\/li>\n\n\n\n<li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n\n\n\n<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/li>\n\n\n\n<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"fr-tabs__panel\" role=\"tabpanel\" tabindex=\"0\" id=\"fr-tabs-bo09u-panel-2\" aria-labelledby=\"fr-tabs-bo09u-tab-2\"><div>\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"320\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/coding-2.png\" alt=\"\" class=\"wp-image-187\" srcset=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/coding-2.png 320w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/coding-2-300x300.png 300w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/coding-2-150x150.png 150w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"320\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/book-2.png\" alt=\"\" class=\"wp-image-185\" srcset=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/book-2.png 320w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/book-2-300x300.png 300w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/book-2-150x150.png 150w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"320\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/information-2.png\" alt=\"\" class=\"wp-image-193\" srcset=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/information-2.png 320w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/information-2-300x300.png 300w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/information-2-150x150.png 150w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/figure>\n<\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--80)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Onglet Le composant onglet permet aux utilisateurs de naviguer dans diff\u00e9rentes sections de contenu au sein d\u2019une m\u00eame page. Le syst\u00e8me d&rsquo;onglet aide \u00e0 regrouper diff\u00e9rents contenus dans un espace limit\u00e9 et permet de diviser un contenu dense en sections accessibles individuellement afin de faciliter la lecture pour l&rsquo;utilisateur. Si le nombre d\u2019onglets d\u00e9passe la [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":30,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/empty-page.php","meta":{"footnotes":""},"class_list":["post-390","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages\/390","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/comments?post=390"}],"version-history":[{"count":2,"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages\/390\/revisions"}],"predecessor-version":[{"id":501,"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages\/390\/revisions\/501"}],"up":[{"embeddable":true,"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages\/30"}],"wp:attachment":[{"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/media?parent=390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}