Show Menu
TOPICS×

Componente de página (v1)

O Componente de página é um componente de página extensível projetado para trabalhar com o editor de modelo e permitir que os componentes de cabeçalho/rodapé e estrutura da página sejam montados com o editor de modelo.

Uso

O Componente de página forma a base de todas as páginas projetadas com os componentes principais, bem como modelos editáveis. Usando o componente de página, os cabeçalhos, rodapés e a estrutura da página podem ser definidos como um modelo usando os outros componentes principais.
Usando a caixa de diálogo de design, bibliotecas personalizadas do lado do cliente podem ser definidas para a página. Ao contrário de outros componentes que têm uma caixa de diálogo de edição acessível diretamente do componente, como o componente é a própria página, a caixa de diálogo de edição do componente da página é a janela de propriedades da página.

Versão e compatibilidade

Este documento descreve a v1 do Componente de página, originalmente introduzido com a versão 1.0.0 dos Componentes principais com o AEM 6.3.
A tabela a seguir lista a compatibilidade da v1 do Componente de página.
Versão do AEM
Componente de página v1
6.3
Compatível
6.4
Compatível
Este documento descreve a v1 do Componente de página.
Para obter detalhes sobre a versão atual do Componente de página, consulte o documento Componente de página.
v1 do componente de página não suporta o redirecionamento de página. Use a versão atual do componente de página para suporte ao redirecionamento de página.

Exemplo de saída de componente

A seguir está uma amostra retirada de We.Retail .

Captura de tela

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" ] }
A exportação JSON dos Componentes principais exige a versão 1.1.0 dos Componentes principais. Consulte as informações de compatibilidade dos Componentes principais v1 para obter mais informações.

Edit Dialog

Como o componente representa a página inteira, as configurações que normalmente estariam em uma caixa de diálogo de edição são encontradas na janela Propriedades da página.

Caixa de diálogo Design

Como o componente representa a página inteira, a caixa de diálogo de design é acessada por meio de Informações da
página -> Design
da página.
Usando a janela Design de página, você pode definir bibliotecas do lado do cliente que devem ser carregadas com a página.
  • Para adicionar um novo campo, clique ou toque no botão
    Adicionar
    abaixo dos campos.
  • Para remover um campo, clique ou toque no ícone da lixeira ao lado do campo a ser removido.
  • Para reorganizar a ordem de carregamento, clique ou toque e arraste a alça ao lado do campo a ser movido.
Para obter mais informações sobre o uso de bibliotecas do lado do cliente, consulte Uso de bibliotecas do lado do cliente.

Detalhes técnicos

A documentação técnica mais recente sobre o Componente de página pode ser encontrada no GitHub .
Todo o projeto de componentes principais pode ser baixado do GitHub.
Para obter mais detalhes sobre o desenvolvimento dos Componentes principais, consulte a documentação do desenvolvedor dos Componentes principais.