Show Menu
TOPICS×

Composant Page (v1)

The Page Component is an extensible page component designed to work with the template editor and allow page header/footer and structure components to be assembled with the template editor.

Utilisation

Le composant Page sert de base à toutes les pages conçues avec les composants principaux ainsi que les modèles modifiables. En utilisant le composant Page, les en-têtes, les pieds de page et la structure de la page peuvent être définis dans un modèle à l'aide des autres composants principaux.
Grâce à la boîte de dialogue de conception , les bibliothèques côté client personnalisées peuvent être définies pour la page. Contrairement aux autres composants dont la boîte de dialogue de modification est accessible directement à partir de ceux-ci, puisque le composant est la page elle-même, la boîte de dialogue de modification du composant de page est la fenêtre des propriétés de la page.

Version et compatibilité

Ce document décrit la version v1 du composant Page, introduite à l'origine avec la version 1.0.0 des composants principaux avec AEM 6.3.
Le tableau suivant répertorie la compatibilité de la version v1 du composant Page.
Version d’AEM
Composant Page v1
6.3
Compatible
6.4
Compatible
Ce document décrit la version v1 du composant Page.
Pour plus d’informations sur la version actuelle du composant Page, voir le document Composant Page .
La version v1 du composant Page ne prend pas en charge la redirection de la page. Utilisez la version actuelle du composant Page pour la prise en charge de la redirection de la page.

Exemple de sortie de composant

The following is sample taken from We.Retail. we-retail.html

Capture d’écran

HTML

