diff --git a/zh-cn/application-dev/quick-start/Readme-CN.md b/zh-cn/application-dev/quick-start/Readme-CN.md index 3d62e542dff3976fd41ff705a616067c563f8be3..48cea0090a5959e26ecbc3f316c56ec641a41adb 100755 --- a/zh-cn/application-dev/quick-start/Readme-CN.md +++ b/zh-cn/application-dev/quick-start/Readme-CN.md @@ -9,7 +9,6 @@ - 开发基础知识 - [应用包结构说明(FA模型)](package-structure.md) - [应用包结构说明(Stage模型)](stage-structure.md) - - [资源文件的分类](basic-resource-file-categories.md) - [SysCap说明](syscap.md) - [HarmonyAppProvision配置文件](app-provision-structure.md) diff --git a/zh-cn/application-dev/reference/arkui-js/Readme-CN.md b/zh-cn/application-dev/reference/arkui-js/Readme-CN.md index 4ef8ba58b6092774b74d096a3ab36cf09996661c..2a1209a974d273ca6187367ca3fa58cc981c5a10 100644 --- a/zh-cn/application-dev/reference/arkui-js/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-js/Readme-CN.md @@ -1,98 +1,99 @@ # 基于JS扩展的类Web开发范式 -- 组件 - - 通用 - - [通用属性](js-components-common-attributes.md) - - [通用样式](js-components-common-styles.md) - - [通用事件](js-components-common-events.md) - - [通用方法](js-components-common-methods.md) - - [动画样式](js-components-common-animation.md) - - [渐变样式](js-components-common-gradient.md) - - [转场样式](js-components-common-transition.md) - - [媒体查询](js-components-common-mediaquery.md) - - [自定义字体样式](js-components-common-customizing-font.md) - - [原子布局](js-components-common-atomic-layout.md) - - 容器组件 - - [badge](js-components-container-badge.md) - - [dialog](js-components-container-dialog.md) - - [div](js-components-container-div.md) - - [form](js-components-container-form.md) - - [list](js-components-container-list.md) - - [list-item](js-components-container-list-item.md) - - [list-item-group](js-components-container-list-item-group.md) - - [panel](js-components-container-panel.md) - - [popup](js-components-container-popup.md) - - [refresh](js-components-container-refresh.md) - - [stack](js-components-container-stack.md) - - [stepper](js-components-container-stepper.md) - - [stepper-item](js-components-container-stepper-item.md) - - [swiper](js-components-container-swiper.md) - - [tabs](js-components-container-tabs.md) - - [tab-bar](js-components-container-tab-bar.md) - - [tab-content](js-components-container-tab-content.md) - - 基础组件 - - [button](js-components-basic-button.md) - - [chart](js-components-basic-chart.md) - - [divider](js-components-basic-divider.md) - - [image](js-components-basic-image.md) - - [image-animator](js-components-basic-image-animator.md) - - [input](js-components-basic-input.md) - - [label](js-components-basic-label.md) - - [marquee](js-components-basic-marquee.md) - - [menu](js-components-basic-menu.md) - - [option](js-components-basic-option.md) - - [picker](js-components-basic-picker.md) - - [picker-view](js-components-basic-picker-view.md) - - [piece](js-components-basic-piece.md) - - [progress](js-components-basic-progress.md) - - [qrcode](js-components-basic-qrcode.md) - - [rating](js-components-basic-rating.md) - - [richtext](js-components-basic-richtext.md) - - [search](js-components-basic-search.md) - - [select](js-components-basic-select.md) - - [slider](js-components-basic-slider.md) - - [span](js-components-basic-span.md) - - [switch](js-components-basic-switch.md) - - [text](js-components-basic-text.md) - - [textarea](js-components-basic-textarea.md) - - [toolbar](js-components-basic-toolbar.md) - - [toolbar-item](js-components-basic-toolbar-item.md) - - [toggle](js-components-basic-toggle.md) - - [web](js-components-basic-web.md) - - [xcomponent](js-components-basic-xcomponent.md) - - 媒体组件 - - [video](js-components-media-video.md) - - 画布组件 - - [canvas组件](js-components-canvas-canvas.md) - - [CanvasRenderingContext2D对象](js-components-canvas-canvasrenderingcontext2d.md) - - [Image对象](js-components-canvas-image.md) - - [CanvasGradient对象](js-components-canvas-canvasgradient.md) - - [ImageData对象](js-components-canvas-imagedata.md) - - [Path2D对象](js-components-canvas-path2d.md) - - [ImageBitmap对象](js-components-canvas-imagebitmap.md) - - [OffscreenCanvas对象](js-components-canvas-offscreencanvas.md) - - [OffscreenCanvasRenderingContext2D对象](js-offscreencanvasrenderingcontext2d.md) - - 栅格组件 - - [基本概念](js-components-grid-basic-concepts.md) - - [grid-container](js-components-grid-container.md) - - [grid-row](js-components-grid-row.md) - - [grid-col](js-components-grid-col.md) - - svg组件 - - [通用属性](js-components-svg-common-attributes.md) - - [svg](js-components-svg.md) - - [rect](js-components-svg-rect.md) - - [circle](js-components-svg-circle.md) - - [ellipse](js-components-svg-ellipse.md) - - [path](js-components-svg-path.md) - - [line](js-components-svg-line.md) - - [polyline](js-components-svg-polyline.md) - - [polygon](js-components-svg-polygon.md) - - [text](js-components-svg-text.md) - - [tspan](js-components-svg-tspan.md) - - [textPath](js-components-svg-textpath.md) - - [animate](js-components-svg-animate.md) - - [animateMotion](js-components-svg-animatemotion.md) - - [animateTransform](js-components-svg-animatetransform.md) +- 组件通用信息 + - [通用属性](js-components-common-attributes.md) + - [通用样式](js-components-common-styles.md) + - [通用事件](js-components-common-events.md) + - [通用方法](js-components-common-methods.md) + - [动画样式](js-components-common-animation.md) + - [渐变样式](js-components-common-gradient.md) + - [转场样式](js-components-common-transition.md) + - [媒体查询](js-components-common-mediaquery.md) + - [自定义字体样式](js-components-common-customizing-font.md) + - [原子布局](js-components-common-atomic-layout.md) +- 容器组件 + - [badge](js-components-container-badge.md) + - [dialog](js-components-container-dialog.md) + - [div](js-components-container-div.md) + - [form](js-components-container-form.md) + - [list](js-components-container-list.md) + - [list-item](js-components-container-list-item.md) + - [list-item-group](js-components-container-list-item-group.md) + - [panel](js-components-container-panel.md) + - [popup](js-components-container-popup.md) + - [refresh](js-components-container-refresh.md) + - [stack](js-components-container-stack.md) + - [stepper](js-components-container-stepper.md) + - [stepper-item](js-components-container-stepper-item.md) + - [swiper](js-components-container-swiper.md) + - [tabs](js-components-container-tabs.md) + - [tab-bar](js-components-container-tab-bar.md) + - [tab-content](js-components-container-tab-content.md) +- 基础组件 + - [button](js-components-basic-button.md) + - [chart](js-components-basic-chart.md) + - [divider](js-components-basic-divider.md) + - [image](js-components-basic-image.md) + - [image-animator](js-components-basic-image-animator.md) + - [input](js-components-basic-input.md) + - [label](js-components-basic-label.md) + - [marquee](js-components-basic-marquee.md) + - [menu](js-components-basic-menu.md) + - [option](js-components-basic-option.md) + - [picker](js-components-basic-picker.md) + - [picker-view](js-components-basic-picker-view.md) + - [piece](js-components-basic-piece.md) + - [progress](js-components-basic-progress.md) + - [qrcode](js-components-basic-qrcode.md) + - [rating](js-components-basic-rating.md) + - [richtext](js-components-basic-richtext.md) + - [search](js-components-basic-search.md) + - [select](js-components-basic-select.md) + - [slider](js-components-basic-slider.md) + - [span](js-components-basic-span.md) + - [switch](js-components-basic-switch.md) + - [text](js-components-basic-text.md) + - [textarea](js-components-basic-textarea.md) + - [toolbar](js-components-basic-toolbar.md) + - [toolbar-item](js-components-basic-toolbar-item.md) + - [toggle](js-components-basic-toggle.md) + - [web](js-components-basic-web.md) + - [xcomponent](js-components-basic-xcomponent.md) +- 媒体组件 + - [video](js-components-media-video.md) +- 画布组件 + - [canvas组件](js-components-canvas-canvas.md) + - [CanvasRenderingContext2D对象](js-components-canvas-canvasrenderingcontext2d.md) + - [Image对象](js-components-canvas-image.md) + - [CanvasGradient对象](js-components-canvas-canvasgradient.md) + - [ImageData对象](js-components-canvas-imagedata.md) + - [Path2D对象](js-components-canvas-path2d.md) + - [ImageBitmap对象](js-components-canvas-imagebitmap.md) + - [OffscreenCanvas对象](js-components-canvas-offscreencanvas.md) + - [OffscreenCanvasRenderingContext2D对象](js-offscreencanvasrenderingcontext2d.md) +- 栅格组件 + - [基本概念](js-components-grid-basic-concepts.md) + - [grid-container](js-components-grid-container.md) + - [grid-row](js-components-grid-row.md) + - [grid-col](js-components-grid-col.md) +- svg组件 + - [通用属性](js-components-svg-common-attributes.md) + - [svg](js-components-svg.md) + - [rect](js-components-svg-rect.md) + - [circle](js-components-svg-circle.md) + - [ellipse](js-components-svg-ellipse.md) + - [path](js-components-svg-path.md) + - [line](js-components-svg-line.md) + - [polyline](js-components-svg-polyline.md) + - [polygon](js-components-svg-polygon.md) + - [text](js-components-svg-text.md) + - [tspan](js-components-svg-tspan.md) + - [textPath](js-components-svg-textpath.md) + - [animate](js-components-svg-animate.md) + - [animateMotion](js-components-svg-animatemotion.md) + - [animateTransform](js-components-svg-animatetransform.md) + + - 自定义组件 - [基本用法](js-components-custom-basic-usage.md) - [继承样式](js-components-custom-style.md) @@ -101,5 +102,4 @@ - [事件参数](js-components-custom-event-parameter.md) - [slot插槽](js-components-custom-slot.md) - [生命周期定义](js-components-custom-lifecycle.md) -- 附录 - - [类型说明](js-appendix-types.md) +- [数据类型说明](js-appendix-types.md) diff --git a/zh-cn/application-dev/reference/arkui-js/js-appendix-types.md b/zh-cn/application-dev/reference/arkui-js/js-appendix-types.md index 27c952f8c6c970bfa4cb427dd22baec0e61db6f4..db674a87f14740cceb8380d62bf20433b982632d 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-appendix-types.md +++ b/zh-cn/application-dev/reference/arkui-js/js-appendix-types.md @@ -1,4 +1,4 @@ -# 类型说明 +# 数据类型说明 ## 长度类型 @@ -10,8 +10,8 @@ ## 颜色类型 -| 名称 | 类型定义 | 描述 | -| ----- | --------------------- | ---------------------------------------- | +| 名称 | 类型定义 | 描述 | +| ----- | --------------------------- | ---------------------------------------- | | color | string \| 颜色枚举字符串 | 用于描述颜色信息，JS脚本中不支持颜色枚举格式。
字符串格式如下：
- 'rgb(255, 255, 255)'
- 'rgba(255, 255, 255, 1.0)'
- HEX格式：'\#rrggbb'，'\#aarrggbb'
- 枚举格式：'black'，'white'。 | **表1** 当前支持的颜色枚举 diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index 8ede58289bc7bd713acbef69bf75e8463999a808..1695c7d920128c10e0d842c1dfe1a174bc5aa3bc 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -1,138 +1,139 @@ # 基于TS扩展的声明式开发范式 -- 组件 - - 通用 - - 通用事件 - - [点击事件](ts-universal-events-click.md) - - [触摸事件](ts-universal-events-touch.md) - - [挂载卸载事件](ts-universal-events-show-hide.md) - - [拖拽事件](ts-universal-events-drag-drop.md) - - [按键事件](ts-universal-events-key.md) - - [焦点事件](ts-universal-focus-event.md) - - [鼠标事件](ts-universal-mouse-key.md) - - [组件区域变化事件](ts-universal-component-area-change-event.md) - - [组件可见区域变化事件](ts-universal-component-visible-area-change-event.md) - - 通用属性 - - [尺寸设置](ts-universal-attributes-size.md) - - [位置设置](ts-universal-attributes-location.md) - - [布局约束](ts-universal-attributes-layout-constraints.md) - - [Flex布局](ts-universal-attributes-flex-layout.md) - - [边框设置](ts-universal-attributes-border.md) - - [图片边框设置](ts-universal-attributes-border-image.md) - - [背景设置](ts-universal-attributes-background.md) - - [透明度设置](ts-universal-attributes-opacity.md) - - [显隐控制](ts-universal-attributes-visibility.md) - - [禁用控制](ts-universal-attributes-enable.md) - - [浮层](ts-universal-attributes-overlay.md) - - [Z序控制](ts-universal-attributes-z-order.md) - - [图形变换](ts-universal-attributes-transformation.md) - - [图像效果](ts-universal-attributes-image-effect.md) - - [形状裁剪](ts-universal-attributes-sharp-clipping.md) - - [文本样式设置](ts-universal-attributes-text-style.md) - - [栅格设置](ts-universal-attributes-grid.md) - - [颜色渐变](ts-universal-attributes-gradient-color.md) - - [Popup控制](ts-universal-attributes-popup.md) - - [Menu控制](ts-universal-attributes-menu.md) - - [点击控制](ts-universal-attributes-click.md) - - [焦点控制](ts-universal-attributes-focus.md) - - [悬浮态效果](ts-universal-attributes-hover-effect.md) - - [组件标识](ts-universal-attributes-component-id.md) - - [触摸热区设置](ts-universal-attributes-touch-target.md) - - [多态样式](ts-universal-attributes-polymorphic-style.md) - - 手势处理 - - [绑定手势方法](ts-gesture-settings.md) - - 基础手势 - - [TapGesture](ts-basic-gestures-tapgesture.md) - - [LongPressGesture](ts-basic-gestures-longpressgesture.md) - - [PanGesture](ts-basic-gestures-pangesture.md) - - [PinchGesture](ts-basic-gestures-pinchgesture.md) - - [RotationGesture](ts-basic-gestures-rotationgesture.md) - - [SwipeGesture](ts-basic-gestures-swipegesture.md) - - [组合手势](ts-combined-gestures.md) - - 基础组件 - - [Blank](ts-basic-components-blank.md) - - [Button](ts-basic-components-button.md) - - [Checkbox](ts-basic-components-checkbox.md) - - [CheckboxGroup](ts-basic-components-checkboxgroup.md) - - [DataPanel](ts-basic-components-datapanel.md) - - [DatePicker](ts-basic-components-datepicker.md) - - [Divider](ts-basic-components-divider.md) - - [Gauge](ts-basic-components-gauge.md) - - [Image](ts-basic-components-image.md) - - [ImageAnimator](ts-basic-components-imageanimator.md) - - [LoadingProgress](ts-basic-components-loadingprogress.md) - - [Marquee](ts-basic-components-marquee.md) - - [Navigation](ts-basic-components-navigation.md) - - [PatternLock](ts-basic-components-patternlock.md) - - [PluginComponent](ts-basic-components-plugincomponent.md) - - [Progress](ts-basic-components-progress.md) - - [QRCode](ts-basic-components-qrcode.md) - - [Radio](ts-basic-components-radio.md) - - [Rating](ts-basic-components-rating.md) - - [RemoteWindow](ts-basic-components-remotewindow.md) - - [RichText](ts-basic-components-richtext.md) - - [ScrollBar](ts-basic-components-scrollbar.md) - - [Search](ts-basic-components-search.md) - - [Select](ts-basic-components-select.md) - - [Slider](ts-basic-components-slider.md) - - [Span](ts-basic-components-span.md) - - [Stepper](ts-basic-components-stepper.md) - - [StepperItem](ts-basic-components-stepperitem.md) - - [Text](ts-basic-components-text.md) - - [TextArea](ts-basic-components-textarea.md) - - [TextClock](ts-basic-components-textclock.md) - - [TextInput](ts-basic-components-textinput.md) - - [TextPicker](ts-basic-components-textpicker.md) - - [TextTimer](ts-basic-components-texttimer.md) - - [TimePicker](ts-basic-components-timepicker.md) - - [Toggle](ts-basic-components-toggle.md) - - [Web](ts-basic-components-web.md) - - [XComponent](ts-basic-components-xcomponent.md) - - 容器组件 - - [AbilityComponent](ts-container-ability-component.md) - - [AlphabetIndexer](ts-container-alphabet-indexer.md) - - [Badge](ts-container-badge.md) - - [Column](ts-container-column.md) - - [ColumnSplit](ts-container-columnsplit.md) - - [Counter](ts-container-counter.md) - - [Flex](ts-container-flex.md) - - [GridContainer](ts-container-gridcontainer.md) - - [Grid](ts-container-grid.md) - - [GridItem](ts-container-griditem.md) - - [List](ts-container-list.md) - - [ListItem](ts-container-listitem.md) - - [Navigator](ts-container-navigator.md) - - [Panel](ts-container-panel.md) - - [Refresh](ts-container-refresh.md) - - [RelativeContainer](ts-container-relativecontainer.md) - - [Row](ts-container-row.md) - - [RowSplit](ts-container-rowsplit.md) - - [Scroll](ts-container-scroll.md) - - [SideBarContainer](ts-container-sidebarcontainer.md) - - [Stack](ts-container-stack.md) - - [Swiper](ts-container-swiper.md) - - [Tabs](ts-container-tabs.md) - - [TabContent](ts-container-tabcontent.md) - - 媒体组件 - - [Video](ts-media-components-video.md) - - 绘制组件 - - [Circle](ts-drawing-components-circle.md) - - [Ellipse](ts-drawing-components-ellipse.md) - - [Line](ts-drawing-components-line.md) - - [Polyline](ts-drawing-components-polyline.md) - - [Polygon](ts-drawing-components-polygon.md) - - [Path](ts-drawing-components-path.md) - - [Rect](ts-drawing-components-rect.md) - - [Shape](ts-drawing-components-shape.md) - - 画布组件 - - [Canvas](ts-components-canvas-canvas.md) - - [CanvasRenderingContext2D对象](ts-canvasrenderingcontext2d.md) - - [OffscreenCanvasRenderingConxt2D对象](ts-offscreencanvasrenderingcontext2d.md) - - [Lottie](ts-components-canvas-lottie.md) - - [Path2D对象](ts-components-canvas-path2d.md) - - [CanvasGradient对象](ts-components-canvas-canvasgradient.md) - - [ImageBitmap对象](ts-components-canvas-imagebitmap.md) - - [ImageData对象](ts-components-canvas-imagedata.md) +- 组件通用信息 + - 通用事件 + - [点击事件](ts-universal-events-click.md) + - [触摸事件](ts-universal-events-touch.md) + - [挂载卸载事件](ts-universal-events-show-hide.md) + - [拖拽事件](ts-universal-events-drag-drop.md) + - [按键事件](ts-universal-events-key.md) + - [焦点事件](ts-universal-focus-event.md) + - [鼠标事件](ts-universal-mouse-key.md) + - [组件区域变化事件](ts-universal-component-area-change-event.md) + - [组件可见区域变化事件](ts-universal-component-visible-area-change-event.md) + - 通用属性 + - [尺寸设置](ts-universal-attributes-size.md) + - [位置设置](ts-universal-attributes-location.md) + - [布局约束](ts-universal-attributes-layout-constraints.md) + - [Flex布局](ts-universal-attributes-flex-layout.md) + - [边框设置](ts-universal-attributes-border.md) + - [图片边框设置](ts-universal-attributes-border-image.md) + - [背景设置](ts-universal-attributes-background.md) + - [透明度设置](ts-universal-attributes-opacity.md) + - [显隐控制](ts-universal-attributes-visibility.md) + - [禁用控制](ts-universal-attributes-enable.md) + - [浮层](ts-universal-attributes-overlay.md) + - [Z序控制](ts-universal-attributes-z-order.md) + - [图形变换](ts-universal-attributes-transformation.md) + - [图像效果](ts-universal-attributes-image-effect.md) + - [形状裁剪](ts-universal-attributes-sharp-clipping.md) + - [文本样式设置](ts-universal-attributes-text-style.md) + - [栅格设置](ts-universal-attributes-grid.md) + - [颜色渐变](ts-universal-attributes-gradient-color.md) + - [Popup控制](ts-universal-attributes-popup.md) + - [Menu控制](ts-universal-attributes-menu.md) + - [点击控制](ts-universal-attributes-click.md) + - [焦点控制](ts-universal-attributes-focus.md) + - [悬浮态效果](ts-universal-attributes-hover-effect.md) + - [组件标识](ts-universal-attributes-component-id.md) + - [触摸热区设置](ts-universal-attributes-touch-target.md) + - [多态样式](ts-universal-attributes-polymorphic-style.md) + - 手势处理 + - [绑定手势方法](ts-gesture-settings.md) + - 基础手势 + - [TapGesture](ts-basic-gestures-tapgesture.md) + - [LongPressGesture](ts-basic-gestures-longpressgesture.md) + - [PanGesture](ts-basic-gestures-pangesture.md) + - [PinchGesture](ts-basic-gestures-pinchgesture.md) + - [RotationGesture](ts-basic-gestures-rotationgesture.md) + - [SwipeGesture](ts-basic-gestures-swipegesture.md) + - [组合手势](ts-combined-gestures.md) +- 基础组件 + - [Blank](ts-basic-components-blank.md) + - [Button](ts-basic-components-button.md) + - [Checkbox](ts-basic-components-checkbox.md) + - [CheckboxGroup](ts-basic-components-checkboxgroup.md) + - [DataPanel](ts-basic-components-datapanel.md) + - [DatePicker](ts-basic-components-datepicker.md) + - [Divider](ts-basic-components-divider.md) + - [Gauge](ts-basic-components-gauge.md) + - [Image](ts-basic-components-image.md) + - [ImageAnimator](ts-basic-components-imageanimator.md) + - [LoadingProgress](ts-basic-components-loadingprogress.md) + - [Marquee](ts-basic-components-marquee.md) + - [Navigation](ts-basic-components-navigation.md) + - [PatternLock](ts-basic-components-patternlock.md) + - [PluginComponent](ts-basic-components-plugincomponent.md) + - [Progress](ts-basic-components-progress.md) + - [QRCode](ts-basic-components-qrcode.md) + - [Radio](ts-basic-components-radio.md) + - [Rating](ts-basic-components-rating.md) + - [RemoteWindow](ts-basic-components-remotewindow.md) + - [RichText](ts-basic-components-richtext.md) + - [ScrollBar](ts-basic-components-scrollbar.md) + - [Search](ts-basic-components-search.md) + - [Select](ts-basic-components-select.md) + - [Slider](ts-basic-components-slider.md) + - [Span](ts-basic-components-span.md) + - [Stepper](ts-basic-components-stepper.md) + - [StepperItem](ts-basic-components-stepperitem.md) + - [Text](ts-basic-components-text.md) + - [TextArea](ts-basic-components-textarea.md) + - [TextClock](ts-basic-components-textclock.md) + - [TextInput](ts-basic-components-textinput.md) + - [TextPicker](ts-basic-components-textpicker.md) + - [TextTimer](ts-basic-components-texttimer.md) + - [TimePicker](ts-basic-components-timepicker.md) + - [Toggle](ts-basic-components-toggle.md) + - [Web](ts-basic-components-web.md) + - [XComponent](ts-basic-components-xcomponent.md) +- 容器组件 + - [AbilityComponent](ts-container-ability-component.md) + - [AlphabetIndexer](ts-container-alphabet-indexer.md) + - [Badge](ts-container-badge.md) + - [Column](ts-container-column.md) + - [ColumnSplit](ts-container-columnsplit.md) + - [Counter](ts-container-counter.md) + - [Flex](ts-container-flex.md) + - [GridContainer](ts-container-gridcontainer.md) + - [Grid](ts-container-grid.md) + - [GridItem](ts-container-griditem.md) + - [List](ts-container-list.md) + - [ListItem](ts-container-listitem.md) + - [Navigator](ts-container-navigator.md) + - [Panel](ts-container-panel.md) + - [Refresh](ts-container-refresh.md) + - [RelativeContainer](ts-container-relativecontainer.md) + - [Row](ts-container-row.md) + - [RowSplit](ts-container-rowsplit.md) + - [Scroll](ts-container-scroll.md) + - [SideBarContainer](ts-container-sidebarcontainer.md) + - [Stack](ts-container-stack.md) + - [Swiper](ts-container-swiper.md) + - [Tabs](ts-container-tabs.md) + - [TabContent](ts-container-tabcontent.md) +- 媒体组件 + - [Video](ts-media-components-video.md) +- 绘制组件 + - [Circle](ts-drawing-components-circle.md) + - [Ellipse](ts-drawing-components-ellipse.md) + - [Line](ts-drawing-components-line.md) + - [Polyline](ts-drawing-components-polyline.md) + - [Polygon](ts-drawing-components-polygon.md) + - [Path](ts-drawing-components-path.md) + - [Rect](ts-drawing-components-rect.md) + - [Shape](ts-drawing-components-shape.md) +- 画布组件 + - [Canvas](ts-components-canvas-canvas.md) + - [CanvasRenderingContext2D对象](ts-canvasrenderingcontext2d.md) + - [OffscreenCanvasRenderingConxt2D对象](ts-offscreencanvasrenderingcontext2d.md) + - [Lottie](ts-components-canvas-lottie.md) + - [Path2D对象](ts-components-canvas-path2d.md) + - [CanvasGradient对象](ts-components-canvas-canvasgradient.md) + - [ImageBitmap对象](ts-components-canvas-imagebitmap.md) + - [ImageData对象](ts-components-canvas-imagedata.md) + + - 动画 - [属性动画](ts-animatorproperty.md) - [显式动画](ts-explicit-animation.md) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index a6e99ab755ec74558dd8c0db1b891ef1da39e07e..509e251930194036186e44cfd9519cc348d9564e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -24,8 +24,8 @@ RenderingContextSettings(antialias?: boolean) 用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。 - 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | --------- | ---- | ---- | ----- | ---------------- | + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | --------- | ------- | ---- | ----- | ---------------- | | antialias | boolean | 否 | false | 表明canvas是否开启抗锯齿。 | @@ -1746,17 +1746,17 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, 进行图像绘制。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------- | ---------------------------------------- | ---- | ---- | ----------------------------- | - | image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 | - | sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 | - | sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 | - | sWidth | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | - | sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | - | dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | - | dy | number | 是 | 0 | 绘制区域左上角在y 轴的位置。 | - | dWidth | number | 否 | 0 | 绘制区域的宽度。 | - | dHeight | number | 否 | 0 | 绘制区域的高度。 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | + | ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | + | image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 | + | sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 | + | sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 | + | sWidth | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | + | sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | + | dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | + | dy | number | 是 | 0 | 绘制区域左上角在y 轴的位置。 | + | dWidth | number | 否 | 0 | 绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。 | + | dHeight | number | 否 | 0 | 绘制区域的高度。当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。 | - 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md index 178f2166c5bfa05c2e89d97b5e1084e064bbbc0e..65ecaca1ec862b6c3e1adcaa6dec536c82f68960 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md @@ -35,7 +35,7 @@ Swiper(value:{controller?: SwiperController}) | autoPlay | boolean | false | 子组件是否自动播放，自动播放状态下，导航点不可操作。 | | interval | number | 3000 | 使用自动播放时播放的时间间隔，单位为毫秒。 | | indicator | boolean | true | 是否启用导航点指示器。 | -| loop | boolean | true | 是否开启循环。 | +| loop | boolean | true | 是否开启循环。
设置为true时表示开启循环，在LazyForEach懒循环加载模式下，加载的组件数量建议大于5个。 | | duration | number | 400 | 子组件切换的动画时长，单位为毫秒。 | | vertical | boolean | false | 是否为纵向滑动。 | | itemSpace | Length | 0 | 设置子组件与子组件之间间隙。 | diff --git a/zh-cn/application-dev/ui/Readme-CN.md b/zh-cn/application-dev/ui/Readme-CN.md index c7a2b79e0bccc29a38a355b4d4113e74882dbfbc..5bba79a97977e50b6e6eb8c2a827a664bd426eae 100755 --- a/zh-cn/application-dev/ui/Readme-CN.md +++ b/zh-cn/application-dev/ui/Readme-CN.md @@ -80,10 +80,9 @@ - [目录结构](ts-framework-directory.md) - [应用代码文件访问规则](ts-framework-file-access-rules.md) - [js标签配置](ts-framework-js-tag.md) - - 资源访问 - - [访问应用资源](ts-application-resource-access.md) - - [访问系统资源](ts-system-resource-access.md) - - [媒体资源类型说明](ts-media-resource-type.md) + - 资源管理 + - [资源文件的分类](ui-ts-basic-resource-file-categories.md) + - [资源访问](ts-resource-access.md) - [像素单位](ts-pixel-units.md) - [类型定义](ts-types.md) - 声明式语法 diff --git a/zh-cn/application-dev/ui/figures/create-resource-file-1.png b/zh-cn/application-dev/ui/figures/create-resource-file-1.png new file mode 100644 index 0000000000000000000000000000000000000000..a6d82caac558cd58b78aba3014b6ac60148f6bc8 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/create-resource-file-1.png differ diff --git a/zh-cn/application-dev/ui/figures/create-resource-file-2.png b/zh-cn/application-dev/ui/figures/create-resource-file-2.png new file mode 100644 index 0000000000000000000000000000000000000000..b4d23e8dc15bafbb08ca691575ce2ea9fe989e91 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/create-resource-file-2.png differ diff --git a/zh-cn/application-dev/ui/figures/create-resource-file-3.png b/zh-cn/application-dev/ui/figures/create-resource-file-3.png new file mode 100644 index 0000000000000000000000000000000000000000..566653c5e49753e1f04d0d6b5b5c3e931f4354b5 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/create-resource-file-3.png differ diff --git a/zh-cn/application-dev/ui/ts-media-resource-type.md b/zh-cn/application-dev/ui/ts-media-resource-type.md deleted file mode 100644 index 10be60e4aff925fe9be48b23f3d02a613052fa2b..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/ts-media-resource-type.md +++ /dev/null @@ -1,23 +0,0 @@ -# 媒体资源类型说明 - - - -- 图片资源类型说明 - | 格式 | 文件后缀名 | - | -------- | -------- | - | JPEG | .jpg | - | PNG | .png | - | GIF | .gif | - | SVG | .svg | - | WEBP | .webp | - | BMP | .bmp | - -- 音视频资源类型说明 - | 格式 | 支持的文件类型 | - | -------- | -------- | - | H.263 | .3gp
.mp4 | - | H.264 AVC
Baseline Profile (BP) | .3gp
.mp4 | - | MPEG-4 SP | .3gp | - | VP8 | .webm
.mkv | - - diff --git a/zh-cn/application-dev/ui/ts-application-resource-access.md b/zh-cn/application-dev/ui/ts-resource-access.md similarity index 61% rename from zh-cn/application-dev/ui/ts-application-resource-access.md rename to zh-cn/application-dev/ui/ts-resource-access.md index d12e3fd86fb38f34f06b9528af1d1cf8bd87676c..b71591bbdca383c1302b4e10bb3f216e7abe1851 100644 --- a/zh-cn/application-dev/ui/ts-application-resource-access.md +++ b/zh-cn/application-dev/ui/ts-resource-access.md @@ -1,56 +1,64 @@ -# 访问应用资源 +# 资源访问 -## 资源定义 +## 访问应用资源 -应用资源由开发者在工程的resources目录中定义，resources目录按照两级目录的形式来组织： +在工程中，通过```"$r('app.type.name')"```的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表资源命名，由开发者定义资源时确定。 -- 一级目录为base目录、限定词目录以及rawfile目录 - - base目录是默认存在的目录。当应用的resources资源目录中没有与设备状态匹配的限定词目录时，会自动引用该目录中的资源文件。 - - 限定词目录需要开发者自行创建，其可以由一个或多个表征应用场景或设备特征的限定词组合而成，包括移动国家码和移动网络码、语言、文字、国家或地区、横竖屏、设备类型、颜色模式和屏幕密度等维度，限定词之间通过下划线（_）或者中划线（-）连接。 - - 在引用rawfile中的资源时，不会根据系统的状态去匹配，rawfile目录中可以直接存放资源文件。 +引用rawfile下资源时使用```"$rawfile('filename')"```的形式，当前$rawfile仅支持Image控件引用图片资源，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。 -- 二级目录为资源目录 - - 用于存放字符串、颜色、浮点数等基础元素，以及媒体等资源文件。 - - 当前支持的文件和资源类型如下： - | 文件名 | 资源类型 | - | -------- | -------- | - | color.json | 颜色资源。 | - | float.json | 间距、圆角、字体等资源。 | - | string.json | 字符串资源。 | - | plural.json | 字符串资源。 | - | media目录 | 图片资源。 | +> **说明：** +> 资源描述符不能拼接使用，仅支持普通字符串如`'app.type.name'`。 +在xxx.ets文件中，可以使用在resources目录中定义的资源。 -## 资源引用 +```ts +Text($r('app.string.string_hello')) + .fontColor($r('app.color.color_hello')) + .fontSize($r('app.float.font_hello')) +} -在工程中，通过```"$r('app.type.name')"```的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表资源命名，由开发者定义资源时确定。 +Text($r('app.string.string_world')) + .fontColor($r('app.color.color_world')) + .fontSize($r('app.float.font_world')) +} -引用rawfile下资源时使用```"$rawfile('filename')"```的形式，当前$rawfile仅支持Image控件引用图片资源，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。 +Text($r('app.string.message_arrive', "five of the clock")) // 引用string资源，$r的第二个参数用于替换%s + .fontColor($r('app.color.color_hello')) + .fontSize($r('app.float.font_hello')) +} -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 资源描述符不能拼接使用，仅支持普通字符串如`'app.type.name'`。 +Text($r('app.plural.eat_apple', 5, 5)) // plural$r引用，第一个指定plural资源，第二个参数指定单复数的数量，此处第三个数字为对%d的替换 + .fontColor($r('app.color.color_world')) + .fontSize($r('app.float.font_world')) +} +Image($r('app.media.my_background_image')) // media资源的$r引用 -## 示例 +Image($rawfile('test.png')) // rawfile$r引用rawfile目录下图片 -base目录中部分自定义资源如下所示： +Image($rawfile('newDir/newTest.png')) // rawfile$r引用rawfile目录下图片 +``` +## 访问系统资源 +系统资源包含色彩、圆角、字体、间距、字符串及图片等。通过使用系统资源，不同的开发者可以开发出具有相同视觉风格的应用。 + +开发者可以通过```“$r('sys.type.resource_id')”```的形式引用系统资源。sys代表是系统资源；type代表资源类型，可以取“color”、“float”、“string”、“media”；resource_id代表资源id。 + +```ts +Text('Hello') + .fontColor($r('sys.color.ohos_id_color_emphasize')) + .fontSize($r('sys.float.ohos_id_text_size_headline1')) + .fontFamily($r('sys.string.ohos_id_text_font_family_medium')) + .backgroundColor($r('sys.color.ohos_id_color_palette_aux1')) +Image($r('sys.media.ohos_app_icon')) + .border({color: $r('sys.color.ohos_id_color_palette_aux1'), radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2}) + .margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')}) + .height(200) + .width(300) ``` - resources - ├─ base - │ ├─ element - │ │ ├─ color.json - │ │ ├─ string.json - │ │ └─ float.json - │ └─ media - │ └─ my_background_image.png - └─ rawfile - ├─ test.png - └─ newDir - └─ newTest.png -``` +## 资源文件示例 color.json文件的内容如下： @@ -133,35 +141,7 @@ plural.json文件的内容如下： } ``` - 在ets文件中，可以使用在resources目录中定义的资源。 - -``` -Text($r('app.string.string_hello')) - .fontColor($r('app.color.color_hello')) - .fontSize($r('app.float.font_hello')) -} - -Text($r('app.string.string_world')) - .fontColor($r('app.color.color_world')) - .fontSize($r('app.float.font_world')) -} - -Text($r('app.string.message_arrive', "five of the clock")) // 引用string资源，$r的第二个参数用于替换%s - .fontColor($r('app.color.color_hello')) - .fontSize($r('app.float.font_hello')) -} - -Text($r('app.plural.eat_apple', 5, 5)) // plural$r引用，第一个指定plural资源，第二个参数指定单复数的数量，此处第三个数字为对%d的替换 - .fontColor($r('app.color.color_world')) - .fontSize($r('app.float.font_world')) -} - -Image($r('app.media.my_background_image')) // media资源的$r引用 - -Image($rawfile('test.png')) // rawfile$r引用rawfile目录下图片 - -Image($rawfile('newDir/newTest.png')) // rawfile$r引用rawfile目录下图片 -``` + ## 相关实例 diff --git a/zh-cn/application-dev/ui/ts-system-resource-access.md b/zh-cn/application-dev/ui/ts-system-resource-access.md deleted file mode 100644 index ac9a956742e2238a338653c0360078a4c0161c66..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/ts-system-resource-access.md +++ /dev/null @@ -1,20 +0,0 @@ -# 访问系统资源 - - -系统资源包含色彩、圆角、字体、间距、字符串及图片等。通过使用系统资源，不同的开发者可以开发出具有相同视觉风格的应用。 - - -开发者可以通过```“$r('sys.type.resource_id')”```的形式引用系统资源。sys代表是系统资源；type代表资源类型，可以取“color”、“float”、“string”、“media”；resource_id代表资源id。 - -``` -Text('Hello') - .fontColor($r('sys.color.ohos_id_color_emphasize')) - .fontSize($r('sys.float.ohos_id_text_size_headline1')) - .fontFamily($r('sys.string.ohos_id_text_font_family_medium')) - .backgroundColor($r('sys.color.ohos_id_color_palette_aux1')) -Image($r('sys.media.ohos_app_icon')) - .border({color: $r('sys.color.ohos_id_color_palette_aux1'), radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2}) - .margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')}) - .height(200) - .width(300) -``` diff --git a/zh-cn/application-dev/quick-start/basic-resource-file-categories.md b/zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md similarity index 68% rename from zh-cn/application-dev/quick-start/basic-resource-file-categories.md rename to zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md index 7437de6729fa415b94876fee3d9fa50dcd2b1a65..8f704f9f69a725690f39e855e38a51477c6cfe1e 100644 --- a/zh-cn/application-dev/quick-start/basic-resource-file-categories.md +++ b/zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md @@ -71,8 +71,62 @@ base目录与限定词目录下面可以创建资源组目录（包括element、 **表3** 资源组目录说明 -| 资源组目录 | 目录说明 | 资源文件 | -| --------- | ---------------------------------------- | ---------------------------------------- | -| element | 表示元素资源，以下每一类数据都采用相应的JSON文件来表征。
- boolean，布尔型
- color，颜色
- float，浮点型
- intarray，整型数组
- integer，整型
- pattern，样式
- plural，复数形式
- strarray，字符串数组
- string，字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。
- boolean.json
- color.json
- float.json
- intarray.json
- integer.json
- pattern.json
- plural.json
- strarray.json
- string.json | -| media | 表示媒体资源，包括图片、音频、视频等非文本格式的文件。 | 文件名可自定义，例如：icon.png。 | -| profile | 表示其他类型文件，以原始文件形式保存。 | 文件名可自定义。 | +| 资源组目录 | 目录说明 | 资源文件 | +| ------- | ---------------------------------------- | ---------------------------------------- | +| element | 表示元素资源，以下每一类数据都采用相应的JSON文件来表征。
- boolean，布尔型
- color，颜色
- float，浮点型
- intarray，整型数组
- integer，整型
- pattern，样式
- plural，复数形式
- strarray，字符串数组
- string，字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。
- boolean.json
- color.json
- float.json
- intarray.json
- integer.json
- pattern.json
- plural.json
- strarray.json
- string.json | +| media | 表示媒体资源，包括图片、音频、视频等非文本格式的文件。 | 文件名可自定义，例如：icon.png。 | +| profile | 表示其他类型文件，以原始文件形式保存。 | 文件名可自定义。 | + +### 媒体资源类型说明 + +表1 图片资源类型说明 + +| 格式 | 文件后缀名 | +| ---- | ----- | +| JPEG | .jpg | +| PNG | .png | +| GIF | .gif | +| SVG | .svg | +| WEBP | .webp | +| BMP | .bmp | + +表2 音视频资源类型说明 + +| 格式 | 支持的文件类型 | +| ------------------------------------ | --------------- | +| H.263 | .3gp
.mp4 | +| H.264 AVC
Baseline Profile (BP) | .3gp
.mp4 | +| MPEG-4 SP | .3gp | +| VP8 | .webm
.mkv | + +## 创建资源文件 + +在resources目录下，可按照限定词目录和资源组目录的说明创建子目录和目录内的文件。 + +同时，DevEco Studio也提供了创建资源目录和资源文件的界面。 + +- 创建资源目录及资源文件 + + 在resources目录右键菜单选择“New > Resource File”，此时可同时创建目录和文件。 + + 文件默认创建在base目录的对应资源组下。如果选择了限定词，则会按照命名规范自动生成限定词+资源组目录，并将文件创建在目录中。 + + 目录名自动生成，格式固定为“限定词.资源组”，例如创建一个限定词为横竖屏类别下的竖屏，资源组为绘制资源的目录，自动生成的目录名称为“vertical.graphic”。 + + ![create-resource-file-1](figures/create-resource-file-1.png) + +- 创建资源目录 + + 在resources目录右键菜单选择“New > Resource Directory”，此时可创建资源目录。 + + 选择资源组类型，设置限定词，创建后自动生成目录名称。目录名称格式固定为“限定词.资源组”，例如创建一个限定词为横竖屏类别下的竖屏，资源组为绘制资源的目录，自动生成的目录名称为“vertical.graphic”。 + + ![create-resource-file-2](figures/create-resource-file-2.png) + +- 创建资源文件 + + 在资源目录的右键菜单选择“New > XXX Resource File”，即可创建对应资源组目录的资源文件。 + + 例如，在element目录下可新建Element Resource File。 + + ![create-resource-file-3](figures/create-resource-file-3.png) \ No newline at end of file