未验证 提交 b7b00e49 编写于 作者: O openharmony_ci 提交者: Gitee

!3344 sample/codelabs添加

Merge pull request !3344 from LiAn/master
......@@ -87,7 +87,7 @@
- [CanvasRenderingContext2D对象](ui/ui-js-components-canvasrenderingcontext2d.md)
- [Path2D对象](ui/ui-js-components-path2d.md)
- [OffscreenCanvas对象](ui/ui-js-components-offscreencanvas.md)
- [栅格布局](ui/ui-js-components-calendar.md)
- [栅格布局](ui/ui-js-components-grid.md)
- Svg开发指导
- [基础知识](ui/ui-js-components-svg-overview.md)
- [绘制图形](ui/ui-js-components-svg-graphics.md)
......
......@@ -275,3 +275,11 @@ let alarm : reminderAgent.ReminderRequestAlarm = {
slotType: notification.SlotType.SOCIAL_COMMUNICATION
}
```
## 相关实例
基于后台代理提醒开发,有以下相关实例可供参考:
- [`AlarmClock`:后台代理提醒(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/Notification/AlarmClock)
# 后台任务管理
- 后台任务
- [后台任务概述](background-task-overview.md)
- [后台任务开发指导](background-task-dev-guide.md)
\ No newline at end of file
......@@ -300,3 +300,9 @@
```
var options = numberFormat.resolvedOptions();
```
## 相关实例
针对Intl开发,有以下相关实例可供参考:
-[`International`:国际化(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/International)
\ No newline at end of file
......@@ -55,7 +55,7 @@
- [CanvasRenderingContext2D对象](ui-js-components-canvasrenderingcontext2d.md)
- [Path2D对象](ui-js-components-path2d.md)
- [OffscreenCanvas对象](ui-js-components-offscreencanvas.md)
- [栅格布局](ui-js-components-calendar.md)
- [栅格布局](ui-js-components-grid.md)
- Svg开发指导
- [基础知识](ui-js-components-svg-overview.md)
- [绘制图形](ui-js-components-svg-graphics.md)
......
......@@ -162,3 +162,10 @@ Image($rawfile('test.png')) //rawfile$r引用rawfile目录下图片
Image($rawfile('newDir/newTest.png')) //rawfile$r引用rawfile目录下图片
```
## 相关实例
针对访问应用资源,有以下相关实例可供参考:
- [`ResourceManager`:资源管理器(eTS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/common/ResourceManager)
......@@ -83,4 +83,11 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> background-position仅支持背景图片的移动,不支持背景颜色(background-color)。
![zh-cn_image_background_img.gif](figures/zh-cn_image_background_img.gif)
\ No newline at end of file
![zh-cn_image_background_img.gif](figures/zh-cn_image_background_img.gif)
## 相关实例
针对background-position样式动画开发,有以下相关实例可供参考:
- [`JsImage`:基本动画(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsImage)
\ No newline at end of file
......@@ -574,3 +574,18 @@ transform可以设置多个值并且多个值可同时设置,下面案例中
> - transform进行复合写法时,变化样式内多个样式值顺序的不同会呈现不一样的动画效果。
>
> - transform属性设置的样式值要一一对应,若前后不对应,则该动画不生效。若设置多个样式值则只会呈现出已对应值的动画效果。
## 相关实例
针对transform样式动画开发,有以下相关实例可供参考:
- [`JsAnimation`:动效示例应用(JS)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAnimation)
- [`JsAnimationStyle`:动画与自定义字体(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAnimationStyle)
- [`Clock`:时钟(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/common/Clock)
- [动画样式(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/AnimationDemo)
- [图片常见操作](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageJsDemo)
......@@ -18,3 +18,27 @@
| 画布组件 | canvas |
| 栅格组件 | grid-container、grid-row、grid-col |
| svg组件 | svg、rect、circle、ellipse、path、line、polyline、polygon、text、tspan、textPath、animate、animateMotion、animateTransform |
## 相关实例
针对组件开发,有以下相关实例可供参考:
- [`JsPanel`:内容展示面板(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsPanel)
- [`Popup`:气泡(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/Popup)
- [`RefreshContainer`:下拉刷新容器(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/RefreshContainer)
- [`JSComponments`:Js组件(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JSComponments)
- [`JsUserRegistration`:用户注册(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsUserRegistration)
- [`ECG`:心率检测(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/common/ECG)
- [`Badge`:事件标记控件(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/Badge)
- [rating(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/RatingApplication)
- [简易视频播放器](https://gitee.com/openharmony/codelabs/tree/master/Media/VideoOpenHarmony)
......@@ -83,3 +83,10 @@ export default {
运行效果如下图所示:
![zh-cn_image_0000001070707559](figures/zh-cn_image_0000001070707559.png)
## 相关实例
针对页面路由开发,有以下相关实例可供参考:
- [`JsRouter`:页面路由(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsRouter)
......@@ -307,4 +307,11 @@ export default {
}
```
![zh-cn_image_tab.gif](figures/zh-cn_image_tab.gif)
\ No newline at end of file
![zh-cn_image_tab.gif](figures/zh-cn_image_tab.gif)
## 相关实例
针对Tabs开发,有以下相关实例可供参考:
- [`Tabs`:页签容器(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/Tabs)
\ No newline at end of file
......@@ -139,3 +139,9 @@ export default {
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 画布不支持在onInit和onReady中进行创建。
## 相关实例
针对Canvas开发,有以下相关实例可供参考:
- [`JsCanvas`:画布组件(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsCanvas)
......@@ -612,3 +612,13 @@ export default {
```
![zh-cn_image_0000001179018876](figures/zh-cn_image_0000001179018876.gif)
## 相关实例
针对Chart开发,有以下相关实例可供参考:
- [`Chart`:图表组件(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/chart)
- [chart(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/SwitchApplication)
......@@ -319,3 +319,12 @@ export default {
![zh-cn_image_0000001234329527](figures/zh-cn_image_0000001234329527.gif)
## 相关实例
针对Dialog开发,有以下相关实例可供参考:
- [`JsDialog`:页面弹窗(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsDialog)
- [dialog(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/DialogDemo)
......@@ -242,3 +242,10 @@ export default {
![zh-cn_image_0000001263160403](figures/zh-cn_image_0000001263160403.gif)
## 相关实例
针对Grid开发,有以下相关实例可供参考:
- [`JsGrid`:栅格组件(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsGrid)
......@@ -333,3 +333,10 @@ export default {
```
![zh-cn_image_0000001218758816](figures/zh-cn_image_0000001218758816.gif)
## 相关实例
针对Image-animator开发,有以下相关实例可供参考:
- [image、image-animator(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ClickableJsDemo)
......@@ -203,3 +203,11 @@ export default {
```
![zh-cn_image_0000001188771430](figures/zh-cn_image_0000001188771430.gif)
## 相关实例
针对Image开发,有以下相关实例可供参考:
- [image、image-animator(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ClickableJsDemo)
- [图片编辑模板](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageEditorTemplate)
\ No newline at end of file
......@@ -312,3 +312,10 @@ export default {
![zh-cn_image_0000001188771358](figures/zh-cn_image_0000001188771358.gif)
## 相关实例
针对Input开发,有以下相关实例可供参考:
- [input、label(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/InputApplication)
......@@ -308,3 +308,10 @@ export default {
![zh-cn_image_0000001234287779](figures/zh-cn_image_0000001234287779.gif)
## 相关实例
针对List开发,有以下相关实例可供参考:
- [`JsList`:商品列表(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsList)
\ No newline at end of file
......@@ -278,3 +278,9 @@ export default {
```
![zh-cn_image_0000001226815403](figures/zh-cn_image_0000001226815403.gif)
## 相关实例
针对Menu开发,有以下相关实例可供参考:
- [`JSMenu`:菜单(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/JSMenu)
......@@ -295,3 +295,10 @@ export default {
![zh-cn_image_0000001234342189](figures/zh-cn_image_0000001234342189.gif)
## 相关实例
针对Picker开发,有以下相关实例可供参考:
- [`Picker`:滑动选择器(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/Picker)
......@@ -211,3 +211,12 @@ export default{
```
![zh-cn_image_0000001263038799](figures/zh-cn_image_0000001263038799.gif)
## 相关实例
针对Slider开发,有以下相关实例可供参考:
- [`Slider`:滑动条(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/Slider)
- [slider(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/SliderApplication)
\ No newline at end of file
......@@ -401,3 +401,10 @@ export default {
```
![zh-cn_image_0000001189249862](figures/zh-cn_image_0000001189249862.gif)
## 相关实例
针对Stepper开发,有以下相关实例可供参考:
- [`StepNavigator`:步骤导航器(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/StepNavigator)
......@@ -78,3 +78,10 @@ svg{
> - x和y设置的的是当前Svg的x轴和y轴坐标,如果当前Svg为根节点,x轴和y轴属性无效。
>
> - viewBox的宽高和svg的宽高不一致,会以中心对齐进行缩放。
## 相关实例
针对Svg开发,有以下相关实例可供参考:
- [`JsSvg`:可缩放矢量图形(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsSvg)
......@@ -363,3 +363,10 @@ export default {
```
![zh-cn_image_0000001263359599](figures/zh-cn_image_0000001263359599.gif)
## 相关实例
针对Swiper开发,有以下相关实例可供参考:
- [`Swiper`:内容滑动容器(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/Swiper)
......@@ -270,3 +270,10 @@ export default {
```
![zh-cn_image_0000001208636379](figures/zh-cn_image_0000001208636379.gif)
## 相关实例
针对Text开发,有以下相关实例可供参考:
- [`JsTextComponents`:基础组件(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsBasicComponents)
......@@ -229,3 +229,10 @@ export default {
```
![zh-cn_image_0000001263279105](figures/zh-cn_image_0000001263279105.gif)
## 相关实例
针对Toolbar开发,有以下相关实例可供参考:
- [`Toolbar`:工具栏(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/Toolbar)
......@@ -3,7 +3,7 @@
使用基于JS扩展的类Web开发范式的方舟开发框架支持自定义组件,用户可根据业务需求将已有的组件进行扩展,增加自定义的私有属性和事件,封装成新的组件,方便在工程中多次调用,提高页面布局代码的可读性。具体的封装方法示例如下:
- **构建自定义组件**
- 构建自定义组件
```
<!-- comp.hml -->
<div class="item">
......@@ -58,7 +58,7 @@
}
```
- **引入自定义组件**
- 引入自定义组件
```
<!-- xxx.hml -->
<element name='comp' src='../../common/component/comp.hml'></element>
......@@ -97,3 +97,12 @@
**图1** 自定义组件的效果
![zh-cn_image_0000001070693737](figures/zh-cn_image_0000001070693737.png)
## 相关实例
针对自定义组件开发,有以下相关实例可供参考:
- [`JSUICustomComponent`:自定义组件(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/JSUICustomComponent)
- [自定义组件(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/JSCanvasComponet)
......@@ -26,3 +26,28 @@
- **Porting Layer**
适配层主要完成对平台层进行抽象,提供抽象接口,可以对接到系统平台。比如:事件对接、渲染管线对接和系统生命周期对接等。
## 相关实例
基于JS扩展的类Web开发范式的方舟开发框架,有以下相关实例可供参考:
- [`AtomicLayout`:原子布局(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/AtomicLayout)
- [`JsFA`:FA示例应用(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsFA)
- [`JsShopping`:购物示例应用(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsShopping)
- [`Stack`:堆叠容器(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/Stack)
- [`JsAdaptivePortalList`:多设备自适应的效率型首页(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAdaptivePortalList)
- [`JsAdaptivePortalPage`:多设备自适应的FA页面(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAdaptivePortalPage)
- [`JsGallery`:图库示例应用(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsGallery)
- [`AirQuality`:空气质量(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/common/AirQuality)
- [`Badge`:事件标记控件(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/Badge)
- [购物应用(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ShoppingOpenHarmony)
......@@ -193,3 +193,9 @@ struct WebComponent {
</body>
</html>
```
## 相关实例
针对Web开发,有以下相关实例可供参考:
- [`Web`:ArkUI-Web(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/Web)
\ No newline at end of file
......@@ -368,3 +368,10 @@ struct FlexExample {
![zh-cn_image_0000001261605867](figures/zh-cn_image_0000001261605867.png)
## 相关实例
针对弹性布局开发,有以下相关实例可供参考:
- [弹性布局(eTS)](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/FlowLayoutEts)
......@@ -147,3 +147,10 @@ screen and (device-type: tv) or (resolution &lt; 2) // 包含多个媒体特征
非横屏下文本内容为Portrait,颜色为#DB7093。<br/>
![zh-cn_image_0000001263074739](figures/zh-cn_image_0000001263074739.png)
## 相关实例
针对媒体查询开发,有以下相关实例可供参考:
- [`MediaQuery`:Ets媒体查询(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/MediaQuery)
......@@ -53,3 +53,32 @@
- **平台适配层**
提供了对系统平台的抽象接口,具备接入不同系统的能力,如系统渲染管线、生命周期调度等。
## 相关实例
基于TS扩展的声明式开发范式的方舟开发框架,有以下相关实例可供参考:
- [`Canvas`:画布组件(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/Canvas)
- [`Drag`:ArkUI-拖拽事件(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/Drag)
- [`ArkUIAnimation`:Ets动画(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/ArkUIAnimation)
- [`Xcomponent`:ArkUI-XComponent(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/XComponent)
- [`MouseEvent`:ArkUI-鼠标事件(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/MouseEvent)
- [极简声明式UI范式(eTS)](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SimpleGalleryEts)
- [购物应用(eTS)](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/ShoppingEts)
- [转场动画的使用(eTS)](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/TransitionAnimtaionEts)
- [基础组件Slider的使用(eTS)](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SliderApplicationEts)
- [弹窗(eTS)](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/CustomDialogEts)
- [一次开发多端部署(eTS)](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/MultiDeploymentEts)
- [CustomComponent:组件化(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/CustomComponent)
\ No newline at end of file
......@@ -87,7 +87,7 @@
- [CanvasRenderingContext2D对象](ui/ui-js-components-canvasrenderingcontext2d.md)
- [Path2D对象](ui/ui-js-components-path2d.md)
- [OffscreenCanvas对象](ui/ui-js-components-offscreencanvas.md)
- [栅格布局](ui/ui-js-components-calendar.md)
- [栅格布局](ui/ui-js-components-grid.md)
- Svg开发指导
- [基础知识](ui/ui-js-components-svg-overview.md)
- [绘制图形](ui/ui-js-components-svg-graphics.md)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册