From cdb6cf82fcd9c6d28eebb3b2f54b0139d0fe1a94 Mon Sep 17 00:00:00 2001 From: HelloCrease Date: Thu, 2 Jun 2022 16:59:59 +0800 Subject: [PATCH] geshi Signed-off-by: HelloCrease --- .../reference/arkui-js/js-appendix-types.md | 310 +++--- .../arkui-js/js-components-basic-button.md | 84 +- .../arkui-js/js-components-basic-chart.md | 206 ++-- .../arkui-js/js-components-basic-divider.md | 44 +- .../js-components-basic-image-animator.md | 70 +- .../arkui-js/js-components-basic-image.md | 78 +- .../arkui-js/js-components-basic-input.md | 116 +-- .../arkui-js/js-components-basic-label.md | 50 +- .../arkui-js/js-components-basic-marquee.md | 52 +- .../arkui-js/js-components-basic-menu.md | 52 +- .../arkui-js/js-components-basic-option.md | 30 +- .../js-components-basic-picker-view.md | 18 +- .../arkui-js/js-components-basic-picker.md | 26 +- .../arkui-js/js-components-basic-piece.md | 30 +- .../arkui-js/js-components-basic-progress.md | 96 +- .../arkui-js/js-components-basic-qrcode.md | 34 +- .../arkui-js/js-components-basic-rating.md | 10 +- .../arkui-js/js-components-basic-richtext.md | 8 +- .../arkui-js/js-components-basic-search.md | 60 +- .../arkui-js/js-components-basic-select.md | 22 +- .../arkui-js/js-components-basic-slider.md | 8 +- .../arkui-js/js-components-basic-span.md | 30 +- .../arkui-js/js-components-basic-switch.md | 46 +- .../arkui-js/js-components-basic-text.md | 90 +- .../arkui-js/js-components-basic-textarea.md | 74 +- .../arkui-js/js-components-basic-toggle.md | 38 +- .../js-components-basic-toolbar-item.md | 50 +- .../arkui-js/js-components-basic-toolbar.md | 6 +- .../arkui-js/js-components-basic-web.md | 4 +- .../js-components-basic-xcomponent.md | 30 +- .../arkui-js/js-components-canvas-canvas.md | 54 +- .../js-components-canvas-canvasgradient.md | 50 +- ...ponents-canvas-canvasrenderingcontext2d.md | 933 +++++++++--------- .../arkui-js/js-components-canvas-image.md | 24 +- .../js-components-canvas-imagebitmap.md | 2 +- .../js-components-canvas-imagedata.md | 20 +- .../js-components-canvas-offscreencanvas.md | 59 +- .../arkui-js/js-components-canvas-path2d.md | 594 +++++------ .../js-components-common-animation.md | 126 +-- .../js-components-common-atomic-layout.md | 2 +- .../js-components-common-attributes.md | 40 +- .../js-components-common-customizing-font.md | 9 +- .../arkui-js/js-components-common-events.md | 309 +++--- .../arkui-js/js-components-common-gradient.md | 78 +- .../js-components-common-mediaquery.md | 94 +- .../arkui-js/js-components-common-methods.md | 413 ++++---- .../arkui-js/js-components-common-styles.md | 124 +-- .../js-components-common-transition.md | 101 +- .../arkui-js/js-components-container-badge.md | 46 +- .../js-components-container-dialog.md | 42 +- .../arkui-js/js-components-container-div.md | 112 +-- .../arkui-js/js-components-container-form.md | 6 +- ...js-components-container-list-item-group.md | 10 +- .../js-components-container-list-item.md | 2 +- .../arkui-js/js-components-container-list.md | 120 +-- .../arkui-js/js-components-container-panel.md | 98 +- .../arkui-js/js-components-container-popup.md | 14 +- .../js-components-container-refresh.md | 8 +- .../arkui-js/js-components-container-stack.md | 6 +- .../js-components-container-stepper-item.md | 4 +- .../js-components-container-stepper.md | 42 +- .../js-components-container-swiper.md | 72 +- .../js-components-container-tab-bar.md | 2 +- .../js-components-container-tab-content.md | 2 +- .../arkui-js/js-components-container-tabs.md | 24 +- .../js-components-custom-basic-usage.md | 18 +- .../js-components-custom-event-parameter.md | 8 +- .../arkui-js/js-components-custom-events.md | 12 +- .../js-components-custom-lifecycle.md | 26 +- .../arkui-js/js-components-custom-props.md | 22 +- .../arkui-js/js-components-custom-slot.md | 16 +- .../arkui-js/js-components-custom-style.md | 10 +- .../arkui-js/js-components-grid-col.md | 54 +- .../arkui-js/js-components-grid-container.md | 4 +- .../arkui-js/js-components-grid-row.md | 4 +- .../arkui-js/js-components-media-video.md | 10 +- .../arkui-js/js-components-svg-animate.md | 10 +- .../js-components-svg-animatemotion.md | 4 +- .../js-components-svg-animatetransform.md | 14 +- .../arkui-js/js-components-svg-circle.md | 4 +- .../js-components-svg-common-attributes.md | 2 +- .../arkui-js/js-components-svg-ellipse.md | 4 +- .../arkui-js/js-components-svg-line.md | 4 +- .../arkui-js/js-components-svg-path.md | 4 +- .../arkui-js/js-components-svg-polygon.md | 4 +- .../arkui-js/js-components-svg-polyline.md | 4 +- .../arkui-js/js-components-svg-rect.md | 4 +- .../arkui-js/js-components-svg-text.md | 58 +- .../arkui-js/js-components-svg-textpath.md | 79 +- .../arkui-js/js-components-svg-tspan.md | 89 +- .../reference/arkui-js/js-components-svg.md | 4 +- .../js-offscreencanvasrenderingcontext2d.md | 356 ++++--- 92 files changed, 3119 insertions(+), 3123 deletions(-) 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 eaec4b89c7..b373835ac2 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 @@ -2,166 +2,166 @@ ## 长度类型 -| 名称 | 类型定义 | 描述 | -| -------- | -------- | -------- | -| length | string \| number | 用于描述尺寸单位，输入为number类型时，使用px单位；输入为string类型时，需要显式指定像素单位，当前支持的像素单位有：
- px：逻辑尺寸单位。
- fp6+：字体尺寸单位，会随系统字体大小设置发生变化，仅支持文本类组件设置相应的字体大小。 | -| percentage | string | 百分比尺寸单位，如“50%”。 | +| 名称 | 类型定义 | 描述 | +| ---------- | -------------------------- | ---------------------------------------- | +| length | string \| number | 用于描述尺寸单位，输入为number类型时，使用px单位；输入为string类型时，需要显式指定像素单位，当前支持的像素单位有：
- px：逻辑尺寸单位。
- fp6+：字体尺寸单位，会随系统字体大小设置发生变化，仅支持文本类组件设置相应的字体大小。 | +| percentage | string | 百分比尺寸单位，如“50%”。 | ## 颜色类型 -| 名称 | 类型定义 | 描述 | -| -------- | -------- | -------- | -| color | string \|颜色枚举字符串 | 用于描述颜色信息。
字符串格式如下：
- 'rgb(255, 255, 255)'
- 'rgba(255, 255, 255, 1.0)'
- HEX格式：'\#rrggbb'，'\#aarrggbb'
- 枚举格式：'black'，'white'。
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
  > JS脚本中不支持颜色枚举格式。 | +| 名称 | 类型定义 | 描述 | +| ----- | --------------------- | ---------------------------------------- | +| color | string \|颜色枚举字符串 | 用于描述颜色信息，JS脚本中不支持颜色枚举格式。
