- 核心组件简介
- 获得成功的途径
- 组件库
- 版本
- 开始使用
- WCM 组件
- 电子邮件组件
- 自适应表单
- 开发
页面组件 (v1)
页面组件是旨在用于模板编辑器的可扩展的页面组件，允许使用模板编辑器来组合页眉/页脚和结构组件。
用途
页面组件构成了使用核心组件以及可编辑模板设计的所有页面的基础。利用页面组件，可以使用其他核心组件将页眉、页脚和页面结构定义为模板。
使用“设计”对话框，可以为页面定义自定义客户端库。与具有可从组件直接访问“编辑”对话框的其他组件不同，由于组件是页面本身，页面组件的“编辑”对话框是页面属性窗口。
版本和兼容性
本文档介绍了页面组件 (v1)，它最初随带 AEM 6.3 的核心组件 1.0.0 版引入。
下表列出了页面组件 (v1) 的兼容性。
| AEM 版本 | 页面组件 v1 |
|---|---|
| 6.3 | 兼容 |
| 6.4 | 兼容 |
注意
本文档介绍了页面组件 (v1)。
有关当前版本的页面组件的详细信息，请参阅页面组件文档。
注意
页面组件 v1 不支持页面重定向。请使用当前版本的页面组件以支持页面重定向。
示例组件输出
以下是摘自 We.Retail 的示例。
屏幕快照
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
{
"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"
]
}
注意
从核心组件执行 JSON 导出需要版本 1.1.0 的核心组件。 有关更多信息，请参阅核心组件 v1 的兼容性信息。
“编辑”对话框
由于该组件呈现整个页面，通常位于编辑对话框中的设置可在页面属性窗口中找到。
“设计”对话框
由于该组件呈现整个页面，因此可通过页面信息 -> 页面设计访问“设计”对话框。
利用“页面设计”窗口，您可以定义应与页面一起加载的客户端库。
- 要添加新字段，请单击或点击字段下的添加按钮。
- 要删除字段，请单击或点击要删除的字段旁边的垃圾桶图标。
- 要重新设置加载顺序，请单击或点击要移动的字段并拖动旁边的手柄。
有关使用客户端库的更多信息，请参阅使用客户端库。
技术详细信息
在 GitHub 上可找到有关页面组件的最新技术文档。
从 GitHub 可下载整个核心组件项目。
在核心组件开发人员文档中可找到有关开发核心组件的其他详细信息。
更改语言
