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

!10689 9962-挑单

Merge pull request !10689 from wangshuainan1/OpenHarmony-3.1-Release
...@@ -22,9 +22,9 @@ Canvas(context?: CanvasRenderingContext2D) ...@@ -22,9 +22,9 @@ Canvas(context?: CanvasRenderingContext2D)
**参数:** **参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------- | | ------- | ---------------------------------------- | ---- | ---- | ---------------------------- |
| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | 否 | - | 见CanvasRenderingContext2D对象。 | | context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | 否 | - | 见CanvasRenderingContext2D对象。 |
## 属性 ## 属性
...@@ -55,8 +55,8 @@ struct CanvasExample { ...@@ -55,8 +55,8 @@ struct CanvasExample {
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() => {
this.context.fillRect(0,30,100,100) this.context.fillRect(0, 30, 100, 100)
}) })
} }
.width('100%') .width('100%')
......
...@@ -28,7 +28,7 @@ Shape(value?: PixelMap) ...@@ -28,7 +28,7 @@ Shape(value?: PixelMap)
- 参数 - 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| value | PixelMap | 否 | - | 绘制目标,可将图形绘制在指定的PixelMap对象中,若未设置,则在当前绘制目标中进行绘制。 | | value | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 否 | - | 绘制目标,可将图形绘制在指定的PixelMap对象中,若未设置,则在当前绘制目标中进行绘制。 |
## 属性 ## 属性
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| type | string | - | 否 | 不支持动态修改。如果该属性缺省,展示类胶囊型按钮,不同于胶囊类型,四边圆角可以通过border-radius分别指定,如果需要设置该属性,可选值如下:<br/>-&nbsp;"capsule":胶囊型按钮,带圆角按钮,有背景色和文本。<br/>-&nbsp;"circle":圆形按钮,支持放置图标。<br/>-&nbsp;"text":文本按钮,仅包含文本显示。 | | type | string | capsule | 否 | 不支持动态修改。如果该属性缺省,展示类胶囊型按钮,不同于胶囊类型,四边圆角可以通过border-radius分别指定,如果需要设置该属性,可选值如下:<br/>-&nbsp;"capsule":胶囊型按钮,带圆角按钮,有背景色和文本。<br/>-&nbsp;"circle":圆形按钮,支持放置图标。<br/>-&nbsp;"text":文本按钮,仅包含文本显示。 |
| value | string | - | 否 | button的文本值,circle类型不生效。 | | value | string | - | 否 | button的文本值,circle类型不生效。 |
| icon | string | - | 否 | button的图标路径,图标格式为jpg,png和svg。 | | icon | string | - | 否 | button的图标路径,图标格式为jpg,png和svg。 |
| placement | string | end | 否 | 仅在type属性为缺省时生效,设置图标位于文本的位置,可选值为:<br/>-&nbsp;"start":图标位于文本起始处。<br/>-&nbsp;"end":图标位于文本结束处。<br/>-&nbsp;"top":图标位于文本上方。<br/>-&nbsp;"bottom":图标位于文本下方。 | | placement | string | end | 否 | 仅在type属性为缺省时生效,设置图标位于文本的位置,可选值为:<br/>-&nbsp;"start":图标位于文本起始处。<br/>-&nbsp;"end":图标位于文本结束处。<br/>-&nbsp;"top":图标位于文本上方。<br/>-&nbsp;"bottom":图标位于文本下方。 |
......
...@@ -16,14 +16,14 @@ ...@@ -16,14 +16,14 @@
除支持[通用属性](js-service-widget-common-attributes.md)外,还支持如下属性: 除支持[通用属性](js-service-widget-common-attributes.md)外,还支持如下属性:
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----------------- | ---------------------------------- | ---- | ---- | ---------------------------------------- | | ----------------- | ---------------------------------- | ------ | ---- | ------------------------------------------------------------ |
| type | string | line | 否 | 设置图表类型(不支持动态修改),可选项有:<br/>-&nbsp;bar:柱状图。<br/>-&nbsp;line:线形图。<br/>-&nbsp;gauge:量规图。<br/>-&nbsp;progress:进度类圆形图表。<br/>-&nbsp;loading:加载类圆形图表。<br/>-&nbsp;rainbow:占比类圆形图表。 | | type | string | line | 否 | 设置图表类型(不支持动态修改),可选项有:<br/>-&nbsp;bar:柱状图。<br/>-&nbsp;line:线形图。<br/>-&nbsp;gauge:量规图。<br/>-&nbsp;progress:进度类圆形图表。<br/>-&nbsp;loading:加载类圆形图表。<br/>-&nbsp;rainbow:占比类圆形图表。 |
| options | ChartOptions | - | 否 | 图表参数设置,柱状图和线形图必须设置参数设置,量规图不生效。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示,线条宽度、是否平滑等。(不支持动态修改) | | options | ChartOptions | - | 否 | 图表参数设置,用于设置x轴、y轴的最小值、最大值、刻度数、是否显示,线条宽度、是否平滑等。(不支持动态修改),量规图不生效。 |
| datasets | Array\<ChartDataset> | - | 否 | 数据集合,柱状图和线形图必须设置数据集合,量规图不生效。可以设置多条数据集及其背景色。 | | datasets | Array\<ChartDataset> | - | 否 | 数据集合,用于设置多条数据集及其背景色,量规图不生效。 |
| segments | DataSegment \| Array\<DataSegment> | | 否 | 进度类、加载类和占比类圆形图表使用的数据结构。<br/>DataSegment针对进度类和加载类圆形图表使用,Array\<DataSegment>针对占比类图标使用,DataSegment最多9个。 | | segments | DataSegment \| Array\<DataSegment> | | 否 | 进度类、加载类和占比类圆形图表使用的数据结构。<br/>DataSegment针对进度类和加载类圆形图表使用,Array\<DataSegment>针对占比类图标使用,DataSegment最多9个。 |
| effects | boolean | true | 否 | 是否开启占比类、进度类圆形图表特效。 | | effects | boolean | true | 否 | 是否开启占比类、进度类圆形图表特效。 |
| animationduration | number | 3000 | 否 | 设置占比类圆形图表展开动画时长,单位为ms。 | | animationduration | number | 3000 | 否 | 设置占比类圆形图表展开动画时长,单位为ms。 |
**表1** ChartOptions **表1** ChartOptions
......
...@@ -48,16 +48,18 @@ longpress:用户在相同位置长时间保持与屏幕接触。 ...@@ -48,16 +48,18 @@ longpress:用户在相同位置长时间保持与屏幕接触。
``` ```
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.text-container { .text-container {
margin-top: 10px; margin-top: 30px;
flex-direction: column; flex-direction: column;
width: 750px; width: 600px;
height: 50px; height: 70px;
background-color: #09ba07; background-color: #0000FF;
} }
.text-style { .text-style {
width: 100%; width: 100%;
...@@ -99,3 +101,5 @@ export default { ...@@ -99,3 +101,5 @@ export default {
}, },
} }
``` ```
![zh-cn_image_00000011](figures/zh-cn_image_00000011.gif)
\ No newline at end of file
...@@ -118,8 +118,6 @@ import prompt from '@system.prompt'; ...@@ -118,8 +118,6 @@ import prompt from '@system.prompt';
export default { export default {
data:{ data:{
dataURL:null, dataURL:null,
antialia: false,
porc:'open',
}, },
onShow(){ onShow(){
let el = this.$refs.canvas1; let el = this.$refs.canvas1;
......
...@@ -79,7 +79,7 @@ Marquee通过color和font-weight属性设置跑马灯中文本的颜色、字体 ...@@ -79,7 +79,7 @@ Marquee通过color和font-weight属性设置跑马灯中文本的颜色、字体
<div class="tutorial-page"> <div class="tutorial-page">
<div class="mymarquee"> <div class="mymarquee">
<marquee loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext" id="testmarquee" onclick="makestart"> <marquee loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext" id="testmarquee" onclick="makestart">
It's a racing lamp Life is a journey, not the destination.
</marquee> </marquee>
</div> </div>
<div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;"> <div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;">
...@@ -128,7 +128,9 @@ button{ ...@@ -128,7 +128,9 @@ button{
// xxx.js // xxx.js
export default { export default {
private: { private: {
loopval: -1, scroll: 10, isleft: "left", loopval: -1,
scroll: 10,
isleft: "left",
}, },
onInit(){ onInit(){
}, },
...@@ -163,7 +165,7 @@ export default { ...@@ -163,7 +165,7 @@ export default {
<div class="mymarquee"> <div class="mymarquee">
<marquee style="color: {{color1}}" loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext" <marquee style="color: {{color1}}" loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext"
id="testmarquee" onfinish="setfinish"> id="testmarquee" onfinish="setfinish">
It's a racing lamp Life is a journey, not the destination.
</marquee> </marquee>
</div> </div>
<div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;"> <div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;">
......
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
## 添加样式 ## 添加样式
通过color、placeholder和caret-color样式来设置搜索框的文本颜色、提示文本颜色和光标颜色。 通过color、placeholder-color和caret-color样式来设置搜索框的文本颜色、提示文本颜色和光标颜色。
``` ```
...@@ -84,7 +84,9 @@ ...@@ -84,7 +84,9 @@
background-color: #F1F3F5; background-color: #F1F3F5;
} }
search{ search{
color: black; placeholder-color: black; caret-color: red; color: black;
placeholder-color: black;
caret-color: red;
} }
``` ```
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册