字符串格式如下：
- 'rgb(255, 255, 255)'
- 'rgba(255, 255, 255, 1.0)'
- HEX格式：'\#rrggbb'，'\#aarrggbb'
- 枚举格式：'black'，'white'。 | **表1** 当前支持的颜色枚举 -| 枚举名称 | 对应颜色 | 颜色 | -| -------- | -------- | -------- | -| aliceblue | \#f0f8ff | ![zh-cn_image_0000001173324803](figures/zh-cn_image_0000001173324803.png) | -| antiquewhite | \#faebd7 | ![zh-cn_image_0000001127285014](figures/zh-cn_image_0000001127285014.png) | -| aqua | \#00ffff | ![zh-cn_image_0000001127285050](figures/zh-cn_image_0000001127285050.png) | -| aquamarine | \#7fffd4 | ![zh-cn_image_0000001173324729](figures/zh-cn_image_0000001173324729.png) | -| azure | \#f0ffff | ![zh-cn_image_0000001127285040](figures/zh-cn_image_0000001127285040.png) | -| beige | \#f5f5dc | ![zh-cn_image_0000001173324773](figures/zh-cn_image_0000001173324773.png) | -| bisque | \#ffe4c4 | ![zh-cn_image_0000001173164895](figures/zh-cn_image_0000001173164895.png) | -| black | \#000000 | ![zh-cn_image_0000001173324735](figures/zh-cn_image_0000001173324735.png) | -| blanchedalmond | \#ffebcd | ![zh-cn_image_0000001173164889](figures/zh-cn_image_0000001173164889.png) | -| blue | \#0000ff | ![zh-cn_image_0000001127125194](figures/zh-cn_image_0000001127125194.png) | -| blueviolet | \#8a2be2 | ![zh-cn_image_0000001127285046](figures/zh-cn_image_0000001127285046.png) | -| brown | \#a52a2a | ![zh-cn_image_0000001173324833](figures/zh-cn_image_0000001173324833.png) | -| burlywood | \#deB887 | ![zh-cn_image_0000001127285026](figures/zh-cn_image_0000001127285026.png) | -| cadetblue | \#5f9ea0 | ![zh-cn_image_0000001127125210](figures/zh-cn_image_0000001127125210.png) | -| chartreuse | \#7fff00 | ![zh-cn_image_0000001173324811](figures/zh-cn_image_0000001173324811.png) | -| chocolate | \#d2691e | ![zh-cn_image_0000001127125256](figures/zh-cn_image_0000001127125256.png) | -| coral | \#ff7f50 | ![zh-cn_image_0000001173164877](figures/zh-cn_image_0000001173164877.png) | -| cornflowerblue | \#6495ed | ![zh-cn_image_0000001173324781](figures/zh-cn_image_0000001173324781.png) | -| cornsilk | \#fff8dc | ![zh-cn_image_0000001127285048](figures/zh-cn_image_0000001127285048.png) | -| crimson | \#dc143c | ![zh-cn_image_0000001127285066](figures/zh-cn_image_0000001127285066.png) | -| cyan | \#00ffff | ![zh-cn_image_0000001173324789](figures/zh-cn_image_0000001173324789.png) | -| darkblue | \#00008b | ![zh-cn_image_0000001173164841](figures/zh-cn_image_0000001173164841.png) | -| darkcyan | \#008b8b | ![zh-cn_image_0000001173324745](figures/zh-cn_image_0000001173324745.png) | -| darkgoldenrod | \#b8860b | ![zh-cn_image_0000001173324835](figures/zh-cn_image_0000001173324835.png) | -| darkgray | \#a9a9a9 | ![zh-cn_image_0000001127285028](figures/zh-cn_image_0000001127285028.png) | -| darkgreen | \#006400 | ![zh-cn_image_0000001127284990](figures/zh-cn_image_0000001127284990.png) | -| darkgrey | \#a9a9a9 | ![zh-cn_image_0000001127125174](figures/zh-cn_image_0000001127125174.png) | -| darkkhaki | \#bdb76b | ![zh-cn_image_0000001127285070](figures/zh-cn_image_0000001127285070.png) | -| darkmagenta | \#8b008b | ![zh-cn_image_0000001173164875](figures/zh-cn_image_0000001173164875.png) | -| darkolivegreen | \#556b2f | ![zh-cn_image_0000001173164835](figures/zh-cn_image_0000001173164835.png) | -| darkorange | \#ff8c00 | ![zh-cn_image_0000001127125178](figures/zh-cn_image_0000001127125178.png) | -| darkorchid | \#9932cc | ![zh-cn_image_0000001173324829](figures/zh-cn_image_0000001173324829.png) | -| darkred | \#8b0000 | ![zh-cn_image_0000001173164851](figures/zh-cn_image_0000001173164851.png) | -| darksalmon | \#e9967a | ![zh-cn_image_0000001127284998](figures/zh-cn_image_0000001127284998.png) | -| darkseagreen | \#8fbc8f | ![zh-cn_image_0000001173324755](figures/zh-cn_image_0000001173324755.png) | -| darkslateblue | \#483d8b | ![zh-cn_image_0000001127125246](figures/zh-cn_image_0000001127125246.png) | -| darkslategray | \#2f4f4f | ![zh-cn_image_0000001127125190](figures/zh-cn_image_0000001127125190.png) | -| darkslategrey | \#2f4f4f | ![zh-cn_image_0000001173324759](figures/zh-cn_image_0000001173324759.png) | -| darkturquoise | \#00ced1 | ![zh-cn_image_0000001127284980](figures/zh-cn_image_0000001127284980.png) | -| darkviolet | \#9400d3 | ![zh-cn_image_0000001127285058](figures/zh-cn_image_0000001127285058.png) | -| deeppink | \#ff1493 | ![zh-cn_image_0000001173324767](figures/zh-cn_image_0000001173324767.png) | -| deepskyblue | \#00bfff | ![zh-cn_image_0000001173164897](figures/zh-cn_image_0000001173164897.png) | -| dimgray | \#696969 | ![zh-cn_image_0000001127285022](figures/zh-cn_image_0000001127285022.png) | -| dimgrey | \#696969 | ![zh-cn_image_0000001173164911](figures/zh-cn_image_0000001173164911.png) | -| dodgerblue | \#1e90ff | ![zh-cn_image_0000001173164855](figures/zh-cn_image_0000001173164855.png) | -| firebrick | \#b22222 | ![zh-cn_image_0000001127125234](figures/zh-cn_image_0000001127125234.png) | -| floralwhite | \#fffaf0 | ![zh-cn_image_0000001173324771](figures/zh-cn_image_0000001173324771.png) | -| forestgreen | \#228b22 | ![zh-cn_image_0000001173324825](figures/zh-cn_image_0000001173324825.png) | -| fuchsia | \#ff00ff | ![zh-cn_image_0000001127285052](figures/zh-cn_image_0000001127285052.png) | -| gainsboro | \#dcdcdc | ![zh-cn_image_0000001173164901](figures/zh-cn_image_0000001173164901.png) | -| ghostwhite | \#f8f8ff | ![zh-cn_image_0000001127285012](figures/zh-cn_image_0000001127285012.png) | -| gold | \#ffd700 | ![zh-cn_image_0000001173324761](figures/zh-cn_image_0000001173324761.png) | -| goldenrod | \#daa520 | ![zh-cn_image_0000001173324817](figures/zh-cn_image_0000001173324817.png) | -| gray | \#808080 | ![zh-cn_image_0000001127125238](figures/zh-cn_image_0000001127125238.png) | -| green | \#008000 | ![zh-cn_image_0000001173164865](figures/zh-cn_image_0000001173164865.png) | -| greenyellow | \#adff2f | ![zh-cn_image_0000001127285000](figures/zh-cn_image_0000001127285000.png) | -| grey | \#808080 | ![zh-cn_image_0000001127285054](figures/zh-cn_image_0000001127285054.png) | -| honeydew | \#f0fff0 | ![zh-cn_image_0000001173324813](figures/zh-cn_image_0000001173324813.png) | -| hotpink | \#ff69b4 | ![zh-cn_image_0000001127285016](figures/zh-cn_image_0000001127285016.png) | -| indianred | \#cd5c5c | ![zh-cn_image_0000001173164849](figures/zh-cn_image_0000001173164849.png) | -| indigo | \#4b0082 | ![zh-cn_image_0000001173324821](figures/zh-cn_image_0000001173324821.png) | -| ivory | \#fffff0 | ![zh-cn_image_0000001173164887](figures/zh-cn_image_0000001173164887.png) | -| khaki | \#f0e68c | ![zh-cn_image_0000001173324801](figures/zh-cn_image_0000001173324801.png) | -| lavender | \#e6e6fa | ![zh-cn_image_0000001127125188](figures/zh-cn_image_0000001127125188.png) | -| lavenderblush | \#fff0f5 | ![zh-cn_image_0000001173324809](figures/zh-cn_image_0000001173324809.png) | -| lawngreen | \#7cfc00 | ![zh-cn_image_0000001127125224](figures/zh-cn_image_0000001127125224.png) | -| lemonchiffon | \#fffacd | ![zh-cn_image_0000001173164879](figures/zh-cn_image_0000001173164879.png) | -| lightblue | \#add8e6 | ![zh-cn_image_0000001127125180](figures/zh-cn_image_0000001127125180.png) | -| lightcoral | \#f08080 | ![zh-cn_image_0000001127125228](figures/zh-cn_image_0000001127125228.png) | -| lightcyan | \#e0ffff | ![zh-cn_image_0000001173324799](figures/zh-cn_image_0000001173324799.png) | +| 枚举名称 | 对应颜色 | 颜色 | +| -------------------- | -------- | ---------------------------------------- | +| aliceblue | \#f0f8ff | ![zh-cn_image_0000001173324803](figures/zh-cn_image_0000001173324803.png) | +| antiquewhite | \#faebd7 | ![zh-cn_image_0000001127285014](figures/zh-cn_image_0000001127285014.png) | +| aqua | \#00ffff | ![zh-cn_image_0000001127285050](figures/zh-cn_image_0000001127285050.png) | +| aquamarine | \#7fffd4 | ![zh-cn_image_0000001173324729](figures/zh-cn_image_0000001173324729.png) | +| azure | \#f0ffff | ![zh-cn_image_0000001127285040](figures/zh-cn_image_0000001127285040.png) | +| beige | \#f5f5dc | ![zh-cn_image_0000001173324773](figures/zh-cn_image_0000001173324773.png) | +| bisque | \#ffe4c4 | ![zh-cn_image_0000001173164895](figures/zh-cn_image_0000001173164895.png) | +| black | \#000000 | ![zh-cn_image_0000001173324735](figures/zh-cn_image_0000001173324735.png) | +| blanchedalmond | \#ffebcd | ![zh-cn_image_0000001173164889](figures/zh-cn_image_0000001173164889.png) | +| blue | \#0000ff | ![zh-cn_image_0000001127125194](figures/zh-cn_image_0000001127125194.png) | +| blueviolet | \#8a2be2 | ![zh-cn_image_0000001127285046](figures/zh-cn_image_0000001127285046.png) | +| brown | \#a52a2a | ![zh-cn_image_0000001173324833](figures/zh-cn_image_0000001173324833.png) | +| burlywood | \#deB887 | ![zh-cn_image_0000001127285026](figures/zh-cn_image_0000001127285026.png) | +| cadetblue | \#5f9ea0 | ![zh-cn_image_0000001127125210](figures/zh-cn_image_0000001127125210.png) | +| chartreuse | \#7fff00 | ![zh-cn_image_0000001173324811](figures/zh-cn_image_0000001173324811.png) | +| chocolate | \#d2691e | ![zh-cn_image_0000001127125256](figures/zh-cn_image_0000001127125256.png) | +| coral | \#ff7f50 | ![zh-cn_image_0000001173164877](figures/zh-cn_image_0000001173164877.png) | +| cornflowerblue | \#6495ed | ![zh-cn_image_0000001173324781](figures/zh-cn_image_0000001173324781.png) | +| cornsilk | \#fff8dc | ![zh-cn_image_0000001127285048](figures/zh-cn_image_0000001127285048.png) | +| crimson | \#dc143c | ![zh-cn_image_0000001127285066](figures/zh-cn_image_0000001127285066.png) | +| cyan | \#00ffff | ![zh-cn_image_0000001173324789](figures/zh-cn_image_0000001173324789.png) | +| darkblue | \#00008b | ![zh-cn_image_0000001173164841](figures/zh-cn_image_0000001173164841.png) | +| darkcyan | \#008b8b | ![zh-cn_image_0000001173324745](figures/zh-cn_image_0000001173324745.png) | +| darkgoldenrod | \#b8860b | ![zh-cn_image_0000001173324835](figures/zh-cn_image_0000001173324835.png) | +| darkgray | \#a9a9a9 | ![zh-cn_image_0000001127285028](figures/zh-cn_image_0000001127285028.png) | +| darkgreen | \#006400 | ![zh-cn_image_0000001127284990](figures/zh-cn_image_0000001127284990.png) | +| darkgrey | \#a9a9a9 | ![zh-cn_image_0000001127125174](figures/zh-cn_image_0000001127125174.png) | +| darkkhaki | \#bdb76b | ![zh-cn_image_0000001127285070](figures/zh-cn_image_0000001127285070.png) | +| darkmagenta | \#8b008b | ![zh-cn_image_0000001173164875](figures/zh-cn_image_0000001173164875.png) | +| darkolivegreen | \#556b2f | ![zh-cn_image_0000001173164835](figures/zh-cn_image_0000001173164835.png) | +| darkorange | \#ff8c00 | ![zh-cn_image_0000001127125178](figures/zh-cn_image_0000001127125178.png) | +| darkorchid | \#9932cc | ![zh-cn_image_0000001173324829](figures/zh-cn_image_0000001173324829.png) | +| darkred | \#8b0000 | ![zh-cn_image_0000001173164851](figures/zh-cn_image_0000001173164851.png) | +| darksalmon | \#e9967a | ![zh-cn_image_0000001127284998](figures/zh-cn_image_0000001127284998.png) | +| darkseagreen | \#8fbc8f | ![zh-cn_image_0000001173324755](figures/zh-cn_image_0000001173324755.png) | +| darkslateblue | \#483d8b | ![zh-cn_image_0000001127125246](figures/zh-cn_image_0000001127125246.png) | +| darkslategray | \#2f4f4f | ![zh-cn_image_0000001127125190](figures/zh-cn_image_0000001127125190.png) | +| darkslategrey | \#2f4f4f | ![zh-cn_image_0000001173324759](figures/zh-cn_image_0000001173324759.png) | +| darkturquoise | \#00ced1 | ![zh-cn_image_0000001127284980](figures/zh-cn_image_0000001127284980.png) | +| darkviolet | \#9400d3 | ![zh-cn_image_0000001127285058](figures/zh-cn_image_0000001127285058.png) | +| deeppink | \#ff1493 | ![zh-cn_image_0000001173324767](figures/zh-cn_image_0000001173324767.png) | +| deepskyblue | \#00bfff | ![zh-cn_image_0000001173164897](figures/zh-cn_image_0000001173164897.png) | +| dimgray | \#696969 | ![zh-cn_image_0000001127285022](figures/zh-cn_image_0000001127285022.png) | +| dimgrey | \#696969 | ![zh-cn_image_0000001173164911](figures/zh-cn_image_0000001173164911.png) | +| dodgerblue | \#1e90ff | ![zh-cn_image_0000001173164855](figures/zh-cn_image_0000001173164855.png) | +| firebrick | \#b22222 | ![zh-cn_image_0000001127125234](figures/zh-cn_image_0000001127125234.png) | +| floralwhite | \#fffaf0 | ![zh-cn_image_0000001173324771](figures/zh-cn_image_0000001173324771.png) | +| forestgreen | \#228b22 | ![zh-cn_image_0000001173324825](figures/zh-cn_image_0000001173324825.png) | +| fuchsia | \#ff00ff | ![zh-cn_image_0000001127285052](figures/zh-cn_image_0000001127285052.png) | +| gainsboro | \#dcdcdc | ![zh-cn_image_0000001173164901](figures/zh-cn_image_0000001173164901.png) | +| ghostwhite | \#f8f8ff | ![zh-cn_image_0000001127285012](figures/zh-cn_image_0000001127285012.png) | +| gold | \#ffd700 | ![zh-cn_image_0000001173324761](figures/zh-cn_image_0000001173324761.png) | +| goldenrod | \#daa520 | ![zh-cn_image_0000001173324817](figures/zh-cn_image_0000001173324817.png) | +| gray | \#808080 | ![zh-cn_image_0000001127125238](figures/zh-cn_image_0000001127125238.png) | +| green | \#008000 | ![zh-cn_image_0000001173164865](figures/zh-cn_image_0000001173164865.png) | +| greenyellow | \#adff2f | ![zh-cn_image_0000001127285000](figures/zh-cn_image_0000001127285000.png) | +| grey | \#808080 | ![zh-cn_image_0000001127285054](figures/zh-cn_image_0000001127285054.png) | +| honeydew | \#f0fff0 | ![zh-cn_image_0000001173324813](figures/zh-cn_image_0000001173324813.png) | +| hotpink | \#ff69b4 | ![zh-cn_image_0000001127285016](figures/zh-cn_image_0000001127285016.png) | +| indianred | \#cd5c5c | ![zh-cn_image_0000001173164849](figures/zh-cn_image_0000001173164849.png) | +| indigo | \#4b0082 | ![zh-cn_image_0000001173324821](figures/zh-cn_image_0000001173324821.png) | +| ivory | \#fffff0 | ![zh-cn_image_0000001173164887](figures/zh-cn_image_0000001173164887.png) | +| khaki | \#f0e68c | ![zh-cn_image_0000001173324801](figures/zh-cn_image_0000001173324801.png) | +| lavender | \#e6e6fa | ![zh-cn_image_0000001127125188](figures/zh-cn_image_0000001127125188.png) | +| lavenderblush | \#fff0f5 | ![zh-cn_image_0000001173324809](figures/zh-cn_image_0000001173324809.png) | +| lawngreen | \#7cfc00 | ![zh-cn_image_0000001127125224](figures/zh-cn_image_0000001127125224.png) | +| lemonchiffon | \#fffacd | ![zh-cn_image_0000001173164879](figures/zh-cn_image_0000001173164879.png) | +| lightblue | \#add8e6 | ![zh-cn_image_0000001127125180](figures/zh-cn_image_0000001127125180.png) | +| lightcoral | \#f08080 | ![zh-cn_image_0000001127125228](figures/zh-cn_image_0000001127125228.png) | +| lightcyan | \#e0ffff | ![zh-cn_image_0000001173324799](figures/zh-cn_image_0000001173324799.png) | | lightgoldenrodyellow | \#fafad2 | ![zh-cn_image_0000001127125218](figures/zh-cn_image_0000001127125218.png) | -| lightgray | \#d3d3d3 | ![zh-cn_image_0000001127284974](figures/zh-cn_image_0000001127284974.png) | -| lightgreen | \#90ee90 | ![zh-cn_image_0000001173324805](figures/zh-cn_image_0000001173324805.png) | -| lightpink | \#ffb6c1 | ![zh-cn_image_0000001127285038](figures/zh-cn_image_0000001127285038.png) | -| lightsalmon | \#ffa07a | ![zh-cn_image_0000001173324795](figures/zh-cn_image_0000001173324795.png) | -| lightseagreen | \#20b2aa | ![zh-cn_image_0000001173324737](figures/zh-cn_image_0000001173324737.png) | -| lightskyblue | \#87cefa | ![zh-cn_image_0000001127285042](figures/zh-cn_image_0000001127285042.png) | -| lightslategray | \#778899 | ![zh-cn_image_0000001127125226](figures/zh-cn_image_0000001127125226.png) | -| lightslategrey | \#778899 | ![zh-cn_image_0000001127125222](figures/zh-cn_image_0000001127125222.png) | -| lightsteelblue | \#b0c4de | ![zh-cn_image_0000001127284976](figures/zh-cn_image_0000001127284976.png) | -| lightyellow | \#ffffe0 | ![zh-cn_image_0000001173324807](figures/zh-cn_image_0000001173324807.png) | -| lime | \#00ff00 | ![zh-cn_image_0000001127285020](figures/zh-cn_image_0000001127285020.png) | -| limegreen | \#32cd32 | ![zh-cn_image_0000001127125236](figures/zh-cn_image_0000001127125236.png) | -| linen | \#faf0e6 | ![zh-cn_image_0000001173324739](figures/zh-cn_image_0000001173324739.png) | -| magenta | \#ff00ff | ![zh-cn_image_0000001127285044](figures/zh-cn_image_0000001127285044.png) | -| maroon | \#800000 | ![zh-cn_image_0000001127285018](figures/zh-cn_image_0000001127285018.png) | -| mediumaquamarine | \#66cdaa | ![zh-cn_image_0000001173164899](figures/zh-cn_image_0000001173164899.png) | -| mediumblue | \#0000cd | ![zh-cn_image_0000001127284968](figures/zh-cn_image_0000001127284968.png) | -| mediumorchid | \#ba55d3 | ![zh-cn_image_0000001127125216](figures/zh-cn_image_0000001127125216.png) | -| mediumpurple | \#9370db | ![zh-cn_image_0000001173324779](figures/zh-cn_image_0000001173324779.png) | -| mediumseagreen | \#3cb371 | ![zh-cn_image_0000001127125230](figures/zh-cn_image_0000001127125230.png) | -| mediumslateblue | \#7b68ee | ![zh-cn_image_0000001173164921](figures/zh-cn_image_0000001173164921.png) | -| mediumspringgreen | \#00fa9a | ![zh-cn_image_0000001173324793](figures/zh-cn_image_0000001173324793.png) | -| mediumturquoise | \#48d1cc | ![zh-cn_image_0000001127125214](figures/zh-cn_image_0000001127125214.png) | -| mediumvioletred | \#c71585 | ![zh-cn_image_0000001173164893](figures/zh-cn_image_0000001173164893.png) | -| midnightblue | \#191970 | ![zh-cn_image_0000001127125260](figures/zh-cn_image_0000001127125260.png) | -| mintcream | \#f5fffa | ![zh-cn_image_0000001127285030](figures/zh-cn_image_0000001127285030.png) | -| mistyrose | \#ffe4e1 | ![zh-cn_image_0000001173324785](figures/zh-cn_image_0000001173324785.png) | -| moccasin | \#ffe4b5 | ![zh-cn_image_0000001127125232](figures/zh-cn_image_0000001127125232.png) | -| navajowhite | \#ffdead | ![zh-cn_image_0000001173164925](figures/zh-cn_image_0000001173164925.png) | -| navy | \#000080 | ![zh-cn_image_0000001127285032](figures/zh-cn_image_0000001127285032.png) | -| oldlace | \#fdf5e6 | ![zh-cn_image_0000001127125184](figures/zh-cn_image_0000001127125184.png) | -| olive | \#808000 | ![zh-cn_image_0000001127125244](figures/zh-cn_image_0000001127125244.png) | -| olivedrab | \#6b8e23 | ![zh-cn_image_0000001173324839](figures/zh-cn_image_0000001173324839.png) | -| orange | \#ffa500 | ![zh-cn_image_0000001173164885](figures/zh-cn_image_0000001173164885.png) | -| orangered | \#ff4500 | ![zh-cn_image_0000001127284996](figures/zh-cn_image_0000001127284996.png) | -| orchid | \#da70d6 | ![zh-cn_image_0000001127285056](figures/zh-cn_image_0000001127285056.png) | -| palegoldenrod | \#eee8aa | ![zh-cn_image_0000001127125262](figures/zh-cn_image_0000001127125262.png) | -| palegreen | \#98fb98 | ![zh-cn_image_0000001127285006](figures/zh-cn_image_0000001127285006.png) | -| paleturquoise | \#afeeee | ![zh-cn_image_0000001173324757](figures/zh-cn_image_0000001173324757.png) | -| palevioletred | \#db7093 | ![zh-cn_image_0000001173164905](figures/zh-cn_image_0000001173164905.png) | -| papayawhip | \#ffefd5 | ![zh-cn_image_0000001127125248](figures/zh-cn_image_0000001127125248.png) | -| peachpuff | \#ffdab9 | ![zh-cn_image_0000001173324769](figures/zh-cn_image_0000001173324769.png) | -| peru | \#cd853f | ![zh-cn_image_0000001173164843](figures/zh-cn_image_0000001173164843.png) | -| pink | \#ffc0cb | ![zh-cn_image_0000001127125242](figures/zh-cn_image_0000001127125242.png) | -| plum | \#dda0dd | ![zh-cn_image_0000001173324831](figures/zh-cn_image_0000001173324831.png) | -| powderblue | \#b0e0e6 | ![zh-cn_image_0000001127285010](figures/zh-cn_image_0000001127285010.png) | -| purple | \#800080 | ![zh-cn_image_0000001127285002](figures/zh-cn_image_0000001127285002.png) | -| rebeccapurple | \#663399 | ![zh-cn_image_0000001173164907](figures/zh-cn_image_0000001173164907.png) | -| red | \#ff0000 | ![zh-cn_image_0000001127125254](figures/zh-cn_image_0000001127125254.png) | -| rosybrown | \#bc8f8f | ![zh-cn_image_0000001173324775](figures/zh-cn_image_0000001173324775.png) | -| royalblue | \#4169e1 | ![zh-cn_image_0000001127284972](figures/zh-cn_image_0000001127284972.png) | -| saddlebrown | \#8b4513 | ![zh-cn_image_0000001127125250](figures/zh-cn_image_0000001127125250.png) | -| salmon | \#fa8072 | ![zh-cn_image_0000001127285064](figures/zh-cn_image_0000001127285064.png) | -| sandybrown | \#f4a460 | ![zh-cn_image_0000001173324777](figures/zh-cn_image_0000001173324777.png) | -| seagreen | \#2e8b57 | ![zh-cn_image_0000001173324733](figures/zh-cn_image_0000001173324733.png) | -| seashell | \#fff5ee | ![zh-cn_image_0000001127285062](figures/zh-cn_image_0000001127285062.png) | -| sienna | \#a0522d | ![zh-cn_image_0000001173164917](figures/zh-cn_image_0000001173164917.png) | -| silver | \#c0c0c0 | ![zh-cn_image_0000001173324743](figures/zh-cn_image_0000001173324743.png) | -| skyblue | \#87ceeb | ![zh-cn_image_0000001127284970](figures/zh-cn_image_0000001127284970.png) | -| slateblue | \#6a5acd | ![zh-cn_image_0000001173164915](figures/zh-cn_image_0000001173164915.png) | -| slategray | \#708090 | ![zh-cn_image_0000001173324815](figures/zh-cn_image_0000001173324815.png) | -| slategrey | \#708090 | ![zh-cn_image_0000001127284982](figures/zh-cn_image_0000001127284982.png) | -| snow | \#fffafa | ![zh-cn_image_0000001173324731](figures/zh-cn_image_0000001173324731.png) | -| springgreen | \#00ff7f | ![zh-cn_image_0000001127285060](figures/zh-cn_image_0000001127285060.png) | -| steelblue | \#4682b4 | ![zh-cn_image_0000001127125240](figures/zh-cn_image_0000001127125240.png) | -| tan | \#d2b48c | ![zh-cn_image_0000001173324747](figures/zh-cn_image_0000001173324747.png) | -| teal | \#008080 | ![zh-cn_image_0000001173324741](figures/zh-cn_image_0000001173324741.png) | -| thistle | \#d8Bfd8 | ![zh-cn_image_0000001173164913](figures/zh-cn_image_0000001173164913.png) | -| tomato | \#ff6347 | ![zh-cn_image_0000001173164909](figures/zh-cn_image_0000001173164909.png) | -| turquoise | \#40e0d0 | ![zh-cn_image_0000001173164837](figures/zh-cn_image_0000001173164837.png) | -| violet | \#ee82ee | ![zh-cn_image_0000001127125258](figures/zh-cn_image_0000001127125258.png) | -| wheat | \#f5deb3 | ![zh-cn_image_0000001127285068](figures/zh-cn_image_0000001127285068.png) | -| white | \#ffffff | ![zh-cn_image_0000001173324823](figures/zh-cn_image_0000001173324823.png) | -| whitesmoke | \#f5f5f5 | ![zh-cn_image_0000001127284992](figures/zh-cn_image_0000001127284992.png) | -| yellow | \#ffff00 | ![zh-cn_image_0000001173324837](figures/zh-cn_image_0000001173324837.png) | -| yellowgreen | \#9acd32 | ![zh-cn_image_0000001173164923](figures/zh-cn_image_0000001173164923.png) | +| lightgray | \#d3d3d3 | ![zh-cn_image_0000001127284974](figures/zh-cn_image_0000001127284974.png) | +| lightgreen | \#90ee90 | ![zh-cn_image_0000001173324805](figures/zh-cn_image_0000001173324805.png) | +| lightpink | \#ffb6c1 | ![zh-cn_image_0000001127285038](figures/zh-cn_image_0000001127285038.png) | +| lightsalmon | \#ffa07a | ![zh-cn_image_0000001173324795](figures/zh-cn_image_0000001173324795.png) | +| lightseagreen | \#20b2aa | ![zh-cn_image_0000001173324737](figures/zh-cn_image_0000001173324737.png) | +| lightskyblue | \#87cefa | ![zh-cn_image_0000001127285042](figures/zh-cn_image_0000001127285042.png) | +| lightslategray | \#778899 | ![zh-cn_image_0000001127125226](figures/zh-cn_image_0000001127125226.png) | +| lightslategrey | \#778899 | ![zh-cn_image_0000001127125222](figures/zh-cn_image_0000001127125222.png) | +| lightsteelblue | \#b0c4de | ![zh-cn_image_0000001127284976](figures/zh-cn_image_0000001127284976.png) | +| lightyellow | \#ffffe0 | ![zh-cn_image_0000001173324807](figures/zh-cn_image_0000001173324807.png) | +| lime | \#00ff00 | ![zh-cn_image_0000001127285020](figures/zh-cn_image_0000001127285020.png) | +| limegreen | \#32cd32 | ![zh-cn_image_0000001127125236](figures/zh-cn_image_0000001127125236.png) | +| linen | \#faf0e6 | ![zh-cn_image_0000001173324739](figures/zh-cn_image_0000001173324739.png) | +| magenta | \#ff00ff | ![zh-cn_image_0000001127285044](figures/zh-cn_image_0000001127285044.png) | +| maroon | \#800000 | ![zh-cn_image_0000001127285018](figures/zh-cn_image_0000001127285018.png) | +| mediumaquamarine | \#66cdaa | ![zh-cn_image_0000001173164899](figures/zh-cn_image_0000001173164899.png) | +| mediumblue | \#0000cd | ![zh-cn_image_0000001127284968](figures/zh-cn_image_0000001127284968.png) | +| mediumorchid | \#ba55d3 | ![zh-cn_image_0000001127125216](figures/zh-cn_image_0000001127125216.png) | +| mediumpurple | \#9370db | ![zh-cn_image_0000001173324779](figures/zh-cn_image_0000001173324779.png) | +| mediumseagreen | \#3cb371 | ![zh-cn_image_0000001127125230](figures/zh-cn_image_0000001127125230.png) | +| mediumslateblue | \#7b68ee | ![zh-cn_image_0000001173164921](figures/zh-cn_image_0000001173164921.png) | +| mediumspringgreen | \#00fa9a | ![zh-cn_image_0000001173324793](figures/zh-cn_image_0000001173324793.png) | +| mediumturquoise | \#48d1cc | ![zh-cn_image_0000001127125214](figures/zh-cn_image_0000001127125214.png) | +| mediumvioletred | \#c71585 | ![zh-cn_image_0000001173164893](figures/zh-cn_image_0000001173164893.png) | +| midnightblue | \#191970 | ![zh-cn_image_0000001127125260](figures/zh-cn_image_0000001127125260.png) | +| mintcream | \#f5fffa | ![zh-cn_image_0000001127285030](figures/zh-cn_image_0000001127285030.png) | +| mistyrose | \#ffe4e1 | ![zh-cn_image_0000001173324785](figures/zh-cn_image_0000001173324785.png) | +| moccasin | \#ffe4b5 | ![zh-cn_image_0000001127125232](figures/zh-cn_image_0000001127125232.png) | +| navajowhite | \#ffdead | ![zh-cn_image_0000001173164925](figures/zh-cn_image_0000001173164925.png) | +| navy | \#000080 | ![zh-cn_image_0000001127285032](figures/zh-cn_image_0000001127285032.png) | +| oldlace | \#fdf5e6 | ![zh-cn_image_0000001127125184](figures/zh-cn_image_0000001127125184.png) | +| olive | \#808000 | ![zh-cn_image_0000001127125244](figures/zh-cn_image_0000001127125244.png) | +| olivedrab | \#6b8e23 | ![zh-cn_image_0000001173324839](figures/zh-cn_image_0000001173324839.png) | +| orange | \#ffa500 | ![zh-cn_image_0000001173164885](figures/zh-cn_image_0000001173164885.png) | +| orangered | \#ff4500 | ![zh-cn_image_0000001127284996](figures/zh-cn_image_0000001127284996.png) | +| orchid | \#da70d6 | ![zh-cn_image_0000001127285056](figures/zh-cn_image_0000001127285056.png) | +| palegoldenrod | \#eee8aa | ![zh-cn_image_0000001127125262](figures/zh-cn_image_0000001127125262.png) | +| palegreen | \#98fb98 | ![zh-cn_image_0000001127285006](figures/zh-cn_image_0000001127285006.png) | +| paleturquoise | \#afeeee | ![zh-cn_image_0000001173324757](figures/zh-cn_image_0000001173324757.png) | +| palevioletred | \#db7093 | ![zh-cn_image_0000001173164905](figures/zh-cn_image_0000001173164905.png) | +| papayawhip | \#ffefd5 | ![zh-cn_image_0000001127125248](figures/zh-cn_image_0000001127125248.png) | +| peachpuff | \#ffdab9 | ![zh-cn_image_0000001173324769](figures/zh-cn_image_0000001173324769.png) | +| peru | \#cd853f | ![zh-cn_image_0000001173164843](figures/zh-cn_image_0000001173164843.png) | +| pink | \#ffc0cb | ![zh-cn_image_0000001127125242](figures/zh-cn_image_0000001127125242.png) | +| plum | \#dda0dd | ![zh-cn_image_0000001173324831](figures/zh-cn_image_0000001173324831.png) | +| powderblue | \#b0e0e6 | ![zh-cn_image_0000001127285010](figures/zh-cn_image_0000001127285010.png) | +| purple | \#800080 | ![zh-cn_image_0000001127285002](figures/zh-cn_image_0000001127285002.png) | +| rebeccapurple | \#663399 | ![zh-cn_image_0000001173164907](figures/zh-cn_image_0000001173164907.png) | +| red | \#ff0000 | ![zh-cn_image_0000001127125254](figures/zh-cn_image_0000001127125254.png) | +| rosybrown | \#bc8f8f | ![zh-cn_image_0000001173324775](figures/zh-cn_image_0000001173324775.png) | +| royalblue | \#4169e1 | ![zh-cn_image_0000001127284972](figures/zh-cn_image_0000001127284972.png) | +| saddlebrown | \#8b4513 | ![zh-cn_image_0000001127125250](figures/zh-cn_image_0000001127125250.png) | +| salmon | \#fa8072 | ![zh-cn_image_0000001127285064](figures/zh-cn_image_0000001127285064.png) | +| sandybrown | \#f4a460 | ![zh-cn_image_0000001173324777](figures/zh-cn_image_0000001173324777.png) | +| seagreen | \#2e8b57 | ![zh-cn_image_0000001173324733](figures/zh-cn_image_0000001173324733.png) | +| seashell | \#fff5ee | ![zh-cn_image_0000001127285062](figures/zh-cn_image_0000001127285062.png) | +| sienna | \#a0522d | ![zh-cn_image_0000001173164917](figures/zh-cn_image_0000001173164917.png) | +| silver | \#c0c0c0 | ![zh-cn_image_0000001173324743](figures/zh-cn_image_0000001173324743.png) | +| skyblue | \#87ceeb | ![zh-cn_image_0000001127284970](figures/zh-cn_image_0000001127284970.png) | +| slateblue | \#6a5acd | ![zh-cn_image_0000001173164915](figures/zh-cn_image_0000001173164915.png) | +| slategray | \#708090 | ![zh-cn_image_0000001173324815](figures/zh-cn_image_0000001173324815.png) | +| slategrey | \#708090 | ![zh-cn_image_0000001127284982](figures/zh-cn_image_0000001127284982.png) | +| snow | \#fffafa | ![zh-cn_image_0000001173324731](figures/zh-cn_image_0000001173324731.png) | +| springgreen | \#00ff7f | ![zh-cn_image_0000001127285060](figures/zh-cn_image_0000001127285060.png) | +| steelblue | \#4682b4 | ![zh-cn_image_0000001127125240](figures/zh-cn_image_0000001127125240.png) | +| tan | \#d2b48c | ![zh-cn_image_0000001173324747](figures/zh-cn_image_0000001173324747.png) | +| teal | \#008080 | ![zh-cn_image_0000001173324741](figures/zh-cn_image_0000001173324741.png) | +| thistle | \#d8Bfd8 | ![zh-cn_image_0000001173164913](figures/zh-cn_image_0000001173164913.png) | +| tomato | \#ff6347 | ![zh-cn_image_0000001173164909](figures/zh-cn_image_0000001173164909.png) | +| turquoise | \#40e0d0 | ![zh-cn_image_0000001173164837](figures/zh-cn_image_0000001173164837.png) | +| violet | \#ee82ee | ![zh-cn_image_0000001127125258](figures/zh-cn_image_0000001127125258.png) | +| wheat | \#f5deb3 | ![zh-cn_image_0000001127285068](figures/zh-cn_image_0000001127285068.png) | +| white | \#ffffff | ![zh-cn_image_0000001173324823](figures/zh-cn_image_0000001173324823.png) | +| whitesmoke | \#f5f5f5 | ![zh-cn_image_0000001127284992](figures/zh-cn_image_0000001127284992.png) | +| yellow | \#ffff00 | ![zh-cn_image_0000001173324837](figures/zh-cn_image_0000001173324837.png) | +| yellowgreen | \#9acd32 | ![zh-cn_image_0000001173164923](figures/zh-cn_image_0000001173164923.png) | diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md index 2470492c22..06a944a6a1 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md @@ -1,7 +1,7 @@ # button -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 提供按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。 @@ -15,13 +15,13 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| type | string | - | 否 | 不支持动态修改。如果该属性缺省，展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定，如果需要设置该属性，则可选值包括如下：
- capsule：胶囊型按钮，带圆角按钮，有背景色和文本；
- circle：圆形按钮，支持放置图标；
- text：文本按钮，仅包含文本显示；
- arc：弧形按钮，仅支持智能穿戴；
- download：下载按钮，额外增加下载进度条功能。 | -| value | string | - | 否 | button的文本值。 | -| icon | string | - | 否 | button的图标路径，图标格式为jpg，png和svg。 | -| placement5+ | string | end | 否 | 仅在type属性为缺省时生效，设置图标位于文本的位置，可选值为：
- start：图标位于文本起始处；
- end：图标位于文本结束处；
- top：图标位于文本上方；
- bottom：图标位于文本下方。 | -| waiting | boolean | false | 否 | waiting状态，waiting为true时展现等待中转圈效果，位于文本左侧。类型为download时不生效。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ---------------------- | ------- | ----- | ---- | ---------------------------------------- | +| type | string | - | 否 | 不支持动态修改。如果该属性缺省，展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定，如果需要设置该属性，则可选值包括如下：
- capsule：胶囊型按钮，带圆角按钮，有背景色和文本；
- circle：圆形按钮，支持放置图标；
- text：文本按钮，仅包含文本显示；
- arc：弧形按钮，仅支持智能穿戴；
- download：下载按钮，额外增加下载进度条功能。 | +| value | string | - | 否 | button的文本值。 | +| icon | string | - | 否 | button的图标路径，图标格式为jpg，png和svg。 | +| placement5+ | string | end | 否 | 仅在type属性为缺省时生效，设置图标位于文本的位置，可选值为：
- start：图标位于文本起始处；
- end：图标位于文本结束处；
- top：图标位于文本上方；
- bottom：图标位于文本下方。 | +| waiting | boolean | false | 否 | waiting状态，waiting为true时展现等待中转圈效果，位于文本左侧。类型为download时不生效。 | ## 样式 @@ -31,38 +31,38 @@ 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| text-color | <color> | \#ff007dff
| 否 | 按钮的文本颜色。 | -| font-size | <length> | 16px
| 否 | 按钮的文本尺寸。 | -| allow-scale | boolean | true | 否 | 按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | -| font-style | string | normal | 否 | 按钮的字体样式。 | -| font-weight | number \| string | normal | 否 | 按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | -| font-family | <string> | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | -| icon-width | <length> | - | 否 | 设置圆形按钮内部图标的宽，默认填满整个圆形按钮。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> icon使用svg图源时必须设置该样式。 | -| icon-height | <length> | - | 否 | 设置圆形按钮内部图标的高，默认填满整个圆形按钮。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> icon使用svg图源时必须设置该样式。 | -| radius | <length> | - | 否 | 按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。 | - -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> - 胶囊按钮（type=capsule）时，不支持border相关样式； -> -> - 圆形按钮（type=circle）时，不支持文本相关样式； -> -> - 文本按钮（type=text）时，自适应文本大小，不支持尺寸设置（radius，width，height），背景透明不支持background-color样式。 +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ----------- | -------------------------- | --------------- | ---- | ---------------------------------------- | +| text-color | <color> | \#ff007dff
| 否 | 按钮的文本颜色。 | +| font-size | <length> | 16px
| 否 | 按钮的文本尺寸。 | +| allow-scale | boolean | true | 否 | 按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | +| font-style | string | normal | 否 | 按钮的字体样式。 | +| font-weight | number \| string | normal | 否 | 按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family | <string> | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | +| icon-width | <length> | - | 否 | 设置圆形按钮内部图标的宽，默认填满整个圆形按钮。
icon使用svg图源时必须设置该样式。 | +| icon-height | <length> | - | 否 | 设置圆形按钮内部图标的高，默认填满整个圆形按钮。
icon使用svg图源时必须设置该样式。 | +| radius | <length> | - | 否 | 按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。 | + +> **说明：** +> - 胶囊按钮（type=capsule）时，不支持border相关样式； +> +> - 圆形按钮（type=circle）时，不支持文本相关样式； +> +> - 文本按钮（type=text）时，自适应文本大小，不支持尺寸设置（radius，width，height），背景透明不支持background-color样式。 ### type设置为arc 除支持[通用样式](../arkui-js/js-components-common-styles.md)中background-color、opacity、display、visibility、position、[left|top|right|bottom外，还支持如下样式： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| text-color | <color> | \#de0000 | 否 | 弧形按钮的文本颜色。 | -| font-size | <length> | 37.5px | 否 | 弧形按钮的文本尺寸。 | -| allow-scale | boolean | true | 否 | 弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 | -| font-style | string | normal | 否 | 弧形按钮的字体样式。 | -| font-weight | number \| string | normal | 否 | 弧形按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | -| font-family | <string> | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- | +| text-color | <color> | \#de0000 | 否 | 弧形按钮的文本颜色。 | +| font-size | <length> | 37.5px | 否 | 弧形按钮的文本尺寸。 | +| allow-scale | boolean | true | 否 | 弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 | +| font-style | string | normal | 否 | 弧形按钮的字体样式。 | +| font-weight | number \| string | normal | 否 | 弧形按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family | <string> | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | ## 事件 @@ -76,13 +76,13 @@ 类型为download时，支持如下方法： -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | -| setProgress | { progress:percent } | 设定下载按钮进度条进度，取值位于0-100区间内，当设置的值大于0时，下载按钮展现进度条。当设置的值大于等于100时，取消进度条显示。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 浮在进度条上的文字通过value值进行变更。 | +| 名称 | 参数 | 描述 | +| ----------- | ------------------------------ | ---------------------------------------- | +| setProgress | { progress:percent } | 设定下载按钮进度条进度，取值位于0-100区间内，当设置的值大于0时，下载按钮展现进度条。当设置的值大于等于100时，取消进度条显示。
浮在进度条上的文字通过value值进行变更。 | ## 示例 -``` +```html
@@ -94,7 +94,7 @@
``` -``` +```css /* xxx.css */ .div-button { flex-direction: column; @@ -137,8 +137,8 @@ } ``` -``` -// xxx.js +```js +// xxx.js export default { data: { count: 5, diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md index dcde8ec5c9..accf16fe94 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md @@ -1,7 +1,7 @@ # chart -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 图表组件，用于呈现线形图、柱状图、量规图界面。 @@ -19,114 +19,114 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| type | string | line | 否 | 设置图表类型（不支持动态修改），可选项有：
- bar：柱状图。
- line：线形图。
- gauge：量规图。
- progress5+：进度类圆形图表。
- loading5+：加载类圆形图表。
- rainbow5+：占比类圆形图表。 | -| options | ChartOptions | - | 否 | 图表参数设置，柱状图和线形图必须设置参数设置，量规图不生效。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。（不支持动态修改） | -| datasets | Array<ChartDataset> | - | 否 | 数据集合，柱状图和线形图必须设置数据集合，量规图不生效。可以设置多条数据集及其背景色。 | -| segments5+ | DataSegment \| Array<DataSegment> | - | 否 | 进度类、加载类和占比类圆形图表使用的数据结构。
DataSegment针对进度类和加载类圆形图表使用，
Array<DataSegment>针对占比类图标使用，DataSegment最多9个。 | -| effects5+ | boolean | true | 否 | 是否开启占比类、进度类圆形图表特效。 | -| animationduration6+ | number | 3000 | 否 | 设置占比类圆形图表展开动画时长，单位为ms。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------------------------------ | ---------------------------------------- | ---- | ---- | ---------------------------------------- | +| type | string | line | 否 | 设置图表类型（不支持动态修改），可选项有：
- bar：柱状图。
- line：线形图。
- gauge：量规图。
- progress5+：进度类圆形图表。
- loading5+：加载类圆形图表。
- rainbow5+：占比类圆形图表。 | +| options | ChartOptions | - | 否 | 图表参数设置，柱状图和线形图必须设置参数设置，量规图不生效。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。（不支持动态修改） | +| datasets | Array<ChartDataset> | - | 否 | 数据集合，柱状图和线形图必须设置数据集合，量规图不生效。可以设置多条数据集及其背景色。 | +| segments5+ | DataSegment \| Array<DataSegment> | - | 否 | 进度类、加载类和占比类圆形图表使用的数据结构。
DataSegment针对进度类和加载类圆形图表使用，
Array<DataSegment>针对占比类图标使用，DataSegment最多9个。 | +| effects5+ | boolean | true | 否 | 是否开启占比类、进度类圆形图表特效。 | +| animationduration6+ | number | 3000 | 否 | 设置占比类圆形图表展开动画时长，单位为ms。 | **表1** ChartOptions -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| xAxis | ChartAxis | - | 是 | x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。 | -| yAxis | ChartAxis | - | 是 | y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。 | -| series | ChartSeries | - | 否 | 数据序列参数设置。可以设置1）线的样式，如线宽、是否平滑；2）设置线最前端位置白点的样式和大小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅线形图支持。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------ | ----------- | ---- | ---- | ---------------------------------------- | +| xAxis | ChartAxis | - | 是 | x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。 | +| yAxis | ChartAxis | - | 是 | y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。 | +| series | ChartSeries | - | 否 | 仅线形图支持设置数据序列参数，可以设置的样式：
- 线的样式，如线宽、是否平滑。
- 设置线最前端位置白点的样式和大小。 | **表2** ChartDataset -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| strokeColor | <color> | \#ff6384 | 否 | 线条颜色。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅线形图支持。 | -| fillColor | <color> | \#ff6384 | 否 | 填充颜色。线形图表示填充的渐变颜色。 | -| data | Array<number> \| Array<Point>5+ | - | 是 | 设置绘制线或柱中的点集。 | -| gradient | boolean | false | 否 | 设置是否显示填充渐变颜色。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅线形图支持。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ----------- | ---------------------------------------- | -------- | ---- | ---------------------- | +| strokeColor | <color> | \#ff6384 | 否 | 仅线形图支持设置线条颜色。 | +| fillColor | <color> | \#ff6384 | 否 | 填充颜色。
线形图表示填充的渐变颜色。 | +| data | Array<number> \| Array<Point>5+ | - | 是 | 设置绘制线或柱中的点集。 | +| gradient | boolean | false | 否 | 仅线形图支持设置是否显示填充渐变颜色。 | **表3** ChartAxis -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| min | number | 0 | 否 | 轴的最小值。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅线形图支持负数。 | -| max | number | 100 | 否 | 轴的最大值。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅线形图支持负数。 | -| axisTick | number | 10 | 否 | 轴显示的刻度数量。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。
> 在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。 | -| display | boolean | false | 否 | 是否显示轴。 | -| color | <color> | \#c0c0c0 | 否 | 轴颜色。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | ------------- | -------- | ---- | ---------------------------------------- | +| min | number | 0 | 否 | 轴的最小值，仅线形图支持负数。 | +| max | number | 100 | 否 | 轴的最大值，仅线形图支持负数。 | +| axisTick | number | 10 | 否 | 轴显示的刻度数量。仅支持1~20，且具体显示的效果与图的宽度所占的像素/（max-min）有关。
在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。 | +| display | boolean | false | 否 | 是否显示轴。 | +| color | <color> | \#c0c0c0 | 否 | 轴颜色。 | **表4** ChartSeries -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| lineStyle | ChartLineStyle | - | 否 | 线样式设置，如线宽、是否平滑。 | -| headPoint | PointStyle | - | 否 | 线最前端位置白点的样式和大小。 | -| topPoint | PointStyle | - | 否 | 最高点的样式和大小。 | -| bottomPoint | PointStyle | - | 否 | 最低点的样式和大小。 | -| loop | ChartLoop | - | 否 | 设置屏幕显示满时，是否需要重头开始绘制。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ----------- | -------------- | ---- | ---- | -------------------- | +| lineStyle | ChartLineStyle | - | 否 | 线样式设置，如线宽、是否平滑。 | +| headPoint | PointStyle | - | 否 | 线最前端位置白点的样式和大小。 | +| topPoint | PointStyle | - | 否 | 最高点的样式和大小。 | +| bottomPoint | PointStyle | - | 否 | 最低点的样式和大小。 | +| loop | ChartLoop | - | 否 | 设置屏幕显示满时，是否需要重头开始绘制。 | **表5** ChartLineStyle -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| width | <length> | 1px | 否 | 线宽设置。 | -| smooth | boolean | false | 否 | 是否平滑。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------ | -------------- | ----- | ---- | ----- | +| width | <length> | 1px | 否 | 线宽设置。 | +| smooth | boolean | false | 否 | 是否平滑。 | **表6** PointStyle -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| shape | string | circle | 否 | 高亮点的形状。可选值为：
- circle：圆形。
- square：方形。
- triangle：三角形。 | -| size | <length> | 5px | 否 | 高亮点的大小。 | -| strokeWidth | <length> | 1px | 否 | 边框宽度 | -| strokeColor | <color> | \#ff0000 | 否 | 边框颜色。 | -| fillColor | <color> | \#ff0000 | 否 | 填充颜色。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ----------- | -------------- | -------- | ---- | ---------------------------------------- | +| shape | string | circle | 否 | 高亮点的形状。可选值为：
- circle：圆形。
- square：方形。
- triangle：三角形。 | +| size | <length> | 5px | 否 | 高亮点的大小。 | +| strokeWidth | <length> | 1px | 否 | 边框宽度 | +| strokeColor | <color> | \#ff0000 | 否 | 边框颜色。 | +| fillColor | <color> | \#ff0000 | 否 | 填充颜色。 | **表7** ChartLoop -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| margin | <length> | 1 | 否 | 擦除点的个数（最新绘制的点与最老的点之间的横向距离）。注意：轻量设备margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。 | -| gradient | boolean | false | 否 | 是否需要渐变擦除。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------------- | ----- | ---- | ---------------------------------------- | +| margin | <length> | 1 | 否 | 擦除点的个数（最新绘制的点与最老的点之间的横向距离）。轻量设备margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。 | +| gradient | boolean | false | 否 | 是否需要渐变擦除。 | **表8** Point5+ -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| value | number | 0 | 是 | 表示绘制点的Y轴坐标。 | -| pointStyle | PointStyle | - | 否 | 表示当前数据点的绘制样式。 | -| description | string | - | 否 | 表示当前点的注释内容。 | -| textLocation | string | - | 否 | 可选值为top，bottom，none。分别表示注释的绘制位置位于点的上方，下方，以及不绘制。 | -| textColor | <color> | \#000000 | 否 | 表示注释文字的颜色。 | -| lineDash | string | solid | 否 | 表示绘制当前线段虚线的样式。“dashed， 5， 5”表示纯虚线，绘制5px的实线后留5px的空白。“solid”表示绘制实线。 | -| lineColor | <color> | \#000000 | 否 | 表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------------ | ------------- | -------- | ---- | ---------------------------------------- | +| value | number | 0 | 是 | 表示绘制点的Y轴坐标。 | +| pointStyle | PointStyle | - | 否 | 表示当前数据点的绘制样式。 | +| description | string | - | 否 | 表示当前点的注释内容。 | +| textLocation | string | - | 否 | 可选值为top，bottom，none。分别表示注释的绘制位置位于点的上方，下方，以及不绘制。 | +| textColor | <color> | \#000000 | 否 | 表示注释文字的颜色。 | +| lineDash | string | solid | 否 | 表示绘制当前线段虚线的样式。“dashed， 5， 5”表示纯虚线，绘制5px的实线后留5px的空白。“solid”表示绘制实线。 | +| lineColor | <color> | \#000000 | 否 | 表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。 | **表9** DataSegment5+ -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| startColor | Color | - | 否 | 起始位置的颜色，设置startColor必须设置endColor。不设置startColor时，会使用系统默认预置的颜色数组，具体颜色值见下表。 | -| endColor | Color | - | 否 | 终止位置的颜色，设置endColor必须设置startColor。
不设置startColor时，会使用系统默认预置的颜色数组。 | -| value | number | 0 | 是 | 占比数据的所占份额，最大100。 | -| name | string | - | 否 | 此类数据的名称。 | - -| 数据组 | 浅色主题 | 深色主题 | -| -------- | -------- | -------- | -| 0 | 起始颜色：\#f7ce00，结束颜色：\#f99b11 | 起始颜色：\#d1a738，结束颜色：\#eb933d | -| 1 | 起始颜色：\#f76223，结束颜色：\#f2400a | 起始颜色：\#e67d50，结束颜色：\#d9542b | -| 2 | 起始颜色：\#f772ac，结束颜色：\#e65392 | 起始颜色：\#d5749e，结束颜色：\#d6568d | -| 3 | 起始颜色：\#a575eb，结束颜色：\#a12df7 | 起始颜色：\#9973d1，结束颜色：\#5552d9 | -| 4 | 起始颜色：\#7b79f7，结束颜色：\#4b48f7 | 起始颜色：\#7977d9，结束颜色：\#f99b11 | -| 5 | 起始颜色：\#4b8af3，结束颜色：\#007dff | 起始颜色：\#4c81d9，结束颜色：\#217bd9 | -| 6 | 起始颜色：\#73c1e6，结束颜色：\#4fb4e3 | 起始颜色：\#5ea6d1，结束颜色：\#4895c2 | -| 7 | 起始颜色：\#a5d61d，结束颜色：\#69d14f | 起始颜色：\#91c23a，结束颜色：\#70ba5d | -| 8 | 起始颜色：\#a2a2b0，结束颜色：\#8e8e93 | 起始颜色：\#8c8c99，结束颜色：\#6b6b76 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ---------- | ------ | ---- | ---- | ---------------------------------------- | +| startColor | Color | - | 否 | 起始位置的颜色，设置startColor必须设置endColor。不设置startColor时，会使用系统默认预置的颜色数组，具体颜色值见下表。 | +| endColor | Color | - | 否 | 终止位置的颜色，设置endColor必须设置startColor。
不设置startColor时，会使用系统默认预置的颜色数组。 | +| value | number | 0 | 是 | 占比数据的所占份额，最大100。 | +| name | string | - | 否 | 此类数据的名称。 | + +| 数据组 | 浅色主题 | 深色主题 | +| ---- | --------------------------- | --------------------------- | +| 0 | 起始颜色：\#f7ce00，结束颜色：\#f99b11 | 起始颜色：\#d1a738，结束颜色：\#eb933d | +| 1 | 起始颜色：\#f76223，结束颜色：\#f2400a | 起始颜色：\#e67d50，结束颜色：\#d9542b | +| 2 | 起始颜色：\#f772ac，结束颜色：\#e65392 | 起始颜色：\#d5749e，结束颜色：\#d6568d | +| 3 | 起始颜色：\#a575eb，结束颜色：\#a12df7 | 起始颜色：\#9973d1，结束颜色：\#5552d9 | +| 4 | 起始颜色：\#7b79f7，结束颜色：\#4b48f7 | 起始颜色：\#7977d9，结束颜色：\#f99b11 | +| 5 | 起始颜色：\#4b8af3，结束颜色：\#007dff | 起始颜色：\#4c81d9，结束颜色：\#217bd9 | +| 6 | 起始颜色：\#73c1e6，结束颜色：\#4fb4e3 | 起始颜色：\#5ea6d1，结束颜色：\#4895c2 | +| 7 | 起始颜色：\#a5d61d，结束颜色：\#69d14f | 起始颜色：\#91c23a，结束颜色：\#70ba5d | +| 8 | 起始颜色：\#a2a2b0，结束颜色：\#8e8e93 | 起始颜色：\#8c8c99，结束颜色：\#6b6b76 | 当类型为量规图时，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| percent | number | 0 | 否 | 当前值占整体的百分比，取值范围为0-100。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------- | ------ | ---- | ---- | ---------------------- | +| percent | number | 0 | 否 | 当前值占整体的百分比，取值范围为0-100。 | ## 样式 @@ -135,18 +135,18 @@ 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| stroke-width | <length> | 32px（量规）
24px（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条的宽度。 | -| start-angle | <deg> | 240（量规）
0（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条起始角度，以时钟0点为基线。范围为0到360。 | -| total-angle | <deg> | 240（量规）
360（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条总长度，范围为-360到360，负数标识起点到终点为逆时针。 | -| center-x | <length> | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-y和radius一起配置才能生效。（仅量规图支持） | -| center-y | <length> | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-x和radius一起配置才能生效。（仅量规图支持） | -| radius | <length> | - | 否 | 量规组件刻度条半径，该样式优先于通用样式的width和height样式。该样式需要和center-x和center-y一起配置才能生效。（仅量规图支持） | -| colors | Array | - | 否 | 量规组件刻度条每一个区段的颜色。
如：colors: \#ff0000, \#00ff00。（仅量规图支持） | -| weights | Array | - | 否 | 量规组件刻度条每一个区段的权重。
如：weights: 2, 2。（仅量规图支持） | -| font-family5+ | Array | - | 否 | 表示绘制注释的字体样式，支持[自定义字体](../arkui-js/js-components-common-customizing-font.md)。 | -| font-size5+ | <length> | - | 否 | 表示绘制注释的字体的大小。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------------------------ | -------------- | -------------------------- | ---- | ---------------------------------------- | +| stroke-width | <length> | 32px（量规）
24px（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条的宽度。 | +| start-angle | <deg> | 240（量规）
0（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条起始角度，以时钟0点为基线。范围为0到360。 | +| total-angle | <deg> | 240（量规）
360（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条总长度，范围为-360到360，负数标识起点到终点为逆时针。 | +| center-x | <length> | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-y和radius一起配置才能生效。（仅量规图支持） | +| center-y | <length> | - | 否 | 量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-x和radius一起配置才能生效。（仅量规图支持） | +| radius | <length> | - | 否 | 量规组件刻度条半径，该样式优先于通用样式的width和height样式。该样式需要和center-x和center-y一起配置才能生效。（仅量规图支持） | +| colors | Array | - | 否 | 量规组件刻度条每一个区段的颜色。
如：colors: \#ff0000, \#00ff00。（仅量规图支持） | +| weights | Array | - | 否 | 量规组件刻度条每一个区段的权重。
如：weights: 2, 2。（仅量规图支持） | +| font-family5+ | Array | - | 否 | 表示绘制注释的字体样式，支持[自定义字体](../arkui-js/js-components-common-customizing-font.md)。 | +| font-size5+ | <length> | - | 否 | 表示绘制注释的字体的大小。 | ## 事件 @@ -158,14 +158,14 @@ 除支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法： -| 方法 | 参数 | 描述 | -| -------- | -------- | -------- | -| append | {
serial: number, // 设置要更新的线形图数据下标
data: Array<number>, // 设置新增的数据
} | 往已有的数据序列中动态添加数据，根据serial指定目标序列，serial为datasets数组的下标，从0开始。注意：不会更新datasets[index].data。仅线形图支持，按横坐标加1递增（与xAxis min/max设置相关）。 | +| 方法 | 参数 | 描述 | +| ------ | ---------------------------------------- | ---------------------------------------- | +| append | {
serial: number, // 设置要更新的线形图数据下标
data: Array<number>, // 设置新增的数据
} | 向已有的数据序列中动态添加数据，根据serial指定目标序列，serial为datasets数组的下标，从0开始。不会更新datasets[index].data。仅线形图支持，按横坐标加1递增（与xAxis min/max设置相关）。 | ## 示例 1. 线形图 - ``` + ```html
@@ -176,7 +176,7 @@
``` - ``` + ```css /* xxx.css */ .container { flex-direction: column; @@ -202,7 +202,7 @@ } ``` - ``` + ```js // xxx.js export default { data: { @@ -257,7 +257,7 @@ ![zh-cn_image_0000001173324843](figures/zh-cn_image_0000001173324843.png) 2. 柱状图 - ``` + ```html
@@ -267,7 +267,7 @@
``` - ``` + ```css /* xxx.css */ .container { flex-direction: column; @@ -287,7 +287,7 @@ } ``` - ``` + ```js // xxx.js export default { data: { @@ -325,7 +325,7 @@ ![zh-cn_image_0000001173164929](figures/zh-cn_image_0000001173164929.png) 3. 量规图 - ``` + ```html
@@ -334,7 +334,7 @@
``` - ``` + ```css /* xxx.css */ .container { flex-direction: column; diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-divider.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-divider.md index 84fa5f4274..7aa5fd761a 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-divider.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-divider.md @@ -1,7 +1,7 @@ # divider -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 提供分隔器组件，分隔不同内容块/内容元素。可用于列表或界面布局。 @@ -19,31 +19,31 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| vertical | boolean | false | 否 | 使用水平分割线还是垂直分割线，默认水平。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | ------- | ----- | ---- | -------------------- | +| vertical | boolean | false | 否 | 使用水平分割线还是垂直分割线，默认水平。 | -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 不支持focusable、disabled属性。 +> **说明：** +> 不支持focusable、disabled属性。 ## 样式 仅支持如下样式： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| margin | <length> | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。 | -| margin-[left\|top\|right\|bottom] | <length> | 0 | 否 | 使用简写属性设置左、上、右、下外边距属性，类型length，单位px，默认值0。 | -| color | <color> | \#08000000 | 否 | 设置分割线颜色。 | -| stroke-width | <length> | 1 | 否 | 设置分割线宽度。 | -| display | string | flex | 否 | 确定分割线所产生的框的类型。值flex/none，默认值flex。 | -| visibility | string | visible | 否 | 是否显示分割线。不可见的框会占用布局。visible代表显示元素，hidden代表不显示元素。 | -| line-cap | string | butt | 否 | 设置分割线条的端点样式，默认为butt，可选值为：
- butt：分割线两端为平行线；
- round：分割线两端额外添加半圆；
- square：分割线两端额外添加半方形；
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> round和square会额外增加一个线宽的分割线长度。 | -| flex | number | - | 否 | 规定了分割线如何适应父组件中的可用空间。它作为一个简写属性，用来设置组件的flex-grow。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅父容器为<div>、<list-item>、<tabs>时生效。 | -| flex-grow | number | 0 | 否 | 设置分割线的伸展因子，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex项加起来的大小）的分配系数。0为不伸展。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅父容器为<div>、<list-item>、<tabs>时生效。 | -| flex-shrink | number | 1 | 否 | 设置分割线的收缩因子，flex元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅父容器为<div>、<list-item>、<tabs>时生效。 | -| flex-basis | <length> | - | 否 | 设置分割线在主轴方向上的初始大小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅父容器为<div>、<list-item>、<tabs>时生效。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| --------------------------------- | -------------- | ---------- | ---- | ---------------------------------------- | +| margin | <length> | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。 | +| margin-[left\|top\|right\|bottom] | <length> | 0 | 否 | 使用简写属性设置左、上、右、下外边距属性，类型length，单位px，默认值0。 | +| color | <color> | \#08000000 | 否 | 设置分割线颜色。 | +| stroke-width | <length> | 1 | 否 | 设置分割线宽度。 | +| display | string | flex | 否 | 确定分割线所产生的框的类型。值flex/none，默认值flex。 | +| visibility | string | visible | 否 | 是否显示分割线。不可见的框会占用布局。visible代表显示元素，hidden代表不显示元素。 | +| line-cap | string | butt | 否 | 设置分割线条的端点样式，默认为butt，可选值为：
- butt：分割线两端为平行线；
- round：分割线两端额外添加半圆，额外增加一个线宽的分割线长度；
- square：分割线两端额外添加半方形，额外增加一个线宽的分割线长度； | +| flex | number | - | 否 | 规定了分割线如何适应父组件中的可用空间，用来设置组件的flex-grow。
仅父容器为<div>、<list-item>、<tabs>时生效。 | +| flex-grow | number | 0 | 否 | 设置分割线的伸展因子，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex项加起来的大小）的分配系数，0为不伸展。
仅父容器为<div>、<list-item>、<tabs>时生效。 | +| flex-shrink | number | 1 | 否 | 设置分割线的收缩因子，flex元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。
仅父容器为<div>、<list-item>、<tabs>时生效。 | +| flex-basis | <length> | - | 否 | 设置分割线在主轴方向上的初始大小。
仅父容器为<div>、<list-item>、<tabs>时生效。 | ## 事件 @@ -58,7 +58,7 @@ ## 示例 -``` +```html
@@ -67,7 +67,7 @@
``` -``` +```css /* xxx.css */ .container { margin: 20px; diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-image-animator.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-image-animator.md index 114a6713ed..c523d3b261 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-image-animator.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-image-animator.md @@ -1,7 +1,7 @@ # image-animator -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 图片帧动画播放器。 @@ -15,26 +15,26 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| images | Array<ImageFrame> | - | 是 | 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式：png、jpg。ImageFrame的详细说明请见表 ImageFrame说明。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 使用时需要使用数据绑定的方式，如images = {{images}}，js中声明相应变量：images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]。
> 
> js中声明相应变量：images: [{src: "/common/heart-rate01.png", duration: "100"}, {src: "/common/heart-rate02.png", duration: "200"}]。支持配置每一帧图片的时长，单位毫秒。6+ | -| predecode6+ | number | 0 | 否 | 是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。 | -| iteration | number \| string | infinite | 否 | 设置帧动画播放次数。number表示固定次数，infinite枚举表示无限次数播放。 | -| reverse | boolean | false | 否 | 设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。 | -| fixedsize | boolean | true | 否 | 设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的 width 、height 、top和left属性都要单独设置。 | -| duration | string | - | 是 | 设置单次播放时长。单位支持[s(秒)\|ms(毫秒)]，默认单位为ms。 duration为0时，不播放图片。 值改变只会在下一次循环开始时生效，当images中设置了单独的duration后，该属性设置无效。 | -| fillmode5+ | string | forwards | 否 | 指定帧动画执行结束后的状态。可选项有：
- none：恢复初始状态。
- forwards：保持帧动画结束时的状态（在最后一个关键帧中定义）。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ---------------------- | -------------------------- | -------- | ---- | ---------------------------------------- | +| images | Array<ImageFrame> | - | 是 | 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式：png、jpg。ImageFrame的详细说明请见表 ImageFrame说明。
使用时需要使用数据绑定的方式：
- hml文件中引用图片资源：`images = {{images}}`，
- js文件中声明相应变量：
`images: [{src: "/common/heart-rate01.png",duration:"100"}]`。从API Version 6 开始，支持配置每一帧图片的时长，单位毫秒。 | +| predecode6+ | number | 0 | 否 | 是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。 | +| iteration | number \| string | infinite | 否 | 设置帧动画播放次数。number表示固定次数，infinite枚举表示无限次数播放。 | +| reverse | boolean | false | 否 | 设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。 | +| fixedsize | boolean | true | 否 | 设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的 width 、height 、top和left属性都要单独设置。 | +| duration | string | - | 是 | 设置单次播放时长。单位支持[s(秒)\|ms(毫秒)]，默认单位为ms。 duration为0时，不播放图片。 值改变只会在下一次循环开始时生效，当images中设置了单独的duration后，该属性设置无效。 | +| fillmode5+ | string | forwards | 否 | 指定帧动画执行结束后的状态。可选项有：
- none：恢复初始状态。
- forwards：保持帧动画结束时的状态（在最后一个关键帧中定义）。 | **表1** ImageFrame说明 -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| src | <uri> | - | 是 | 图片路径，图片格式为svg，png和jpg。 | -| width | <length> | 0 | 否 | 图片宽度。 | -| height | <length> | 0 | 否 | 图片高度。 | -| top | <length> | 0 | 否 | 图片相对于组件左上角的纵向坐标。 | -| left | <length> | 0 | 否 | 图片相对于组件左上角的横向坐标。 | -| duration6+ | number | - | 否 | 每一帧图片的播放时长，单位毫秒。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| --------------------- | -------------- | ---- | ---- | ---------------------- | +| src | <uri> | - | 是 | 图片路径，图片格式为svg，png和jpg。 | +| width | <length> | 0 | 否 | 图片宽度。 | +| height | <length> | 0 | 否 | 图片高度。 | +| top | <length> | 0 | 否 | 图片相对于组件左上角的纵向坐标。 | +| left | <length> | 0 | 否 | 图片相对于组件左上角的横向坐标。 | +| duration6+ | number | - | 否 | 每一帧图片的播放时长，单位毫秒。 | ## 样式 @@ -46,30 +46,30 @@ 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | -| start | - | 帧动画启动时触发。 | -| pause | - | 帧动画暂停时触发。 | -| stop | - | 帧动画结束时触发。 | -| resume | - | 帧动画恢复时触发。 | +| 名称 | 参数 | 描述 | +| ------ | ---- | --------- | +| start | - | 帧动画启动时触发。 | +| pause | - | 帧动画暂停时触发。 | +| stop | - | 帧动画结束时触发。 | +| resume | - | 帧动画恢复时触发。 | ## 方法 支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法： -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | -| start | - | 开始播放图片帧动画。再次调用，重新从第1帧开始播放。 | -| pause | - | 暂停播放图片帧动画。 | -| stop | - | 停止播放图片帧动画。 | -| resume | - | 继续播放图片帧。 | -| getState | - | 获取播放状态。可能值有：
- playing：播放中
- paused：已暂停
- stopped：已停止。 | +| 名称 | 参数 | 描述 | +| -------- | ---- | ---------------------------------------- | +| start | - | 开始播放图片帧动画。再次调用，重新从第1帧开始播放。 | +| pause | - | 暂停播放图片帧动画。 | +| stop | - | 停止播放图片帧动画。 | +| resume | - | 继续播放图片帧。 | +| getState | - | 获取播放状态。
- playing：播放中
- paused：已暂停
- stopped：已停止。 | ## 示例 -``` +```html
@@ -82,7 +82,7 @@
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -111,7 +111,7 @@ } ``` -``` +```js //xxx.js export default { data: { diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md index c2ada666a3..346f5798c7 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md @@ -1,7 +1,7 @@ # image -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 图片组件，用来渲染展示图片。 @@ -15,55 +15,55 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| src | string | - | 否 | 图片的路径，支持本地路径，图片格式包括png、jpg、bmp、svg和gif。
支持Base64字符串6+。格式为data:image/[png \| jpeg \| bmp \| webp];base64, [base64 data], 其中[base64 data]为Base64字符串数据。
支持dataability://的路径前缀，用于访问通过data ability提供的图片路径6+。 | -| alt | string | - | 否 | 占位图，当指定图片在加载中时显示。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ---- | ------ | ---- | ---- | ---------------------------------------- | +| src | string | - | 否 | 图片的路径，支持本地路径，图片格式包括png、jpg、bmp、svg和gif。
- 支持Base64字符串6+。格式为data:image/[png \| jpeg \| bmp \| webp];base64, [base64 data], 其中[base64 data]为Base64字符串数据。
- 支持dataability://的路径前缀，用于访问通过data ability提供的图片路径6+。 | +| alt | string | - | 否 | 占位图，当指定图片在加载中时显示。 | ## 样式 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| object-fit | string | cover | 否 | 设置图片的缩放类型。可选值类型说明请见object-fit 类型说明。（不支持svg格式） | -| match-text-direction | boolean | false | 否 | 图片是否跟随文字方向。（不支持svg格式） | -| fit-original-size | boolean | false | 否 | image组件在未设置宽高的情况下是否适应图源尺寸（该属性为true时object-fit属性不生效），svg类型图源不支持该属性。 | -| object-position7+ | string | 0px 0px | 否 | 设置图片在组件内展示的位置。
设置类型有两种：
1. 像素，单位px，示例 15px 15px 代表X轴或者Y轴移动的位置
2. 字符，可选值：
- left 图片显示在组件左侧；
- top 图片显示在组件顶部位置；
- right 图片显示在组件右侧位置；
- bottom 图片显示在组件底部位置。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ---------------------------- | ------- | ------------ | ---- | ---------------------------------------- | +| object-fit | string | cover | 否 | 设置图片的缩放类型，不支持svg格式。可选值类型说明请见object-fit 类型说明。 | +| match-text-direction | boolean | false | 否 | 图片是否跟随文字方向，不支持svg格式。 | +| fit-original-size | boolean | false | 否 | image组件在未设置宽高的情况下是否适应图源尺寸，该属性为true时object-fit属性不生效，svg类型图源不支持该属性。 | +| object-position7+ | string | 0px 0px | 否 | 设置图片在组件内展示的位置。
设置类型有两种：
1. 像素，单位px，示例 15px 15px 代表X轴或者Y轴移动的位置
2. 字符，可选值：
- left 图片显示在组件左侧；
- top 图片显示在组件顶部位置；
- right 图片显示在组件右侧位置；
- bottom 图片显示在组件底部位置。 | **表1** object-fit 类型说明 -| 类型 | 描述 | -| -------- | -------- | -| cover | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，居中显示。 | -| contain | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，居中显示。 | -| fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 | -| none | 保持原有尺寸进行居中显示。 | -| scale-down | 保持宽高比居中显示，图片缩小或者保持不变。 | - -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 使用svg图片资源时： -> -> - 建议设置image组件的长宽，否则在父组件的长或宽为无穷大的场景下，svg资源将不会绘制； -> -> - 如果svg描述中未指定相应的长宽，则svg将会填满image组件区域； -> -> - 如果svg描述中指定了相应的长宽，和image组件本身的长宽效果如下： -> -> 1. 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅显示左上角部分； -> -> 2. 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分显示空白。 +| 类型 | 描述 | +| ---------- | ------------------------------------ | +| cover | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，居中显示。 | +| contain | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，居中显示。 | +| fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 | +| none | 保持原有尺寸进行居中显示。 | +| scale-down | 保持宽高比居中显示，图片缩小或者保持不变。 | + +> **说明：** +> 使用svg图片资源时： +> +> - 建议设置image组件的长宽，否则在父组件的长或宽为无穷大的场景下，svg资源将不会绘制； +> +> - 如果svg描述中未指定相应的长宽，则svg将会填满image组件区域； +> +> - 如果svg描述中指定了相应的长宽，和image组件本身的长宽效果如下： +> +> 1. 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅显示左上角部分； +> +> 2. 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分显示空白。 ## 事件 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | -| complete(Rich) | { width：width， height：height } | 图片成功加载时触发该回调，返回成功加载的图源尺寸。 | -| error(Rich) | { width：width， height：height } | 图片加载出现异常时触发该回调，异常时长宽为零。 | +| 名称 | 参数 | 描述 | +| -------------- | ---------------------------------------- | ------------------------- | +| complete(Rich) | {
 width：width，
 height：height
 } | 图片成功加载时触发该回调，返回成功加载的图源尺寸。 | +| error(Rich) | {
 width：width，
 height：height
 } | 图片加载出现异常时触发该回调，异常时长宽为零。 | ## 方法 @@ -72,7 +72,7 @@ ## 示例 -``` +```html
@@ -81,7 +81,7 @@
``` -``` +```css /* xxx.css */ .container { justify-content: center; @@ -96,7 +96,7 @@ } ``` -``` +```js // xxx.js export default { data: { diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md index 215d9960e3..9f840b4bea 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md @@ -1,7 +1,7 @@ # input -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 交互式组件，包括单选框，多选框，按钮和单行文本输入框。 @@ -19,29 +19,29 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| type | string | text
| 否 | input组件类型，可选值为text，email，date，time，number，password，button，checkbox，radio。
其中text，email，date，time，number，password这六种类型之间支持动态切换修改。
button，checkbox，radio不支持动态修改。可选值定义如下：
- button：定义可点击的按钮；
- checkbox：定义多选框；
- radio：定义单选按钮，允许在多个拥有相同name值的选项中选中其中一个；
- text：定义一个单行的文本字段；
- email：定义用于e-mail地址的字段；
- date：定义 date 控件（包括年、月、日，不包括时间）；
- time：定义用于输入时间的控件（不带时区）；
- number：定义用于输入数字的字段；
- password：定义密码字段（字段中的字符会被遮蔽）。 | -| checked | boolean | false | 否 | 当前组件是否选中，仅type为checkbox和radio生效。 | -| name | string | - | 否 | input组件的名称。 | -| value | string | - | 否 | input组件的value值，当类型为radio时必填且相同name值的选项该值唯一。 | -| placeholder | string | - | 否 | 设置提示文本的内容，仅在type为text\|email\|date\|time\|number\|password时生效。 | -| maxlength | number | - | 否 | 输入框可输入的最多字符数量，不填表示不限制输入框中字符数量。 | -| enterkeytype | string | default | 否 | 不支持动态修改。
设置软键盘Enter按钮的类型，可选值为：
- default：默认
- next：下一项
- go：前往
- done：完成
- send：发送
- search：搜索
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 除“next”外，点击后会自动收起软键盘。 | -| headericon | string | - | 否 | 在文本输入前的图标资源路径，该图标不支持点击事件（button，checkbox和radio不生效），图标格式为jpg，png和svg。 | -| showcounter5+ | boolean | false | 否 | 文本输入框是否显示计数下标，需要配合maxlength一起使用。 | -| menuoptions5+ | Array<MeunOption> | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 | -| autofocus6+ | boolean | false | 否 | 是否自动获焦。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 应用首页中设置不生效，可在onActive中延迟（100-500ms左右）调用focus方法实现输入框在首页中自动获焦。 | -| selectedstart6+ | number | -1 | 否 | 开始选择文本时初始选择位置。 | -| selectedend6+ | number | -1 | 否 | 开始选择文本时结尾选择位置。 | -| softkeyboardenabled6+ | boolean | true | 否 | 编辑时是否弹出系统软键盘。 | -| showpasswordicon6+ | boolean | true | 否 | 是否显示密码框末尾的图标（仅type为password时生效）。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------------------------------- | ----------------------- | --------- | ---- | ---------------------------------------- | +| type | string | text
| 否 | input组件类型，可选值为text，email，date，time，number，password，button，checkbox，radio。
其中text，email，date，time，number，password这六种类型之间支持动态切换修改。
button，checkbox，radio不支持动态修改。可选值定义如下：
- button：定义可点击的按钮；
- checkbox：定义多选框；
- radio：定义单选按钮，允许在多个拥有相同name值的选项中选中其中一个；
- text：定义一个单行的文本字段；
- email：定义用于e-mail地址的字段；
- date：定义 date 控件（包括年、月、日，不包括时间）；
- time：定义用于输入时间的控件（不带时区）；
- number：定义用于输入数字的字段；
- password：定义密码字段（字段中的字符会被遮蔽）。 | +| checked | boolean | false | 否 | 当前组件是否选中，仅type为checkbox和radio生效。 | +| name | string | - | 否 | input组件的名称。 | +| value | string | - | 否 | input组件的value值，当类型为radio时必填且相同name值的选项该值唯一。 | +| placeholder | string | - | 否 | 设置提示文本的内容，仅在type为text\|email\|date\|time\|number\|password时生效。 | +| maxlength | number | - | 否 | 输入框可输入的最多字符数量，不填表示不限制输入框中字符数量。 | +| enterkeytype | string | default | 否 | 不支持动态修改。
设置软键盘Enter按钮的类型，可选值为：
- default：默认
- next：下一项
- go：前往
- done：完成
- send：发送
- search：搜索
除“next”外，点击后会自动收起软键盘。 | +| headericon | string | - | 否 | 在文本输入前的图标资源路径，该图标不支持点击事件（button，checkbox和radio不生效），图标格式为jpg，png和svg。 | +| showcounter5+ | boolean | false | 否 | 文本输入框是否显示计数下标，需要配合maxlength一起使用。 | +| menuoptions5+ | Array<MeunOption> | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 | +| autofocus6+ | boolean | false | 否 | 是否自动获焦。
应用首页中设置不生效，可在onActive中延迟（100-500ms左右）调用focus方法实现输入框在首页中自动获焦。 | +| selectedstart6+ | number | -1 | 否 | 开始选择文本时初始选择位置。 | +| selectedend6+ | number | -1 | 否 | 开始选择文本时结尾选择位置。 | +| softkeyboardenabled6+ | boolean | true | 否 | 编辑时是否弹出系统软键盘。 | +| showpasswordicon6+ | boolean | true | 否 | 是否显示密码框末尾的图标（仅type为password时生效）。 | **表1** MenuOption5+ -| 名称 | 类型 | 描述 | -| -------- | -------- | -------- | -| icon | string | 菜单选项中的图标路径。 | +| 名称 | 类型 | 描述 | +| ------- | ------ | ----------- | +| icon | string | 菜单选项中的图标路径。 | | content | string | 菜单选项中的文本内容。 | @@ -49,14 +49,14 @@ 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| color | <color> | \#e6000000 | 否 | 单行输入框或者按钮的文本颜色。 | -| font-size | <length> | 16px | 否 | 单行输入框或者按钮的文本尺寸。 | -| allow-scale | boolean | true | 否 | 单行输入框或者按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | -| placeholder-color | <color> | \#99000000 | 否 | 单行输入框的提示文本的颜色，type为text\|email\|date\|time\|number\|password时生效。 | -| font-weight | number \| string | normal | 否 | 单行输入框或者按钮的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | -| caret-color6+ | <color> | - | 否 | 设置输入光标的颜色。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------------------------ | -------------------------- | ---------- | ---- | ---------------------------------------- | +| color | <color> | \#e6000000 | 否 | 单行输入框或者按钮的文本颜色。 | +| font-size | <length> | 16px | 否 | 单行输入框或者按钮的文本尺寸。 | +| allow-scale | boolean | true | 否 | 单行输入框或者按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | +| placeholder-color | <color> | \#99000000 | 否 | 单行输入框的提示文本的颜色，type为text\|email\|date\|time\|number\|password时生效。 | +| font-weight | number \| string | normal | 否 | 单行输入框或者按钮的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| caret-color6+ | <color> | - | 否 | 设置输入光标的颜色。 | ## 事件 @@ -64,35 +64,35 @@ 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： - 当input类型为text、email、date、time、number、password时，支持如下事件： - | 名称 | 参数 | 描述 | - | -------- | -------- | -------- | - | change | { value:inputValue } | 输入框输入内容发生变化时触发该事件，返回用户当前输入值。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 改变value属性值不会触发该回调。 | - | enterkeyclick | { value:enterKey } | 软键盘enter键点击后触发该事件，返回enter按钮的类型，enterKey类型为number，可选值为：
- 2：设置enterkeytype属性为go时生效。
- 3：设置enterkeytype属性为search时生效。
- 4：设置enterkeytype属性为send时生效。
- 5：设置enterkeytype属性为next时生效。
- 6：不设置enterkeytype或者设置enterkeytype属性为default、done时生效。 | - | translate5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 | - | share5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 | - | search5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 | - | optionselect5+ | { index:optionIndex, value: selectedText } | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 | - | selectchange6+ | { start: number，end: number } | 文本选择变化时触发事件。 | + | 名称 | 参数 | 描述 | + | ------------------------- | ---------------------------------------- | ---------------------------------------- | + | change | {
 value: inputValue
 } | 输入框输入内容发生变化时触发该事件，返回用户当前输入值。
改变value属性值不会触发该回调。 | + | enterkeyclick | {
 value: enterKey
 } | 软键盘enter键点击后触发该事件，返回enter按钮的类型，enterKey类型为number，可选值为：
- 2：设置enterkeytype属性为go时生效。
- 3：设置enterkeytype属性为search时生效。
- 4：设置enterkeytype属性为send时生效。
- 5：设置enterkeytype属性为next时生效。
- 6：不设置enterkeytype或者设置enterkeytype属性为default、done时生效。 | + | translate5+ | {
 value: selectedText
 } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 | + | share5+ | {
 value: selectedText
 } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 | + | search5+ | {
 value: selectedText
 } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 | + | optionselect5+ | {
 index: optionIndex,
 value: selectedText
 } | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 | + | selectchange6+ | {
start: number,
end: number
 } | 文本选择变化时触发事件。 | - 当input类型为checkbox、radio时，支持如下事件： - | 名称 | 参数 | 描述 | - | -------- | -------- | -------- | - | change | { checked:true \| false } | checkbox多选框或radio单选框的checked状态发生变化时触发该事件。 | + | 名称 | 参数 | 描述 | + | ------ | ---------------------------------------- | ---------------------------------------- | + | change | {
 checked:true \| false 
} | checkbox多选框或radio单选框的checked状态发生变化时触发该事件。 | ## 方法 除支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法： -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | -| focus | { focus: true\|false }，focus不传默认为true。 | 使组件获得或者失去焦点，type为text\|email\|date\|time\|number\|password时，可弹出或收起输入法。 | -| showError | { error: string } | 展示输入错误提示，type为text\|email\|date\|time\|number\|password时生效。 | -| delete6+ | - | type为text\|email\|date\|time\|number\|password时，根据当前光标位置删除文本内容，如果当前输入组件没有光标，默认删除最后一个字符并展示光标。 | +| 名称 | 参数 | 描述 | +| ------------------- | ---------------------------------------- | ---------------------------------------- | +| focus | {
 focus: true\|false
 }，
focus不传值时，默认为true。 | 使组件获得或者失去焦点，type为text\|email\|date\|time\|number\|password时，可弹出或收起输入法。 | +| showError | {
 error: string 
} | 展示输入错误提示，type为text\|email\|date\|time\|number\|password时生效。 | +| delete6+ | - | type为text\|email\|date\|time\|number\|password时，根据当前光标位置删除文本内容，如果当前输入组件没有光标，默认删除最后一个字符并展示光标。 | ## 示例 1. type为text - ``` + ```html
``` - ``` + ```css /* xxx.css */ .content { width: 60%; @@ -119,7 +119,7 @@ } ``` - ``` + ```js // xxx.js import prompt from '@system.prompt' export default { @@ -146,14 +146,14 @@ ![zh-cn_image_0000001252835901](figures/zh-cn_image_0000001252835901.png) 2. type为button - ``` + ```html
``` - ``` + ```css /* xxx.css */ .div-button { flex-direction: column; @@ -168,14 +168,14 @@ ![zh-cn_image_0000001207995958](figures/zh-cn_image_0000001207995958.png) 3. type为checkbox - ``` + ```html
``` - ``` + ```css /* xxx.css */ .content{ width: 100%; @@ -185,7 +185,7 @@ } ``` - ``` + ```js // xxx.js import prompt from '@system.prompt' export default { @@ -201,7 +201,7 @@ ![zh-cn_image_0000001208155956](figures/zh-cn_image_0000001208155956.png) 4. type为radio - ``` + ```html
@@ -210,7 +210,7 @@
``` - ``` + ```css /* xxx.css */ .content{ width: 100%; @@ -220,7 +220,7 @@ } ``` - ``` + ```js // xxx.js import prompt from '@system.prompt' export default { diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md index cfa7a4a438..ae7bebf6bb 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md @@ -1,7 +1,7 @@ # label -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 为input、button、textarea组件定义相应的标注，点击该标注时会触发绑定组件的点击效果。 @@ -19,33 +19,33 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| target | string | - | 否 | 目标组件的属性id值。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------ | ------ | ---- | ---- | ----------- | +| target | string | - | 否 | 目标组件的属性id值。 | ## 样式 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| color | <color> | #e5000000 | 否 | 设置文本的颜色。 | -| font-size | <length> | 30px | 否 | 设置文本的尺寸。 | -| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如果需要支持动态生效，请参看config描述文件中config-changes标签。 | -| letter-spacing | <length> | 0px | 否 | 设置文本的字符间距。 | -| font-style | string | normal | 否 | 设置文本的字体样式，可选值为：
- normal：标准的字体样式；
- italic：斜体的字体样式。 | -| font-weight | number \| string | normal | 否 | 设置文本的字体粗细，number类型取值[100, 900]，默认为400，取值越大，字体越粗。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> number取值必须为100的整数倍。
string类型取值支持如下四个值：lighter、normal、bold、bolder。 | -| text-decoration | string | none | 否 | 设置文本的文本修饰，可选值为：
- underline：文字下划线修饰；
- line-through：穿过文本的修饰线n
- none：标准文本。 | -| text-align | string | start
| 否 | 设置文本的文本对齐方式，可选值为：
- left：文本左对齐；
- center：文本居中对齐；
- right：文本右对齐；
- start：根据文字书写相同的方向对齐；
- end：根据文字书写相反的方向对齐。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。 | -| line-height | <length> | 0px | 否 | 设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。 | -| text-overflow | string | clip | 否 | 在设置了最大行数的情况下生效，可选值为：
- clip：将文本根据父容器大小进行裁剪显示；
- ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。 | -| font-family | string | sans-serif | 否 | 设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | -| max-lines | number | - | 否 | 设置文本的最大行数。 | -| min-font-size | <length> | - | 否 | 文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 | -| max-font-size | <length> | - | 否 | 文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 | -| font-size-step | <length> | 1px | 否 | 文本动态调整字号时的步长，需要设置最小，最大字号样式生效。 | -| prefer-font-sizes | <array> | - | 否 | 预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。
如：prefer-font-sizes: 12px,14px,16px | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ----------------- | -------------------------- | ---------- | ---- | ---------------------------------------- | +| color | <color> | #e5000000 | 否 | 设置文本的颜色。 | +| font-size | <length> | 30px | 否 | 设置文本的尺寸。 | +| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
如果需要支持动态生效，请参看config描述文件中config-changes标签。 | +| letter-spacing | <length> | 0px | 否 | 设置文本的字符间距。 | +| font-style | string | normal | 否 | 设置文本的字体样式，可选值为：
- normal：标准的字体样式；
- italic：斜体的字体样式。 | +| font-weight | number \| string | normal | 否 | 设置文本的字体粗细，number类型取值[100, 900]，默认为400，取值越大，字体越粗。
number取值必须为100的整数倍。
string类型取值支持如下四个值：lighter、normal、bold、bolder。 | +| text-decoration | string | none | 否 | 设置文本的文本修饰，可选值为：
- underline：文字下划线修饰；
- line-through：穿过文本的修饰线n
- none：标准文本。 | +| text-align | string | start
| 否 | 设置文本的文本对齐方式，可选值为：
- left：文本左对齐；
- center：文本居中对齐；
- right：文本右对齐；
- start：根据文字书写相同的方向对齐；
- end：根据文字书写相反的方向对齐。
如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。 | +| line-height | <length> | 0px | 否 | 设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。 | +| text-overflow | string | clip | 否 | 在设置了最大行数的情况下生效，可选值为：
- clip：将文本根据父容器大小进行裁剪显示；
- ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。 | +| font-family | string | sans-serif | 否 | 设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | +| max-lines | number | - | 否 | 设置文本的最大行数。 | +| min-font-size | <length> | - | 否 | 文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 | +| max-font-size | <length> | - | 否 | 文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 | +| font-size-step | <length> | 1px | 否 | 文本动态调整字号时的步长，需要设置最小，最大字号样式生效。 | +| prefer-font-sizes | <array> | - | 否 | 预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。
如：prefer-font-sizes: 12px,14px,16px | ## 事件 @@ -60,7 +60,7 @@ ## 示例 -``` +```html
@@ -78,7 +78,7 @@
``` -``` +```css /*xxx.css */ .container { flex-direction: column; diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md index 94d3f55c40..a6b25cae4a 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md @@ -1,7 +1,7 @@ # marquee -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 跑马灯组件，用于展示一段单行滚动的文字。 @@ -19,49 +19,49 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| scrollamount | number | 6 | 否 | 跑马灯每次滚动时移动的最大长度。 | -| loop | number | -1 | 否 | 跑马灯滚动的次数。如果未指定，则默认值为-1，当该值小于等于零时表示marquee将连续滚动。 | -| direction | string | left | 否 | 设置跑马灯的文字滚动方向，可选值为left和right。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------------ | ------ | ---- | ---- | ---------------------------------------- | +| scrollamount | number | 6 | 否 | 跑马灯每次滚动时移动的最大长度。 | +| loop | number | -1 | 否 | 跑马灯滚动的次数。如果未指定，则默认值为-1，当该值小于等于零时表示marquee将连续滚动。 | +| direction | string | left | 否 | 设置跑马灯的文字滚动方向，可选值为left和right。 | ## 样式 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| color | <color> | \#e5000000 | 否 | 设置跑马灯中文字的文本颜色。 | -| font-size | <length> | 37.5 | 否 | 设置跑马灯中文字的文本尺寸。 | -| allow-scale | boolean | true | 否 | 设置跑马灯中文字的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | -| font-weight | number \| string | normal | 否 | 设置跑马灯中文字的字体的粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | -| font-family | string | sans-serif | 否 | 设置跑马灯中文字的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- | +| color | <color> | \#e5000000 | 否 | 设置跑马灯中文字的文本颜色。 | +| font-size | <length> | 37.5 | 否 | 设置跑马灯中文字的文本尺寸。 | +| allow-scale | boolean | true | 否 | 设置跑马灯中文字的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | +| font-weight | number \| string | normal | 否 | 设置跑马灯中文字的字体的粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family | string | sans-serif | 否 | 设置跑马灯中文字的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | ## 事件 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | -| bounce(Rich) | - | 当文本滚动到末尾时触发该事件。 | -| finish(Rich) | - | 当完成滚动次数时触发该事件。需要在 loop 属性值大于 0 时触发。 | -| start(Rich) | - | 当文本滚动开始时触发该事件。 | +| 名称 | 参数 | 描述 | +| ------------ | ---- | ---------------------------------------- | +| bounce(Rich) | - | 当文本滚动到末尾时触发该事件。 | +| finish(Rich) | - | 当完成滚动次数时触发该事件。需要在 loop 属性值大于 0 时触发。 | +| start(Rich) | - | 当文本滚动开始时触发该事件。 | ## 方法 除支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法： -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | -| start | - | 开始滚动。 | -| stop | - | 停止滚动。 | +| 名称 | 参数 | 描述 | +| ----- | ---- | ----- | +| start | - | 开始滚动。 | +| stop | - | 停止滚动。 | ## 示例 -``` +```html
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -104,7 +104,7 @@ } ``` -``` +```js // xxx.js export default { data: { diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-menu.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-menu.md index bdb2d032b1..8dbbcf2f8a 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-menu.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-menu.md @@ -1,7 +1,7 @@ # menu -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 提供菜单组件，作为临时性弹出窗口，用于展示用户可执行的操作。 @@ -19,52 +19,52 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：↵ -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| target | string | - | 否 | 目标元素选择器。当使用目标元素选择器后，点击目标元素会自动弹出menu菜单。弹出菜单位置优先为目标元素右下角，当右边可视空间不足时会适当左移，当下方空间不足时会适当上移。 | -| type | string | click | 否 | 目标元素触发弹窗的方式，可选值有：
- click：点击弹窗。
- longpress：长按弹窗。 | -| title | string | - | 否 | 菜单标题内容。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------ | ------ | ----- | ---- | ---------------------------------------- | +| target | string | - | 否 | 目标元素选择器。当使用目标元素选择器后，点击目标元素会自动弹出menu菜单。弹出菜单位置优先为目标元素右下角，当右边可视空间不足时会适当左移，当下方空间不足时会适当上移。 | +| type | string | click | 否 | 目标元素触发弹窗的方式，可选值有：
- click：点击弹窗。
- longpress：长按弹窗。 | +| title | string | - | 否 | 菜单标题内容。 | -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 不支持focusable、disabled属性。 +> **说明：** +> 不支持focusable、disabled属性。 ## 样式 仅支持如下样式： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| text-color | <color> | - | 否 | 设置菜单的文本颜色。 | -| font-size | <length> | 30px | 否 | 设置菜单的文本尺寸。 | -| allow-scale | boolean | true | 否 | 设置菜单的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | -| letter-spacing | <length> | 0 | 否 | 设置菜单的字符间距。 | -| font-style | string | normal | 否 | 设置菜单的字体样式。见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | -| font-weight | number \| string | normal | 否 | 设置菜单的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | -| font-family | string | sans-serif | 否 | 设置菜单的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------------- | -------------------------- | ---------- | ---- | ---------------------------------------- | +| text-color | <color> | - | 否 | 设置菜单的文本颜色。 | +| font-size | <length> | 30px | 否 | 设置菜单的文本尺寸。 | +| allow-scale | boolean | true | 否 | 设置菜单的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | +| letter-spacing | <length> | 0 | 否 | 设置菜单的字符间距。 | +| font-style | string | normal | 否 | 设置菜单的字体样式。见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-weight | number \| string | normal | 否 | 设置菜单的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family | string | sans-serif | 否 | 设置菜单的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | ## 事件 仅支持如下事件： -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | +| 名称 | 参数 | 描述 | +| -------- | ------------------------- | ---------------------------------------- | | selected | { value:value } | 菜单中某个值被点击选中时触发，返回的value值为option组件的value属性。 | -| cancel | - | 用户取消。 | +| cancel | - | 用户取消。 | ## 方法 仅支持如下方法。 -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | +| 名称 | 参数 | 描述 | +| ---- | --------------------------------- | ---------------------------------------- | | show | { x:x,  y:y } | 显示menu菜单。(x, y)指定菜单弹窗位置。其中x表示距离可见区域左边沿的 X 轴坐标，不包含任何滚动偏移，y表示距离可见区域上边沿的 Y 轴坐标，不包含任何滚动偏移以及状态栏。菜单优先显示在弹窗位置右下角，当右边可视空间不足时会适当左移，当下方空间不足时会适当上移。 | ## 示例 -``` +```html
Show popup menu. @@ -76,7 +76,7 @@
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -88,7 +88,7 @@ } ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-option.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-option.md index 3e64a27002..1b9e09488b 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-option.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-option.md @@ -1,7 +1,7 @@ # option -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 当作为<[select](../arkui-js/js-components-basic-select.md)>的子组件时用来展示下拉选择的具体项目。 @@ -23,25 +23,25 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：↵ -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| selected | boolean | - | 否 | 选择项是否为下拉列表的默认项，仅在父组件是select时生效。 | -| value | string | - | 是 | 选择项的值，作为select、menu父组件的selected事件中的返回值。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> option选项的UI展示值需要放在标签内，如<option value="10">十月</option> | -| icon | string | - | 否 | 图标资源路径，该图标展示在选项文本前，图标格式为jpg，png和svg。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | ------- | ---- | ---- | ---------------------------------------- | +| selected | boolean | - | 否 | 选择项是否为下拉列表的默认项，仅在父组件是select时生效。 | +| value | string | - | 是 | 选择项的值，作为select、menu父组件的selected事件中的返回值。
option选项的UI展示值需要放在标签内，如：
`` | +| icon | string | - | 否 | 图标资源路径，该图标展示在选项文本前，图标格式为jpg，png和svg。 | ## 样式 支持如下样式。 -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| color | <color> | \#e6000000 | 否 | 选择项的文本颜色。 | -| font-size | <length> | 16px | 否 | 选择项的文本尺寸。 | -| allow-scale | boolean | true | 否 | 选择项的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | -| font-weight | number \| string | normal | 否 | 选择项的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | -| text-decoration | string | none | 否 | 选择项的文本修饰，见[text组件text-decoration的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | -| font-family | string | sans-serif | 否 | 选择项的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| --------------- | -------------------------- | ---------- | ---- | ---------------------------------------- | +| color | <color> | \#e6000000 | 否 | 选择项的文本颜色。 | +| font-size | <length> | 16px | 否 | 选择项的文本尺寸。 | +| allow-scale | boolean | true | 否 | 选择项的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | +| font-weight | number \| string | normal | 否 | 选择项的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| text-decoration | string | none | 否 | 选择项的文本修饰，见[text组件text-decoration的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family | string | sans-serif | 否 | 选择项的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | ## 事件 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md index 15a1e89ddc..f3536b5a11 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md @@ -1,7 +1,7 @@ # picker-view -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 嵌入页面的滑动选择器。 @@ -23,7 +23,7 @@ | 名称 | 类型 | 默认值 | 必填 | 描述 | | --------------- | ------ | ---- | ---- | ---------------------------------------- | -| range | Array | - | 否 | 设置文本选择器的取值范围。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：["15", "20", "25"]。 | +| range | Array | - | 否 | 设置文本选择器的取值范围。
使用时需要使用数据绑定的方式`range ={{data}}`，js中声明相应变量`data：["15","20","25"]`。 | | selected | string | 0 | 否 | 设置文本选择器的默认选择值，该值需要为range的索引。 | | indicatorprefix | string | - | 否 | 文本选择器选定值增加的前缀字段。 | | indicatorsuffix | string | - | 否 | 文本选择器选定值增加的后缀字段。 | @@ -34,7 +34,7 @@ | ------------- | ------- | ----------------------------------- | ---- | ---------------------------------------- | | containsecond | boolean | false | 否 | 时间选择器是否包含秒。 | | selected | string | 当前时间 | 否 | 设置时间选择器的默认取值，格式为 HH:mm；
当包含秒时，格式为HH:mm:ss。 | -| hours | number | 241-4
-5+ | 否 | 设置时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
  > 默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+ | +| hours | number | 241-4
