提交 c5355753 编写于 作者: H HelloCrease

update docs

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 7563a68f
......@@ -47,25 +47,25 @@
## 属性
| 名称 | 类型 | 默认值 | 描述 |
| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;CanvasPattern | - | 指定绘制的填充色。<br/>-&nbsp;类型为&lt;color&gt;时,表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时,表示渐变对象,使用&nbsp;createLinearGradient()方法创建。<br/>-&nbsp;类型为CanvasPattern时,使用&nbsp;createPattern()方法创建。 |
| [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 |
| [strokeStyle](#strokestyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;CanvasPattern | - | 设置描边的颜色。<br/>-&nbsp;类型为&lt;color&gt;时,表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时,表示渐变对象,使用&nbsp;createLinearGradient()方法创建。<br/>-&nbsp;类型为CanvasPattern时,使用&nbsp;createPattern()方法创建。 |
| [lineCap](#linecap) | string | butt | 指定线端点的样式,可选值为:<br/>-&nbsp;butt:线端点以方形结束。<br/>-&nbsp;round:线端点以圆形结束。<br/>-&nbsp;square:线端点以方形结束,该样式下会增加一个长度和线段厚度相同,宽度是线段厚度一半的矩形。 |
| [lineJoin](#linejoin) | string | miter | 指定线段间相交的交点样式,可选值为:<br/>-&nbsp;round:在线段相连处绘制一个扇形,扇形的圆角半径是线段的宽度。<br/>-&nbsp;bevel:在线段相连处使用三角形为底填充,&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;miter:在相连部分的外边缘处进行延伸,使其相交于一点,形成一个菱形区域,该属性可以通过设置miterLimit属性展现效果。 |
| [miterLimit](#miterlimit) | number | 10 | 设置斜接面限制值,该值指定了线条相交处内角和外角的距离。 |
| [font](#font) | string | "normal&nbsp;normal&nbsp;14px&nbsp;sans-serif" | 设置文本绘制中的字体样式。<br/>语法:ctx.font="font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family"<sup>5+</sup><br/>-&nbsp;font-style(可选),用于指定字体样式,支持如下几种样式:normal,&nbsp;italic。<br/>-&nbsp;font-weight(可选),用于指定字体的粗细,支持如下几种类型:normal,&nbsp;bold,&nbsp;bolder,&nbsp;lighter,&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选),指定字号和行高,单位只支持px。<br/>-&nbsp;font-family(可选),指定字体系列,支持如下几种类型:sans-serif,&nbsp;serif,&nbsp;monospace。 |
| [textAlign](#textalign) | string | left | 设置文本绘制中的文本对齐方式,可选值为:<br/>-&nbsp;left:文本左对齐。<br/>-&nbsp;right:文本右对齐。<br/>-&nbsp;center:文本居中对齐。<br/>-&nbsp;start:文本对齐界线开始的地方。<br/>-&nbsp;end:文本对齐界线结束的地方。<br/>ltr布局模式下start和left一致,rtl布局模式下start和right一致·。 |
| [textBaseline](#textbaseline) | string | alphabetic | 设置文本绘制中的水平对齐方式,可选值为:<br/>-&nbsp;alphabetic:文本基线是标准的字母基线。<br/>-&nbsp;top:文本基线在文本块的顶部。<br/>-&nbsp;hanging:文本基线是悬挂基线。<br/>-&nbsp;middle:文本基线在文本块的中间。<br/>-&nbsp;ideographic:文字基线是表意字基线;如果字符本身超出了alphabetic&nbsp;基线,那么ideographic基线位置在字符本身的底部。<br/>-&nbsp;bottom:文本基线在文本块的底部。&nbsp;&nbsp;ideographic&nbsp;基线的区别在于&nbsp;ideographic&nbsp;基线不需要考虑下行字母。 |
| [globalAlpha](#globalalpha) | number | - | 设置透明度,0.0为完全透明,1.0为完全不透明。 |
| [lineDashOffset](#linedashoffset) | number | 0.0 | 设置画布的虚线偏移量,精度为float。 |
| [globalCompositeOperation](#globalcompositeoperation) | string | source-over | 设置合成操作的方式。类型字段可选值有source-over,source-atop,source-in,source-out,destination-over,destination-atop,destination-in,destination-out,lighter,copy,xor。具体请参考[表 类型字段说明](#globalcompositeoperation) |
| [shadowBlur](#shadowblur) | number | 0.0 | 设置绘制阴影时的模糊级别,值越大越模糊,精度为float。 |
| [shadowColor](#shadowcolor) | &lt;color&gt; | - | 设置绘制阴影时的阴影颜色。 |
| [shadowOffsetX](#shadowoffsetx) | number | - | 设置绘制阴影时和原有对象的水平偏移值。 |
| [shadowOffsetY](#shadowoffsety) | number | - | 设置绘制阴影时和原有对象的垂直偏移值。 |
| [imageSmoothingEnabled](#imagesmoothingenabled6)<sup>6+</sup> | boolean | true | 用于设置绘制图片时是否进行图像平滑度调整,true为启用,false为不启用。 |
| 名称 | 类型 | 描述 |
| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;CanvasPattern | 指定绘制的填充色。<br/>-&nbsp;类型为&lt;color&gt;时,表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时,表示渐变对象,使用&nbsp;createLinearGradient()方法创建。<br/>-&nbsp;类型为CanvasPattern时,使用&nbsp;createPattern()方法创建。 |
| [lineWidth](#linewidth) | number | 设置绘制线条的宽度。 |
| [strokeStyle](#strokestyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;CanvasPattern | 设置描边的颜色。<br/>-&nbsp;类型为&lt;color&gt;时,表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时,表示渐变对象,使用&nbsp;createLinearGradient()方法创建。<br/>-&nbsp;类型为CanvasPattern时,使用&nbsp;createPattern()方法创建。 |
| [lineCap](#linecap) | string | 指定线端点的样式,可选值为:<br/>-&nbsp;butt:线端点以方形结束。<br/>-&nbsp;round:线端点以圆形结束。<br/>-&nbsp;square:线端点以方形结束,该样式下会增加一个长度和线段厚度相同,宽度是线段厚度一半的矩形。<br>默认值:butt |
| [lineJoin](#linejoin) | string | 指定线段间相交的交点样式,可选值为:<br/>-&nbsp;round:在线段相连处绘制一个扇形,扇形的圆角半径是线段的宽度。<br/>-&nbsp;bevel:在线段相连处使用三角形为底填充,&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;miter:在相连部分的外边缘处进行延伸,使其相交于一点,形成一个菱形区域,该属性可以通过设置miterLimit属性展现效果。<br>默认值:miter |
| [miterLimit](#miterlimit) | number | 设置斜接面限制值,该值指定了线条相交处内角和外角的距离。<br>默认值:10 |
| [font](#font) | string | 设置文本绘制中的字体样式。<br/>语法:ctx.font="font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family"<sup>5+</sup><br/>-&nbsp;font-style(可选),用于指定字体样式,支持如下几种样式:normal,&nbsp;italic。<br/>-&nbsp;font-weight(可选),用于指定字体的粗细,支持如下几种类型:normal,&nbsp;bold,&nbsp;bolder,&nbsp;lighter,&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选),指定字号和行高,单位只支持px。<br/>-&nbsp;font-family(可选),指定字体系列,支持如下几种类型:sans-serif,&nbsp;serif,&nbsp;monospace。<br>默认值:"normal&nbsp;normal&nbsp;14px&nbsp;sans-serif" |
| [textAlign](#textalign) | string | 设置文本绘制中的文本对齐方式,可选值为:<br/>-&nbsp;left:文本左对齐。<br/>-&nbsp;right:文本右对齐。<br/>-&nbsp;center:文本居中对齐。<br/>-&nbsp;start:文本对齐界线开始的地方。<br/>-&nbsp;end:文本对齐界线结束的地方。<br/>ltr布局模式下start和left一致,rtl布局模式下start和right一致。<br>默认值:left |
| [textBaseline](#textbaseline) | string | 设置文本绘制中的水平对齐方式,可选值为:<br/>-&nbsp;alphabetic:文本基线是标准的字母基线。<br/>-&nbsp;top:文本基线在文本块的顶部。<br/>-&nbsp;hanging:文本基线是悬挂基线。<br/>-&nbsp;middle:文本基线在文本块的中间。<br/>-&nbsp;ideographic:文字基线是表意字基线;如果字符本身超出了alphabetic&nbsp;基线,那么ideographic基线位置在字符本身的底部。<br/>-&nbsp;bottom:文本基线在文本块的底部。&nbsp;&nbsp;ideographic&nbsp;基线的区别在于&nbsp;ideographic&nbsp;基线不需要考虑下行字母。<br>默认值: alphabetic |
| [globalAlpha](#globalalpha) | number | 设置透明度,0.0为完全透明,1.0为完全不透明。 |
| [lineDashOffset](#linedashoffset) | number | 设置画布的虚线偏移量,精度为float。<br>默认值:0.0 |
| [globalCompositeOperation](#globalcompositeoperation) | string | 设置合成操作的方式。类型字段可选值有source-over,source-atop,source-in,source-out,destination-over,destination-atop,destination-in,destination-out,lighter,copy,xor。具体请参考[表 类型字段说明](#globalcompositeoperation)<br>默认值:ource-over |
| [shadowBlur](#shadowblur) | number | 设置绘制阴影时的模糊级别,值越大越模糊,精度为float。<br>默认值:0.0 |
| [shadowColor](#shadowcolor) | &lt;color&gt; | 设置绘制阴影时的阴影颜色。 |
| [shadowOffsetX](#shadowoffsetx) | number | 设置绘制阴影时和原有对象的水平偏移值。 |
| [shadowOffsetY](#shadowoffsety) | number | 设置绘制阴影时和原有对象的垂直偏移值。 |
| [imageSmoothingEnabled](#imagesmoothingenabled6)<sup>6+</sup> | boolean | 用于设置绘制图片时是否进行图像平滑度调整,true为启用,false为不启用。<br>默认值:true |
### fillStyle
......
......@@ -7,20 +7,20 @@
组件支持动态的旋转、平移、缩放效果,可在style或css中设置。
| 名称 | 类型 | 默认值 | 描述 |
| --------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| transform-origin | string<sup>6+</sup>&nbsp;\|&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;&lt;length&gt;&nbsp;string<sup>6+</sup>&nbsp;\|&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;&lt;length&gt; | center&nbsp;center | 变换对象的原点位置,支持px和百分比(相对于动画目标组件),如果仅设置一个值,另一个值为50%,第一个string的可选值为:left&nbsp;\|&nbsp;center&nbsp;\|&nbsp;right&nbsp;,第二个string的可选值为:top&nbsp;\|&nbsp;center&nbsp;\|&nbsp;bottom。<br/>示例:<br/>transform-origin:&nbsp;200px&nbsp;30%。<br/>transform-origin:&nbsp;100px&nbsp;top。<br/>transform-origin:&nbsp;center&nbsp;center。 |
| transform | string | - | 支持同时设置平移/旋转/缩放的属性。<br/>详见表 transform操作说明。 |
| animation<sup>6+</sup> | string | 0s&nbsp;ease&nbsp;0s&nbsp;1&nbsp;normal&nbsp;none&nbsp;running&nbsp;none | 格式:duration&nbsp;\|&nbsp;timing-function&nbsp;\|&nbsp;delay&nbsp;\|&nbsp;iteration-count&nbsp;\|&nbsp;direction&nbsp;\|&nbsp;fill-mode&nbsp;\|&nbsp;play-state&nbsp;\|&nbsp;name,每个字段不区分先后,但是&nbsp;duration&nbsp;/&nbsp;delay&nbsp;按照出现的先后顺序解析。 |
| animation-name | string | - | 指定\@keyframes,详见表 @keyframes属性说明。 |
| animation-delay | &lt;time&gt; | 0 | 定义动画播放的延迟时间。支持的单位为[s(秒)\|ms(毫秒)&nbsp;],默认单位为ms,格式为:1000ms或1s。 |
| animation-duration | &lt;time&gt; | 0 | 定义一个动画周期。支持的单位为[s(秒)\|ms(毫秒)&nbsp;],默认单位为ms,格式为:1000ms或1s。<br/>必须设置animation-duration&nbsp;样式,否则时长为&nbsp;0将不会播放动画。 |
| animation-iteration-count | number&nbsp;\|&nbsp;infinite | 1 | 定义动画播放的次数,默认播放一次,可通过设置为infinite无限次播放。 |
| animation-timing-function | string | ease<br/> | 描述动画执行的速度曲线,用于使动画更为平滑。<br/>可选项有:<br/>-&nbsp;linear:表示动画从头到尾的速度都是相同的。<br/>-&nbsp;ease:表示动画以低速开始,然后加快,在结束前变慢,cubic-bezier(0.25,&nbsp;0.1,&nbsp;0.25,&nbsp;1.0)。<br/>-&nbsp;ease-in:表示动画以低速开始,cubic-bezier(0.42,&nbsp;0.0,&nbsp;1.0,&nbsp;1.0)。<br/>-&nbsp;ease-out:表示动画以低速结束,cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。<br/>-&nbsp;ease-in-out:表示动画以低速开始和结束,cubic-bezier(0.42,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。<br/>-&nbsp;friction:阻尼曲线,cubic-bezier(0.2,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。<br/>-&nbsp;extreme-deceleration:急缓曲线,cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.0,&nbsp;1.0)。<br/>-&nbsp;sharp:锐利曲线,cubic-bezier(0.33,&nbsp;0.0,&nbsp;0.67,&nbsp;1.0)。<br/>-&nbsp;rhythm:节奏曲线,cubic-bezier(0.7,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。<br/>-&nbsp;smooth:平滑曲线,cubic-bezier(0.4,&nbsp;0.0,&nbsp;0.4,&nbsp;1.0)。<br/>-&nbsp;cubic-bezier:在三次贝塞尔函数中定义动画变化过程,入参的x和y值必须处于0-1之间。<br/>-&nbsp;steps:&nbsp;阶梯曲线<sup>6+</sup>。语法:steps(number[,&nbsp;end\|start]);number必须设置,支持的类型为正整数。第二个参数可选,表示在每个间隔的起点或是终点发生阶跃变化,支持设置end或start,默认值为end。 |
| animation-direction<sup>6+</sup> | string | normal | 指定动画的播放模式:<br/>-&nbsp;normal:&nbsp;动画正向循环播放。<br/>-&nbsp;reverse:&nbsp;动画反向循环播放。<br/>-&nbsp;alternate:动画交替循环播放,奇数次正向播放,偶数次反向播放。<br/>-&nbsp;alternate-reverse:动画反向交替循环播放,奇数次反向播放,偶数次正向播放。 |
| animation-fill-mode | string | none | 指定动画开始和结束的状态:<br/>-&nbsp;none:在动画执行之前和之后都不会应用任何样式到目标上。<br/>-&nbsp;forwards:在动画结束后,目标将保留动画结束时的状态(在最后一个关键帧中定义)。<br/>-&nbsp;backwards<sup>6+</sup>:动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值,当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。<br/>-&nbsp;both<sup>6+</sup>:动画将遵循forwards和backwards的规则,从而在两个方向上扩展动画属性。 |
| animation-play-state<sup>6+</sup> | string | running | 指定动画的当前状态:<br/>-&nbsp;paused:动画状态为暂停。<br/>-&nbsp;running:动画状态为播放。 |
| transition<sup>6+</sup> | string | all&nbsp;0&nbsp;ease&nbsp;0 | 指定组件状态切换时的过渡效果,可以通过transition属性设置如下四个属性:<br/>-&nbsp;transition-property:规定设置过渡效果的&nbsp;CSS&nbsp;属性的名称,目前支持宽、高、背景色。<br/>-&nbsp;transition-duration:规定完成过渡效果需要的时间,单位秒。<br/>-&nbsp;transition-timing-function:规定过渡效果的时间曲线,支持样式动画提供的曲线。<br/>-&nbsp;transition-delay:规定过渡效果延时启动时间,单位秒。 |
| 名称 | 类型 | 描述 |
| --------------------------------- | ---------------------------------------- | ---------------------------------------- |
| transform-origin | string<sup>6+</sup>&nbsp;\|<br>&nbsp;&lt;percentage&gt;&nbsp;\|<br>&nbsp;&lt;length&gt;&nbsp;string<sup>6+</sup>&nbsp;\|<br>&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;&lt;length&gt; | 变换对象的原点位置,支持px和百分比(相对于动画目标组件),如果仅设置一个值,另一个值为50%,第一个string的可选值为:left&nbsp;\|&nbsp;center&nbsp;\|&nbsp;right&nbsp;,第二个string的可选值为:top&nbsp;\|&nbsp;center&nbsp;\|&nbsp;bottom。<br/>示例:<br/>transform-origin:&nbsp;200px&nbsp;30%。<br/>transform-origin:&nbsp;100px&nbsp;top。<br/>transform-origin:&nbsp;center&nbsp;center。<br>默认值:center&nbsp;center |
| transform | string | 支持同时设置平移/旋转/缩放的属性。<br/>详见表 transform操作说明。 |
| animation<sup>6+</sup> | string | 格式:duration&nbsp;\|&nbsp;timing-function&nbsp;\|&nbsp;delay&nbsp;\|&nbsp;iteration-count&nbsp;\|&nbsp;direction&nbsp;\|&nbsp;fill-mode&nbsp;\|&nbsp;play-state&nbsp;\|&nbsp;name,每个字段不区分先后,但是&nbsp;duration&nbsp;/&nbsp;delay&nbsp;按照出现的先后顺序解析。<br>默认值:0s&nbsp;ease&nbsp;0s&nbsp;1&nbsp;normal&nbsp;none&nbsp;running&nbsp;none |
| animation-name | string | 指定\@keyframes,详见表 @keyframes属性说明。 |
| animation-delay | &lt;time&gt; | 定义动画播放的延迟时间。支持的单位为[s(秒)\|ms(毫秒)&nbsp;],默认单位为ms,格式为:1000ms或1s。<br>默认值:0 |
| animation-duration | &lt;time&gt; | 定义一个动画周期。支持的单位为[s(秒)\|ms(毫秒)&nbsp;],默认单位为ms,格式为:1000ms或1s。<br/>必须设置animation-duration&nbsp;样式,否则时长为&nbsp;0将不会播放动画。<br>默认值:0 |
| animation-iteration-count | number&nbsp;\|&nbsp;infinite | 定义动画播放的次数,默认播放一次,可通过设置为infinite无限次播放。<br>默认值:1 |
| animation-timing-function | string | 描述动画执行的速度曲线,用于使动画更为平滑。<br/>可选项有:<br/>-&nbsp;linear:表示动画从头到尾的速度都是相同的。<br/>-&nbsp;ease:表示动画以低速开始,然后加快,在结束前变慢,cubic-bezier(0.25,&nbsp;0.1,&nbsp;0.25,&nbsp;1.0)。<br/>-&nbsp;ease-in:表示动画以低速开始,cubic-bezier(0.42,&nbsp;0.0,&nbsp;1.0,&nbsp;1.0)。<br/>-&nbsp;ease-out:表示动画以低速结束,cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。<br/>-&nbsp;ease-in-out:表示动画以低速开始和结束,cubic-bezier(0.42,&nbsp;0.0,&nbsp;0.58,&nbsp;1.0)。<br/>-&nbsp;friction:阻尼曲线,cubic-bezier(0.2,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。<br/>-&nbsp;extreme-deceleration:急缓曲线,cubic-bezier(0.0,&nbsp;0.0,&nbsp;0.0,&nbsp;1.0)。<br/>-&nbsp;sharp:锐利曲线,cubic-bezier(0.33,&nbsp;0.0,&nbsp;0.67,&nbsp;1.0)。<br/>-&nbsp;rhythm:节奏曲线,cubic-bezier(0.7,&nbsp;0.0,&nbsp;0.2,&nbsp;1.0)。<br/>-&nbsp;smooth:平滑曲线,cubic-bezier(0.4,&nbsp;0.0,&nbsp;0.4,&nbsp;1.0)。<br/>-&nbsp;cubic-bezier:在三次贝塞尔函数中定义动画变化过程,入参的x和y值必须处于0-1之间。<br/>-&nbsp;steps:&nbsp;阶梯曲线<sup>6+</sup>。语法:steps(number[,&nbsp;end\|start]);number必须设置,支持的类型为正整数。第二个参数可选,表示在每个间隔的起点或是终点发生阶跃变化,支持设置end或start,默认值为end。<br>默认值:ease |
| animation-direction<sup>6+</sup> | string | 指定动画的播放模式:<br/>-&nbsp;normal:&nbsp;动画正向循环播放。<br/>-&nbsp;reverse:&nbsp;动画反向循环播放。<br/>-&nbsp;alternate:动画交替循环播放,奇数次正向播放,偶数次反向播放。<br/>-&nbsp;alternate-reverse:动画反向交替循环播放,奇数次反向播放,偶数次正向播放。<br>默认值:normal |
| animation-fill-mode | string | 指定动画开始和结束的状态:<br/>-&nbsp;none:在动画执行之前和之后都不会应用任何样式到目标上。<br/>-&nbsp;forwards:在动画结束后,目标将保留动画结束时的状态(在最后一个关键帧中定义)。<br/>-&nbsp;backwards<sup>6+</sup>:动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值,当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。<br/>-&nbsp;both<sup>6+</sup>:动画将遵循forwards和backwards的规则,从而在两个方向上扩展动画属性。<br>默认值:none |
| animation-play-state<sup>6+</sup> | string | 指定动画的当前状态:<br/>-&nbsp;paused:动画状态为暂停。<br/>-&nbsp;running:动画状态为播放。<br>默认值:running |
| transition<sup>6+</sup> | string | 指定组件状态切换时的过渡效果,可以通过transition属性设置如下四个属性:<br/>-&nbsp;transition-property:规定设置过渡效果的&nbsp;CSS&nbsp;属性的名称,目前支持宽、高、背景色。<br/>-&nbsp;transition-duration:规定完成过渡效果需要的时间,单位秒。<br/>-&nbsp;transition-timing-function:规定过渡效果的时间曲线,支持样式动画提供的曲线。<br/>-&nbsp;transition-delay:规定过渡效果延时启动时间,单位秒。<br>默认值:all&nbsp;0&nbsp;ease&nbsp;0 |
**表1** transform操作说明
......@@ -30,11 +30,11 @@
| none<sup>6+</sup> | - | 不进行任何转换。 |
| matrix<sup>6+</sup> | &lt;number&gt; | 入参为六个值的矩阵,6个值分别代表:scaleX,&nbsp;skewY,&nbsp;skewX,&nbsp;scaleY,&nbsp;translateX,&nbsp;translateY。 |
| matrix3d<sup>6+</sup> | &lt;number&gt; | 入参为十六个值的4X4矩阵。 |
| translate | &lt;length&gt;&nbsp;\|&nbsp;&lt;percent&gt; | 平移动画属性,支持设置x轴和y轴两个维度的平移参数。 |
| translate3d<sup>6+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percent&gt; | 三个入参,分别代表X轴、Y轴、Z轴的平移距离。 |
| translateX | &lt;length&gt;&nbsp;\|&nbsp;&lt;percent&gt; | X轴方向平移动画属性。 |
| translateY | &lt;length&gt;&nbsp;\|&nbsp;&lt;percent&gt; | Y轴方向平移动画属性。 |
| translateZ<sup>6+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percent&gt; | Z轴的平移距离。 |
| translate | &lt;length&gt;&nbsp;\|&nbsp;&lt;percent&gt; | 平移动画属性,支持设置x轴和y轴两个维度的平移参数。 |
| translate3d<sup>6+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percent&gt; | 三个入参,分别代表X轴、Y轴、Z轴的平移距离。 |
| translateX | &lt;length&gt;&nbsp;\|&nbsp;&lt;percent&gt; | X轴方向平移动画属性。 |
| translateY | &lt;length&gt;&nbsp;\|&nbsp;&lt;percent&gt; | Y轴方向平移动画属性。 |
| translateZ<sup>6+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percent&gt; | Z轴的平移距离。 |
| scale | &lt;number&gt; | 缩放动画属性,支持设置x轴和y轴两个维度的缩放参数。 |
| scale3d<sup>6+</sup> | &lt;number&gt; | 三个入参,分别代表X轴、Y轴、Z轴的缩放参数。 |
| scaleX | &lt;number&gt; | X轴方向缩放动画属性。 |
......@@ -59,7 +59,7 @@
| width | &lt;length&gt; | - | 动画执行后应用到组件上的宽度值。 |
| height | &lt;length&gt; | - | 动画执行后应用到组件上的高度值。 |
| transform | string | - | 定义应用在组件上的变换类型,见表 transform操作说明。 |
| background-position<sup>6+</sup> | string&nbsp;\|&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;&lt;length&gt;&nbsp;string&nbsp;\|&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;&lt;length&gt; | 50%&nbsp;50% | 背景图位置。单位支持百分比和px,第一个值是水平位置,第二个值是垂直位置。如果仅设置一个值,另一个值为50%。第一个string的可选值为:left&nbsp;\|&nbsp;center&nbsp;\|&nbsp;right&nbsp;,第二个string的可选值为:top&nbsp;\|&nbsp;center&nbsp;\|&nbsp;bottom。<br/>示例:<br/>-&nbsp;background-position:&nbsp;200px&nbsp;30%<br/>-&nbsp;background-position:&nbsp;100px&nbsp;top<br/>-&nbsp;background-position:&nbsp;center&nbsp;center |
| background-position<sup>6+</sup> | string&nbsp;\|&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;&lt;length&gt;&nbsp;string&nbsp;\|<br>&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;&lt;length&gt; | 50%&nbsp;50% | 背景图位置。单位支持百分比和px,第一个值是水平位置,第二个值是垂直位置。如果仅设置一个值,另一个值为50%。第一个string的可选值为:left&nbsp;\|&nbsp;center&nbsp;\|&nbsp;right&nbsp;,第二个string的可选值为:top&nbsp;\|&nbsp;center&nbsp;\|&nbsp;bottom。<br/>示例:<br/>-&nbsp;background-position:&nbsp;200px&nbsp;30%<br/>-&nbsp;background-position:&nbsp;100px&nbsp;top<br/>-&nbsp;background-position:&nbsp;center&nbsp;center |
对于不支持起始值或终止值缺省的情况,可以通过from和to显示指定起始和结束。可以通过百分比指定动画运行的中间状态<sup>6+</sup>。示例:
......
......@@ -45,8 +45,8 @@
| finish | 无 | 当步骤导航器最后一个步骤完成时触发该事件。 |
| skip | 无 | 当通过setNextButtonStatus方法设置当前步骤导航器可跳过时,点击右侧跳过按钮触发该事件。 |
| change | {&nbsp;prevIndex:prevIndex,&nbsp;index:&nbsp;index} | 当步骤导航器点击左边或者右边文本按钮进行步骤切换时触发该事件,prevIndex表示老步骤的序号,index表示新步骤的序号。 |
| next | {&nbsp;index:index,&nbsp;pendingIndex:&nbsp;pendingIndex&nbsp;} | 当用户点击下一步按钮时触发该事件,index表示当前步骤序号,pendingIndex表示将跳转的序号,该事件有返回值,返回值格式为:{&nbsp;pendingIndex:pendingIndex&nbsp;},可以通过指定pendingIndex来修改下一个步骤使用哪个stepper-item子组件。 |
| back | {&nbsp;index:index,&nbsp;pendingIndex:&nbsp;pendingIndex&nbsp;} | 当用户点击上一步按钮时触发该事件,index表示当前步骤序号,pendingIndex表示将跳转的序号,该事件有返回值,返回值格式为Object:{&nbsp;pendingIndex:pendingIndex&nbsp;},可以通过指定pendingIndex来修改上一个步骤使用哪个stepper-item子组件。 |
| next | {&nbsp;index:index,&nbsp;pendingIndex:&nbsp;pendingIndex&nbsp;} | 当用户点击下一步按钮时触发该事件,index表示当前步骤序号,pendingIndex表示将跳转的序号,该事件有返回值,返回值格式为:{&nbsp;pendingIndex:pendingIndex&nbsp;},可以通过指定pendingIndex来修改下一个步骤使用哪个stepper-item子组件。 |
| back | {&nbsp;index:index,&nbsp;pendingIndex:&nbsp;pendingIndex&nbsp;} | 当用户点击上一步按钮时触发该事件,index表示当前步骤序号,pendingIndex表示将跳转的序号,该事件有返回值,返回值格式为Object:{&nbsp;pendingIndex:pendingIndex&nbsp;},可以通过指定pendingIndex来修改上一个步骤使用哪个stepper-item子组件。 |
## 方法
......
......@@ -159,4 +159,5 @@
- [时间选择弹窗](ts-methods-timepicker-dialog.md)
- [文本选择弹窗](ts-methods-textpicker-dialog.md)
- [菜单](ts-methods-menu.md)
- [文档中涉及到的内置枚举值](ts-appendix-enums.md)
- [枚举说明](ts-appendix-enums.md)
- [类型说明](ts-types.md)
......@@ -28,7 +28,7 @@ Blank(min?: number&nbsp;|&nbsp;string)
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| color | [ResourceColor](../../ui/ts-types.md) | 设置空白填充的填充颜色。 |
| color | [ResourceColor](ts-types.md) | 设置空白填充的填充颜色。 |
## 示例
......
......@@ -36,7 +36,7 @@
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ----------------------------------- | ---- | ---- | ------------- |
| label | [ResourceStr](../../ui/ts-types.md) | 否 | - | 按钮文本内容。 |
| label | [ResourceStr](ts-types.md) | 否 | - | 按钮文本内容。 |
| options | Object | 否 | - | 见options参数说明。 |
......
......@@ -29,7 +29,7 @@ Checkbox( option?:&nbsp;{name?: string, group?: string })
| 名称 | 参数类型 | 描述 |
| ------------- | ------- | -------- |
| select | boolean | 设置多选框是否选中。<br/>默认值:false |
| selectedColor | [ResourceColor](../../ui/ts-types.md) | 设置多选框选中状态颜色。 |
| selectedColor | [ResourceColor](ts-types.md) | 设置多选框选中状态颜色。 |
## 事件
......
......@@ -31,7 +31,7 @@ CheckboxGroup( group?: string )
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| selectAll | boolean | 设置是否全选。<br/>默认值:false |
| selectedColor | [ResourceColor](../../ui/ts-types.md) | 设置被选中或部分选中状态的颜色。 |
| selectedColor | [ResourceColor](ts-types.md) | 设置被选中或部分选中状态的颜色。 |
## 事件
......
......@@ -23,7 +23,7 @@ Divider()
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| vertical | boolean | 使用水平分割线还是垂直分割线。false:水平分割线;true:垂直分割线。<br/>默认值:false |
| color | [ResourceColor](../../ui/ts-types.md) | 分割线颜色。 |
| color | [ResourceColor](ts-types.md) | 分割线颜色。 |
| strokeWidth | number&nbsp;\|&nbsp;string | 分割线宽度。<br/>默认值:1 |
| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | 分割线的端点样式。<br/>默认值:LineCapStyle.Butt |
......
......@@ -43,7 +43,7 @@ Gauge(options:{value: number, min?: number, max?: number})
| 名称 | 类型定义 | 描述 |
| --------- | -------------------- | ------------------------------------------------------------ |
| ColorStop | [[ResourceColor](../../ui/ts-types.md#resourcecolor8),&nbsp;number] | 描述渐进色颜色断点类型,第一个参数为颜色值,第二个参数为0~1之间的比例值。 |
| ColorStop | [[ResourceColor](ts-types.md#resourcecolor8),&nbsp;number] | 描述渐进色颜色断点类型,第一个参数为颜色值,第二个参数为0~1之间的比例值。 |
## 示例
......
......@@ -27,7 +27,7 @@ Image(src: string | PixelMap | Resource)
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| src | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 是 | 图片的数据源,支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时,例如`Image("common/test.jpg")`,不支持跨包/跨模块调用该Image组件,建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]``Base64`字符串数据。<br/>\- 支持`dataability://`路径前缀的字符串,用于访问通过data&nbsp;ability提供的图片路径。 |
| src | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 是 | 图片的数据源,支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时,例如`Image("common/test.jpg")`,不支持跨包/跨模块调用该Image组件,建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]``Base64`字符串数据。<br/>\- 支持`dataability://`路径前缀的字符串,用于访问通过data&nbsp;ability提供的图片路径。 |
## 属性
......@@ -35,7 +35,7 @@ Image(src: string | PixelMap | Resource)
| 名称 | 参数类型 | 描述 |
| --------------------- | ------------------------------------------------------- | ------------------------------------------------------------ |
| alt | string \| [Resource](../../ui/ts-types.md#resource类型) | 加载时显示的占位图,支持本地图片和网络图片。 |
| alt | string \| [Resource](ts-types.md#resource类型) | 加载时显示的占位图,支持本地图片和网络图片。 |
| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | 设置图片的缩放类型。<br/>默认值:ImageFit.Cover |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | 设置图片的重复样式。<br/>默认值:NoRepeat<br/>**说明:**<br/>svg类型图源不支持该属性。 |
| interpolation | [ImageInterpolation](#imageinterpolation) | 设置图片的插值效果,即减轻低清晰度图片在放大显示的时候出现的锯齿问题,仅针对图片放大插值。<br/>默认值:ImageInterpolation.None<br/>**说明:**<br/>svg类型图源不支持该属性。<br/>PixelMap资源不支持该属性。 |
......@@ -43,11 +43,11 @@ Image(src: string | PixelMap | Resource)
| sourceSize | {<br/>width:&nbsp;number,<br/>height:&nbsp;number<br/>} | 设置图片裁剪尺寸,将原始图片解码成pixelMap,指定尺寸的图片,单位为px。<br/>**说明:**<br/>PixelMap资源不支持该属性。 |
| matchTextDirection | boolean | 设置图片是否跟随系统语言方向,在RTL语言环境下显示镜像翻转显示效果。<br/>默认值:false |
| fitOriginalSize | boolean | 图片组件尺寸未设置时,其显示尺寸是否跟随图源尺寸。<br/>默认值:true |
| fillColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 填充颜色。设置的填充颜色会覆盖在图片上。仅对svg图源生效,设置后会替换svg图片的fill颜色。 |
| fillColor | [ResourceColor](ts-types.md#resourcecolor8) | 填充颜色。设置的填充颜色会覆盖在图片上。仅对svg图源生效,设置后会替换svg图片的fill颜色。 |
| autoResize | boolean | 是否需要在图片解码过程中对图源做resize操作,该操作会根据显示区域的尺寸决定用于绘制的图源尺寸,有利于减少内存占用。<br/>默认值:true |
| syncLoad<sup>8+</sup> | boolean | 设置是否同步加载图片,默认是异步加载。同步加载时阻塞UI线程,不会显示占位图。<br/>默认值:false |
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置图片是否可复制(SVG图片不支持复制)。<br/>当copyOption设置为非CopyOptions.None时,支持使用长按、鼠标右击、快捷组合键'CTRL+C'等方式进行复制。<br/>默认值:CopyOptions.None |
| colorFilter<sup>9+</sup> | [ColorFilter](../../ui/ts-types.md#colorfilter9) | 给图像设置颜色滤镜效果。 |
| colorFilter<sup>9+</sup> | [ColorFilter](ts-types.md#colorfilter9) | 给图像设置颜色滤镜效果。 |
> **说明:**
>
......
......@@ -38,11 +38,11 @@ ImageAnimator()
- ImageFrameInfo属性说明
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| src | string \| [Resource](../../ui/ts-types.md#resource类型)<sup>9+</sup> | "" | 是 | 图片路径,图片格式为svg,png和jpg,从API Version9开始支持[Resource](../../ui/ts-types.md#resource类型)类型的路径 |
| width | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 图片宽度 |
| height | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 图片高度 |
| top | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 图片相对于组件左上角的纵向坐标 |
| left | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 图片相对于组件左上角的横向坐标 |
| src | string \| [Resource](ts-types.md#resource类型)<sup>9+</sup> | "" | 是 | 图片路径,图片格式为svg,png和jpg,从API Version9开始支持[Resource](ts-types.md#resource类型)类型的路径 |
| width | [Length](ts-types.md#长度类型) | 0 | 否 | 图片宽度 |
| height | [Length](ts-types.md#长度类型) | 0 | 否 | 图片高度 |
| top | [Length](ts-types.md#长度类型) | 0 | 否 | 图片相对于组件左上角的纵向坐标 |
| left | [Length](ts-types.md#长度类型) | 0 | 否 | 图片相对于组件左上角的横向坐标 |
| duration | number | 0 | 否 | 每一帧图片的播放时长,单位毫秒 |
......
......@@ -21,7 +21,7 @@ LoadingProgress()
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| color | [ResourceColor](../../ui/ts-types.md) | 设置加载进度条前景色。 |
| color | [ResourceColor](ts-types.md) | 设置加载进度条前景色。 |
## 示例
......
......@@ -24,11 +24,11 @@ Navigation()
| 名称 | 参数类型 | 描述 |
| -------------- | ---------------------------------------- | ---------------------------------------- |
| title | string&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md) | 页面标题。 |
| title | string&nbsp;\|&nbsp;[CustomBuilder](ts-types.md) | 页面标题。 |
| subTitle | string | 页面副标题。 |
| menus | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | 页面右上角菜单。 |
| menus | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md)<sup>8+</sup> | 页面右上角菜单。 |
| titleMode | NavigationTitleMode | 页面标题栏显示模式。<br/>默认值:NavigationTitleMode.Free |
| toolBar | object&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md#custombuilder8)<sup>8+</sup> | 设置工具栏内容。<br/>items:&nbsp;工具栏所有项。 |
| toolBar | object&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 设置工具栏内容。<br/>items:&nbsp;工具栏所有项。 |
| hideToolBar | boolean | 设置隐藏/显示工具栏:<br/>默认值:false<br/>true:&nbsp;隐藏工具栏。<br/>false:&nbsp;显示工具栏。 |
| hideTitleBar | boolean | 隐藏标题栏。<br/>默认值:false |
| hideBackButton | boolean | 隐藏返回键。<br/>默认值:false |
......
......@@ -26,12 +26,12 @@ PatternLock(controller?: PatternLockController)
| 名称 | 参数类型 | 描述 |
| --------------- | ------------------------------------- | ------------------------------------------------------------ |
| sideLength | [Length](../../ui/ts-types.md) | 设置组件的宽度和高度(相同值)。最小可以设置为0。<br/>默认值:300vp |
| circleRadius | [Length](../../ui/ts-types.md) | 设置宫格圆点的半径。<br/>默认值:14vp |
| regularColor | [ResourceColor](../../ui/ts-types.md) | 设置宫格圆点在“未选中”状态的填充颜色。<br/>默认值:Color.Black |
| selectedColor | [ResourceColor](../../ui/ts-types.md) | 设置宫格圆点在“选中”状态的填充颜色。<br/>默认值:Color.Black |
| activeColor | [ResourceColor](../../ui/ts-types.md) | 设置宫格圆点在“激活”状态的填充颜色。<br/>默认值:Color.Black |
| pathColor | [ResourceColor](../../ui/ts-types.md) | 设置连线的颜色。<br/>默认值:Color.Blue |
| sideLength | [Length](ts-types.md) | 设置组件的宽度和高度(相同值)。最小可以设置为0。<br/>默认值:300vp |
| circleRadius | [Length](ts-types.md) | 设置宫格圆点的半径。<br/>默认值:14vp |
| regularColor | [ResourceColor](ts-types.md) | 设置宫格圆点在“未选中”状态的填充颜色。<br/>默认值:Color.Black |
| selectedColor | [ResourceColor](ts-types.md) | 设置宫格圆点在“选中”状态的填充颜色。<br/>默认值:Color.Black |
| activeColor | [ResourceColor](ts-types.md) | 设置宫格圆点在“激活”状态的填充颜色。<br/>默认值:Color.Black |
| pathColor | [ResourceColor](ts-types.md) | 设置连线的颜色。<br/>默认值:Color.Blue |
| pathStrokeWidth | number&nbsp;\|&nbsp;string | 设置连线的宽度。最小可以设置为0。<br/>默认值:34vp |
| autoReset | boolean | 设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true,用户可以通过触摸图案密码锁重置组件状态(清除之前的输入效果);如果设置为false,用户手指离开屏幕完成输入后,再次触摸图案密码锁(包括圆点)不能改变之前的输入状态。<br/>默认值:true |
......
......@@ -52,8 +52,8 @@ Progress(options: {value: number, total?: number, type?: ProgressType})
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| value | number | 设置当前进度值。 |
| color | [ResourceColor](../../ui/ts-types.md) | 设置进度条前景色。 |
| style<sup>8+</sup> | {<br/>strokeWidth?:&nbsp;[Length](../../ui/ts-types.md#length),<br/>scaleCount?:&nbsp;number,<br/>scaleWidth?:&nbsp;[Length](../../ui/ts-types.md#length)<br/>} | 定义组件的样式。<br/>-&nbsp;strokeWidth:&nbsp;设置进度条宽度。<br/>-&nbsp;scaleCount:&nbsp;设置环形进度条总刻度数。<br/>-&nbsp;scaleWidth:&nbsp;设置环形进度条刻度粗细,刻度粗细大于进度条宽度时,为系统默认粗细。 |
| color | [ResourceColor](ts-types.md) | 设置进度条前景色。 |
| style<sup>8+</sup> | {<br/>strokeWidth?:&nbsp;[Length](ts-types.md#length),<br/>scaleCount?:&nbsp;number,<br/>scaleWidth?:&nbsp;[Length](ts-types.md#length)<br/>} | 定义组件的样式。<br/>-&nbsp;strokeWidth:&nbsp;设置进度条宽度。<br/>-&nbsp;scaleCount:&nbsp;设置环形进度条总刻度数。<br/>-&nbsp;scaleWidth:&nbsp;设置环形进度条刻度粗细,刻度粗细大于进度条宽度时,为系统默认粗细。 |
## 示例
......
......@@ -27,8 +27,8 @@ QRCode(value: string)
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| color | [ResourceColor](../../ui/ts-types.md) | 设置二维码颜色。<br/>默认值:Color.Black |
| backgroundColor | [ResourceColor](../../ui/ts-types.md) | 设置二维码背景颜色。<br/>默认值:Color.White |
| color | [ResourceColor](ts-types.md) | 设置二维码颜色。<br/>默认值:Color.Black |
| backgroundColor | [ResourceColor](ts-types.md) | 设置二维码背景颜色。<br/>默认值:Color.White |
## 事件
......
......@@ -30,9 +30,9 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll
| 名称 | 参数类型 | 描述 |
| ----------------------- | ------------------------------------------------ | ---------------------------------------------- |
| searchButton | string | 搜索框末尾搜索按钮文本值,默认无搜索按钮。 |
| placeholderColor | [ResourceColor](../../ui/ts-types.md) | 设置placeholder颜色。 |
| placeholderFont | [Font](../../ui/ts-types.md) | 设置placeholder文本样式。 |
| textFont | [Font](../../ui/ts-types.md) | 设置搜索框内文本样式。 |
| placeholderColor | [ResourceColor](ts-types.md) | 设置placeholder颜色。 |
| placeholderFont | [Font](ts-types.md) | 设置placeholder文本样式。 |
| textFont | [Font](ts-types.md) | 设置搜索框内文本样式。 |
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置文本是否可复制。 |
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置文本对齐方式。<br/>默认值:TextAlign.Start |
......
......@@ -18,8 +18,8 @@ Select(options: Array\<SelectOption\>)
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ----------------------------------- | ---- | -------------- |
| value | [ResourceStr](../../ui/ts-types.md) | 是 | 下拉选项内容。 |
| icon | [ResourceStr](../../ui/ts-types.md) | 否 | 下拉选项图片。 |
| value | [ResourceStr](ts-types.md) | 是 | 下拉选项内容。 |
| icon | [ResourceStr](ts-types.md) | 否 | 下拉选项图片。 |
## 属性
......@@ -27,14 +27,14 @@ Select(options: Array\<SelectOption\>)
| ----------------------- | ------------------------------------- | --------------------------------------------- |
| selected | number | 设置下拉菜单初始选项的索引,第一项的索引为0。 |
| value | string | 设置下拉按钮本身的文本显示。 |
| font | [Font](../../ui/ts-types.md) | 设置下拉按钮本身的文本样式。 |
| fontColor | [ResourceColor](../../ui/ts-types.md) | 设置下拉按钮本身的文本颜色。 |
| selectedOptionBgColor | [ResourceColor](../../ui/ts-types.md) | 设置下拉菜单选中项的背景色。 |
| selectedOptionFont | [Font](../../ui/ts-types.md) | 设置下拉菜单选中项的文本样式。 |
| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md) | 设置下拉菜单选中项的文本颜色。 |
| optionBgColor | [ResourceColor](../../ui/ts-types.md) | 设置下拉菜单项的背景色。 |
| optionFont | [Font](../../ui/ts-types.md) | 设置下拉菜单项的文本样式。 |
| optionFontColor | [ResourceColor](../../ui/ts-types.md) | 设置下拉菜单项的文本颜色。 |
| font | [Font](ts-types.md) | 设置下拉按钮本身的文本样式。 |
| fontColor | [ResourceColor](ts-types.md) | 设置下拉按钮本身的文本颜色。 |
| selectedOptionBgColor | [ResourceColor](ts-types.md) | 设置下拉菜单选中项的背景色。 |
| selectedOptionFont | [Font](ts-types.md) | 设置下拉菜单选中项的文本样式。 |
| selectedOptionFontColor | [ResourceColor](ts-types.md) | 设置下拉菜单选中项的文本颜色。 |
| optionBgColor | [ResourceColor](ts-types.md) | 设置下拉菜单项的背景色。 |
| optionFont | [Font](ts-types.md) | 设置下拉菜单项的文本样式。 |
| optionFontColor | [ResourceColor](ts-types.md) | 设置下拉菜单项的文本颜色。 |
## 事件
......
......@@ -42,12 +42,12 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| blockColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置滑块的颜色。 |
| trackColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置滑轨的背景颜色。 |
| selectedColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置滑轨的已滑动颜色。 |
| blockColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置滑块的颜色。 |
| trackColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置滑轨的背景颜色。 |
| selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置滑轨的已滑动颜色。 |
| showSteps | boolean | 设置当前是否显示步长刻度值。<br/>默认值:false |
| showTips | boolean | 设置滑动时是否显示气泡提示百分比。<br/>默认值:false |
| trackThickness | [Length](../../ui/ts-types.md#length) | 设置滑轨的粗细。 |
| trackThickness | [Length](ts-types.md#length) | 设置滑轨的粗细。 |
## 事件
......
......@@ -20,7 +20,7 @@ Span(content: string | Resource)
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| content | string \| [Resource](../../ui/ts-types.md#resource) | 是 | 文本内容。 |
| content | string \| [Resource](ts-types.md#resource) | 是 | 文本内容。 |
## 属性
......@@ -29,7 +29,7 @@ Span(content: string | Resource)
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br/>color?:&nbsp;[ResourceColor](../../ui/ts-types.md#resourcecolor8)<br/>} | 设置文本装饰线样式及其颜色。<br/>默认值:{<br/>type:&nbsp;TextDecorationType.None<br/>color:Color.Black<br/>} |
| decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8)<br/>} | 设置文本装饰线样式及其颜色。<br/>默认值:{<br/>type:&nbsp;TextDecorationType.None<br/>color:Color.Black<br/>} |
| letterSpacing | number \| string | 设置文本字符间距。 |
| textCase | [TextCase](ts-appendix-enums.md#textcase) | 设置文本大小写。<br/>默认值:TextCase.Normal |
......
......@@ -20,7 +20,7 @@ Text(content?: string | Resource)
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| content | string \| [Resource](../../ui/ts-types.md#resource) | 否 | 文本内容。包含子组件Span时不生效,显示Span内容,并且此时text组件的样式不生效。<br/>默认值:' ' |
| content | string \| [Resource](ts-types.md#resource) | 否 | 文本内容。包含子组件Span时不生效,显示Span内容,并且此时text组件的样式不生效。<br/>默认值:' ' |
## 属性
......@@ -31,12 +31,12 @@ Text(content?: string | Resource)
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置多行文本的文本对齐方式。<br/>默认值:TextAlign.Start |
| textOverflow | {overflow:&nbsp;[TextOverflow](ts-appendix-enums.md#textoverflow)} | 设置文本超长时的显示方式。<br/>默认值:{overflow:&nbsp;TextOverflow.Clip}<br/>**说明:**<br/>文本截断是按字截断。例如,英文以单词为最小单位进行截断,若需要以字母为单位进行截断,可在字母间添加零宽空格:\u200B。<br />需配合`maxLines`使用,单独设置不生效。 |
| maxLines | number | 设置文本的最大行数。<br />默认值:Infinity<br/>**说明:**<br />默认情况下,文本是自动折行的,如果指定此参数,则文本最多不会超过指定的行。如果有多余的文本,可以通过 `textOverflow`来指定截断方式。 |
| lineHeight | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md) | 设置文本的文本行高,设置值不大于0时,不限制文本行高,自适应字体大小,Length为number类型时单位为fp。 |
| decoration | {<br/>type:&nbsp;TextDecorationType,<br/>color?:&nbsp;[ResourceColor](../../ui/ts-types.md)<br/>} | 设置文本装饰线样式及其颜色。<br />默认值:{<br/>type:&nbsp;TextDecorationType.None,<br/>color:Color.Black<br/>} |
| lineHeight | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;[Resource](ts-types.md) | 设置文本的文本行高,设置值不大于0时,不限制文本行高,自适应字体大小,Length为number类型时单位为fp。 |
| decoration | {<br/>type:&nbsp;TextDecorationType,<br/>color?:&nbsp;[ResourceColor](ts-types.md)<br/>} | 设置文本装饰线样式及其颜色。<br />默认值:{<br/>type:&nbsp;TextDecorationType.None,<br/>color:Color.Black<br/>} |
| baselineOffset | number&nbsp;\|&nbsp;string | 设置文本基线的偏移量。 |
| letterSpacing | number&nbsp;\|&nbsp;string | 设置文本字符间距。 |
| minFontSize | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md) | 设置文本最小显示字号。 |
| maxFontSize | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md) | 设置文本最大显示字号。 |
| minFontSize | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md) | 设置文本最小显示字号。 |
| maxFontSize | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md) | 设置文本最大显示字号。 |
| textCase | [TextCase](ts-appendix-enums.md#textcase) | 设置文本大小写。<br />默认值:TextCase.Normal |
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 组件支持设置文本是否可复制粘贴。<br />默认值:CopyOptions.None |
......
......@@ -20,8 +20,8 @@ TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Tex
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----------------------- | ---------------------------------------- | ---- | -------------- |
| placeholder | [ResourceStr](../../ui/ts-types.md) | 否 | 无输入时的提示文本。 |
| text | [ResourceStr](../../ui/ts-types.md) | 否 | 设置输入框当前的文本内容。 |
| placeholder | [ResourceStr](ts-types.md) | 否 | 无输入时的提示文本。 |
| text | [ResourceStr](ts-types.md) | 否 | 设置输入框当前的文本内容。 |
| controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | 否 | 设置TextArea控制器。 |
......@@ -31,11 +31,11 @@ TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Tex
| 名称 | 参数类型 | 描述 |
| ------------------------ | ---------------------------------------- | ---------------------------------------- |
| placeholderColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置placeholder文本颜色。 |
| placeholderFont | [Font](../../ui/ts-types.md#font) | 设置placeholder文本样式。 |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置placeholder文本颜色。 |
| placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式。 |
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置文本水平对齐式。<br/>默认值:TextAlign.Start |
| caretColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置输入框光标颜色。 |
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string) => void<br/>} | 通过正则表达式设置输入过滤器。满足表达式的输入允许显示,不满足的输入被忽略。仅支持单个字符匹配,不支持字符串匹配。例如:^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$,不支持过滤8到10位的强密码。<br/>-&nbsp;value:设置正则表达式。<br/>-&nbsp;error:正则匹配失败时,返回被忽略的内容。 |
| caretColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置输入框光标颜色。 |
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string) => void<br/>} | 通过正则表达式设置输入过滤器。满足表达式的输入允许显示,不满足的输入被忽略。仅支持单个字符匹配,不支持字符串匹配。例如:^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$,不支持过滤8到10位的强密码。<br/>-&nbsp;value:设置正则表达式。<br/>-&nbsp;error:正则匹配失败时,返回被忽略的内容。 |
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置文本是否可复制。 |
## 事件
......
......@@ -20,8 +20,8 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----------------------- | ---------------------------------------- | ---- | --------------- |
| placeholder | [ResourceStr](../../ui/ts-types.md) | 否 | 无输入时的提示文本。 |
| text | [ResourceStr](../../ui/ts-types.md) | 否 | 设置输入框当前的文本内容。 |
| placeholder | [ResourceStr](ts-types.md) | 否 | 无输入时的提示文本。 |
| text | [ResourceStr](ts-types.md) | 否 | 设置输入框当前的文本内容。 |
| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | 否 | 设置TextInput控制器。 |
......@@ -32,12 +32,12 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te
| 名称 | 参数类型 | 描述 |
| ------------------------ | ---------------------------------------- | ---------------------------------------- |
| type | InputType | 设置输入框类型。<br/>默认值:InputType.Normal |
| placeholderColor | [ResourceColor](../../ui/ts-types.md) | 设置placeholder颜色。|
| placeholderFont | [Font](../../ui/ts-types.md#font) | 设置placeholder文本样式。 |
| placeholderColor | [ResourceColor](ts-types.md) | 设置placeholder颜色。|
| placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式。 |
| enterKeyType | EnterKeyType | 设置输入法回车键类型。<br/>默认值:EnterKeyType.Done |
| caretColor | [ResourceColor](../../ui/ts-types.md) | 设置输入框光标颜色。 |
| caretColor | [ResourceColor](ts-types.md) | 设置输入框光标颜色。 |
| maxLength | number | 设置文本的最大输入字符数。 |
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void<br/>} | 正则表达式,满足表达式的输入允许显示,不满足正则表达式的输入被忽略。仅支持单个字符匹配,不支持字符串匹配。例如:^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$,8到10位的强密码不支持过滤。<br/>-&nbsp;value:设置正则表达式。<br/>-&nbsp;error:正则匹配失败时,返回被忽略的内容。 |
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void<br/>} | 正则表达式,满足表达式的输入允许显示,不满足正则表达式的输入被忽略。仅支持单个字符匹配,不支持字符串匹配。例如:^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$,8到10位的强密码不支持过滤。<br/>-&nbsp;value:设置正则表达式。<br/>-&nbsp;error:正则匹配失败时,返回被忽略的内容。 |
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置文本是否可复制。 |
| showPasswordIcon<sup>9+</sup> | boolean | 密码输入模式时,密码框末尾的图标是否显示。<br/>默认值:true |
| style<sup>9+</sup> | TextInputStyle | TextInput风格。<br/>默认值:TextInputStyle.Default |
......
......@@ -22,7 +22,7 @@ TextPicker(options?: {range: string[]|Resource, selected?: number, value?: strin
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| range | string[]&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 是 | 选择器的数据选择范围。 |
| range | string[]&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 是 | 选择器的数据选择范围。 |
| selected | number | 否 | 选中项在数组中的index值。<br/>默认值:0 |
| value | string | 否 | 选中项的值,优先级低于selected。<br/>默认值:第一个元素值 |
......
......@@ -39,8 +39,8 @@ Toggle(options: { type: ToggleType, isOn?: boolean })
| 名称 | 参数 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- |
| selectedColor | [ResourceColor](../../ui/ts-types.md) | - | 设置组件打开状态的背景颜色。 |
| switchPointColor | [ResourceColor](../../ui/ts-types.md) | - | 设置Switch类型的圆形滑块颜色。<br/>>&nbsp;**说明:**<br/>>&nbsp;仅对type为ToggleType.Switch生效。 |
| selectedColor | [ResourceColor](ts-types.md) | - | 设置组件打开状态的背景颜色。 |
| switchPointColor | [ResourceColor](ts-types.md) | - | 设置Switch类型的圆形滑块颜色。<br/>>&nbsp;**说明:**<br/>>&nbsp;仅对type为ToggleType.Switch生效。 |
## 事件
......
......@@ -26,7 +26,7 @@ Web(options: { src: ResourceStr, controller: WebController })
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ---------- | ------------------------------- | ---- | ------- |
| src | [ResourceStr](../../ui/ts-types.md) | 是 | 网页资源地址。 |
| src | [ResourceStr](ts-types.md) | 是 | 网页资源地址。 |
| controller | [WebController](#webcontroller) | 否 | 控制器。 |
**示例:**
......
......@@ -29,19 +29,19 @@ AlphabetIndexer(value: {arrayValue: Array&lt;string&gt;, selected: number})
| 名称 | 参数类型 | 描述 |
| ----------------------- | --------------- | ----------------------------------------------------------- |
| color | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置文字颜色。 |
| selectedColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置选中项文字颜色。 |
| popupColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置提示弹窗文字颜色。 |
| selectedBackgroundColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置选中项背景颜色。 |
| popupBackground | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置提示弹窗背景色。 |
| color | [ResourceColor](ts-types.md#resourcecolor8) | 设置文字颜色。 |
| selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置选中项文字颜色。 |
| popupColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置提示弹窗文字颜色。 |
| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置选中项背景颜色。 |
| popupBackground | [ResourceColor](ts-types.md#resourcecolor8) | 设置提示弹窗背景色。 |
| usingPopup | boolean | 设置是否使用提示弹窗。 |
| selectedFont | [Font](../../ui/ts-types.md#font) | 设置选中项文字样式。 |
| popupFont | [Font](../../ui/ts-types.md#font) | 设置提示弹窗字体样式。 |
| font | [Font](../../ui/ts-types.md#font) | 设置字母索引条默认字体样式。 |
| selectedFont | [Font](ts-types.md#font) | 设置选中项文字样式。 |
| popupFont | [Font](ts-types.md#font) | 设置提示弹窗字体样式。 |
| font | [Font](ts-types.md#font) | 设置字母索引条默认字体样式。 |
| itemSize | string&nbsp;\|&nbsp;number | 设置字母索引条字母区域大小,字母区域为正方形,即正方形边长。 |
| alignStyle | IndexerAlign | 设置字母索引条弹框的对齐样式,支持弹窗显示在索引条右侧和左侧。<br/>默认值:IndexerAlign.Right |
| selected | number | 设置选中项索引值。 |
| popupPosition | [Position](../../ui/ts-types.md#position8) | 设置弹出窗口相对于索引器条上边框中点的位置。 |
| popupPosition | [Position](ts-types.md#position8) | 设置弹出窗口相对于索引器条上边框中点的位置。 |
## IndexerAlign枚举说明
......
......@@ -44,10 +44,10 @@
- BadgeStyle对象说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| color | [ResourceColor](../../ui/ts-types.md) | 否 | Color.White | 文本颜色。 |
| color | [ResourceColor](ts-types.md) | 否 | Color.White | 文本颜色。 |
| fontSize | number&nbsp;\|&nbsp;string | 否 | 10 | 文本大小。 |
| badgeSize | number&nbsp;\|&nbsp;string | 是 | - | badge的大小。 |
| badgeColor | [ResourceColor](../../ui/ts-types.md) | 否 | Color.Red | badge的颜色。 |
| badgeColor | [ResourceColor](ts-types.md) | 否 | Color.Red | badge的颜色。 |
- BadgePosition枚举说明
| 名称 | 描述 |
......
......@@ -32,14 +32,14 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| listDirection | [Axis](ts-appendix-enums.md#axis) | 设置List组件排列方向。<br/>默认值:Axis.Vertical |
| divider | {<br/>strokeWidth:&nbsp;[Length](../../ui/ts-types.md#length),<br/>color?:[ResourceColor](../../ui/ts-types.md),<br/>startMargin?:&nbsp;Length,<br/>endMargin?:&nbsp;Length<br/>}&nbsp;\|&nbsp;null | 设置ListItem分割线样式,默认无分割线。<br/>- strokeWidth:&nbsp;分割线的线宽。<br/>- color:&nbsp;分割线的颜色。<br/>- startMargin:&nbsp;分割线与列表侧边起始端的距离。<br/>- endMargin:&nbsp;分割线与列表侧边结束端的距离。 |
| divider | {<br/>strokeWidth:&nbsp;[Length](ts-types.md#length),<br/>color?:[ResourceColor](ts-types.md),<br/>startMargin?:&nbsp;Length,<br/>endMargin?:&nbsp;Length<br/>}&nbsp;\|&nbsp;null | 设置ListItem分割线样式,默认无分割线。<br/>- strokeWidth:&nbsp;分割线的线宽。<br/>- color:&nbsp;分割线的颜色。<br/>- startMargin:&nbsp;分割线与列表侧边起始端的距离。<br/>- endMargin:&nbsp;分割线与列表侧边结束端的距离。 |
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。<br/>默认值:BarState.Off |
| cachedCount | number | 设置预加载的ListItem数量。具体使用可参考[减少应用白块说明](../../ui/ts-performance-improvement-recommendation.md#减少应用滑动白块)<br/>默认值:1 |
| editMode | boolean | 声明当前List组件是否处于可编辑模式。<br/>默认值:false |
| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置组件的滑动效果。<br/>默认值:EdgeEffect.Spring |
| chainAnimation | boolean | 设置当前List是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:List内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。<br/>默认值:false<br/>-&nbsp;false:不启用链式联动。<br/>-&nbsp;true:启用链式联动。 |
| multiSelectable<sup>8+</sup> | boolean | 是否开启鼠标框选。<br/>默认值:false<br/>-&nbsp;false:关闭框选。<br/>-&nbsp;true:开启框选。 |
| lanes<sup>9+</sup> | number \| [LengthConstrain](../../ui/ts-types.md#lengthconstrain) | 以列模式为例(listDirection为Axis.Vertical):<br/>lanes用于决定List组件在交叉轴方向按几列布局。<br/>默认值:1<br/>规则如下:<br/>- lanes为指定的数量时,根据指定的数量与List组件的交叉轴宽度来决定每列的宽度;<br/>- lane设置了{minLength,maxLength}时,根据List组件的宽度自适应决定lanes数量(即列数),保证缩放过程中lane的宽度符合{minLength,maxLength}的限制。其中,minLength条件会被优先满足,即优先保证符合ListItem的宽度符合最小宽度限制。例如在列模式下,设置了{minLength: 40vp,maxLength: 60vp},则当List组件宽度为70vp时,ListItem为一列,并且根据alignListItem属性做靠左、居中或者靠右布局;当List组件宽度变化至80vp时,符合两倍的minLength,则ListItem自适应为两列。 |
| lanes<sup>9+</sup> | number \| [LengthConstrain](ts-types.md#lengthconstrain) | 以列模式为例(listDirection为Axis.Vertical):<br/>lanes用于决定List组件在交叉轴方向按几列布局。<br/>默认值:1<br/>规则如下:<br/>- lanes为指定的数量时,根据指定的数量与List组件的交叉轴宽度来决定每列的宽度;<br/>- lane设置了{minLength,maxLength}时,根据List组件的宽度自适应决定lanes数量(即列数),保证缩放过程中lane的宽度符合{minLength,maxLength}的限制。其中,minLength条件会被优先满足,即优先保证符合ListItem的宽度符合最小宽度限制。例如在列模式下,设置了{minLength: 40vp,maxLength: 60vp},则当List组件宽度为70vp时,ListItem为一列,并且根据alignListItem属性做靠左、居中或者靠右布局;当List组件宽度变化至80vp时,符合两倍的minLength,则ListItem自适应为两列。 |
| alignListItem<sup>9+</sup> | ListItemAlign | List交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时,ListItem在List交叉轴方向的布局方式,默认为居中。<br/>默认值:ListItemAlign.Center |
| sticky<sup>9+</sup> | StickyStyle | 配合[ListItemGroup](ts-container-listitemgroup.md)组件使用,设置ListItemGroup中header和footer是否要吸顶或吸底。<br/>默认值:StickyStyle.None<br/>**说明:**<br/>sticky属性可以设置为 StickyStyle.Header \| StickyStyle.Footer 以同时支持header吸顶和footer吸底。 |
......
......@@ -23,15 +23,15 @@ ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?:
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| header | [CustomBuilder](../../ui/ts-types.md#custombuilder8) | 否 | 设置ListItemGroup头部组件。 |
| footer | [CustomBuilder](../../ui/ts-types.md#custombuilder8) | 否 | 设置ListItemGroup尾部组件。 |
| header | [CustomBuilder](ts-types.md#custombuilder8) | 否 | 设置ListItemGroup头部组件。 |
| footer | [CustomBuilder](ts-types.md#custombuilder8) | 否 | 设置ListItemGroup尾部组件。 |
| space | number&nbsp;\|&nbsp;string | 否 | 列表项间距。只作用于ListItem与ListItem之间,不作用于header与ListItem、footer与ListItem之间。 |
## 属性
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| divider | {<br/>strokeWidth:&nbsp;[Length](../../ui/ts-types.md#length),<br/>color?:&nbsp;[ResourceColor](../../ui/ts-types.md#resourcecolor8),<br/>startMargin?:&nbsp;[Length](../../ui/ts-types.md#length),<br/>endMargin?:&nbsp;[Length](../../ui/ts-types.md#length)<br/>}&nbsp;\|&nbsp;null | 用于设置ListItem分割线样式,默认无分割线。<br/>strokeWidth:&nbsp;分割线的线宽。<br/>color:&nbsp;分割线的颜色。<br/>startMargin:&nbsp;分割线距离列表侧边起始端的距离。<br/>endMargin:&nbsp;分割线距离列表侧边结束端的距离。 |
| divider | {<br/>strokeWidth:&nbsp;[Length](ts-types.md#length),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8),<br/>startMargin?:&nbsp;[Length](ts-types.md#length),<br/>endMargin?:&nbsp;[Length](ts-types.md#length)<br/>}&nbsp;\|&nbsp;null | 用于设置ListItem分割线样式,默认无分割线。<br/>strokeWidth:&nbsp;分割线的线宽。<br/>color:&nbsp;分割线的颜色。<br/>startMargin:&nbsp;分割线距离列表侧边起始端的距离。<br/>endMargin:&nbsp;分割线距离列表侧边结束端的距离。 |
## 示例
......
......@@ -34,7 +34,7 @@ Panel(show:boolean)
| halfHeight | string&nbsp;\|&nbsp;number | 指定PanelMode.Half状态下的高度,默认为屏幕尺寸的一半。 |
| miniHeight | string&nbsp;\|&nbsp;number | 指定PanelMode.Mini状态下的高度。 |
| show | boolean | 当滑动面板弹出时调用。 |
| backgroundMask<sup>9+</sup>|[ResourceColor](../../ui/ts-types.md#resourcecolor8)|指定Panel的背景蒙层。|
| backgroundMask<sup>9+</sup>|[ResourceColor](ts-types.md#resourcecolor8)|指定Panel的背景蒙层。|
## PanelType枚举说明
......
......@@ -50,7 +50,7 @@ SideBarContainer( type?: SideBarContainerType )
| top | number | 否 | 设置侧边栏控制按钮距离容器上界限的间距。<br/>默认值:48,单位vp |
| width | number | 否 | 设置侧边栏控制按钮的宽度。<br/>默认值:32,单位vp |
| height | number | 否 | 设置侧边栏控制按钮的高度。<br/>默认值:32,单位vp |
| icons | {<br/>shown:&nbsp;string \| PixelMap \| [Resource](../../ui/ts-types.md) ,<br/>hidden:&nbsp;string \| PixelMap \| [Resource](../../ui/ts-types.md) ,<br/>switching?:&nbsp;string \| PixelMap \| [Resource](../../ui/ts-types.md) <br/>} | 否 | 设置侧边栏控制按钮的图标:<br/> </p> - shown: 设置侧边栏显示时控制按钮的图标。<br>- hidden: 设置侧边栏隐藏时控制按钮的图标。<br>- switching:设置侧边栏显示和隐藏状态切换时控制按钮的图标。 |
| icons | {<br/>shown:&nbsp;string \| PixelMap \| [Resource](ts-types.md) ,<br/>hidden:&nbsp;string \| PixelMap \| [Resource](ts-types.md) ,<br/>switching?:&nbsp;string \| PixelMap \| [Resource](ts-types.md) <br/>} | 否 | 设置侧边栏控制按钮的图标:<br/> </p> - shown: 设置侧边栏显示时控制按钮的图标。<br>- hidden: 设置侧边栏隐藏时控制按钮的图标。<br>- switching:设置侧边栏显示和隐藏状态切换时控制按钮的图标。 |
## SideBarPosition<sup>9+</sup>枚举说明
......
......@@ -41,7 +41,7 @@ Swiper(value:{controller?: SwiperController})
| cachedCount<sup>8+</sup> | number | 设置预加载子组件个数。<br/>默认值:1 |
| disableSwipe<sup>8+</sup> | boolean | 禁用组件滑动切换功能。<br/>默认值:false |
| curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string | 设置Swiper的动画曲线,默认为淡入淡出曲线,常用曲线参考[Curve枚举说明](ts-appendix-enums.md#curve),也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。<br/>默认值:Curve.Ease |
| indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;[Length](../../ui/ts-types.md#length),<br/>top?:&nbsp;[Length](../../ui/ts-types.md#length),<br/>right?:&nbsp;[Length](../../ui/ts-types.md#length),<br/>bottom?:&nbsp;[Length](../../ui/ts-types.md#length),<br/>size?:&nbsp;[Length](../../ui/ts-types.md#length),<br/>mask?:&nbsp;boolean,<br/>color?:&nbsp;[ResourceColor](../../ui/ts-types.md),<br/>selectedColor?:&nbsp;[ResourceColor](../../ui/ts-types.md)<br/>} | 设置导航点样式:<br/>\- left: 设置导航点距离Swiper组件左边的距离。<br/>\- top: 设置导航点距离Swiper组件顶部的距离。<br/>\- right: 设置导航点距离Swiper组件右边的距离。<br/>\- bottom: 设置导航点距离Swiper组件底部的距离。<br/>\- size: 设置导航点的直径。<br/>\- mask: 设置是否显示导航点蒙层样式。<br/>\- color: 设置导航点的颜色。<br/>\- selectedColor: 设置选中的导航点的颜色。 |
| indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;[Length](ts-types.md#length),<br/>top?:&nbsp;[Length](ts-types.md#length),<br/>right?:&nbsp;[Length](ts-types.md#length),<br/>bottom?:&nbsp;[Length](ts-types.md#length),<br/>size?:&nbsp;[Length](ts-types.md#length),<br/>mask?:&nbsp;boolean,<br/>color?:&nbsp;[ResourceColor](ts-types.md),<br/>selectedColor?:&nbsp;[ResourceColor](ts-types.md)<br/>} | 设置导航点样式:<br/>\- left: 设置导航点距离Swiper组件左边的距离。<br/>\- top: 设置导航点距离Swiper组件顶部的距离。<br/>\- right: 设置导航点距离Swiper组件右边的距离。<br/>\- bottom: 设置导航点距离Swiper组件底部的距离。<br/>\- size: 设置导航点的直径。<br/>\- mask: 设置是否显示导航点蒙层样式。<br/>\- color: 设置导航点的颜色。<br/>\- selectedColor: 设置选中的导航点的颜色。 |
| displayCount<sup>8+</sup> | number\|string | 设置元素显示个数。<br/>默认值:1 |
| effectMode<sup>8+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。<br/>默认值:EdgeEffect.Spring |
......
......@@ -23,7 +23,7 @@ TabContent()
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| tabBar | string&nbsp;\|&nbsp;Resource&nbsp;\|&nbsp;{<br/>icon?:&nbsp;string&nbsp;\|&nbsp;Resource,<br/>text?:&nbsp;string&nbsp;\|&nbsp;Resource<br/>}<br/>\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | 设置TabBar上显示内容。<br/>CustomBuilder:&nbsp;构造器,内部可以传入组件(API8版本以上适用)。<br/>>&nbsp;&nbsp;**说明:**<br/>>&nbsp;如果icon采用svg格式图源,则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源,icon大小则是svg本身内置的宽高属性值大小。 |
| tabBar | string&nbsp;\|&nbsp;Resource&nbsp;\|&nbsp;{<br/>icon?:&nbsp;string&nbsp;\|&nbsp;Resource,<br/>text?:&nbsp;string&nbsp;\|&nbsp;Resource<br/>}<br/>\|&nbsp;[CustomBuilder](ts-types.md)<sup>8+</sup> | 设置TabBar上显示内容。<br/>CustomBuilder:&nbsp;构造器,内部可以传入组件(API8版本以上适用)。<br/>>&nbsp;&nbsp;**说明:**<br/>>&nbsp;如果icon采用svg格式图源,则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源,icon大小则是svg本身内置的宽高属性值大小。 |
> **说明:**
> - TabContent组件不支持设置通用宽度属性,其宽度默认撑满Tabs父组件。
......
......@@ -28,15 +28,15 @@ Circle(options?: {width?: string | number, height?: string | number})
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
| fill | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
......
......@@ -29,15 +29,15 @@ ellipse(options?: {width?: string | number, height?: string | number})
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 |设置线条颜色。 |
| fill | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md) | Color.Black | 否 |设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
......
......@@ -36,15 +36,15 @@ Line(options?: {width?: string | number, height?: string | number})
| -------- | -------- | -------- | -------- | -------- |
| startPoint | Array | [0,&nbsp;0] | 是 | 直线起点坐标点(相对坐标)。 |
| endPoint | Array | [0,&nbsp;0] | 是 | 直线终点坐标点(相对坐标)。 |
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
| fill | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
......
......@@ -30,15 +30,15 @@ Path(value?: { width?: number | string; height?: number | string; commands?: str
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | ----------------------------------- | ---- | ---- | ---------------------------------------- |
| commands | string | '' | 否 | 路径绘制的命令字符串,单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 |
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
| fill | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
......
......@@ -30,15 +30,15 @@ Polygon(options?: {width?: string | number, height?: string | number})
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| points | Array&lt;Point&gt; | [] | 否 | 多边形的顶点坐标列表。 |
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
| fill | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
......
......@@ -30,15 +30,15 @@ Polyline(options?: {width?: string | number, height?: string | number})
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| points | Array&lt;Point&gt; | [] | 否 | 折线经过坐标点列表。 |
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
| fill | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
......
......@@ -36,15 +36,15 @@ Rect(options?: {width?: string | number,height?: string | number,radius?: string
| radiusWidth | string&nbsp;\|&nbsp;number | 0 | 否 | 圆角的宽度,仅设置宽时宽高一致。 |
| radiusHeight | string&nbsp;\|&nbsp;number | 0 | 否 | 圆角的高度,仅设置高时宽高一致。 |
| radius | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Array&lt;string&nbsp;\|&nbsp;number&gt; | 0 | 否 | 圆角半径大小。 |
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
| fill | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
......
......@@ -34,15 +34,15 @@ Shape(value?: PixelMap)
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| viewPort | {<br/>x?:&nbsp;number \| string,<br/>y?:&nbsp;number \| string,<br/>width?:&nbsp;number \| string,<br/>height?:&nbsp;number \| string<br/>} | { x:0, y:0, width:0, height:0 } | 否 | 形状的视口。 |
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
| fill | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeWidth | number&nbsp;\|&nbsp;string | 1 | 否 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
| mesh<sup>8+</sup> | Array&lt;number&gt;,number,number | [],0,0 | 否 | 设置mesh效果。第一个参数为长度(column + 1)* (row + 1)* 2的数组,它记录了扭曲后的位图各个顶点位置,第二个参数为mesh矩阵列数column,第三个参数为mesh矩阵行数row。 |
......
......@@ -24,9 +24,9 @@ Video(value: {src?: string | Resource, currentProgressRate?: number | string | P
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| src | string \| [Resource](../../ui/ts-types.md) | 否 | 视频播放源的路径,支持本地视频路径和网络路径。<br>支持在resources下面的video或rawfile文件夹里放置媒体资源。<br>支持dataability://的路径前缀,用于访问通过Data Ability提供的视频路径,具体路径信息详见[Data Ability说明](../../ability/fa-dataability.md)<br/>**说明:**<br/>视频支持的规格是:mp4、mkv、webm、TS。 |
| src | string \| [Resource](ts-types.md) | 否 | 视频播放源的路径,支持本地视频路径和网络路径。<br>支持在resources下面的video或rawfile文件夹里放置媒体资源。<br>支持dataability://的路径前缀,用于访问通过Data Ability提供的视频路径,具体路径信息详见[Data Ability说明](../../ability/fa-dataability.md)<br/>**说明:**<br/>视频支持的规格是:mp4、mkv、webm、TS。 |
| currentProgressRate | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;PlaybackSpeed<sup>8+</sup> | 否 | 视频播放倍速。<br/>**说明:**<br/>number取值仅支持:0.75,1.0,1.25,1.75,2.0。<br/>默认值:1.0 \| PlaybackSpeed.Speed_Forward_1_00_X |
| previewUri | string&nbsp;\|&nbsp;PixelMap<sup>8+</sup>&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md) | 否 | 预览图片的路径。 |
| previewUri | string&nbsp;\|&nbsp;PixelMap<sup>8+</sup>&nbsp;\|&nbsp;[Resource](ts-types.md) | 否 | 预览图片的路径。 |
| controller | [VideoController](#videocontroller) | 否 | 控制器。 |
## PlaybackSpeed<sup>8+</sup>枚举说明
......
......@@ -21,10 +21,10 @@ show(value: {&nbsp;title: string&nbsp;|&nbsp;Resource,&nbsp;message: string&nbsp
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| title | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | 是 | - | 弹窗标题。 |
| message | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | 是 | - | 弹窗内容。 |
| title | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是 | - | 弹窗标题。 |
| message | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是 | - | 弹窗内容。 |
| autoCancel | boolean | 否 | true | 点击遮障层时,是否关闭弹窗。 |
| confirm | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 确认按钮的文本内容和点击回调。<br/>value:按钮文本内容。<br/>action:&nbsp;按钮选中时的回调。 |
| confirm | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 确认按钮的文本内容和点击回调。<br/>value:按钮文本内容。<br/>action:&nbsp;按钮选中时的回调。 |
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层关闭dialog时的回调。 |
| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
| offset | {<br/>dx:&nbsp;Length,<br/>dy:&nbsp;Length<br/>} | 否 | {<br/>dx:&nbsp;0,<br/>dy:&nbsp;0<br/>} | 弹窗相对alignment所在位置的偏移量。 |
......@@ -34,8 +34,8 @@ show(value: {&nbsp;title: string&nbsp;|&nbsp;Resource,&nbsp;message: string&nbsp
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ------------------------------------------------------------ | ---- | ----------------- |
| title | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | 是 | 选项的文本内容。 |
| icon | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | 否 | 选项的图标,默认无图标显示。 |
| title | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是 | 选项的文本内容。 |
| icon | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 否 | 选项的图标,默认无图标显示。 |
| action | ()=&gt;void | 是 | 选项选中的回调。 |
......
......@@ -15,26 +15,26 @@
## AlertDialogParamWithConfirm对象说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| title | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 否 | - | 弹窗标题。 |
| message | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 是 | - | 弹窗内容。 |
| title | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 否 | - | 弹窗标题。 |
| message | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 是 | - | 弹窗内容。 |
| autoCancel | boolean | 否 | true | 点击遮障层时,是否关闭弹窗。 |
| confirm | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>fontColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>backgroundColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 确认按钮的文本内容、文本色、按钮背景色和点击回调。 |
| confirm | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型),<br/>fontColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型),<br/>backgroundColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 确认按钮的文本内容、文本色、按钮背景色和点击回调。 |
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层关闭dialog时的回调。 |
| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
| offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
| offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
| gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。 |
## AlertDialogParamWithButtons对象说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| title | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 否 | - | 弹窗标题。 |
| message | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 是 | - | 弹窗内容。 |
| title | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 否 | - | 弹窗标题。 |
| message | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 是 | - | 弹窗内容。 |
| autoCancel | boolean | 否 | true | 点击遮障层时,是否关闭弹窗。 |
| primaryButton | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>fontColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>backgroundColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void;<br/>} | 否 | - | 按钮的文本内容、文本色、按钮背景色和点击回调。 |
| secondaryButton | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>fontColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>backgroundColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void;<br/>} | 否 | - | 按钮的文本内容、文本色、按钮背景色和点击回调。 |
| primaryButton | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型),<br/>fontColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型),<br/>backgroundColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void;<br/>} | 否 | - | 按钮的文本内容、文本色、按钮背景色和点击回调。 |
| secondaryButton | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型),<br/>fontColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型),<br/>backgroundColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void;<br/>} | 否 | - | 按钮的文本内容、文本色、按钮背景色和点击回调。 |
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层关闭dialog时的回调。 |
| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
| offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
| offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
| gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。 |
......
......@@ -21,7 +21,7 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, aut
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层退出时的回调。 |
| autoCancel | boolean | 否 | true | 是否允许点击遮障层退出。 |
| alignment | DialogAlignment | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
| offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
| offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
| customStyle | boolean | 否 | false | 弹窗容器样式是否自定义。 |
| gridCount<sup>8+</sup> | number | 否 | - | 弹窗宽度占栅格宽度的个数。 |
......
# 类型定义
## Resource
资源引用类型,用于设置组件属性的值。
可以通过`$r`或者`$rawfile`创建Resource类型对象,不可以修改Resource中的各属性的值。
- `$r('belonging.type.name')`
belonging:系统资源或者应用资源,相应的取值为'sys'和'app';
type:资源类型,支持'color'、'float'、'string'、'media'等;
name:资源名称,在资源定义时确定。
- `$rawfile('filename')`
filename:工程中resources/rawfile目录下的文件名称。
## Length
长度类型,用于描述尺寸单位。
| 类型 | 说明 |
| -------- | -------------------------------------- |
| string | 需要显式指定像素单位,如'10px',也可设置百分比字符串,如'100%'。 |
| number | 默认单位vp。 |
| Resource | 使用引入资源的方式,引入系统资源或者应用资源中的尺寸。 |
## ResourceStr<sup>8+</sup>
字符串类型,用于描述字符串入参可以使用的类型。
| 类型 | 说明 |
| -------- | ---------------------------- |
| string | 字符串类型。 |
| Resource | 使用引入资源的方式,引入系统资源或者应用资源中的字符串。 |
## Padding
内边距类型,用于描述组件不同方向的内边距。
| 名称 | 类型 | 必填 | 说明 |
| ------ | ------ | ---- | --------------- |
| top | Length | 否 | 组件内元素距组件顶部的尺寸。 |
| right | Length | 否 | 组件内元素距组件右边界的尺寸。 |
| bottom | Length | 否 | 组件内元素距组件底部的尺寸。 |
| left | Length | 否 | 组件内元素距组件左边界的尺寸。 |
## Margin
外边距类型,用于描述组件不同方向的外边距。
| 名称 | 类型 | 必填 | 说明 |
| ------ | ------ | ---- | --------------- |
| top | Length | 否 | 组件外元素距组件顶部的尺寸。 |
| right | Length | 否 | 组件外元素距组件右边界的尺寸。 |
| bottom | Length | 否 | 组件外元素距组件底部的尺寸。 |
| left | Length | 否 | 组件外元素距组件左边界的尺寸。 |
## EdgeWidths<sup>9+</sup>
边框宽度类型,用于描述组件边框不同方向的宽度。
| 名称 | 类型 | 必填 | 说明 |
| ------ | ------ | ---- | -------- |
| top | Length | 否 | 组件上边框宽度。 |
| right | Length | 否 | 组件右边框宽度。 |
| bottom | Length | 否 | 组件下边框宽度。 |
| left | Length | 否 | 组件左边框宽度。 |
## BorderRadiuses<sup>9+</sup>
圆角类型,用于描述组件边框圆角半径。
| 名称 | 类型 | 必填 | 说明 |
| ----------- | ------ | ---- | ---------- |
| topLeft | Length | 否 | 组件左上角圆角半径。 |
| topRight | Length | 否 | 组件右上角圆角半径。 |
| bottomLeft | Length | 否 | 组件左下角圆角半径。 |
| bottomRight | Length | 否 | 组件右下角圆角半径。 |
## EdgeColors<sup>9+</sup>
边框颜色,用于描述组件边框四条边的颜色。
| 名称 | 类型 | 必填 | 说明 |
| ------ | ------------- | ---- | -------- |
| top | ResourceColor | 否 | 组件上边框颜色。 |
| right | ResourceColor | 否 | 组件右边框颜色。 |
| bottom | ResourceColor | 否 | 组件下边框颜色。 |
| left | ResourceColor | 否 | 组件左边框颜色。 |
## EdgeStyles<sup>9+</sup>
边框样式,用于描述组件边框四条边的样式。
| 名称 | 类型 | 必填 | 说明 |
| ------ | ----------- | ---- | -------- |
| top | BorderStyle | 否 | 组件上边框样式。 |
| right | BorderStyle | 否 | 组件右边框样式。 |
| bottom | BorderStyle | 否 | 组件下边框样式。 |
| left | BorderStyle | 否 | 组件左边框样式。 |
## Offset
相对布局完成位置坐标偏移量。
| 名称 | 类型 | 必填 | 说明 |
| ---- | ------ | ---- | -------- |
| dx | Length | 是 | 水平方向偏移量。 |
| dy | Length | 是 | 竖直方向偏移量。 |
## ResourceColor<sup>8+</sup>
颜色类型,用于描述资源颜色类型。
| 类型 | 说明 |
| ---------------------------------------- | --------------------------- |
| [Color](../reference/arkui-ts/ts-appendix-enums.md#color) | 颜色枚举值。 |
| number | HEX格式颜色。 |
| string | rgb或者rgba格式颜色。 |
| Resource | 使用引入资源的方式,引入系统资源或者应用资源中的颜色。 |
## LengthConstrain
长度约束,用于对组件最大、最小长度做限制。
| 名称 | 类型 | 必填 | 说明 |
| --------- | ------ | ---- | ------- |
| minLength | Length | 是 | 组件最小长度。 |
| maxLength | Length | 是 | 组件最大长度。 |
## Font
设置文本样式。
| 名称 | 类型 | 必填 | 说明 |
| ------ | ---------------------------------------- | ---- | ---------------------------------------- |
| size | [Length](#length) | 否 | 设置文本尺寸,Length为number类型时,使用fp单位。 |
| weight | [FontWeight](../reference/arkui-ts/ts-appendix-enums.md#fontweight) \| number \| string | 否 | 设置文本的字体粗细,number类型取值[100, 900],取值间隔为100,默认为400,取值越大,字体越粗。 |
| family | string \| [Resource](#resource) | 否 | 设置文本的字体列表。使用多个字体,使用','进行分割,优先级按顺序生效。例如:'Arial, sans-serif'。 |
| style | [FontStyle](../reference/arkui-ts/ts-appendix-enums.md#fontstyle) | 否 | 设置文本的字体样式。 |
## Area<sup>8+</sup>
区域类型,用于存储元素所占区域信息
| 名称 | 类型 | 说明 |
| -------------- | ---------------------- | ------------------------------ |
| width | [Length](#length) | 目标元素的宽度,作为返回值时,类型为number,单位vp。 |
| height | [Length](#length) | 目标元素的高度,作为返回值时,类型为number,单位vp。 |
| position | [Position](#position8) | 目标元素左上角相对父元素左上角的位置。 |
| globalPosition | [Position](#position8) | 目标元素左上角相对页面左上角的位置。 |
## Position<sup>8+</sup>
位置类型,用于表示一个坐标点。
| 名称 | 类型 | 必填 | 说明 |
| ---- | ------ | ---- | --------------------------- |
| x | Length | 否 | x轴坐标,作为返回值时,类型为number,单位vp。 |
| y | Length | 否 | y轴坐标,作为返回值时,类型为number,单位vp。 |
## ConstraintSizeOptions
设置约束尺寸,组件布局时,进行尺寸范围限制。
| 名称 | 类型 | 必填 | 说明 |
| --------- | ------ | ---- | ------- |
| minWidth | Length | 否 | 元素最小宽度。 |
| maxWidth | Length | 否 | 元素最大宽度。 |
| minHeight | Length | 否 | 元素最小高度。 |
| maxHeight | Length | 否 | 元素最大高度。 |
## SizeOptions
设置宽高尺寸。
| 名称 | 类型 | 必填 | 说明 |
| ------ | ------ | ---- | ----- |
| width | Length | 否 | 元素宽度。 |
| height | Length | 否 | 元素高度。 |
## BorderOptions
边框属性集合,用于描述边框相关信息。
| 名称 | 类型 | 必填 | 说明 |
| ------ | ---------------------------------------- | ---- | ------- |
| width | Length \| EdgeWidths<sup>9+</sup> | 否 | 边框宽度。 |
| color | ResourceColor \| EdgeColors<sup>9+</sup> | 否 | 边框颜色。 |
| radius | Length \| BorderRadiuses<sup>9+</sup> | 否 | 边框圆角半径。 |
| style | [BorderStyle](../reference/arkui-ts/ts-appendix-enums.md#borderstyle) \| EdgeStyles<sup>9+</sup> | 否 | 边框样式。 |
## ColorFilter<sup>9+</sup>
创建具有4*5矩阵的颜色过滤器。
| 名称 | 类型 | 必填 | 描述 |
| ----------- | -------- | ---- | ---------------------------------------- |
| constructor | number[] | 是 | 创建具有4*5矩阵的颜色过滤器, 入参为[m*n]位于m行和n列中矩阵值, 矩阵是行优先的。 |
## CustomBuilder<sup>8+</sup>
组件属性方法参数可使用CustomBuilder类型来自定义UI描述。
| 名称 | 类型定义 | 描述 |
| ------------- | ---------------------- | ---------------------------------------- |
| CustomBuilder | ()&nbsp;=&gt;&nbsp;any | 这种方法类型必须使用@Builder装饰器修饰。具体用法见[@Builder](ts-component-based-builder.md)。 |
......@@ -12,10 +12,10 @@
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| backgroundColor | [ResourceColor](../../ui/ts-types.md) | 设置组件的背景色。 |
| backgroundImage | -&nbsp;src:&nbsp;[ResourceStr](../../ui/ts-types.md),<br/>-&nbsp;repeat?:&nbsp;[ImageRepeat](ts-appendix-enums.md#imagerepeat) | src:图片地址,支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。<br/>repeat:设置背景图片的重复样式,默认不重复。 |
| backgroundImageSize | {<br/>width?:&nbsp;[Length](../../ui/ts-types.md#length),<br/>height?:&nbsp;[Length](../../ui/ts-types.md#length)<br/>}&nbsp;\|&nbsp;[ImageSize](ts-appendix-enums.md#imagesize) | 设置背景图像的高度和宽度。当输入为{width:&nbsp;Length,&nbsp;height:&nbsp;Length}对象时,如果只设置一个属性,则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。<br/>默认值:ImageSize.Auto |
| backgroundImagePosition | {<br/>x?:&nbsp;[Length](../../ui/ts-types.md#length),<br/>y?:&nbsp;[Length](../../ui/ts-types.md#length)<br/>}&nbsp;\|&nbsp;[Alignment](ts-appendix-enums.md#alignment) | 设置背景图在组件中显示位置。<br/>默认值:<br/>{<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} |
| backgroundColor | [ResourceColor](ts-types.md) | 设置组件的背景色。 |
| backgroundImage | -&nbsp;src:&nbsp;[ResourceStr](ts-types.md),<br/>-&nbsp;repeat?:&nbsp;[ImageRepeat](ts-appendix-enums.md#imagerepeat) | src:图片地址,支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。<br/>repeat:设置背景图片的重复样式,默认不重复。 |
| backgroundImageSize | {<br/>width?:&nbsp;[Length](ts-types.md#length),<br/>height?:&nbsp;[Length](ts-types.md#length)<br/>}&nbsp;\|&nbsp;[ImageSize](ts-appendix-enums.md#imagesize) | 设置背景图像的高度和宽度。当输入为{width:&nbsp;Length,&nbsp;height:&nbsp;Length}对象时,如果只设置一个属性,则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。<br/>默认值:ImageSize.Auto |
| backgroundImagePosition | {<br/>x?:&nbsp;[Length](ts-types.md#length),<br/>y?:&nbsp;[Length](ts-types.md#length)<br/>}&nbsp;\|&nbsp;[Alignment](ts-appendix-enums.md#alignment) | 设置背景图在组件中显示位置。<br/>默认值:<br/>{<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} |
## 示例
......
......@@ -12,10 +12,10 @@
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| source | string \| [Resource](../../ui/ts-types.md#resource类型) \| [linearGradient](ts-universal-attributes-gradient-color.md) | 边框图源或者渐变色设置。 |
| slice | [Length](../../ui/ts-types.md#length)\| EdgeWidth | 设置图片边框切割宽度。<br/>默认值:0 |
| width | [Length](../../ui/ts-types.md#length)\| EdgeWidth | 设置图片边框宽度。<br/>默认值:0 |
| outset | [Length](../../ui/ts-types.md#length)\| EdgeWidth | 设置边框图片向外延伸距离。<br/>默认值:0 |
| source | string \| [Resource](ts-types.md#resource类型) \| [linearGradient](ts-universal-attributes-gradient-color.md) | 边框图源或者渐变色设置。 |
| slice | [Length](ts-types.md#length)\| EdgeWidth | 设置图片边框切割宽度。<br/>默认值:0 |
| width | [Length](ts-types.md#length)\| EdgeWidth | 设置图片边框宽度。<br/>默认值:0 |
| outset | [Length](ts-types.md#length)\| EdgeWidth | 设置边框图片向外延伸距离。<br/>默认值:0 |
| RepeatMode | RepeatMode | 设置边框图片的重复方式。<br/>默认值:RepeatMode.Stretch |
| fill | boolean | 设置边框图片中心填充。<br/>默认值:false |
## EdgeWidth枚举说明
......@@ -26,10 +26,10 @@
| 名称 | 参数类型 | 必填 |描述 |
| -------- | -------- |-------- |-------- |
| left | [Length](../../ui/ts-types.md#length) | 否 | 左侧距离参数。 |
| right | [Length](../../ui/ts-types.md#length) | 否 | 右侧距离参数。 |
| top | [Length](../../ui/ts-types.md#length) | 否 | 上侧距离参数。 |
| bottom | [Length](../../ui/ts-types.md#length) | 否 | 下侧距离参数。 |
| left | [Length](ts-types.md#length) | 否 | 左侧距离参数。 |
| right | [Length](ts-types.md#length) | 否 | 右侧距离参数。 |
| top | [Length](ts-types.md#length) | 否 | 上侧距离参数。 |
| bottom | [Length](ts-types.md#length) | 否 | 下侧距离参数。 |
## RepeatMode枚举说明
......
......@@ -14,11 +14,11 @@
| 名称 | 参数类型 | 描述 |
| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| border | {<br/>width?:&nbsp;[Length](../../ui/ts-types.md#长度类型)&nbsp;\|&nbsp;EdgeWidth<sup>9+</sup>,<br/>color?: &nbsp;[ResourceColor](../../ui/ts-types.md)&nbsp;\|&nbsp;EdgeColor<sup>9+</sup>,<br/>radius?: &nbsp;[Length](../../ui/ts-types.md#长度类型)&nbsp;\|&nbsp;BorderRadiuses<sup>9+</sup>,<br/>style?:&nbsp;[BorderStyle](ts-appendix-enums.md#borderstyle)&nbsp;\|&nbsp;EdgeStyle<sup>9+</sup><br/>} | 统一边框样式设置接口。<br/>-&nbsp;width:设置边框宽度。<br/>-&nbsp;color:设置边框颜色。<br/>-&nbsp;radius:设置边框圆角半径。<br/>-&nbsp;style:设置边框样式。 |
| border | {<br/>width?:&nbsp;[Length](ts-types.md#长度类型)&nbsp;\|&nbsp;EdgeWidth<sup>9+</sup>,<br/>color?: &nbsp;[ResourceColor](ts-types.md)&nbsp;\|&nbsp;EdgeColor<sup>9+</sup>,<br/>radius?: &nbsp;[Length](ts-types.md#长度类型)&nbsp;\|&nbsp;BorderRadiuses<sup>9+</sup>,<br/>style?:&nbsp;[BorderStyle](ts-appendix-enums.md#borderstyle)&nbsp;\|&nbsp;EdgeStyle<sup>9+</sup><br/>} | 统一边框样式设置接口。<br/>-&nbsp;width:设置边框宽度。<br/>-&nbsp;color:设置边框颜色。<br/>-&nbsp;radius:设置边框圆角半径。<br/>-&nbsp;style:设置边框样式。 |
| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) \| EdgeStyle<sup>9+</sup> | 设置元素的边框样式。<br/>默认值:BorderStyle.Solid |
| borderWidth | [Length](../../ui/ts-types.md) \| EdgeWidth<sup>9+</sup> | 设置元素的边框宽度。 |
| borderColor | [ResourceColor](../../ui/ts-types.md) \| EdgeColor<sup>9+</sup> | 设置元素的边框颜色。 |
| borderRadius | [Length](../../ui/ts-types.md) \| BorderRadiuses<sup>9+</sup> | 设置元素的边框圆角半径。 |
| borderWidth | [Length](ts-types.md) \| EdgeWidth<sup>9+</sup> | 设置元素的边框宽度。 |
| borderColor | [ResourceColor](ts-types.md) \| EdgeColor<sup>9+</sup> | 设置元素的边框颜色。 |
| borderRadius | [Length](ts-types.md) \| BorderRadiuses<sup>9+</sup> | 设置元素的边框圆角半径。 |
## EdgeWidth<sup>9+</sup>对象说明
......@@ -26,10 +26,10 @@
| 名称 | 参数类型 | 必填 | 描述 |
| ------ | ------------------------------------- | ---- | -------------- |
| left | [Length](../../ui/ts-types.md#length) | 否 | 左侧边框宽度。 |
| right | [Length](../../ui/ts-types.md#length) | 否 | 右侧边框宽度。 |
| top | [Length](../../ui/ts-types.md#length) | 否 | 上侧边框宽度。 |
| bottom | [Length](../../ui/ts-types.md#length) | 否 | 下侧边框宽度。 |
| left | [Length](ts-types.md#length) | 否 | 左侧边框宽度。 |
| right | [Length](ts-types.md#length) | 否 | 右侧边框宽度。 |
| top | [Length](ts-types.md#length) | 否 | 上侧边框宽度。 |
| bottom | [Length](ts-types.md#length) | 否 | 下侧边框宽度。 |
## EdgeColor<sup>9+</sup>对象说明
......@@ -37,10 +37,10 @@
| 名称 | 参数类型 | 必填 | 描述 |
| ------ | ------------------------------------- | ---- | -------------- |
| left | [ResourceColor](../../ui/ts-types.md) | 否 | 左侧边框颜色。 |
| right | [ResourceColor](../../ui/ts-types.md) | 否 | 右侧边框颜色。 |
| top | [ResourceColor](../../ui/ts-types.md) | 否 | 上侧边框颜色。 |
| bottom | [ResourceColor](../../ui/ts-types.md) | 否 | 下侧边框颜色。 |
| left | [ResourceColor](ts-types.md) | 否 | 左侧边框颜色。 |
| right | [ResourceColor](ts-types.md) | 否 | 右侧边框颜色。 |
| top | [ResourceColor](ts-types.md) | 否 | 上侧边框颜色。 |
| bottom | [ResourceColor](ts-types.md) | 否 | 下侧边框颜色。 |
## BorderRadiuses<sup>9+</sup>对象说明
......@@ -48,10 +48,10 @@
| 名称 | 参数类型 | 必填 | 描述 |
| ----------- | ------------------------------------- | ---- | ---------------- |
| topLeft | [Length](../../ui/ts-types.md#length) | 否 | 左上角圆角半径。 |
| topRight | [Length](../../ui/ts-types.md#length) | 否 | 右上角圆角半径。 |
| bottomLeft | [Length](../../ui/ts-types.md#length) | 否 | 左下角圆角半径。 |
| bottomRight | [Length](../../ui/ts-types.md#length) | 否 | 右下角圆角半径。 |
| topLeft | [Length](ts-types.md#length) | 否 | 左上角圆角半径。 |
| topRight | [Length](ts-types.md#length) | 否 | 右上角圆角半径。 |
| bottomLeft | [Length](ts-types.md#length) | 否 | 左下角圆角半径。 |
| bottomRight | [Length](ts-types.md#length) | 否 | 右下角圆角半径。 |
## EdgeStyle<sup>9+</sup>对象说明
......
......@@ -17,9 +17,9 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| linearGradient | {<br/>angle?:&nbsp;number \| string,<br/>direction?:&nbsp;[GradientDirection](ts-appendix-enums.md#gradientdirection),<br/>colors:&nbsp;Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br/>, repeating?:&nbsp;boolean<br/>} | - | 线性渐变。<br/>angle:&nbsp;线性渐变的角度。<br/>direction:&nbsp;线性渐变的方向,设置angle后不生效。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| sweepGradient | {<br/>center:&nbsp;Point,<br/>start?:&nbsp;number \| string,<br/>end?:&nbsp;number \| string,<br/>colors:&nbsp;Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br/>, repeating?:&nbsp;boolean<br/>} | - | 角度渐变。<br/>center:为角度渐变的中心点。<br/>start:角度渐变的起点。<br/>end:角度渐变的终点。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| radialGradient | {<br/>center:&nbsp;Point,<br/>radius:&nbsp;number \| string,<br/>colors:&nbsp;Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br/>, repeating:&nbsp;boolean<br/>} | - | 径向渐变。<br/>center:径向渐变的中心点。<br/>radius:径向渐变的半径。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| linearGradient | {<br/>angle?:&nbsp;number \| string,<br/>direction?:&nbsp;[GradientDirection](ts-appendix-enums.md#gradientdirection),<br/>colors:&nbsp;Array&lt;[ColorStop](ts-types.md)&gt;<br/>, repeating?:&nbsp;boolean<br/>} | - | 线性渐变。<br/>angle:&nbsp;线性渐变的角度。<br/>direction:&nbsp;线性渐变的方向,设置angle后不生效。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| sweepGradient | {<br/>center:&nbsp;Point,<br/>start?:&nbsp;number \| string,<br/>end?:&nbsp;number \| string,<br/>colors:&nbsp;Array&lt;[ColorStop](ts-types.md)&gt;<br/>, repeating?:&nbsp;boolean<br/>} | - | 角度渐变。<br/>center:为角度渐变的中心点。<br/>start:角度渐变的起点。<br/>end:角度渐变的终点。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| radialGradient | {<br/>center:&nbsp;Point,<br/>radius:&nbsp;number \| string,<br/>colors:&nbsp;Array&lt;[ColorStop](ts-types.md)&gt;<br/>, repeating:&nbsp;boolean<br/>} | - | 径向渐变。<br/>center:径向渐变的中心点。<br/>radius:径向渐变的半径。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
## 示例
......
......@@ -18,13 +18,13 @@
| ----------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| blur | number | - | 为当前组件添加内容模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。 |
| backdropBlur | number | - | 为当前组件添加背景模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。 |
| shadow | {<br/>radius:&nbsp;number \| [Resource](../../ui/ts-types.md#resource),<br/>color?:&nbsp;Color \| string \| Resource,<br/>offsetX?:&nbsp;number \| Resource,<br/>offsetY?:&nbsp;number \| Resource<br/>} | - | 为当前组件添加阴影效果,入参为模糊半径(必填)、阴影的颜色(可选,默认为灰色)、X轴的偏移量(可选,默认为0),Y轴的偏移量(可选,默认为0),偏移量单位为px。 |
| shadow | {<br/>radius:&nbsp;number \| [Resource](ts-types.md#resource),<br/>color?:&nbsp;Color \| string \| Resource,<br/>offsetX?:&nbsp;number \| Resource,<br/>offsetY?:&nbsp;number \| Resource<br/>} | - | 为当前组件添加阴影效果,入参为模糊半径(必填)、阴影的颜色(可选,默认为灰色)、X轴的偏移量(可选,默认为0),Y轴的偏移量(可选,默认为0),偏移量单位为px。 |
| grayscale | number | 0.0 | 为当前组件添加灰度效果。值定义为灰度转换的比例,入参1.0则完全转为灰度图像,入参则0.0图像无变化,入参在0.0和1.0之间时,效果呈线性变化。(百分比) |
| brightness | number | 1.0 | 为当前组件添加高光效果,入参为高光比例,值为1时没有效果,小于1时亮度变暗,0为全黑;大于1时亮度增加,数值越大亮度越大。 |
| saturate | number | 1.0 | 为当前组件添加饱和度效果,饱和度为颜色中的含色成分和消色成分(灰)的比例,入参为1时,显示原图像,大于1时含色成分越大,饱和度越大;小于1时消色成分越大,饱和度越小。(百分比) |
| contrast | number | 1.0 | 为当前组件添加对比度效果,入参为对比度的值,值为1时,显示原图;大于1时,值越大对比度越高,图像越清晰醒目;小于1时,值越小对比度越低;当对比度为0时,图像变为全灰。(百分比) |
| invert | number | 0 | 反转输入的图像。入参为图像反转的比例。值为1时完全反转。值为0则图像无变化。(百分比) |
| colorBlend&nbsp;<sup>8+</sup> | Color&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | - | 为当前组件添加颜色叠加效果,入参为叠加的颜色。 |
| colorBlend&nbsp;<sup>8+</sup> | Color&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | - | 为当前组件添加颜色叠加效果,入参为叠加的颜色。 |
| sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的,值为0图像无变化。&nbsp;(百分比) |
| hueRotate | number\|string | '0deg' | 色相旋转效果,输入参数为旋转角度。 |
......
......@@ -14,9 +14,9 @@
| -------- | -------- | -------- |
| align | [Alignment](ts-appendix-enums.md#alignment) | 设置元素内容的对齐方式,只有当设置的width和height大小超过元素本身内容大小时生效。<br/>默认值:Alignment.Center |
| direction | [Direction](ts-appendix-enums.md#direction) | 设置元素水平方向的布局。<br/>默认值:Direction.Auto |
| position | {<br/>x:&nbsp;[Length](../../ui/ts-types.md#length),<br/>y:&nbsp;[Length](../../ui/ts-types.md#length)<br/>} | 使用绝对定位,设置元素锚点相对于父容器顶部起点偏移位置。在布局容器中,设置该属性不影响父容器布局,仅在绘制时进行位置调整。 |
| markAnchor | {<br/>x:&nbsp;[Length](../../ui/ts-types.md#length),<br/>y:&nbsp;[Length](../../ui/ts-types.md#length)<br/>} | 设置元素在位置定位时的锚点,以元素顶部起点作为基准点进行偏移。<br/>默认值:<br/>{<br/>x: 0,<br/>y: 1<br/>} |
| offset | {<br/>x:&nbsp;[Length](../../ui/ts-types.md#length),<br/>y:&nbsp;[Length](../../ui/ts-types.md#length)<br/>} | 相对布局完成位置坐标偏移量,设置该属性,不影响父容器布局,仅在绘制时进行位置调整。<br/>默认值:<br/>{<br/>x: 0,<br/>y: 1<br/>} |
| position | {<br/>x:&nbsp;[Length](ts-types.md#length),<br/>y:&nbsp;[Length](ts-types.md#length)<br/>} | 使用绝对定位,设置元素锚点相对于父容器顶部起点偏移位置。在布局容器中,设置该属性不影响父容器布局,仅在绘制时进行位置调整。 |
| markAnchor | {<br/>x:&nbsp;[Length](ts-types.md#length),<br/>y:&nbsp;[Length](ts-types.md#length)<br/>} | 设置元素在位置定位时的锚点,以元素顶部起点作为基准点进行偏移。<br/>默认值:<br/>{<br/>x: 0,<br/>y: 1<br/>} |
| offset | {<br/>x:&nbsp;[Length](ts-types.md#length),<br/>y:&nbsp;[Length](ts-types.md#length)<br/>} | 相对布局完成位置坐标偏移量,设置该属性,不影响父容器布局,仅在绘制时进行位置调整。<br/>默认值:<br/>{<br/>x: 0,<br/>y: 1<br/>} |
| alignRules<sup>9+</sup> | {<br/>left?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>right?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>middle?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>top?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br/>bottom?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br/>center?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) }<br/>} | 指定相对容器的对齐规则。<br/>-&nbsp;left:设置左对齐参数。<br/>-&nbsp;right:设置右对齐参数。<br/>-&nbsp;middle:设置中间对齐的参数。<br/>-&nbsp;top:设置顶部对齐的参数。<br/>-&nbsp;bottom:设置底部对齐的参数。<br/>-&nbsp;center:设置中心对齐的参数。<br/>**说明:**<br/>-&nbsp;anchor:设置作为锚点的组件的id值。<br>-&nbsp;align:设置相对于锚点组件的对齐方式。 |
......
......@@ -12,8 +12,8 @@
| 名称 | 参数类型 | 描述 |
| ---------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| bindMenu | Array<MenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md) | 给组件绑定菜单,点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
| bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](../../ui/ts-types.md),<br>responseType:&nbsp;[ResponseType](ts-appendix-enums.md#responsetype8) | 给组件绑定菜单,触发方式为长按或者右键点击,弹出菜单项需要自定义。 |
| bindMenu | Array<MenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md) | 给组件绑定菜单,点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
| bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](ts-types.md),<br>responseType:&nbsp;[ResponseType](ts-appendix-enums.md#responsetype8) | 给组件绑定菜单,触发方式为长按或者右键点击,弹出菜单项需要自定义。 |
## MenuItem
......
......@@ -17,7 +17,7 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| opacity | number&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 元素的不透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。 |
| opacity | number&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 元素的不透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。 |
## 示例
......
......@@ -20,7 +20,7 @@
| -------- | -------- | -------- | -------- |
| message | string | 是 | 弹窗信息内容。 |
| placementOnTop | boolean | 否 | 是否在组件上方显示,默认值为false。 |
| arrowOffset<sup>9+</sup> | [Length](../../ui/ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时,默认居左;箭头在气泡左右侧时,默认居上。 |
| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时,默认居左;箭头在气泡左右侧时,默认居上。 |
| primaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 第一个按钮。<br/>value:&nbsp;弹窗里主按钮的文本。<br/>action:&nbsp;点击主按钮的回调函数。 |
| secondaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 第二个按钮。<br/>value:&nbsp;弹窗里辅助按钮的文本。<br/>action:&nbsp;点击辅助按钮的回调函数。 |
| onStateChange | (event:&nbsp;{&nbsp;isVisible:&nbsp;boolean&nbsp;})&nbsp;=&gt;&nbsp;void | 否 | 弹窗状态变化事件回调,参数isVisible为弹窗当前的显示状态。 |
......@@ -29,11 +29,11 @@
| 名称 | 类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| builder | [CustomBuilder](../../ui/ts-types.md) | 是 | 提示气泡内容的构造器。 |
| builder | [CustomBuilder](ts-types.md) | 是 | 提示气泡内容的构造器。 |
| placement | [Placement](ts-appendix-enums.md#placement8) | 否 | 气泡组件优先显示的位置,当前位置显示不下时,会自动调整位置。<br/>默认值:Placement.Bottom |
| arrowOffset<sup>9+</sup> | [Length](../../ui/ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时,默认居左;箭头在气泡左右侧时,默认居上。 |
| maskColor | [ResourceColor](../../ui/ts-types.md) | 否 | 提示气泡遮障层的颜色。 |
| popupColor | [ResourceColor](../../ui/ts-types.md) | 否 | 提示气泡的颜色。 |
| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时,默认居左;箭头在气泡左右侧时,默认居上。 |
| maskColor | [ResourceColor](ts-types.md) | 否 | 提示气泡遮障层的颜色。 |
| popupColor | [ResourceColor](ts-types.md) | 否 | 提示气泡的颜色。 |
| enableArrow | boolean | 否 | 是否显示箭头。<br/>从API Version 9开始,如果箭头所在方位侧的气泡长度不足以显示下箭头,则会默认不显示箭头。比如:placement设置为Left,但气泡高度小于箭头的宽度(32vp),则实际不会显示箭头。<br/>默认值:true |
| autoCancel | boolean | 否 | 页面有操作时,是否自动关闭气泡<br/>默认值:true |
| onStateChange | (event:&nbsp;{&nbsp;isVisible:&nbsp;boolean&nbsp;})&nbsp;=&gt;&nbsp;void | 否 | 弹窗状态变化事件回调,参数为弹窗当前的显示状态。 |
......
......@@ -18,11 +18,11 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| fontColor | [ResourceColor](../../ui/ts-types.md) | - | 设置文本颜色。 |
| fontSize | Length&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | - | 设置文本尺寸,Length为number类型时,使用fp单位。 |
| fontColor | [ResourceColor](ts-types.md) | - | 设置文本颜色。 |
| fontSize | Length&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | - | 设置文本尺寸,Length为number类型时,使用fp单位。 |
| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | FontStyle.Normal | 设置文本的字体样式。 |
| fontWeight | number&nbsp;\|&nbsp;[FontWeight](ts-appendix-enums.md#fontweight)&nbsp;\|&nbsp;string | FontWeight.FontWeightNormal | 设置文本的字体粗细,number类型取值[100,&nbsp;900],取值间隔为100,默认为400,取值越大,字体越粗。<br/>提供常用枚举值,参考:FontWeight枚举说明。 |
| fontFamily | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | - | 设置文本的字体列表。使用多个字体,使用','进行分割,优先级按顺序生效。例如:'Arial,&nbsp;sans-serif'。 |
| fontFamily | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | - | 设置文本的字体列表。使用多个字体,使用','进行分割,优先级按顺序生效。例如:'Arial,&nbsp;sans-serif'。 |
## 示例
......
......@@ -18,10 +18,10 @@
### Rectangle对象说明
| 名称 | 类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
| x | [Length](../../ui/ts-types.md) | 否 | 触摸点相对于组件本身左边沿的X坐标。<br/>默认值:0vp |
| y | [Length](../../ui/ts-types.md) | 否 | 触摸点相对于组件本身左边沿的Y坐标。<br/>默认值:0vp |
| width | [Length](../../ui/ts-types.md) | 否 | 触摸热区范围的宽度。<br/>默认值:100% |
| height | [Length](../../ui/ts-types.md) | 否 | 触摸热区范围的高度。<br/>默认值:100% |
| x | [Length](ts-types.md) | 否 | 触摸点相对于组件本身左边沿的X坐标。<br/>默认值:0vp |
| y | [Length](ts-types.md) | 否 | 触摸点相对于组件本身左边沿的Y坐标。<br/>默认值:0vp |
| width | [Length](ts-types.md) | 否 | 触摸热区范围的宽度。<br/>默认值:100% |
| height | [Length](ts-types.md) | 否 | 触摸热区范围的高度。<br/>默认值:100% |
> **说明:**
>
......
......@@ -15,7 +15,7 @@
| 名称 | 支持冒泡 | 功能描述 |
| ---------------------------------------- | ---- | ---------------------------------------- |
| onAreaChange(event:&nbsp;(oldValue:&nbsp;Area,&nbsp;newValue:&nbsp;Area)&nbsp;=&gt;&nbsp;void) | 否 | 组件区域变化时触发该回调,Area类型描述见[Area](../../ui/ts-types.md#area8)。 |
| onAreaChange(event:&nbsp;(oldValue:&nbsp;Area,&nbsp;newValue:&nbsp;Area)&nbsp;=&gt;&nbsp;void) | 否 | 组件区域变化时触发该回调,Area类型描述见[Area](ts-types.md#area8)。 |
## 示例
......
......@@ -26,7 +26,7 @@
## EventTarget<sup>8+</sup>对象说明
| 名称 | 参数类型 | 描述 |
| ---- | ----------------- | ---------- |
| area | [Area](../../ui/ts-types.md#area8) | 目标元素的区域信息。 |
| area | [Area](ts-types.md#area8) | 目标元素的区域信息。 |
......
......@@ -9,7 +9,7 @@
| 名称 | 支持冒泡 | 功能描述 |
| ---------------------------------------- | ---- | ---------------------------------------- |
| onDragStart(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;&nbsp;[CustomBuilder](../../ui/ts-types.md#custombuilder8)) \| DragItemInfo | 否 | 第一次拖拽此事件绑定的组件时,触发回调。<br/>- event:拖拽事件信息,包括拖拽点坐标。<br/>- extraParams:拖拽事件额外信息,详见extraParam类型描述。<br/>返回值:当前跟手效果所拖拽的对象,用于显示拖拽时的提示组件。<br/>长按150毫秒(ms)可触发拖拽事件。优先级:长按手势配置时间小于等于150毫秒(ms)时,长按手势优先触发,否则拖拽事件优先触发。 |
| onDragStart(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;&nbsp;[CustomBuilder](ts-types.md#custombuilder8)) \| DragItemInfo | 否 | 第一次拖拽此事件绑定的组件时,触发回调。<br/>- event:拖拽事件信息,包括拖拽点坐标。<br/>- extraParams:拖拽事件额外信息,详见extraParam类型描述。<br/>返回值:当前跟手效果所拖拽的对象,用于显示拖拽时的提示组件。<br/>长按150毫秒(ms)可触发拖拽事件。优先级:长按手势配置时间小于等于150毫秒(ms)时,长按手势优先触发,否则拖拽事件优先触发。 |
| onDragEnter(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽进入组件范围内时,触发回调。<br/>- event:拖拽事件信息,包括拖拽点坐标。<br/>- extraParams:拖拽事件额外信息,详见extraParam类型描述。<br/>当监听了onDrop事件时,此事件才有效。 |
| onDragMove(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽在组件范围内移动时,触发回调。<br/>- event:拖拽事件信息,包括拖拽点坐标。<br/>- extraParams:拖拽事件额外信息,详见extraParam类型描述。<br/>当监听了onDrop事件时,此事件才有效。 |
| onDragLeave(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽离开组件范围内时,触发回调。<br/>- event:拖拽事件信息,包括拖拽点坐标。<br/>- extraParams:拖拽事件额外信息,详见extraParam类型描述。<br/>当监听了onDrop事件时,此事件才有效。 |
......@@ -19,7 +19,7 @@
| 属性名称 | 属性类型 | 必填 | 描述 |
| ------------- | ------ | ------- |--------------------------------- |
| pixelMap | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 否 | 设置拖拽过程中显示的图片。 |
| builder | [CustomBuilder](../../ui/ts-types.md#custombuilder8) | 否 | 使用自定义生成器进行绘图,如果设置了pixelMap,则忽略此值。 |
| builder | [CustomBuilder](ts-types.md#custombuilder8) | 否 | 使用自定义生成器进行绘图,如果设置了pixelMap,则忽略此值。 |
| extraInfo | string | 否 | 拖拽项的描述。 |
......
# 原子布局
在屏幕形态和规格不同等情况下,布局效果需要实现自适应,因此系统提供了面向不同屏幕尺寸界面自适应适配的布局能力,称为原子布局。设计师可以考虑使用原子能力,定义元素在不同形态的尺寸界面上体现的自适应规则。开发者可以使用原子布局能力,快速实现让应用在多形态屏幕上有与设计效果相匹配的自适应效果。
在屏幕形态和规格不同等情况下,布局效果需要实现自适应,因此系统提供了面向不同屏幕尺寸的自适应布局能力,称为原子布局。设计师可以考虑使用原子能力,定义元素在不同形态的尺寸界面上体现的自适应规则。开发者可以使用原子布局能力,快速实现让应用在多形态屏幕上有与设计效果相匹配的自适应效果。
> **说明:**
......@@ -12,24 +12,24 @@
在非折行flex布局基础上,增加了显示优先级标记,可以调整组件内元素水平/垂直方向的显示优先级,根据当前组件容器的可用空间来显示内容。
| 样式 | 类型 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- |
| display-index | number | 0 | 适用于div等支持flex布局的容器组件中的子组件上,当容器组件在flex主轴上尺寸不足以显示全部内容时,按照display-index值从小到大的顺序进行隐藏,具有相同display-index值的组件同时隐藏,默认值为0,表示隐藏。 |
| 样式 | 类型 | 默认值 | 说明 |
| ------------- | ------ | ---- | ---------------------------------------- |
| display-index | number | 0 | 适用于div等支持flex布局的容器组件中的子组件上,当容器组件在flex主轴上尺寸不足以显示全部内容时,按照display-index值从小到大的顺序进行隐藏,具有相同display-index值的组件同时隐藏,默认值为0,表示隐藏。 |
## 占比能力
在非折行的flex布局中,定义了占比能力的组件,保证指定元素始终在容器的某一个比例空间中进行布局。
| 样式 | 类型 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- |
| flex-weight | number | - | 指明当前元素在flex主轴方向上尺寸权值,当且仅当容器组件中所有节点均设置此属性时生效,当前元素尺寸为:&nbsp;容器主轴尺寸&nbsp;\*&nbsp;当前权值&nbsp;/&nbsp;所有子元素权值和。 |
| 样式 | 类型 | 默认值 | 说明 |
| ----------- | ------ | ---- | ---------------------------------------- |
| flex-weight | number | - | 指明当前元素在flex主轴方向上尺寸权值,当且仅当容器组件中所有节点均设置此属性时生效,当前元素尺寸为:&nbsp;容器主轴尺寸&nbsp;\*&nbsp;当前权值&nbsp;/&nbsp;所有子元素权值和。 |
## 固定比例
定义了组件固定比例调整尺寸的能力。
| 样式 | 类型 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- |
| aspect-ratio | number | - | &nbsp;接受任意大于0的浮点值,定义为该节点的宽度与高度比,设置该属性后,该元素尺寸宽高比按照此属性值进行调整。<br/>&nbsp;遵守最大值与最小值的限制。<br/>&nbsp;在flex布局中,主轴尺寸先进行调整,后根据该尺寸调整交叉轴。 |
| 样式 | 类型 | 默认值 | 说明 |
| ------------ | ------ | ---- | ---------------------------------------- |
| aspect-ratio | number | - | &nbsp;接受任意大于0的浮点值,定义为该节点的宽度与高度比,设置该属性后,该元素尺寸宽高比按照此属性值进行调整。<br/>&nbsp;遵守最大值与最小值的限制。<br/>&nbsp;在flex布局中,主轴尺寸先进行调整,后根据该尺寸调整交叉轴。 |
......@@ -12,7 +12,6 @@
- [资源文件的分类](ui-ts-basic-resource-file-categories.md)
- [资源访问](ts-resource-access.md)
- [像素单位](ts-pixel-units.md)
- [类型定义](ts-types.md)
- 声明式语法
- [描述规范使用说明](ts-syntax-intro.md)
- 通用UI描述规范
......
# 类型定义
## Resource
资源引用类型,用于设置组件属性的值。
可以通过`$r`或者`$rawfile`创建Resource类型对象,不可以修改Resource中的各属性的值。
- `$r('belonging.type.name')`
belonging:系统资源或者应用资源,相应的取值为'sys'和'app';
type:资源类型,支持'color'、'float'、'string'、'media'等;
name:资源名称,在资源定义时确定。
- `$rawfile('filename')`
filename:工程中resources/rawfile目录下的文件名称。
## Length
长度类型,用于描述尺寸单位。
| 类型 | 说明 |
| -------- | ------------------------------------------------------------ |
| string | 需要显式指定像素单位,如'10px',也可设置百分比字符串,如'100%'。 |
| number | 默认单位vp。 |
| Resource | 使用引入资源的方式,引入系统资源或者应用资源中的尺寸。 |
## ResourceStr<sup>8+</sup>
字符串类型,用于描述字符串入参可以使用的类型。
| 类型 | 说明 |
| -------- | --------------------------------------------------- |
| string | 字符串类型。 |
| Resource | 使用引入资源的方式,引入系统资源或者应用资源中的字符串。 |
## Padding
内边距类型,用于描述组件不同方向的内边距。
| 名称 | 类型 | 必填 | 说明 |
| ------- | ------ | ---- |------------------------ |
| top | Length | 否 | 组件内元素距组件顶部的尺寸。 |
| right | Length | 否 | 组件内元素距组件右边界的尺寸。 |
| bottom | Length | 否 | 组件内元素距组件底部的尺寸。 |
| left | Length | 否 | 组件内元素距组件左边界的尺寸。 |
## Margin
外边距类型,用于描述组件不同方向的外边距。
| 名称 | 类型 | 必填 | 说明 |
| ------- | ------ | ---- |------------------------ |
| top | Length | 否 | 组件外元素距组件顶部的尺寸。 |
| right | Length | 否 | 组件外元素距组件右边界的尺寸。 |
| bottom | Length | 否 | 组件外元素距组件底部的尺寸。 |
| left | Length | 否 | 组件外元素距组件左边界的尺寸。 |
## EdgeWidths<sup>9+</sup>
边框宽度类型,用于描述组件边框不同方向的宽度。
| 名称 | 类型 | 必填 | 说明 |
| ------- | ------ | ---- |--------------------- |
| top | Length | 否 | 组件上边框宽度。 |
| right | Length | 否 | 组件右边框宽度。 |
| bottom | Length | 否 | 组件下边框宽度。 |
| left | Length | 否 | 组件左边框宽度。 |
## BorderRadiuses<sup>9+</sup>
圆角类型,用于描述组件边框圆角半径。
| 名称 | 类型 | 必填 | 说明 |
| ----------- | ------ | ---- |--------------------- |
| topLeft | Length | 否 | 组件左上角圆角半径。 |
| topRight | Length | 否 | 组件右上角圆角半径。 |
| bottomLeft | Length | 否 | 组件左下角圆角半径。 |
| bottomRight | Length | 否 | 组件右下角圆角半径。 |
## EdgeColors<sup>9+</sup>
边框颜色,用于描述组件边框四条边的颜色。
| 名称 | 类型 | 必填 | 说明 |
| ------- | --------------- | ---- |--------------------- |
| top | ResourceColor | 否 | 组件上边框颜色。 |
| right | ResourceColor | 否 | 组件右边框颜色。 |
| bottom | ResourceColor | 否 | 组件下边框颜色。 |
| left | ResourceColor | 否 | 组件左边框颜色。 |
## EdgeStyles<sup>9+</sup>
边框样式,用于描述组件边框四条边的样式。
| 名称 | 类型 | 必填 | 说明 |
| ------- | ------------- | ---- |--------------------- |
| top | BorderStyle | 否 | 组件上边框样式。 |
| right | BorderStyle | 否 | 组件右边框样式。 |
| bottom | BorderStyle | 否 | 组件下边框样式。 |
| left | BorderStyle | 否 | 组件左边框样式。 |
## Offset
相对布局完成位置坐标偏移量。
| 名称 | 类型 | 必填 | 说明 |
| -------- | ------ | ---- |--------------------- |
| dx | Length | 是 | 水平方向偏移量。 |
| dy | Length | 是 | 竖直方向偏移量。 |
## ResourceColor<sup>8+</sup>
颜色类型,用于描述资源颜色类型。
| 类型 | 说明 |
| -------- | ----------------------- |
| [Color](../reference/arkui-ts/ts-appendix-enums.md#color) | 颜色枚举值。 |
| number | HEX格式颜色。 |
| string | rgb或者rgba格式颜色。 |
| Resource | 使用引入资源的方式,引入系统资源或者应用资源中的颜色。 |
## LengthConstrain
长度约束,用于对组件最大、最小长度做限制。
| 名称 | 类型 | 必填 | 说明 |
| --------- | ------ | ---- |---------------- |
| minLength | Length | 是 | 组件最小长度。 |
| maxLength | Length | 是 | 组件最大长度。 |
## Font
设置文本样式。
| 名称 | 类型 | 必填 | 说明 |
| ------ | ------------------------------ | ---- | ------------------------------------------------------------ |
| size | [Length](#length) | 否 | 设置文本尺寸,Length为number类型时,使用fp单位。 |
| weight | [FontWeight](../reference/arkui-ts/ts-appendix-enums.md#fontweight) \| number \| string | 否 | 设置文本的字体粗细,number类型取值[100, 900],取值间隔为100,默认为400,取值越大,字体越粗。 |
| family | string \| [Resource](#resource) | 否 | 设置文本的字体列表。使用多个字体,使用','进行分割,优先级按顺序生效。例如:'Arial, sans-serif'。 |
| style | [FontStyle](../reference/arkui-ts/ts-appendix-enums.md#fontstyle) | 否 | 设置文本的字体样式。 |
## Area<sup>8+</sup>
区域类型,用于存储元素所占区域信息
| 名称 | 类型 | 说明 |
| -------------- | -------- | ------------------------------------------------- |
| width | [Length](#length) | 目标元素的宽度,作为返回值时,类型为number,单位vp。 |
| height | [Length](#length) | 目标元素的高度,作为返回值时,类型为number,单位vp。 |
| position | [Position](#position8) | 目标元素左上角相对父元素左上角的位置。 |
| globalPosition | [Position](#position8) | 目标元素左上角相对页面左上角的位置。 |
## Position<sup>8+</sup>
位置类型,用于表示一个坐标点。
| 名称 | 类型 | 必填 | 说明 |
| ----- | ------- | ---- | ------------------------------------------- |
| x | Length | 否 | x轴坐标,作为返回值时,类型为number,单位vp。 |
| y | Length | 否 | y轴坐标,作为返回值时,类型为number,单位vp。 |
## ConstraintSizeOptions
设置约束尺寸,组件布局时,进行尺寸范围限制。
| 名称 | 类型 | 必填 | 说明 |
| --------- | -------- | ---- | -------------- |
| minWidth | Length | 否 | 元素最小宽度。 |
| maxWidth | Length | 否 | 元素最大宽度。 |
| minHeight | Length | 否 | 元素最小高度。 |
| maxHeight | Length | 否 | 元素最大高度。 |
## SizeOptions
设置宽高尺寸。
| 名称 | 类型 | 必填 | 说明 |
| ------- | -------- | ---- | -------------- |
| width | Length | 否 | 元素宽度。 |
| height | Length | 否 | 元素高度。 |
## BorderOptions
边框属性集合,用于描述边框相关信息。
| 名称 | 类型 | 必填 | 说明 |
| ------ | ----------------------- | ---- | ----------- |
| width | Length \| EdgeWidths<sup>9+</sup> | 否 | 边框宽度。 |
| color | ResourceColor \| EdgeColors<sup>9+</sup> | 否 | 边框颜色。 |
| radius | Length \| BorderRadiuses<sup>9+</sup> | 否 | 边框圆角半径。 |
| style | [BorderStyle](../reference/arkui-ts/ts-appendix-enums.md#borderstyle) \| EdgeStyles<sup>9+</sup> | 否 | 边框样式。 |
## ColorFilter<sup>9+</sup>
创建具有4*5矩阵的颜色过滤器。
| 名称 | 类型 | 必填 | 描述 |
| ----------- | -------- | ------ | --------------------------------------------------------------- |
| constructor | number[] | 是 | 创建具有4*5矩阵的颜色过滤器, 入参为[m*n]位于m行和n列中矩阵值, 矩阵是行优先的。 |
## CustomBuilder<sup>8+</sup>
组件属性方法参数可使用CustomBuilder类型来自定义UI描述。
| 名称 | 类型定义 | 描述 |
| ------------- | ---------------------- | ------------------------------------------------------------ |
| CustomBuilder | ()&nbsp;=&gt;&nbsp;any | 这种方法类型必须使用@Builder装饰器修饰。具体用法见[@Builder](ts-component-based-builder.md)。 |
......@@ -268,12 +268,14 @@ export default {
stepperChange(e){
console.log("stepperChange"+e.index)
prompt.showToast({
// index表示当前步骤的序号
message: 'Previous step: '+e.prevIndex+"-------Current step:"+e.index
})
},
stepperNext(e){
console.log("stepperNext"+e.index)
prompt.showToast({
// pendingIndex表示将要跳转的序号
message: 'Current step:'+e.index+"-------Next step:"+e.pendingIndex
})
var index = {pendingIndex:e.pendingIndex }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册