Paginacomponent (v1) page-component-v
De Component van de Pagina is een verlengbare paginacomponent die wordt ontworpen om met de malplaatjeredacteurte werken en paginakopbal/footer en structuurcomponenten toe te staan om met de malplaatjedacteur worden samengesteld.
Gebruik usage
De component Pagina vormt de basis van alle pagina's die zijn ontworpen met de kerncomponenten en bewerkbare sjablonen. Door de paginacomponent, kunnen de kopballen, footers, en de structuur van de pagina als malplaatje worden bepaald gebruikend de andere kerncomponenten.
Gebruikend de ontwerpdialoog, kunnen de douane cliënt-zijbibliotheken voor de pagina worden bepaald. In tegenstelling tot andere componenten die een Edit dialoog hebben die direct van de component toegankelijk is, omdat de component de pagina zelf is, uitgeeft dialoogvan de paginacomponent het pagina eigenschappenvenster is.
Versie en compatibiliteit version-and-compatibility
In dit document wordt versie 1 van de pagina-component beschreven, die oorspronkelijk is geïntroduceerd met versie 1.0.0 van de Core Components met AEM 6.3.
In de volgende tabel wordt de compatibiliteit van v1 van de paginacomponent weergegeven.
AEM
Paginacomponent v1
6,3
Compatibel
6,4
Compatibel
CAUTION
In dit document wordt versie 1 van de pagina-component beschreven.
Voor details van de huidige versie van de Component van de Pagina, zie het 🔗 document van de Component van de 0} Pagina.
NOTE
v1 van de component page ondersteunt geen omleiding van de pagina. Gelieve te gebruiken de huidige versie van de paginacomponentvoor pagina redirection steun.
Uitvoer van voorbeeldcomponent sample-component-output
Het volgende wordt steekproef genomen van We.Retail.
Schermafbeelding screenshot
HTML 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="{"smartImages":[],"smartSizes":[],"lazyEnabled":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="{"smartImages":[],"smartSizes":[],"lazyEnabled":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="{"smartImages":[],"smartSizes":[],"lazyEnabled":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="{"smartImages":[],"smartSizes":[],"lazyEnabled":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="{"smartImages":[],"smartSizes":[],"lazyEnabled":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="{"smartImages":[],"smartSizes":[],"lazyEnabled":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">© 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 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"
]
}
NOTE
Voor JSON-export van de Core Components is release 1.1.0 van de Core Components vereist. Gelieve te zien de verenigbaarheidsinformatie voor de Componenten van de Kern v1voor meer informatie.
Dialoogvenster Bewerken edit-dialog
Omdat de component de volledige pagina vertegenwoordigt, worden de montages die normaal in zouden zijn uitgeeft dialoog gevonden in het venster van de Eigenschappen van de Pagina.
Ontwerpdialoogvenster design-dialog
Omdat de component de volledige pagina vertegenwoordigt, wordt de ontwerpdialoog betreden via Informatie van de Pagina -> het Ontwerp van de Pagina.
Met behulp van het venster Paginaontwerp kunt u bibliotheken aan de clientzijde definiëren die met de pagina moeten worden geladen.
- Om een nieuw gebied toe te voegen klik of tik toevoegen knoop onder de gebieden.
- Als u een veld wilt verwijderen, klikt of tikt u op het prullenbakpictogram naast het veld dat u wilt verwijderen.
- Als u de laadvolgorde wilt wijzigen, klikt of tikt u op de greep naast het te verplaatsen veld.
Voor meer informatie over het gebruiken van cliënt-zijbibliotheken zie Gebruikend de Bibliotheken van de Kant van de Cliënt.
Technische details technical-details
De recentste technische documentatie over de Component van de Pagina kan op GitHubworden gevonden.
Het volledige kerncomponentenproject kan van GitHub worden gedownload.
De verdere details over het ontwikkelen van de Componenten van de Kern kunnen in de de ontwikkelaarsdocumentatie van de Componenten van de Kern worden gevonden.
recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c