diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
index be29b6d2c188431ecc74b254a745882553b282b8..c3e72b293f1c67d72d7e25e76192568ebdb7802b 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
@@ -12,7 +12,7 @@
- <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="antialias" />
+ ;
```
```
@@ -27,9 +27,14 @@
},
antialias() {
const el = this.$refs.canvas1;
- const ctx = el.getContext('2d', { antialias: true }); ctx.beginPath(); ctx.arc(100, 75, 50, 0, 6.28); ctx.stroke(); }}
+ const ctx = el.getContext('2d', { antialias: true });
+ ctx.beginPath();
+ ctx.arc(100, 75, 50, 0, 6.28);
+ ctx.stroke();
+ }
+ }
```
-
+
- 示意图（关闭抗锯齿）
@@ -260,10 +265,8 @@ export default {
ctx.moveTo(140, 10);
ctx.lineTo(140, 160);
ctx.stroke();
-
ctx.font = '18px sans-serif';
-
- // Show the different textAlign values
+ // Show the different textAlign values
ctx.textAlign = 'start';
ctx.fillText('textAlign=start', 140, 60);
ctx.textAlign = 'end';
@@ -300,9 +303,7 @@ export default {
ctx.moveTo(0, 120);
ctx.lineTo(400, 120);
ctx.stroke();
-
ctx.font = '20px sans-serif';
-
ctx.textBaseline = 'top';
ctx.fillText('Top', 10, 120);
ctx.textBaseline = 'bottom';
@@ -339,7 +340,6 @@ export default {
ctx.globalAlpha = 0.4;
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(50, 50, 50, 50);
-
}
}
```
diff --git a/zh-cn/application-dev/ui/ui-js-components-swiper.md b/zh-cn/application-dev/ui/ui-js-components-swiper.md
deleted file mode 100644
index de9f3aa008425bd06e50e3c7865e5a764aabb2f7..0000000000000000000000000000000000000000
--- a/zh-cn/application-dev/ui/ui-js-components-swiper.md
+++ /dev/null
@@ -1,360 +0,0 @@
-# Swiper开发指导
-
-
-Swiper为滑动容器，提供切换显示子组件的能力。具体用法请参考[Swiper](../reference/arkui-js/js-components-container-swiper.md)。
-
-
-## 创建Swiper组件
-
-在pages/index目录下的hml文件中创建一个Swiper组件。
-
-```
-
-
-
-
- item1
-
-
- item2
-
-
- item3
-
-
-
-
-
- item1
-
-
- item2
-
-
- item3
-
-
- item4
-
-
-
-
-
- item1
-
-
- item2
-
-
- item3
-
-
-
-
-
- item1
-
-
- item2
-
-
- item3
-
-
- item4
-
-
-
-
-
-
-
-
-
-
-```
-
-
-```
-/* xxx.css */
-.container {
- flex-direction: column;
- justify-content: center;
- align-items: center;
- background-color: #F1F3F5;
-}
-```
-
-
-
-
-## 添加属性和方法
-
- witch组件通过textoff和showtext属性设置文本选中和未选中时的状态。设置checked属性值为true（组件为打开状态）。添加change事件，当组件状态改变时触发，触发后执行switchChange函数获取组件当前状态（关闭/打开）。
-
-```
-
-
-
-
-```
-
-
-```
-/* xxx.css */
-.container {
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: #F1F3F5;
-}
-switch{
- // 选中时的字体颜色
- texton-color: #002aff;
- // 未选中时的字体颜色
- textoff-color: silver;
- text-padding: 20px;
- font-size: 50px;
-}
-```
-
-
-```
-// xxx.js
-import prompt from '@system.prompt';
-export default {
- switchChange(e){
- if(e.checked){
- prompt.showToast({
- message: "open"
- });
- }else{
- prompt.showToast({
- message: "close"
- });
- }
- }
-}
-```
-
-
-
-
-
->  **说明：**
-> 当showtext属性值设置为true时，texton和textoff设置的文本才会生效。
-
-
-## 场景示例
-
-在下面示例中设置开关为打开状态（使用默认收货地址），关闭开关后页面显示选择地址按钮，点击按钮即可改变收货地址。
-
- 实现方法：创建Switch开关，设置checked属性为true，通过数据绑定改变收货地址。设置display属性（默认为none），当关闭开关改变display属性值为flex后显示地址模块，点击按钮改变颜色。
-
-```
-
-
-
- Choose default address:
-
-
-
- Shipping address:{{address}}
-
-
- Choose an address:
- {{item}}
-
-
- Hello World
-
-```
-
-```
-/* xxx.css */
-.container {
- width: 100%;
- height: 100%;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- background-color: #F1F3F5;
-}
-```
-
-
-
-
-## 设置Text组件样式和属性
-
-- 添加文本样式
-
-
- 设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。
-
-```
-
-
-
- This is a passage
-
-
- This is a passage
-
-
-```
-
-```
-/* xxx.css */
-.container {
- width: 100%;
- height: 100%;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- background-color: #F1F3F5;
-}
-```
-
-
- 
-
-
-- 添加划线
-
- 设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色，text-decoration枚举值请参考 Text自有样式。
-
-
-
-
-
- This is a passage
-
-
- This is a passage
-
-
-```
-/* xxx.css */
-.container {
- width: 100%;
- height: 100%;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-}
-text{
- font-size: 50px;
-}
-```
-
- 
-
-
-- 隐藏文本内容
-
- 当文本内容过多而显示不全时，添加text-overflow属性将隐藏内容以省略号的形式展现
-
-```
-
-
-
- This is a passage
-
-
-```
-
- /* xxx.css */
- .container {
- width: 100%;
- height: 100%;
- flex-direction: column;
- align-items: center;
- background-color: #F1F3F5;
- justify-content: center;
- }
- .text{
- width: 200px;
- max-lines: 1;
- text-overflow:ellipsis;
- }
-
- **说明：**
-
-- text-overflow样式需要与max-lines样式配套使用，设置了最大行数的情况下生效。
-- max-lines属性设置文本最多可以展示的行数。
-
-
- 
-
-
-- 设置文本折行
-
- 设置word-break属性对文本内容做断行处理，word-break枚举值请参考Text自有样式。
-
-```
-
-
-
-
- Welcome to the world
-
-
- Welcome to the world
-
-
-
-
- This is a passage
-
-
- This 1
-
- is a 1
- passage
-
-
- ```
-
-
- 
-
-
- >  **说明：**
- > - 当使用Span子组件组成文本段落时，如果Span属性样式异常（例如：font-weight设置为1000），将导致文本段落显示异常。
- >
- > - 在使用Span子组件时，注意Text组件内不能存在文本内容，如果存在文本内容也只会显示子组件Span里的内容。
-
-
-## 场景示例
-
-Text组件通过数据绑定展示文本内容，Span组件通过设置show属性来实现文本内容的隐藏和显示。
-
-```
-
-
-
-
- {{ content }}
-
-
-
-
- {{ content }}
-
- 1
-
- Hide clip
-
-
-
-
-
-
-
-```
-
-
-```
-/* xxx.css */
-.container {
- width: 100%;
- height: 100%;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- background-color: #F1F3F5;
-}
-toolbar-item{
- font-size: 35px;
-}
-```
-
-
-
-
-## 添加子组件
-
- Toolbar组件仅支持toolbar-item为子组件，页面最多可以展示5个toolbar-item子组件，如果存在6个及以上toolbar-item，则保留前面4个，后续的将收纳到工具栏上的更多项中，通过点击更多项弹窗进行展示。并且更多项展示的组件样式采用系统默认样式，toolbar-item上设置的自定义样式不生效。
-
-```
-
-
-
-
-
-
-
-
-
-
-
-```
-
-
-```
-/* xxx.css */
-.container {
- width: 100%;
- height: 100%;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- background-color: #F1F3F5;
-}
-toolbar-item{
- font-size: 35px;
-}
-```
-
-
-
-
-## 设置样式
-
-设置position样式控制Toolbar组件的位置，并设置子组件toolbar-item的字体颜色、大小及背景色。
-
-
-
-```
-
-
-
-
-
-
-
-
-
-```
-
-
-
-```
-/* xxx.css */
-.container {
- background-color: #F1F3F5;
- flex-direction: column;
- width: 100%;
- height: 100%;
- justify-content: center;
- align-items: center;
-}
-toolbar-item{
- font-size: 35px;
-}
-.toolbarActive{
- color: red;
- background-color: #daebef;
-}
-```
-
-
-
-
-
-## 绑定事件
-
-分别给toolbar-item绑定单击事件和长按事件，单击后文本变红，长按时文本变蓝。
-
-
-```
-
-
-
-
-
-
-
-
-```
-
-
-```
-/* xxx.css */
-.container {
- background-color: #F1F3F5;
- flex-direction: column;
- width: 100%;
- height: 100%;
- justify-content: center;
- align-items: center;
-}
-toolbar-item{
- font-size: 35px;
-}
-```
-
-
-```
-// xxx.js
-import prompt from '@system.prompt';
-export default {
- data:{
- itemColor:'black'
- },
- itemClick(){
- this.itemColor= "red";
- prompt.showToast({duration:2000,message:'item click'});
- },
- itemLongPress(){
- prompt.showToast({duration:2000,message:'item long press'});
- this.itemColor= "blue";
- },
-}
-```
-
-
-
->  **说明：**
-> Toolbar组件不支持添加事件和方法，但其子组件toolbar-item支持。
-
-
-## 场景示例
-
-本场景中开发者可点击toolbar-item组件，改变当前组件文本颜色并更换相对应的图片内容。
-
- 使用for循环创建toolbar-item组件并添加点击事件，点击后获得索引值进行存储。设置文本颜色时，判断当前索引值是否为储存的值，若相同则设置为红色，不同则使用默认颜色。
-
-```
-
-
-
-
-
-
-
-```
-
-
-```
-/* xxx.css */
-.container {
- background-color: #F1F3F5;
- flex-direction: column;
- width: 100%;
- justify-content: center;
- align-items: center;
-}
-toolbar-item{
- font-size: 35px;
-}
-```
-
-
-```
-// xxx.js
-import prompt from '@system.prompt';
-export default {
- data:{
- active: 0,
- imgList:["common/images/1.png","common/images/2.png","common/images/3.png","common/images/4.png"],
- itemList:[
- {option:'item1',icon:'common/images/1.png'},
- {option:'item2',icon:'common/images/2.png'},
- {option:'item3',icon:'common/images/3.png'},
- {option:'item4',icon:'common/images/4.png'},
- ]
- },
- itemClick(id){
- this.active= id;
- },
-}
-```
-
-
diff --git a/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md b/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
deleted file mode 100644
index df9383f16bbd3f62f6de1e8dd6d148ca19d0dedc..0000000000000000000000000000000000000000
--- a/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
+++ /dev/null
@@ -1,151 +0,0 @@
-# 栅格布局
-
-
-栅格系统作为一种辅助布局的定位工具，在平面设计和网站设计都起到了很好的作用，对移动设备的界面设计有较好的借鉴作用。总结栅格系统对于移动设备的优势主要有：
-
-
-1. 给布局提供一种可循的规律，解决多尺寸多设备的动态布局问题。
-2. 给系统提供一种统一的定位标注，保证各模块各设备的布局一致性。
-3. 给应用提供一种灵活的间距调整方法，满足特殊场景布局调整的可能性。
-
-为实现栅格布局效果，声明式范式提供了GridContainer栅格容器组件，配合其子组件的通用属性useSizeType来实现栅格布局。
-
-## 栅格系统
-
-栅格系统有Columns、Margins、Gutters三个概念。
-
-
-
-
-
-1. Gutters：
- 用来控制元素与元素之间距离关系。可以根据设备的不同尺寸，定义不同的gutter值，作为栅格布局的统一规范。为了保证较好的视觉效果，通常gutter的取值不会大于margin的取值。
-2. Margins：
- 离栅格容器边缘的距离。可以根据设备的不同尺寸，定义不同的margin值，作为栅格布局的统一规范。
-3. Columns:
- 栅格布局的主要定位工具。根据设备的不同尺寸，把栅格容器分割成不同的列数，在保证margin和gutter符合规范的情况下，根据总Column的个数计算每个Column列的宽度。
-
-
-### 系统栅格断点
-
-系统根据不同水平宽度设备对应Columns的数量关系，形成了一套断点规则定义。
-
-系统以设备的水平宽度的屏幕密度像素值作为断点依据，根据当前设备水平宽度所在的断点范围，定义了设备的宽度类型。系统的栅格断点范围、设备宽度类型及其描述，以及对应的默认总列数(columns)，边距（gutter)，间隔(gutter)定义如下：
-
-系统栅格定义
-
-
-| 设备水平宽度断点范围 | 设备宽度类型 | 描述 | columns | gutter | margin |
-| -------- | -------- | -------- | -------- | -------- | -------- |
-| 0<水平宽度<320vp | XS | 最小宽度类型设备。 | 2 | 12vp | 12vp |
-| 320vp<=水平宽度<600vp | SM | 小宽度类型设备。 | 4 | 24vp | 24vp |
-| 600vp<=水平宽度<840vp | MD | 中等宽度类型设备。 | 8 | 24vp | 32vp |
-| 840<=水平分辨率 | LG | 大宽度类型设备。 | 12 | 24vp | 48vp |
-
-## 如何使用
-
-首先创建栅格容器组件，定义栅格布局，然后给栅格容器内的组件设置不同设备宽度类型下的占用列数。
-
-### 创建栅格容器
-
-通过接口：GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})创建栅格容器，栅格容器内的所有子组件可以使用栅格布局。
-
-可以通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列于列间隔为10vp, 两侧边距为20vp：
-```
-GridContainer({ columns: 6, gutter: 10, margin: 20 }) {}
-```
-栅格容器不设置参数，或者sizeType设置为SizeType.Auto时使用默认的栅格系统定义，如：
-
-```
-GridContainer() {}
-```
-上述例子中，默认在在小宽度类型设备(SizeType.SM)上，栅格容器被分为4列，列于列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType.MD)上，栅格容器被分为8列，列于列的间隔为24vp，两侧边距是32vp。
-
-
-
-也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置，如：
-
-```
-GridContainer({ sizeType: SizeType.SM) {
- Row() {
- Text('1')
- .useSizeType({
- xs: { span: 2},
- sm: { span: 3, offset: 1 },
- md: { span: 6, offset: 2 },
- lg: { span: 8, offset: 2 },
- })
- }
-}
-```
-上述例子中，不管在任何宽度类型的设备上， Text组件都使用SizeType.SM类型的栅格设置即占用3列，放置在第1列。
-
-### 栅格容器内子组件的栅格设置
-
-栅格容器中的组件使用通用属性useSizeType设置不同的设备宽度类型的占用列数和列偏移。其中span表示栅格容器组件占据columns的数量；offest表示列偏移量，指将组件放置在哪一个columns上。 如：
-
-```
-GridContainer() {
- Row() {
- Text('1')
- .useSizeType({
- xs: { span: 2},
- sm: { span: 3, offset: 1 },
- md: { span: 6, offset: 2 },
- lg: { span: 8, offset: 2 },
- })
- }
-}
-```
-其中sm: { span: 2, offset: 0 } 指在设备宽度类型为SM的设备上，Text组件占用3列，且放在栅格容器的第1列上。
-## 场景示例
-
-使用栅格布局可以灵活地在不同的设备宽度类型下呈现合适的效果，而不必书写大量的代码兼容不同宽度类型的设备。
-
-```
-@Entry
-@Component
-struct GridContainerExample {
- build() {
- Column({ space: 5 }) {
- GridContainer({ columns: 6 }) {
- Flex({justifyContent:FlexAlign.SpaceAround}) {
- Text('1')
- .useSizeType({
- xs: { span: 2, offset: 0 },
- sm: { span: 2, offset: 0 },
- md: { span: 1, offset: 0 },
- lg: { span: 1, offset: 0 },
- })
- .height(100).backgroundColor(0x4682B4).textAlign(TextAlign.Center)
- Text('2')
- .useSizeType({
- xs: { span: 2, offset: 0 },
- sm: { span: 2, offset: 0 },
- md: { span: 4, offset: 0 },
- lg: { span: 4, offset: 0 },
- })
- .height(100).backgroundColor(0x46F2B4).textAlign(TextAlign.Center)
- Text('3')
- .useSizeType({
- xs: { span: 2, offset: 0 },
- sm: { span: 2, offset: 0 },
- md: { span: 1, offset: 0 },
- lg: { span: 1, offset: 0 },
- })
- .height(100).backgroundColor(0x46A2B4).textAlign(TextAlign.Center)
- }
- }.width('80%').backgroundColor('gray')
- }.width('100%').margin({ top: 15 })
- }
-}
-```
-
-
-
-小宽度类型设备(SizeType.SM)运行效果：
-
-
-
-中等宽度类型设备(SizeType.MD)运行效果：
-