update docs

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md

 # TimePicker
 
-> **NOTE**<br>
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
 
 The **\<TimePicker>** component allows users to select a time from the given range.
 
+> **NOTE**<br>
+>
+> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+
 
 ## Required Permissions
 
@@ -14,7 +15,7 @@ No
 
 ## Child Components
 
-No
+Not supported
 
 
 ## APIs
@@ -54,11 +55,12 @@ Creates a time picker whose default time range is from 00:00 to 23:59.
 
 ### Time Picker
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TimePickerExample {
-  private selectedTime: Date = new Date('08-00')
+  private selectedTime: Date = new Date('7/22/2022 8:00:00')
 
   build() {
     Column() {

en/application-dev/reference/arkui-ts/ts-container-swiper.md

@@ -2,6 +2,7 @@
 
 
 > **NOTE**<br>
+>
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
@@ -23,9 +24,9 @@ This component can contain child components.
 Swiper(value:{controller?: SwiperController})
 
 - Parameters
-  | Name | Type | Mandatory | Default Value | Description | 
+  | Name | Type | Mandatory | Default Value | Description |
   | -------- | -------- | -------- | -------- | -------- |
-  | controller | [SwiperController](#swipercontroller) | No | null | Controller bound to the component to control the page switching. | 
+  | controller | [SwiperController](#swipercontroller) | No | null | Controller bound to the component to control the page switching. |
 
 
 ## Attributes
@@ -43,29 +44,31 @@ Swiper(value:{controller?: SwiperController})
 | cachedCount<sup>8+</sup> | number | 1 | Number of child components to be cached. |
 | disableSwipe<sup>8+</sup> | boolean | false | Whether to disable the swipe feature. |
 | curve<sup>8+</sup> | [Curve](ts-animatorproperty.md) \| Curves | Curve.Ease | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve enums](ts-animatorproperty.md). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using APIs provided by the interpolation calculation module. |
+| indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;Length,<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>size?:&nbsp;Length,<br/>color?:&nbsp;Color,<br/>selectedColor?:&nbsp;Color<br/>} | -          | Style of the navigation dots indicator.<br/>- **left**:&nbsp;distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br/>- **top**:&nbsp;distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br/>- **right**:&nbsp;distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br/>- **bottom**:&nbsp;distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br/>- **size**:&nbsp;diameter of the navigation dots indicator.<br/>- **color**:&nbsp;color of the navigation dots indicator.<br/>- **selectedColor**:&nbsp;color of the selected navigation dot. |
 
 
-### SwiperController
+## SwiperController
 
 Controller of the **<Swiper\>** component. You can bind this object to the **<Swiper\>** component and use it to control page switching.
 
-| Name | Description | 
+| Name | Description |
 | -------- | -------- |
-| showNext():void | Turns to the next page. | 
-| showPrevious():void | Turns to the previous page. | 
+| showNext():void | Turns to the next page. |
+| showPrevious():void | Turns to the previous page. |
 
 
 ## Events
 
-| Name | Description | 
+| Name | Description |
 | -------- | -------- |
-| onChange( index: number) =&gt; void | Triggered when the index of the currently displayed component changes. | 
+| onChange( index: number) =&gt; void | Triggered when the index of the currently displayed component changes. |
 
 
 ## Example
 
 
-```
+```ts
+// xxx.ets
 class MyDataSource implements IDataSource {
   private list: number[] = []
   private listener: DataChangeListener
@@ -96,7 +99,7 @@ struct SwiperExample {
   private swiperController: SwiperController = new SwiperController()
   private data: MyDataSource = new MyDataSource([])
 
-  private aboutToAppear(): void {
+  aboutToAppear(): void {
     let list = []
     for (var i = 1; i <= 10; i++) {
       list.push(i.toString());

en/application-dev/ui/ts-component-based-component.md

@@ -13,16 +13,17 @@ A struct decorated by @Component has the componentization capability and can ser
 - Data-driven update: The UI of custom components can be automatically updated based on the data of state variables.
 
 
-For details about componentization, see [About @Component](ts-function-build.md).
+For details about componentization, see [About @Component](ts-custom-component-initialization.md).
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
-> - The build method must be defined for a custom component.
-> 
+> **NOTE**
+>
+> - The **build** method must be defined for a custom component.
+>
 > - Custom constructors are prohibited for custom components.
 
 
-The following code illustrates how to create a custom component named MyComponent:
+The following code illustrates how to create a custom component named **MyComponent**:
 
 ```
 @Component
@@ -37,10 +38,10 @@ struct MyComponent {
 ```
 
 
-The build method of MyComponent is executed during initial rendering. When the component status changes, the build method will be executed again.
+The **build** method of **MyComponent** is executed during initial rendering. When the component status changes, the build method will be executed again.
 
 
-The following code illustrates how to use MyComponent:
+The following code illustrates how to use **MyComponent**:
 
 ```
 @Component
@@ -55,8 +56,7 @@ struct ParentComponent {
 }
 ```
 
-
-MyComponent can be applied multiple times and reused in different components, as shown in the code below:
+**MyComponent** can be applied multiple times and reused in different components, as shown in the code below:
 
 ```
 @Component
@@ -76,11 +76,11 @@ struct ParentComponent {
         }
     }
 
-    private aboutToAppear() {
+    aboutToAppear() {
         console.log('ParentComponent: Just created, about to become rendered first time.')
     }
 
-    private aboutToDisappear() {
+    aboutToDisappear() {
         console.log('ParentComponent: About to be removed from the UI.')
     }
 }