-5+ | 否 | 设置时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。 | 日期选择器：type=date @@ -51,7 +51,7 @@ | 名称 | 类型 | 默认值 | 必填 | 描述 | | ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- | | selected | string | 当前日期时间 | 否 | 设置日期时间选择器的默认取值，格式有两种，为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm，不设置年时，默认使用当前年，该取值表示选择器弹窗时弹窗界面的默认选择值。 | -| hours | number | 241-4
-5+ | 否 | 设置日期时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
  > 默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+ | +| hours | number | 241-4
-5+ | 否 | 设置日期时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。 | | lunar5+ | boolean | false | 否 | 设置日期时间选择器弹窗界面是否为农历展示。 | | lunarswitch | boolean | false | 否 | 设置日期时间选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。 | @@ -60,7 +60,7 @@ | 名称 | 类型 | 默认值 | 必填 | 描述 | | -------- | ------- | --------- | ---- | ---------------------------------------- | | columns | number | - | 是 | 设置多列文本选择器的列数。 | -| range | 二维Array | - | 否 | 设置多列文本选择器的选择值，该值为二维数组。长度表示多少列，数组的每项表示每列的数据，如  [["a","b"], ["c","d"]]。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：[["a","b"], ["c","d"]]。 | +| range | 二维Array | - | 否 | 设置多列文本选择器的选择值，该值为二维数组。长度表示多少列，数组的每项表示每列的数据，如  [["a","b"], ["c","d"]]。
使用时需要使用数据绑定的方式`range ={{data}}`，js中声明相应变量`data：["15","20","25"]`。 | | selected | Array | [0,0,0,…] | 否 | 设置多列文本选择器的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗时弹窗界面的默认选择值。 | @@ -121,7 +121,7 @@ type=multi-text： ## 示例 -``` +```html
@@ -131,7 +131,7 @@ type=multi-text：
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -153,7 +153,7 @@ type=multi-text： } ``` -``` +```js /* xxx.js */ export default { data: { diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md index 45652c3694..737797a239 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md @@ -1,7 +1,7 @@ # picker -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。 @@ -31,7 +31,7 @@ | 名称 | 类型 | 默认值 | 必填 | 描述 | | -------- | ------ | ---- | ---- | ---------------------------------------- | -| range | Array | - | 否 | 设置普通选择器的取值范围，如["15", "20", "25"]。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：["15", "20", "25"]。 | +| range | Array | - | 否 | 设置普通选择器的取值范围，如["15", "20", "25"]。
使用时需要使用数据绑定的方式`range ={{data}}`，js中声明相应变量`data：["15","20","25"]`。 | | selected | string | 0 | 否 | 设置普通选择器弹窗的默认取值，取值需要是 range 的索引值，该取值表示选择器弹窗界面的默认选择值。 | | value | string | - | 否 | 设置普通选择器的值。 | @@ -47,7 +47,7 @@ | selected | string | 当前日期 | 否 | 设置日期选择器弹窗的默认取值，格式为 YYYY-MM-DD，该取值表示选择器弹窗界面的默认选择值。 | | value | string | - | 是 | 设置日期选择器的值。 | | lunar5+ | boolean | false | 否 | 设置日期选择器弹窗界面是否为农历展示。 | -| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 | +| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。
当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 | ### 时间选择器 @@ -59,7 +59,7 @@ | containsecond | boolean | false | 否 | 设置时间选择器是否包含秒。 | | selected | string | 当前时间 | 否 | 设置时间选择器弹窗的默认取值，格式为 HH:mm；当包含秒时，格式为HH:mm:ss，
该取值表示选择器弹窗界面的默认选择值。 | | value | string | - | 否 | 设置时间选择器的值。 | -| hours | number | 241-4
-5+ | 否 | 设置时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
  > 默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+ | +| hours | number | 241-4
-5+ | 否 | 设置时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。 | ### 日期时间选择器 @@ -70,9 +70,9 @@ | ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- | | selected | string | 当前日期时间 | 否 | 设置日期时间选择器弹窗的默认取值，有两种可选格式。
- 月日时分：MM-DD-HH-mm
- 年月日时分：YYYY-MM-DD-HH-mm
不设置年时，默认使用当前年，该取值表示选择器弹窗界面的默认选择值。 | | value | string | - | 是 | 设置日期时间选择器的值。 | -| hours | number | 241-4
-5+ | 否 | 设置日期时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
  > 默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+ | +| hours | number | 241-4
-5+ | 否 | 设置日期时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。 | | lunar5+ | boolean | false | 否 | 设置日期时间选择器弹窗界面是否为农历展示。 | -| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 | +| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。
当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 | ### 多列文本选择器 @@ -82,7 +82,7 @@ | 名称 | 类型 | 默认值 | 必填 | 描述 | | -------- | ------- | --------- | ---- | ---------------------------------------- | | columns | number | - | 是 | 设置多列文本选择器的列数。 | -| range | 二维Array | - | 否 | 设置多列文本选择器的选择项，其中range 为二维数组。长度表示多少列，数组的每项表示每列的数据，如  [["a","b"], ["c","d"]]。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：[["a","b"], ["c","d"]]。 | +| range | 二维Array | - | 否 | 设置多列文本选择器的选择项，其中range 为二维数组。长度表示多少列，数组的每项表示每列的数据，如  [["a","b"], ["c","d"]]。
使用时需要使用数据绑定的方式`range ={{data}}`，js中声明相应变量`data：["15","20","25"]`。 | | selected | Array | [0,0,0,…] | 否 | 设置多列文本选择器弹窗的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗界面的默认选择值。 | | value | Array | - | 否 | 设置多列文本选择器的值，每一列被选中项对应的值构成的数组。 | @@ -95,7 +95,7 @@ | -------------------------- | -------------------------- | ---------- | ---- | ---------------------------------------- | | text-color | <color> | - | 否 | 选择器的文本颜色。 | | font-size | <length> | - | 否 | 选择器的文本尺寸。 | -| allow-scale | boolean | true | 否 | 选择器的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | +| allow-scale | boolean | true | 否 | 选择器的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | | letter-spacing | <length> | 0 | 否 | 选择器的字符间距。见[text组件的letter-spacing样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | text-decoration | string | - | 否 | 选择器的文本修饰。见[text组件的text-decoration样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-style | string | normal | 否 | 选择器的字体样式。见[text组件的font-style样式属性](../arkui-js/js-components-basic-text.md#样式)。 | @@ -122,7 +122,7 @@ | 名称 | 参数 | 描述 | | ------ | ---------------------------------------- | ---------------------------------------- | -| change | { year: year, month: month, day: day } | 日期选择器选择值后点击弹窗中的确认按钮时触发该事件。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> month值范围为： 0（1月）~11（12月）。5+ | +| change | { year: year, month: month, day: day } | 日期选择器选择值后点击弹窗中的确认按钮时触发该事件。
从API Version 5开始，month值范围为： 0（1月）~11（12月）。 | | cancel | - | 用户点击弹窗中的取消按钮时触发该事件。 | @@ -162,7 +162,7 @@ ## 示例 -``` +```html
@@ -66,7 +66,7 @@
``` -``` +```css /* xxx.css */ .container { display: flex; diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md index fec6983512..1d11683a05 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md @@ -1,6 +1,6 @@ # slider -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 滑动条组件，用来快速调节设置值，如音量、亮度等。 @@ -55,7 +55,7 @@ ## 示例 -``` +```html
slider start value is {{startValue}} @@ -65,7 +65,7 @@
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -75,7 +75,7 @@ } ``` -``` +```js // xxx.js export default { data: { diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md index 1c8e3af694..571a6dd406 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md @@ -1,7 +1,7 @@ # span -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 作为<[text](../arkui-js/js-components-basic-text.md)>子组件提供文本修饰能力。 @@ -19,23 +19,23 @@ 支持[通用属性](../arkui-js/js-components-common-attributes.md)。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 不支持focusable和disabled属性。 +> **说明：** +> 不支持focusable和disabled属性。 ## 样式 仅支持如下样式： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| color | <color> | - | 否 | 设置文本段落的文本颜色。 | -| font-size | <length> | 30px | 否 | 设置文本段落的文本尺寸。 | -| allow-scale | boolean | true | 否 | 设置文本段落的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | -| font-style | string | normal | 否 | 设置文本段落的字体样式，见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | -| font-weight | number \| string | normal | 否 | 设置文本段落的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | -| text-decoration | string | none | 否 | 设置文本段落的文本修饰，见[text组件text-decoration样式属性](../arkui-js/js-components-basic-text.md#样式)。 | -| font-family | string | sans-serif | 否 | 设置文本段落的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| --------------- | -------------------------- | ---------- | ---- | ---------------------------------------- | +| color | <color> | - | 否 | 设置文本段落的文本颜色。 | +| font-size | <length> | 30px | 否 | 设置文本段落的文本尺寸。 | +| allow-scale | boolean | true | 否 | 设置文本段落的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | +| font-style | string | normal | 否 | 设置文本段落的字体样式，见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-weight | number \| string | normal | 否 | 设置文本段落的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| text-decoration | string | none | 否 | 设置文本段落的文本修饰，见[text组件text-decoration样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family | string | sans-serif | 否 | 设置文本段落的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | ## 事件 @@ -50,7 +50,7 @@ ## 示例 -``` +```html
@@ -59,7 +59,7 @@
``` -``` +```css /* xxx.css */ .container { display: flex; diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md index 9d8e6bfc80..78c8da0a3d 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md @@ -1,7 +1,7 @@ # switch -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 开关选择器，通过开关，开启或关闭某个功能。 @@ -19,12 +19,12 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| checked | boolean | false | 否 | 是否选中。 | -| showtext | boolean | false | 否 | 是否显示文本。 | -| texton | string | "On" | 否 | 选中时显示的文本。 | -| textoff | string | "Off" | 否 | 未选中时显示的文本。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------- | ------- | ----- | ---- | ---------- | +| checked | boolean | false | 否 | 是否选中。 | +| showtext | boolean | false | 否 | 是否显示文本。 | +| texton | string | "On" | 否 | 选中时显示的文本。 | +| textoff | string | "Off" | 否 | 未选中时显示的文本。 | ## 样式 @@ -33,24 +33,24 @@ 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| texton-color(Rich) | <color> | \#000000 | 否 | 选中时显示的文本颜色。 | -| textoff-color(Rich) | <color> | \#000000 | 否 | 未选中时显示的文本颜色。 | -| text-padding(Rich) | number | 0px | 否 | texton/textoff中最长文本两侧距离滑块边界的距离。 | -| font-size(Rich) | <length> | - | 否 | 文本尺寸，仅设置texton和textoff生效。 | -| allow-scale(Rich) | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | -| font-style(Rich) | string | normal | 否 | 字体样式，仅设置texton和textoff生效。见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | -| font-weight(Rich) | number \| string | normal | 否 | 字体粗细，仅设置texton和textoff生效。见[text组件的font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | -| font-family(Rich) | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。仅设置texton和textoff生效。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------------------- | -------------------------- | ---------- | ---- | ---------------------------------------- | +| texton-color(Rich) | <color> | \#000000 | 否 | 选中时显示的文本颜色。 | +| textoff-color(Rich) | <color> | \#000000 | 否 | 未选中时显示的文本颜色。 | +| text-padding(Rich) | number | 0px | 否 | texton/textoff中最长文本两侧距离滑块边界的距离。 | +| font-size(Rich) | <length> | - | 否 | 文本尺寸，仅设置texton和textoff生效。 | +| allow-scale(Rich) | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | +| font-style(Rich) | string | normal | 否 | 字体样式，仅设置texton和textoff生效。见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-weight(Rich) | number \| string | normal | 否 | 字体粗细，仅设置texton和textoff生效。见[text组件的font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family(Rich) | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。仅设置texton和textoff生效。 | ## 事件 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | +| 名称 | 参数 | 描述 | +| ------ | ---------------------------------------- | ------------- | | change | { checked: checkedValue } | 选中状态改变时触发该事件。 | ## 方法 @@ -59,7 +59,7 @@ ## 示例 -``` +```html
@@ -67,7 +67,7 @@
``` -``` +```css /* xxx.css */ .container { display: flex; @@ -81,7 +81,7 @@ switch{ } ``` -``` +```js // xxx.js import prompt from '@system.prompt'; export default { diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md index c25ba62851..05c8ba3c3e 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md @@ -1,10 +1,10 @@ # text -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > -> - 该组件从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> - 该组件从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > -> - 文本的展示内容需要写在元素标签内。 +> - 文本的展示内容需要写在元素标签内。 文本，用于呈现一段信息。 @@ -27,43 +27,43 @@ 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| color | <color> | #e5000000 | 否 | 设置文本的颜色。 | -| font-size | <length> | 30px | 否 | 设置文本的尺寸。 | -| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如果需要支持动态生效，请参看config描述文件中config-changes标签。 | -| letter-spacing | <length> | 0px | 否 | 设置文本的字符间距。 | -| word-spacing7+ | <length> \| <percentage> \| string | normal | 否 | 设置文本之间的间距，string可选值为：
normal：默认的字间距。 | -| font-style | string | normal | 否 | 设置文本的字体样式，可选值为：
- normal：标准的字体样式；
- italic：斜体的字体样式。 | -| font-weight | number \| string | normal | 否 | 设置文本的字体粗细，number类型取值[100, 900]，默认为400，取值越大，字体越粗。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> number取值必须为100的整数倍。
string类型取值支持如下四个值：lighter、normal、bold、bolder。 | -| text-decoration | string | none | 否 | 设置文本的文本修饰，可选值为：
- underline：文字下划线修饰；
- line-through：穿过文本的修饰线n
- none：标准文本。 | -| text-decoration-color7+ | <color> | - | 否 | 设置文本修饰线的颜色。 | -| text-align | string | start
| 否 | 设置文本的文本对齐方式，可选值为：
- left：文本左对齐；
- center：文本居中对齐；
- right：文本右对齐；
- start：根据文字书写相同的方向对齐；
- end：根据文字书写相反的方向对齐。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。 | -| line-height | <length> \| <percentage>7+ \| string7+ | 0px1-6
normal7+ | 否 | 设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。string可选值为：
normal7+：默认的行高。 | -| text-overflow | string | clip | 否 | 在设置了最大行数的情况下生效，可选值为：
- clip：将文本根据父容器大小进行裁剪显示；
- ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。 | -| font-family | string | sans-serif | 否 | 设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | -| max-lines | number \| string7+ | - | 否 | 设置文本的最大行数，string类型可选值为：
- auto7+：文本行数自适应容器高度。 | -| min-font-size | <length> | - | 否 | 文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 | -| max-font-size | <length> | - | 否 | 文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 | -| font-size-step | <length> | 1px | 否 | 文本动态调整字号时的步长，需要设置最小，最大字号样式生效。 | -| prefer-font-sizes | <array> | - | 否 | 预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。
如：prefer-font-sizes: 12px,14px,16px | -| word-break6+ | string | normal | 否 | 设置文本折行模式，可选值为：
- normal：默认换行规则，依据各自语言的规则，允许在字间发生换行。
- break-all：对于非中文/日文/韩文的文本，可在任意字符间断行。
- break-word：与break-all相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。 | -| text-indent7+ | <length> | - | 否 | 设置首行缩进量。 | -| white-space7+ | string | pre | 否 | 设置处理元素中空白的模式，可选值为：
- normal：所有空格、回车、制表符都合并成一个空格，文本自动换行；
- nowrap：所有空格、回车、制表符都合并成一个空格，文本不换行；
- pre：所有东西原样输出；
- pre-wrap：所有东西原样输出，文本换行；
- pre-line：所有空格、制表符合并成一个空格，回车不变，文本换行。 | -| adapt-height7+ | boolean | false | 否 | 文本大小是否自适应容器高度。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 设置字体大小自适应相关样式后生效。 | - -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> - 字体动态缩放：预设尺寸集合和最小最大字号调节基于是否满足最大行数要求，预设尺寸集合会按照从左到右顺序查看是否满足最大行数要求，最小最大字号调节则基于从大到小顺序查看是否满足最大行数要求。 -> -> - 文本换行：文本可以通过转义字符\r\n进行换行。 -> -> - 文本标签内支持以下转义字符：\a，\b，\f，\n，\r，\t，\v，\'，\"，\0。 -> -> - 当使用子组件span组成文本段落时，如果span属性样式异常，将导致text段落无法显示。 -> -> - letter-spacing、text-align、line-height、text-overflow和max-lines样式作用于text及其子组件（span）组成的文本内容。 -> -> - text组件说明：不支持text内同时存在文本内容和span子组件。（如果同时存在，只显示span内的内容) +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ---------------------------------- | ---------------------------------------- | ---------------------------------------- | ---- | ---------------------------------------- | +| color | <color> | #e5000000 | 否 | 设置文本的颜色。 | +| font-size | <length> | 30px | 否 | 设置文本的尺寸。 | +| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
如果需要支持动态生效，请参看config描述文件中config-changes标签。 | +| letter-spacing | <length> | 0px | 否 | 设置文本的字符间距。 | +| word-spacing7+ | <length> \| <percentage> \| string | normal | 否 | 设置文本之间的间距，string可选值为：
normal：默认的字间距。 | +| font-style | string | normal | 否 | 设置文本的字体样式，可选值为：
- normal：标准的字体样式；
- italic：斜体的字体样式。 | +| font-weight | number \| string | normal | 否 | 设置文本的字体粗细，number类型取值[100, 900]，默认为400，取值越大，字体越粗。number取值必须为100的整数倍。
string类型取值支持如下四个值：lighter、normal、bold、bolder。 | +| text-decoration | string | none | 否 | 设置文本的文本修饰，可选值为：
- underline：文字下划线修饰；
- line-through：穿过文本的修饰线n
- none：标准文本。 | +| text-decoration-color7+ | <color> | - | 否 | 设置文本修饰线的颜色。 | +| text-align | string | start
| 否 | 设置文本的文本对齐方式，可选值为：
- left：文本左对齐；
- center：文本居中对齐；
- right：文本右对齐；
- start：根据文字书写相同的方向对齐；
- end：根据文字书写相反的方向对齐。
如果文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。 | +| line-height | <length> \| <percentage>7+ \| string7+ | 0px1-6
normal7+ | 否 | 设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。string可选值为：
normal7+：默认的行高。 | +| text-overflow | string | clip | 否 | 在设置了最大行数的情况下生效，可选值为：
- clip：将文本根据父容器大小进行裁剪显示；
- ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。 | +| font-family | string | sans-serif | 否 | 设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | +| max-lines | number \| string7+ | - | 否 | 设置文本的最大行数，string类型可选值为：
- auto7+：文本行数自适应容器高度。 | +| min-font-size | <length> | - | 否 | 文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 | +| max-font-size | <length> | - | 否 | 文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 | +| font-size-step | <length> | 1px | 否 | 文本动态调整字号时的步长，需要设置最小，最大字号样式生效。 | +| prefer-font-sizes | <array> | - | 否 | 预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。
如：prefer-font-sizes: 12px,14px,16px | +| word-break6+ | string | normal | 否 | 设置文本折行模式，可选值为：
- normal：默认换行规则，依据各自语言的规则，允许在字间发生换行。
- break-all：对于非中文/日文/韩文的文本，可在任意字符间断行。
- break-word：与break-all相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。 | +| text-indent7+ | <length> | - | 否 | 设置首行缩进量。 | +| white-space7+ | string | pre | 否 | 设置处理元素中空白的模式，可选值为：
- normal：所有空格、回车、制表符都合并成一个空格，文本自动换行；
- nowrap：所有空格、回车、制表符都合并成一个空格，文本不换行；
- pre：所有东西原样输出；
- pre-wrap：所有东西原样输出，文本换行；
- pre-line：所有空格、制表符合并成一个空格，回车不变，文本换行。 | +| adapt-height7+ | boolean | false | 否 | 文本大小是否自适应容器高度。
设置字体大小自适应相关样式后生效。 | + +> **说明：** +> - 字体动态缩放：预设尺寸集合和最小最大字号调节基于是否满足最大行数要求，预设尺寸集合会按照从左到右顺序查看是否满足最大行数要求，最小最大字号调节则基于从大到小顺序查看是否满足最大行数要求。 +> +> - 文本换行：文本可以通过转义字符\r\n进行换行。 +> +> - 文本标签内支持以下转义字符：\a，\b，\f，\n，\r，\t，\v，\'，\"，\0。 +> +> - 当使用子组件span组成文本段落时，如果span属性样式异常，将导致text段落无法显示。 +> +> - letter-spacing、text-align、line-height、text-overflow和max-lines样式作用于text及其子组件（span）组成的文本内容。 +> +> - text组件说明：不支持text内同时存在文本内容和span子组件。（如果同时存在，只显示span内的内容) ## 事件 @@ -77,7 +77,7 @@ ## 示例 -``` +```html
@@ -88,7 +88,7 @@
``` -``` +```css /* xxx.css */ .container { display: flex; @@ -108,7 +108,7 @@ } ``` -``` +```js // xxx.js export default { data: { @@ -119,7 +119,7 @@ export default { ![zh-cn_image_0000001167823076](figures/zh-cn_image_0000001167823076.png) -``` +```html
@@ -131,7 +131,7 @@ export default {
``` -``` +```css /* xxx.css */ .container { flex-direction: column; diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-textarea.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-textarea.md index 37c5ca2da8..45956db17b 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-textarea.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-textarea.md @@ -1,7 +1,7 @@ # textarea -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 多行文本输入的文本框。 @@ -20,25 +20,25 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| placeholder | string | - | 否 | 多行文本框的提示文本内容。 | -| maxlength | number | - | 否 | 多行文本框可输入的最多字符数量。 | -| headericon | string | - | 否 | 在文本输入前的图标展示，该图标不支持点击事件，图标格式为jpg，png和svg。 | -| extend | boolean | false | 否 | 文本框是否支持可扩展，设置可扩展属性后文本框高度可以跟随文字自适应。 | -| value5+ | string | - | 否 | 多行文本框的内容。 | -| showcounter5+ | boolean | false | 否 | 文本框是否需要开启计数下标功能，需要配合maxlength一起使用。 | -| menuoptions5+ | Array<MenuOption> | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 | -| autofocus6+ | boolean | false | 否 | 是否自动获焦。 | -| selectedstart6+ | number | -1 | 否 | 开始选择文本时初始选择位置。 | -| selectedend6+ | number | -1 | 否 | 开始选择文本时结尾选择位置。 | -| softkeyboardenabled6+ | boolean | true | 否 | 编辑时是否弹出系统软键盘。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------------------------------- | ----------------------- | ----- | ---- | ---------------------------------------- | +| placeholder | string | - | 否 | 多行文本框的提示文本内容。 | +| maxlength | number | - | 否 | 多行文本框可输入的最多字符数量。 | +| headericon | string | - | 否 | 在文本输入前的图标展示，该图标不支持点击事件，图标格式为jpg，png和svg。 | +| extend | boolean | false | 否 | 文本框是否支持可扩展，设置可扩展属性后文本框高度可以跟随文字自适应。 | +| value5+ | string | - | 否 | 多行文本框的内容。 | +| showcounter5+ | boolean | false | 否 | 文本框是否需要开启计数下标功能，需要配合maxlength一起使用。 | +| menuoptions5+ | Array<MenuOption> | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 | +| autofocus6+ | boolean | false | 否 | 是否自动获焦。 | +| selectedstart6+ | number | -1 | 否 | 开始选择文本时初始选择位置。 | +| selectedend6+ | number | -1 | 否 | 开始选择文本时结尾选择位置。 | +| softkeyboardenabled6+ | boolean | true | 否 | 编辑时是否弹出系统软键盘。 | **表1** MenuOption5+ -| 名称 | 类型 | 描述 | -| -------- | -------- | -------- | -| icon | string | 菜单选项中的图标路径。 | +| 名称 | 类型 | 描述 | +| ------- | ------ | ----------- | +| icon | string | 菜单选项中的图标路径。 | | content | string | 菜单选项中的文本内容。 | @@ -46,29 +46,29 @@ 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| color | <color> | \#e6000000 | 否 | 多行文本框的文本颜色。 | -| font-size | <length> | 16px | 否 | 多行文本框的文本尺寸。 | -| allow-scale | boolean | true | 否 | 多行文本框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | -| placeholder-color | <color> | \#99000000 | 否 | 多行文本框的提示文本颜色，type为text\|email\|date\|time\|number\|password时生效。 | -| font-weight | number \| string | normal | 否 | 多行文本框的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | -| font-family | string | sans-serif | 否 | 多行文本框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | -| caret-color6+ | <color> | - | 否 | 设置输入光标的颜色。 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------------------------ | -------------------------- | ---------- | ---- | ---------------------------------------- | +| color | <color> | \#e6000000 | 否 | 多行文本框的文本颜色。 | +| font-size | <length> | 16px | 否 | 多行文本框的文本尺寸。 | +| allow-scale | boolean | true | 否 | 多行文本框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | +| placeholder-color | <color> | \#99000000 | 否 | 多行文本框的提示文本颜色，type为text\|email\|date\|time\|number\|password时生效。 | +| font-weight | number \| string | normal | 否 | 多行文本框的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | +| font-family | string | sans-serif | 否 | 多行文本框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | +| caret-color6+ | <color> | - | 否 | 设置输入光标的颜色。 | ## 事件 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | -| change | { text: newText, lines: textLines, height: textHeight } | 输入内容发生变化时触发该事件，通过参数获取输入内容、行数和行高。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 改变value属性值不会触发该回调。5+ | -| translate5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 | -| share5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 | -| search5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 | +| 名称 | 参数 | 描述 | +| ------------------------- | ---------------------------------------- | ---------------------------------------- | +| change | { text: newText, lines: textLines, height: textHeight } | 输入内容发生变化时触发该事件，通过参数获取输入内容、行数和行高。
从API Version 5开始，改变value属性值不会触发该回调。 | +| translate5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 | +| share5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 | +| search5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 | | optionselect5+ | { index:optionIndex, value: selectedText } | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 | -| selectchange6+ | { start: number，end: number } | 文本选择变化时触发事件。 | +| selectchange6+ | { start: number，end: number } | 文本选择变化时触发事件。 | ## 方法 @@ -78,7 +78,7 @@ ## 示例 -``` +```html