<!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <meta name="template" content="hero-page"/> <link rel="stylesheet" href="/etc.clientlibs/weretail/clientlibs/clientlib-dependencies.css" type="text/css"> <script type="text/javascript" src="/etc.clientlibs/weretail/clientlibs/clientlib-dependencies.js"></script> <link rel="stylesheet" href="/etc.clientlibs/clientlibs/granite/jquery-ui.css" type="text/css"> <link rel="stylesheet" href="/etc.clientlibs/weretail/clientlibs/clientlib-base.css" type="text/css"> <script src="https://use.typekit.net/dje4ayd.js"></script> <script>try { Typekit.load({async: true}); } catch (e) { }</script> <script type="text/javascript"> (function() { window.ContextHub = window.ContextHub || {}; /* setting paths */ ContextHub.Paths = ContextHub.Paths || {}; ContextHub.Paths.CONTEXTHUB_PATH = "/etc/cloudsettings/default/contexthub"; ContextHub.Paths.RESOURCE_PATH = "\/content\/we\u002Dretail\/us\/en\/equipment\/_jcr_content\/contexthub"; ContextHub.Paths.SEGMENTATION_PATH = "\/etc\/segmentation\/contexthub"; ContextHub.Paths.CQ_CONTEXT_PATH = ""; /* setting initial constants */ ContextHub.Constants = ContextHub.Constants || {}; ContextHub.Constants.ANONYMOUS_HOME = "/home/users/l/l5mcNzhlwJ663w4ZSrI_"; ContextHub.Constants.MODE = "no-ui"; }()); </script><script src="/etc/cloudsettings/default/contexthub.kernel.js" type="text/javascript"></script> <link href="/etc/designs/we-retail.css" rel="stylesheet" type="text/css"/> <!--[if IE]><link rel="shortcut icon" href="/etc/designs/we-retail/favicon.ico"/><![endif]--> <link rel="icon" type="image/png" href="/etc/designs/we-retail/favicon_32.png"/> <link rel="apple-touch-icon" sizes="60x60" href="/etc/designs/we-retail/touch-icon_60.png"/> <link rel="apple-touch-icon" sizes="76x76" href="/etc/designs/we-retail/touch-icon_76.png"/> <link rel="apple-touch-icon" sizes="120x120" href="/etc/designs/we-retail/touch-icon_120.png"/> <link rel="apple-touch-icon" sizes="152x152" href="/etc/designs/we-retail/touch-icon_152.png"/> <title>Equipment</title> </head> <body> <div class="container"> <div class="root responsivegrid"> <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 "> <div class="header aem-GridColumn aem-GridColumn--default--12"> <div class="we-retail-header" data-we-header-content="/content/we-retail/us/en/equipment.header_include.html"> <div class="we-SearchModal modal fade" id="navbar-search" role="dialog" data-color="primary"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <span><i class="we-Icon we-Icon--search"></i>Search anything</span> <button type="button" class="close" data-dismiss="modal"><span>Close search</span><i class="we-Icon we-Icon--close-alt"></i></button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-12"> <form id="form-search-input-inline" data-paths="[/content/we-retail/us/en]" class="scf-js-searchform navbar-form navbar-left" role="search"> <div class="scf-quicksearch-form-group form-group"> <input type="search" id="scf-js-quicksearch-input-inline" placeholder="Start typing..." data-dropdown="drop_search" aria-controls="drop_search" aria-expanded="false" name="input_value" class="we-SearchModal-input" value="" required="" autocomplete="off"> <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span> <input type="hidden" name="resultPage" class="scf-js-seach-resultPage" value="/content/we-retail/us/en/community/search"/> <input type="hidden" name="searchEndpoint" class="scf-js-search-endpoint" value="/content/we-retail/us/en/community/search/jcr:content/content/primary/searchresult"/> </div> </form> </div> </div> </div> </div> </div> </div> <!-- /.we-SearchModal --> <div class="we-LanguageModal modal fade" tabindex="-1" role="dialog" data-color="primary"> <div class="modal-dialog modal-center modal-sm"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title text-center">CHOOSE YOUR COUNTRY</h3> </div> <div class="modal-body"> <ul class="we-LanguagesList"> <li> <i class="we-lang-icon we-lang-icon-ca"></i><span><a href="/content/we-retail/ca/en.html">English</a> | <a href="/content/we-retail/ca/fr.html">French</a></span> </li> <li> <i class="we-lang-icon we-lang-icon-ch"></i><span><a href="/content/we-retail/ch/de.html">German</a> | <a href="/content/we-retail/ch/fr.html">French</a> | <a href="/content/we-retail/ch/it.html">Italian</a></span> </li> <li> <i class="we-lang-icon we-lang-icon-de"></i><span><a href="/content/we-retail/de/de.html">German</a></span> </li> <li> <i class="we-lang-icon we-lang-icon-es"></i><span><a href="/content/we-retail/es/es.html">Spanish</a></span> </li> <li> <i class="we-lang-icon we-lang-icon-fr"></i><span><a href="/content/we-retail/fr/fr.html">French</a></span> </li> <li> <i class="we-lang-icon we-lang-icon-it"></i><span><a href="/content/we-retail/it/it.html">Italian</a></span> </li> <li> <i class="we-lang-icon we-lang-icon-us"></i><span><a href="/content/we-retail/us/en.html" class="active">English</a> | <a href="/content/we-retail/us/es.html">Spanish</a></span> </li> </ul> </div> </div> <div class="modal-after"> <a href="#" data-dismiss="modal"><i class="we-Icon we-Icon--close-alt"></i> Close</a> </div> </div> </div><!-- /.we-LanguageModal --> </div> </div> <div class="heroimage image aem-GridColumn aem-GridColumn--default--12"> <div class="we-HeroImage width-full jumbotron" style="background-image: url(\2f content\2fwe-retail\2fus\2f en\2f equipment\2fjcr%3acontent\2froot\2fhero_image.img.jpeg);"> <div class="container cq-dd-image"> <div class="we-HeroImage-wrapper"> <p class="h3"></p> <strong class="we-HeroImage-title h1">Equipment</strong> </div> </div> </div> </div> <div class="responsivegrid aem-GridColumn aem-GridColumn--default--12"> <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 "> <div class="cmp cmp-title aem-GridColumn aem-GridColumn--default--12"> <h2>Welcome our finest equipment</h2> </div> <div class="categoryteaser aem-GridColumn aem-GridColumn--default--6"> <div class="we-CategoryTeaser cq-dd-image"> <div class="crop crop-16_9"> <img class="crop__content" data-lazy-src="/content/we-retail/us/en/equipment/jcr%3acontent/root/responsivegrid/category_teaser.img.jpeg"/> </div> <h2></h2> <h3></h3> <a href="/content/we-retail/us/en/products/equipment/hiking.html" class="btn btn-action btn-primary">Hiking</a> </div> </div> <div class="categoryteaser aem-GridColumn aem-GridColumn--default--6"> <div class="we-CategoryTeaser cq-dd-image"> <div class="crop crop-16_9"> <img class="crop__content" data-lazy-src="/content/we-retail/us/en/equipment/jcr%3acontent/root/responsivegrid/category_teaser_2082536754.img.jpeg"/> </div> <h2></h2> <h3></h3> <a href="/content/we-retail/us/en/products/equipment/running.html" class="btn btn-action btn-primary">Running</a> </div> </div> <div class="categoryteaser aem-GridColumn aem-GridColumn--default--4"> <div class="we-CategoryTeaser cq-dd-image"> <div class="crop crop-16_9"> <img class="crop__content" data-lazy-src="/content/we-retail/us/en/equipment/jcr%3acontent/root/responsivegrid/category_teaser_647414391.img.jpeg"/> </div> <h2></h2> <h3></h3> <a href="/content/we-retail/us/en/products/equipment/biking.html" class="btn btn-action btn-primary">Biking</a> </div> </div> <div class="categoryteaser aem-GridColumn aem-GridColumn--default--4"> <div class="we-CategoryTeaser cq-dd-image"> <div class="crop crop-16_9"> <img class="crop__content" data-lazy-src="/content/we-retail/us/en/equipment/jcr%3acontent/root/responsivegrid/category_teaser_1341949589.img.jpeg"/> </div> <h2></h2> <h3></h3> <a href="/content/we-retail/us/en/products/equipment/surfing.html" class="btn btn-action btn-primary">Surfing</a> </div> </div> <div class="categoryteaser aem-GridColumn aem-GridColumn--default--4"> <div class="we-CategoryTeaser cq-dd-image"> <div class="crop crop-16_9"> <img class="crop__content" data-lazy-src="/content/we-retail/us/en/equipment/jcr%3acontent/root/responsivegrid/category_teaser_1398042708.img.jpeg"/> </div> <h2></h2> <h3></h3> <a href="/content/we-retail/us/en/products/equipment/snow-sports.html" class="btn btn-action btn-primary">Snow Sports</a> </div> </div> <div class="cmp cmp-title aem-GridColumn aem-GridColumn--default--12"> <h2>Featured products</h2> </div> <div class="cmp cmp-list aem-GridColumn aem-GridColumn--default--12"> <div class="we-product-grid-container"> <ul class="foundation-ordered-list-container"> <li class="foundation-list-item"> <we-product-item price="$110.00" size="11,12,7,8,9,10" inline-template> <div class="we-ProductsGrid-item"> <div class="we-ProductsGrid-item-image img-center"> <div class="cmp cmp-image"> <noscript data-cmp-image="{&#34;smartImages&#34;:[],&#34;smartSizes&#34;:[],&#34;lazyEnabled&#34;:true}"> <img src="/content/we-retail/us/en/products/equipment/biking/marin-mountain-bike-shoes/_jcr_content/root/product/image.img.jpg" alt/> </noscript> </div> </div> <h3 class="we-ProductsGrid-item-title h4">Marin Mountain Bike Shoes</h3> <span class="we-ProductsGrid-item-subtitle small text-muted">footwear</span> <strong class="we-ProductsGrid-item-price"> <span>$110.00</span> <span class="we-ProductsGrid-item-price-new"></span> <s class="we-ProductsGrid-item-price-old"></s> </strong> <span class="we-ProductsGrid-item-discount hidden"><span></span>off</span> <a href="/content/we-retail/us/en/products/equipment/biking/marin-mountain-bike-shoes.html" class="we-ProductsGrid-item-link"></a> </div> <!-- /.we-ProductsGrid-item --> </we-product-item> </li> <li class="foundation-list-item"> <we-product-item price="$65.00" size="11,13,9" inline-template> <div class="we-ProductsGrid-item"> <div class="we-ProductsGrid-item-image img-center"> <div class="cmp cmp-image"> <noscript data-cmp-image="{&#34;smartImages&#34;:[],&#34;smartSizes&#34;:[],&#34;lazyEnabled&#34;:true}"> <img src="/content/we-retail/us/en/products/equipment/running/fleet-cross-training-shoe/_jcr_content/root/product/image.img.jpg" alt/> </noscript> </div> </div> <h3 class="we-ProductsGrid-item-title h4">Fleet Cross-Training Shoe</h3> <span class="we-ProductsGrid-item-subtitle small text-muted">footwear</span> <strong class="we-ProductsGrid-item-price"> <span>$65.00</span> <span class="we-ProductsGrid-item-price-new"></span> <s class="we-ProductsGrid-item-price-old"></s> </strong> <span class="we-ProductsGrid-item-discount hidden"><span></span>off</span> <a href="/content/we-retail/us/en/products/equipment/running/fleet-cross-training-shoe.html" class="we-ProductsGrid-item-link"></a> </div> <!-- /.we-ProductsGrid-item --> </we-product-item> </li> <li class="foundation-list-item"> <we-product-item price="$75.00" size="S,XL,L,M" inline-template> <div class="we-ProductsGrid-item"> <div class="we-ProductsGrid-item-image img-center"> <div class="cmp cmp-image"> <noscript data-cmp-image="{&#34;smartImages&#34;:[],&#34;smartSizes&#34;:[],&#34;lazyEnabled&#34;:true}"> <img src="/content/we-retail/us/en/products/equipment/biking/sequoia-bike-helmet/_jcr_content/root/product/image.img.jpg" alt/> </noscript> </div> </div> <h3 class="we-ProductsGrid-item-title h4">Sequoia Bike Helmet</h3> <span class="we-ProductsGrid-item-subtitle small text-muted">helmet</span> <strong class="we-ProductsGrid-item-price"> <span>$75.00</span> <span class="we-ProductsGrid-item-price-new"></span> <s class="we-ProductsGrid-item-price-old"></s> </strong> <span class="we-ProductsGrid-item-discount hidden"><span></span>off</span> <a href="/content/we-retail/us/en/products/equipment/biking/sequoia-bike-helmet.html" class="we-ProductsGrid-item-link"></a> </div> <!-- /.we-ProductsGrid-item --> </we-product-item> </li> <li class="foundation-list-item"> <we-product-item price="$39.00" size="XXS,S,XL,L,M,XXL" inline-template> <div class="we-ProductsGrid-item"> <div class="we-ProductsGrid-item-image img-center"> <div class="cmp cmp-image"> <noscript data-cmp-image="{&#34;smartImages&#34;:[],&#34;smartSizes&#34;:[],&#34;lazyEnabled&#34;:true}"> <img src="/content/we-retail/us/en/products/equipment/hiking/rios-t-shirt/_jcr_content/root/product/image.img.jpg" alt/> </noscript> </div> </div> <h3 class="we-ProductsGrid-item-title h4">Rios T Shirt</h3> <span class="we-ProductsGrid-item-subtitle small text-muted">shirt</span> <strong class="we-ProductsGrid-item-price"> <span>$39.00</span> <span class="we-ProductsGrid-item-price-new"></span> <s class="we-ProductsGrid-item-price-old"></s> </strong> <span class="we-ProductsGrid-item-discount hidden"><span></span>off</span> <a href="/content/we-retail/us/en/products/equipment/hiking/rios-t-shirt.html" class="we-ProductsGrid-item-link"></a> </div> <!-- /.we-ProductsGrid-item --> </we-product-item> </li> <li class="foundation-list-item"> <we-product-item price="$900.00" inline-template> <div class="we-ProductsGrid-item"> <div class="we-ProductsGrid-item-image img-center"> <div class="cmp cmp-image"> <noscript data-cmp-image="{&#34;smartImages&#34;:[],&#34;smartSizes&#34;:[],&#34;lazyEnabled&#34;:true}"> <img src="/content/we-retail/us/en/products/equipment/surfing/the-stretch-longboard/_jcr_content/root/product/image.img.png" alt/> </noscript> </div> </div> <h3 class="we-ProductsGrid-item-title h4">The Stretch Longboard</h3> <span class="we-ProductsGrid-item-subtitle small text-muted">equipment</span> <strong class="we-ProductsGrid-item-price"> <span>$900.00</span> <span class="we-ProductsGrid-item-price-new"></span> <s class="we-ProductsGrid-item-price-old"></s> </strong> <span class="we-ProductsGrid-item-discount hidden"><span></span>off</span> <a href="/content/we-retail/us/en/products/equipment/surfing/the-stretch-longboard.html" class="we-ProductsGrid-item-link"></a> </div> <!-- /.we-ProductsGrid-item --> </we-product-item> </li> <li class="foundation-list-item"> <we-product-item price="$39.99" inline-template> <div class="we-ProductsGrid-item"> <div class="we-ProductsGrid-item-image img-center"> <div class="cmp cmp-image"> <noscript data-cmp-image="{&#34;smartImages&#34;:[],&#34;smartSizes&#34;:[],&#34;lazyEnabled&#34;:true}"> <img src="/content/we-retail/us/en/products/equipment/running/faba-running-pants/_jcr_content/root/product/image.img.jpg" alt/> </noscript> </div> </div> <h3 class="we-ProductsGrid-item-title h4">Faba Running Pants</h3> <span class="we-ProductsGrid-item-subtitle small text-muted">pants</span> <strong class="we-ProductsGrid-item-price"> <span>$39.99</span> <span class="we-ProductsGrid-item-price-new"></span> <s class="we-ProductsGrid-item-price-old"></s> </strong> <span class="we-ProductsGrid-item-discount hidden"><span></span>off</span> <a href="/content/we-retail/us/en/products/equipment/running/faba-running-pants.html" class="we-ProductsGrid-item-link"></a> </div> <!-- /.we-ProductsGrid-item --> </we-product-item> </li> </ul> </div> </div> <div class="button aem-GridColumn aem-GridColumn--default--12"> <a class="btn btn-primary btn-action cq-dd-linkTo " href="/content/we-retail/us/en/products/equipment.html" role="button">All equipment</a> </div> <div class="cmp cmp-title aem-GridColumn aem-GridColumn--default--12"> <h2>Winter is coming, get ready</h2> </div> <div class="categoryteaser aem-GridColumn aem-GridColumn--default--6"> <div class="we-CategoryTeaser cq-dd-image"> <div class="crop crop-16_9"> <img class="crop__content" data-lazy-src="/content/we-retail/us/en/equipment/jcr%3acontent/root/responsivegrid/category_teaser_643606949.img.jpeg"/> </div> <h2></h2> <h3></h3> <a href="/content/we-retail/us/en/products/equipment/snow-sports.html" class="btn btn-action btn-primary">Snow Sports</a> </div> </div> <div class="categoryteaser aem-GridColumn aem-GridColumn--default--6"> <div class="we-CategoryTeaser cq-dd-image"> <div class="crop crop-16_9"> <img class="crop__content" data-lazy-src="/content/we-retail/us/en/equipment/jcr%3acontent/root/responsivegrid/category_teaser_883210151.img.jpeg"/> </div> <h2></h2> <h3></h3> <a href="/content/we-retail/us/en/products/equipment/snow-sports.html" class="btn btn-action btn-primary">Snowboarding</a> </div> </div> <div class="new newpar section aem-Grid-newComponent"> </div> </div></div> <div class="footer aem-GridColumn aem-GridColumn--default--12"> <footer class="we-Footer width-full"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="we-Logo we-Logo--big"> we.<strong>Retail</strong> </div> </div> <div class="col-md-8 col-xs-12"> <div class="col-lg-2 col-md-2 col-xs-3"> <div class="we-Footer-nav"> <h2 class="h4"> <a href="/content/we-retail/us/en/experience.html">Experience</a> </h2> </div> </div> <div class="col-lg-2 col-md-2 col-xs-3"> <div class="we-Footer-nav"> <h2 class="h4"> <a href="/content/we-retail/us/en/men.html">Men</a> </h2> </div> </div> <div class="col-lg-2 col-md-2 col-xs-3"> <div class="we-Footer-nav"> <h2 class="h4"> <a href="/content/we-retail/us/en/women.html">Women</a> </h2> </div> </div> <div class="col-lg-2 col-md-2 col-xs-3"> <div class="we-Footer-nav"> <h2 class="h4"> <a href="/content/we-retail/us/en/equipment.html">Equipment</a> </h2> </div> </div> <div class="col-lg-2 col-md-2 col-xs-3"> <div class="we-Footer-nav"> <h2 class="h4"> <a href="/content/we-retail/us/en/about-us.html">About Us</a> </h2> </div> </div> <div class="col-lg-2 col-md-2 col-xs-3"> <div class="we-Footer-nav"> <h2 class="h4"> <a href="/content/we-retail/us/en/products.html">Products</a> </h2> </div> </div> <div class="col-lg-2 col-md-2 col-xs-3"> <div class="we-Footer-nav"> <h2 class="h4"> <a href="/content/we-retail/us/en/community.html">community</a> </h2> </div> </div> </div> </div> <div class="row we-Footer-section we-Footer-section--sub"> <div class="we-Footer-section-item"> <span class="text-uppercase text-muted">&copy; All rights reserved</span> </div> <div class="we-Footer-section-item"> <a href="#" class="text-uppercase text-muted">Terms of use & privacy policy</a> </div> </div> <div class="row"> <div class="col-md-12"> <div class="text-center"> <a href="#top" class="btn btn-action btn-action-up btn-primary">Ride to the top</a> </div> </div> </div> </div> </footer> </div> <div class="new newpar section aem-Grid-newComponent"> </div> </div></div> </div> <script type="text/javascript" src="/etc.clientlibs/clientlibs/granite/jquery-ui.js"></script> <script type="text/javascript" src="/etc.clientlibs/weretail/clientlibs/clientlib-base.js"></script> </body> </html>

JSON

{ "designPath": "/etc/designs/we-retail", "title": "Equipment", "lastModifiedDate": 1507623887022, "templateName": "hero-page", "cssClassNames": "page", "language": "en", ":type": "weretail/components/structure/page", ":items": { "root": { "columnCount": 12, "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12", ":items": { "header": { "columnClassNames": "aem-GridColumn aem-GridColumn--default--12", ":type": "weretail/components/structure/header", "theme": "inverse" }, "hero_image": { "columnClassNames": "aem-GridColumn aem-GridColumn--default--12", "smartSizes": [], "smartImages": [], "lazyEnabled": true, ":type": "weretail/components/content/heroimage" }, "responsivegrid": { "columnClassNames": "aem-GridColumn aem-GridColumn--default--12", "columnCount": 12, "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12", ":items": { "title": { "columnClassNames": "aem-GridColumn aem-GridColumn--default--12", ":type": "weretail/components/content/title", "jcr:title": "Welcome! Our finest equipment!", "type": "h2" } }, ":itemsOrder": [ "title" ], ":type": "wcm/foundation/components/responsivegrid" }, "footer": { "columnClassNames": "aem-GridColumn aem-GridColumn--default--12", ":type": "weretail/components/structure/footer" } }, ":itemsOrder": [ "header", "hero_image", "responsivegrid", "footer" ], ":type": "wcm/foundation/components/responsivegrid" } }, ":itemsOrder": [ "root" ] }
L’exportation JSON à partir des composants principaux nécessite la version 1.1.0 des composants principaux. Pour plus d’informations, voir les informations de compatibilité des composants principaux v1 .

Boîte de dialogue de modification

Because the component represents the entire page, settings that would normally be in an edit dialog are found in the Page Properties window.

Boîte de dialogue de conception

Puisque le composant représente la page entière, la boîte de dialogue de conception est accessible via
les informations de page -> Conception de page
.
À l’aide de la fenêtre Conception de page, vous pouvez définir des bibliothèques côté client qui doivent être chargées avec la page.
  • Pour ajouter un nouveau champ, appuyez ou cliquez sur le bouton
    Ajouter
    sous les champs.
  • Pour supprimer un champ, cliquez ou appuyez sur l’icône de corbeille à côté du champ à supprimer.
  • Pour réorganiser l’ordre de chargement, cliquez ou appuyez et faites glisser la poignée à côté du champ à déplacer.
For more information about using client-side libraries see Using Client Side Libraries .

Détails techniques

The latest technical documentation about the Page Component can be found on GitHub. page
Le projet sur les composants principaux peut être téléchargé depuis GitHub.
Vous trouverez plus d’informations sur le développement des composants principaux dans la documentation destinée aux développeurs de composants principaux .