Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
“f209585766c8d5d80b6a59401eebd722c97c01c2”上不存在“NO56/csdn/pipelines.py”
提交 75d9a8ab 编写于 作者: E esterzhou
浏览文件
操作

update docs (7869) 

Signed-off-by: Nesterzhou <ester.zhou@huawei.com>
上级 e73dc8a0
隐藏空白更改
内联 并排
Showing with 452 addition and 138 deletion
en/application-dev/reference/arkui-ts/ts-appendix-enums.md
浏览文件 @ 75d9a8ab
# Built-in Enums # Built-in Enums
## Color
## Alignment Enums | Color | Value | Illustration |
| ------------------------ | -------- | ------------------------------------------------------------ |
| Black | 0x000000 | ![en-us_image_0000001219864153](figures/en-us_image_0000001219864153.png) |
| Blue | 0x0000ff | ![en-us_image_0000001174104404](figures/en-us_image_0000001174104404.png) |
| Brown | 0xa52a2a | ![en-us_image_0000001219744201](figures/en-us_image_0000001219744201.png) |
| Gray | 0x808080 | ![en-us_image_0000001174264376](figures/en-us_image_0000001174264376.png) |
| Green | 0x008000 | ![en-us_image_0000001174422914](figures/en-us_image_0000001174422914.png) |
| Orange | 0xffa500 | ![en-us_image_0000001219662661](figures/en-us_image_0000001219662661.png) |
| Pink | 0xffc0cb | ![en-us_image_0000001219662663](figures/en-us_image_0000001219662663.png) |
| Red | 0xff0000 | ![en-us_image_0000001219662665](figures/en-us_image_0000001219662665.png) |
| White | 0xffffff | ![en-us_image_0000001174582866](figures/en-us_image_0000001174582866.png) |
| Yellow | 0xffff00 | ![en-us_image_0000001174582864](figures/en-us_image_0000001174582864.png) |
| Transparent<sup>9+</sup> | rgba(0,0,0,0) | Transparent |
| Name | Description | ## ImageFit
| -------- | -------- |
| TopStart | Top start. |
| Top | Horizontally centered on the top. |
| TopEnd | Top end. |
| Start | Vertically centered start. |
| Center | Horizontally and vertically centered. |
| End | Vertically centered end. |
| BottomStart | Bottom start. |
| Bottom | Horizontally centered on the bottom. |
| BottomEnd | Bottom end. |
| Name | Description |
| --------- | ------------------------------------------------------------ |
| Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries. |
| Cover | The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.|
| Auto | The image is scaled automatically to fit the display area. |
| Fill | The image is scaled to fill the display area, and its aspect ratio is not retained. |
| ScaleDown | The image is displayed with its aspect ratio retained, in a size smaller than or equal to the original size. |
| None | The original size is retained. |
## Axis Enums ## BorderStyle
| Name | Description | | Name | Description |
| -------- | -------- | | ------ | ----------------------------------------------- |
| Vertical | Vertical direction. | | Dotted | Dotted border. The radius of a dot is half of **borderWidth**.|
| Horizontal | Horizontal direction. | | Dashed | Dashed border. |
| Solid | Solid border. |
## LineJoinStyle
## ItemAlign Enums | Name | Description |
| ----- | -------------------- |
| Bevel | Bevel is used to connect paths.|
| Miter | Miter is used to connect paths.|
| Round | Round is used to connect paths.|
| Name | Description | ## TouchType
| -------- | -------- |
| Auto | The default configuration in the Flex container is used. |
| Start | The elements are in the Flex container, top-aligned in the cross-axis direction |
| Center | The elements are in the Flex container, centered in the cross-axis direction. |
| End | The elements are in the Flex container, bottom-aligned in the cross-axis direction. |
| Stretch | The elements are in the Flex container, stretched and padded in the cross-axis direction. If the size is not set, the elements are stretched to the container size. |
| Baseline | The elements are in the Flex container, text baseline aligned in the cross-axis direction. |
| Name | Description |
| ------ | ------------------------------ |
| Down | A finger is pressed. |
| Up | A finger is lifted. |
| Move | A finger moves on the screen in pressed state.|
| Cancel | A touch event is canceled. |
## LineCapStyle Enums ## MouseButton
| Name | Description | | Name | Description |
| -------- | -------- | | ------- | ---------------- |
| Butt | The ends of dividing lines are square. | | Left | Left button on the mouse. |
| Round | The ends of dividing lines are rounded. | | Right | Right button on the mouse. |
| Square | The ends of dividing lines are square. | | Middle | Middle button on the mouse. |
| Back | Back button on the left of the mouse.|
| Forward | Forward button on the left of the mouse.|
| None | No button. |
## MouseAction
## PlayMode Enums | Name | Description |
| ------- | -------------- |
| Press | The mouse button is pressed.|
| Release | The mouse button is released.|
| Move | The mouse cursor moves. |
| Name | Description | ## Curve
| -------- | -------- |
| Normal | The animation is played normally. |
| Reverse | The animation is played reversely. |
| Alternate | The animation is played normally for an odd number of times (1, 3, 5...) and reversely for an even number of times (2, 4, 6...). |
| AlternateReverse | The animation is played reversely for an odd number of times (1, 3, 5...) and normally for an even number of times (2, 4, 6...). |
| Name | Description |
| ------------------- | ------------------------------------------------------------ |
| Linear | The animation speed keeps unchanged. |
| Ease | The animation starts slowly, accelerates, and then slows down towards the end. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used.|
| EaseIn | The animation starts at a low speed and then picks up speed until the end. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used. |
| EaseOut | The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used. |
| EaseInOut | The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.|
| FastOutSlowIn | The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0). |
| LinearOutSlowIn | The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0). |
| FastOutLinearIn | The animation uses the acceleration cubic-bezier curve (0.4, 0.0, 1.0, 1.0). |
| ExtremeDeceleration | The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0). |
| Sharp | The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0). |
| Rhythm | The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0). |
| Smooth | The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0). |
| Friction | The animation uses the friction cubic-bezier curve (0.2, 0.0, 0.2, 1.0). |
## ImageRepeat Enums ## AnimationStatus
| Name | Description | | Name | Description |
| -------- | -------- | | ------- | ------------------ |
| X | Images are repeatedly drawn only on the horizontal axis. | | Initial | The animation is in the initial state. |
| Y | Images are repeatedly drawn only on the vertical axis. | | Running | The animation is being played.|
| XY | Images are repeatedly drawn on both axes. | | Paused | The animation is paused.|
| NoRepeat | Images are not repeatedly drawn. | | Stopped | The animation is stopped.|
## FillMode
## TextDecorationType Enums | Name | Description |
| -------- | -------------------------------- |
| None | After the playback is complete, the animation restores to the initial state. |
| Forwards | After the playback is complete, the animation remains in the end state.|
| Name | Description | ## PlayMode
| -------- | -------- |
| Underline | Line under the text. |
| LineThrough | Line through the text. |
| Overline | Line over the text. |
| None | No decorative lines. |
| Name | Description |
| ---------------- | ------------------------------------------------------------ |
| Normal | The animation is played forwards. |
| Reverse | The animation is played backwards. |
| Alternate | The animation is played forwards for an odd number of times (1, 3, 5...) and backwards for an even number of times (2, 4, 6...).|
| AlternateReverse | The animation is played backwards for an odd number of times (1, 3, 5...) and forwards for an even number of times (2, 4, 6...).|
## TextCase Enums ## KeyType
| Name | Description | | Name| Description |
| -------- | -------- | | ---- | ---------- |
| Normal | Normal case. | | Down | The key is pressed.|
| LowerCase | All lowercase. | | Up | The key is released.|
| UpperCase | All uppercase. |
## KeySource
## BarState Enums | Name | Description |
| -------- | -------------------- |
| Unknown | Unknown input device. |
| Keyboard | The input device is a keyboard.|
| Name | Description | ## Edge
| -------- | -------- |
| Off | Hide. |
| On | Display. |
| Auto | Display on demand (displays when the screen is touched and disappears after 2s). |
## LayoutDirection Enums | Name | Description |
| -------- | ---------------------- |
| Top | Top edge in the vertical direction. |
| Center | Center position in the vertical direction. |
| Bottom | Bottom edge in the vertical direction. |
| Baseline | Text baseline position in the cross axis direction.|
| Start | Start position in the horizontal direction. |
| Middle | Center position in the horizontal direction. |
| End | End position in the horizontal direction. |
| Name | Description | ## Week
| Name | Description |
| -------- | ---------------------- |
| Mon | Monday. |
| Tue | Tuesday. |
| Wed | Wednesday. |
| Thur | Thursday. |
| Fri | Friday. |
| Sat | Saturday. |
| Sun | Sunday. |
## Direction
| Name| Description |
| ---- | ---------------------- |
| Ltr | Components are arranged from left to right. |
| Rtl | Components are arranged from right to left. |
| Auto | The default layout direction is used.|
## BarState
| Name| Description |
| ---- | -------------------------------- |
| Off | Not displayed. |
| On | Always displayed. |
| Auto | Displayed when the screen is touched and hidden after 2s.|
## EdgeEffect
| Name | Description |
| ------ | ------------------------------------------------------------ |
| Spring | Spring effect. When at one of the edges, the component can move beyond the bounds through touches, and produces a bounce effect when the user releases their finger.|
| Fade | Fade effect. When at one of the edges, the component produces a fade effect. |
| None | No effect when the component is at one of the edges. |
## Alignment
| Name | Description |
| ----------- | ---------------- |
| TopStart | Top start. |
| Top | Horizontally centered on the top. |
| TopEnd | Top end. |
| Start | Vertically centered start.|
| Center | Horizontally and vertically centered.|
| End | Vertically centered end. |
| BottomStart | Bottom start. |
| Bottom | Horizontally centered on the bottom. |
| BottomEnd | Bottom end. |
## TransitionType
| Name | Description |
| ------ | -------------------------------------------------- |
| All | The transition takes effect in all scenarios.|
| Insert | The transition takes effect when a component is inserted. |
| Delete | The transition takes effect when a component is deleted. |
## RelateType
| Name | Description |
| ------ | ------------------------------- |
| FILL | The current child component is scaled to fill the parent component. |
| FIT | The current child component is scaled to adapt to the parent component. |
## Visibility
| Name | Description |
| ------- | -------------------------------- |
| Hidden | The component is hidden, and a placeholder is used for it in the layout. |
| Visible | The component is visible. |
| None | The component is hidden. It is not involved in the layout, and no placeholder is used for it.|
## LineCapStyle
| Name | Description |
| ------ | -------------------- |
| Butt | The ends of dividing lines are butt.|
| Round | The ends of dividing lines are rounded. |
| Square | The ends of dividing lines are butt.|
## Axis
| Name | Description |
| ---------- | ------------ |
| Vertical | Vertical direction.|
| Horizontal | Horizontal direction.|
## HorizontalAlign
| Name | Description |
| ------ | ------------------------ |
| Start | Aligned with the start edge in the same direction as the language in use.|
| Center | Aligned with the center. This is the default alignment mode.|
| End | Aligned with the end edge in the same direction as the language in use. |
## FlexAlign
| Name | Description |
| ------------ | ------------------------------------------------------------ |
| Start | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one.|
| Center | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end.|
| End | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one.|
| SpaceBetween | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same.|
| SpaceAround | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components.|
| SpaceEvenly | The child components are equally distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between two adjacent components are the same.|
## ItemAlign
| Name | Description |
| -------- | ------------------------------------------------------------ |
| Auto | The default configuration in the Flex container is used. |
| Start | The elements are in the Flex container, top-aligned in the cross-axis direction. |
| Center | The elements are in the Flex container, centered in the cross-axis direction. |
| End | The elements are in the Flex container, bottom-aligned in the cross-axis direction. |
| Stretch | The elements are in the Flex container, stretched and padded in the cross-axis direction. If the size is not set, the elements are stretched to the container size.|
| Baseline | The elements are in the Flex container, text baseline aligned in the cross-axis direction. |
## FlexDirection
| Name | Description |
| ------------- | ------------------------------ |
| Row | The child components are arranged in the same direction as the main axis runs along the rows.|
| RowReverse | The child components are arranged opposite to the **Row** direction. |
| Column | The child components are arranged in the same direction as the main axis runs down the columns.|
| ColumnReverse | The child components are arranged opposite to the **Column** direction. |
## FlexWrap
| Name | Description |
| ----------- | ------------------------------------------------- |
| NoWrap | The child components in the **\<Flex>** component are arranged in a single line, and they cannot overflow. |
| Wrap | The child components in the **\<Flex>** component are arranged in multiple lines, and they may overflow. |
| WrapReverse | The child components in the **\<Flex>** component are reversely arranged in multiple lines, and they may overflow.|
## VerticalAlign
| Name | Description |
| ------ | ------------------------ |
| Top | Top aligned. |
| Center | Center aligned. This is the default alignment mode.|
| Bottom | Bottom aligned. |
## ImageRepeat
| Name | Description |
| -------- | -------------------------- |
| X | The image is repeatedly drawn only along the horizontal axis.|
| Y | The image is repeatedly drawn only along the vertical axis.|
| XY | The image is repeatedly drawn along both axes. |
| NoRepeat | The image is not repeatedly drawn. |
## ImageSize
| Type | Description |
| ------- | ------------------------------------------------------------ |
| Cover | Default value. The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.|
| Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries. |
| Auto | The original image aspect ratio is retained. |
## GradientDirection
| Name | Description |
| ----------- | ---------- |
| Left | The gradient direction is from right to left.|
| Top | The gradient direction is from bottom to top.|
| Right | The gradient direction is from left to right.|
| Bottom | The gradient direction is from top to bottom.|
| LeftTop | The gradient direction is upper left. |
| LeftBottom | The gradient direction is lower left. |
| RightTop | The gradient direction is upper right. |
| RightBottom | The gradient direction is lower right. |
| None | No gradient. |
## SharedTransitionEffectType
| Name | Description |
| ----------- | ---------- |
| Static | The element position remains unchanged on the target page, and transition opacity can be configured. Currently, this effect is only valid in redirecting to the target page.|
| Exchange | The element is relocated and scaled properly on the target page.|
## FontStyle
| Name | Description |
| ------ | ---------------- |
| Normal | Standard font style.|
| Italic | Italic font style.|
## FontWeight
| Name | Description |
| ------- | -------------- |
| Lighter | The font weight is lighter. |
| Normal | The font weight is normal.|
| Regular | The font weight is regular.|
| Medium | The font weight is medium.|
| Bold | The font weight is bold. |
| Bolder | The font weight is bolder. |
## TextAlign
| Name | Description |
| ------ | -------------- |
| Start | Aligned with the start.|
| Center | Horizontally centered.|
| End | Aligned with the end.|
## TextOverflow
| Name | Description |
| -------- | -------------------------------------- |
| Clip | Extra-long text is truncated. |
| Ellipsis | An ellipsis (...) is used to represent clipped text.|
| None | No truncation or ellipsis is used for extra-long text. |
## TextDecorationType
| Name | Description |
| ----------- | ------------------ |
| Underline | Line under the text. |
| LineThrough | Line through the text.|
| Overline | Line over the text. |
| None | No decorative lines.|
## TextCase
| Name | Description |
| --------- | -------------------- |
| Normal | The original case of the text is retained.|
| LowerCase | All letters in the text are in lowercase. |
| UpperCase | All letters in the text are in uppercase. |
## ResponseType<sup>8+</sup>
| Name | Description |
| ---------- | -------------------------- |
| LongPress | The menu is displayed when the component is long-pressed. |
| RightClick | The menu is displayed when the component is right-clicked.|
## HoverEffect<sup>8+</sup>
| Name | Description |
| --------- | ---------------------------- |
| Auto | Default hover effect.|
| Scale | Scale effect. |
| Highlight | Background fade-in and fade-out effect. |
| None | No effect. |
## Placement<sup>8+</sup>
| Name | Description |
| ------------- | ------------------------------------------------------------ | | ------------- | ------------------------------------------------------------ |
| Row | The child components are arranged in the same direction as the main axis runs along the rows. | | Left | The popup is on the left of the component, vertically aligned with the component on the left. |
| Column | The child components are arranged in the same direction as the main axis runs down the columns. | | Right | The popup is on the right of the component, vertically aligned with the component on the right. |
| RowReverse | The child components are arranged opposite to the **Row** direction. | | Top | The popup is at the top of the component, horizontally aligned with the component at the top. |
| ColumnReverse | The child components are arranged opposite to the **Column** direction. | | Bottom | The popup is at the bottom of the component, horizontally aligned with the component at the bottom. |
| TopLeft | The popup is at the top of the component and, since API version 9, aligned with the left of the component.|
| TopRight | The popup is at the top of the component and, since API version 9, aligned with the right of the component.|
| BottomLeft | The popup is at the bottom of the component and, since API version 9, aligned with the left of the component.|
| BottomRight | The popup is at the bottom of the component and, since API version 9, aligned with the right of the component.|
| LeftTop9+ | The popup is on the left of the component and aligned with the top of the component. |
| LeftBottom9+ | The popup is on the left of the component and aligned with the bottom of the component. |
| RightTop9+ | The popup is on the right of the component and aligned with the top of the component. |
| RightBottom9+ | The popup is on the right of the component and aligned with the bottom of the component. |
## CopyOptions<sup>9+</sup>
| Name | Description |
| ----------- | -------------------- |
| None | Copy and paste is not allowed. |
| InApp | Intra-application copy and paste is allowed.|
| LocalDevice | Intra-device copy and paste is allowed.|
## HitTestMode<sup>9+</sup>
| Name | Description |
| ----------- | -------------------- |
| Default | Both the node and its child node respond to the hit test of a touch event, and other nodes blocked by the node are not considered during the hit test. |
| Block | The node responds to the hit test of a touch event, and its child node and other nodes blocked by the node are not considered during the hit test. |
| Transparent | Both the node and its child node respond to the hit test of a touch event, and other nodes blocked by the node are also considered during the hit test.|
| None | The node does not respond to the hit test of a touch event, but its child nodes are considered during the hit test.|
en/application-dev/reference/arkui-ts/ts-basic-components-search.md
浏览文件 @ 75d9a8ab
# Search # Search
The **\<Search>** component provides an input area for users to search.
> **NOTE** > **NOTE**
> >
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Search>** component provides an input area for users to search.
## Required Permissions ## Required Permissions
None None
...@@ -20,32 +20,33 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll ...@@ -20,32 +20,33 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | ----------- | ---------------- | ---- | ---- | ---------------------------------------- |
| value | string | No| - | Text input in the search text box. | | value | string | No | - | Text input in the search text box. |
| placeholder | string | No | - | Text displayed when there is no input. | | placeholder | string | No | - | Text displayed when there is no input. |
| icon | string | No| - | Path to the search icon. By default, the system search icon is used. The supported icon formats are .svg, .jpg, and .png. | | icon | string | No | - | Path to the search icon. By default, the system search icon is used. The supported icon formats are .svg, .jpg, and .png.|
| controller | SearchController | No| - | Controller. | | controller | SearchController | No | - | Controller. |
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- | | ----------------------- | ---------------------------------------- | ---- | --------------------- |
| searchButton | string | –| Text on the search button located next to the search text box. By default, there is no search button. | | searchButton | string | – | Text on the search button located next to the search text box. By default, there is no search button.|
| placeholderColor | [ResourceColor](../../ui/ts-types.md) | - | Placeholder text color. | | placeholderColor | [ResourceColor](../../ui/ts-types.md) | - | Placeholder text color. |
| placeholderFont | [Font](../../ui/ts-types.md) | - | Placeholder text style. | | placeholderFont | [Font](../../ui/ts-types.md) | - | Placeholder text style. |
| textFont | [Font](../../ui/ts-types.md) | - | Text font for the search text box. | | textFont | [Font](../../ui/ts-types.md) | - | Text font for the search text box. |
| copyOption<sup>9+</sup> | [CopyOptions](ts-basic-components-text.md) | CopyOptions.CrossDevice | Whether copy and paste is allowed.|
## Events ## Events
| Name | Description | | Name | Description |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or tap the search button on a soft keyboard.<br> - **value**: current text input. | | onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or touch the search button on a soft keyboard.<br> -**value**: current text input.|
| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.<br> - **value**: current text input. | | onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.<br> -**value**: current text input. |
| onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.<br> - **value**: text copied. | | onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.<br> -**value**: text copied. |
| onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.<br> - **value**: text cut. | | onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.<br> -**value**: text cut. |
| onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.<br> - **value**: text pasted. | | onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.<br> -**value**: text pasted. |
## SearchController ## SearchController
...@@ -63,9 +64,9 @@ Sets the position of the caret. ...@@ -63,9 +64,9 @@ Sets the position of the caret.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | --------------------- | | ----- | ------ | ---- | ---- | ----------------- |
| value | number | Yes | - | Length from the start of the text string to the position where the caret is located. | | value | number | Yes | - | Length from the start of the character string to the position where the caret is located.|
...@@ -76,29 +77,30 @@ Sets the position of the caret. ...@@ -76,29 +77,30 @@ Sets the position of the caret.
@Entry @Entry
@Component @Component
struct SearchExample { struct SearchExample {
@State changevalue: string = '' @State changeValue: string = ''
@State submitvalue: string = '' @State submitValue: string = ''
controller: SearchController = new SearchController() controller: SearchController = new SearchController()
build() { build() {
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Text(this.submitvalue) Text(this.submitValue)
Text(this.changevalue) Text(this.changeValue)
Search({value: '', placeholder: 'Type to search', controller: this.controller}) Search({value: this.changeValue, placeholder: 'Type to search', controller: this.controller})
.searchButton('Search') .searchButton('Search')
.width(400) .width(400)
.height(35) .height(35)
.backgroundColor(Color.White) .backgroundColor(Color.White)
.placeholderColor(Color.Grey) .placeholderColor(Color.Grey)
.placeholderFont({ size: 50, weight: 10, family: 'serif', style: FontStyle.Normal }) .placeholderFont({ size: 26, weight: 10, family: 'serif', style: FontStyle.Normal })
.onSubmit((value: string) => { .onSubmit((value: string) => {
this.submitvalue = value this.submitValue = value
}) })
.onChange((value: string) => { .onChange((value: string) => {
this.changevalue = value this.changeValue = value
}) })
.margin({ top: 30 }) .margin({ top: 30, left:10, right:10 })
} }
} }
} }
``` ```
![search](figures/search.png)
en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
浏览文件 @ 75d9a8ab
# TextArea # TextArea
The **\<TextArea>** component provides multi-line text input. The **\<TextArea>** component provides multi-line text input and responds to certain input events.
> **NOTE** > **NOTE**
> >
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
...@@ -19,49 +19,42 @@ Not supported ...@@ -19,49 +19,42 @@ Not supported
## APIs ## APIs
TextArea(value?:{placeholder?: string, controller?: TextAreaController}) TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ----------------------- | ---------------------------------------- | --------- | ------------- | -------------------------------------- | | ----------------------- | ---------------------------------------- | ---- | ---- | -------------- |
| placeholder | string \|&nbsp;[Resource](../../ui/ts-types.md) | No | - | Text displayed when there is no input. | | placeholder | [ResourceStr](../../ui/ts-types.md) | No | - | Text displayed when there is no input. |
| text | string \|&nbsp;[Resource](../../ui/ts-types.md) | No | - | Current text input. | | text | [ResourceStr](../../ui/ts-types.md) | No | - | Current text input. |
| controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | No | - | Text area controller. | | controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | No | - | Text area controller.|
## Attributes ## Attributes
In addition to the universal attributes, the following attributes are supported. In addition to universal attributes, the following attributes are supported.
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| ------------------------ | ---------------------------------------- | ------------- | ---------------------------------------- | | ------------------------ | ---------------------------------------- | ----- | ---------------------------------------- |
| placeholderColor | Color | - | Placeholder text color. | | placeholderColor | Color | - | Placeholder text color. |
| placeholderFont | {<br/>size?: number,<br/>weight?:number \| [FontWeight](ts-universal-attributes-text-style.md),<br/>family?: string,<br/>style?: [FontStyle](ts-universal-attributes-text-style.md)<br/>} | - | Placeholder text style.<br/>- **size**: font size. If the value is of the number type, the unit fp is used.<br/>- **weight**: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.<br/>- **family**: font family. Use commas (,) to separate multiple fonts, for example, **'Arial, sans-serif'**. The priority of the fonts is the sequence in which they are placed.<br/>- **style**: font style. | | placeholderFont | {<br>size?: number,<br>weight?:number \| [FontWeight](ts-universal-attributes-text-style.md),<br>family?:&nbsp;string,<br>style?:&nbsp;[FontStyle](ts-universal-attributes-text-style.md)<br>} | - | Placeholder text style.<br>- **size**: font size. If the value is of the number type, the unit is fp.<br>- **weight**: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.<br>- **family**: font family. Use commas (,) to separate multiple fonts, for example, **'Arial, sans-serif'**. The priority of the fonts is the sequence in which they are placed.<br>- **style**: font style.|
| textAlign | TextAlign | Start | Text horizontal alignment mode. | | textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Start | Horizontal alignment of the text. |
| caretColor | Color | - | Color of the caret in the text box. | | caretColor | Color | - | Color of the caret in the text box. |
| inputFilter<sup>8+</sup> | {<br/>value: [ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?: (value:&nbsp;string)<br/>} | - | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are ignored. The specified regular expression can match single characters, but not strings. Example: ^(? =.\*\d)(? =.\*[a-z])(? =.\*[A-Z]).{8,10}$. Strong passwords containing 8 to 10 characters cannot be filtered.<br/>- **value**: indicates the regular expression to set.<br/>- **error**: returns the ignored content when regular expression matching fails. | | inputFilter<sup>8+</sup> | {<br>value: [ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br>error?:&nbsp;(value:&nbsp;string)<br>} | - | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are ignored. The specified regular expression can match single characters, but not strings. Example: ^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$. Strong passwords containing 8 to 10 characters cannot be filtered.<br>- **value**: regular expression to set.<br>- **error**: ignored content to return when regular expression matching fails.|
| copyOption<sup>9+</sup> | boolean\|[CopyOption](ts-basic-components-text.md) | true | Whether copy and paste is allowed. | | copyOption<sup>9+</sup> | [CopyOptions](ts-basic-components-text.md) | CopyOptions.CrossDevice | Whether copy and paste is allowed.|
- TextAlign enums
| Name | Description |
| ------ | ------------------------------- |
| Start | Aligns the header horizontally. |
| Center | Horizontal center alignment. |
| End | Align the tail horizontally. |
## Events ## Events
| Name | Description | | Name | Description |
| ---------------------------------------- | ---------------------------------------- | | ---------------------------------------- | ---------------------------------------- |
| onChange(callback: (value: string) =&gt; void) | Triggered when the input changes. | | onChange(callback: (value: string) =&gt; void) | Triggered when the input changes. |
| onCopy<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be copied. | | onCopy<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be copied.|
| onCut<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be cut. | | onCut<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be cut.|
| onPaste<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be pasted. | | onPaste<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be pasted.|
## TextAreaController<sup>8+</sup> ## TextAreaController<sup>8+</sup>
Defines the controller for controlling the **&lt;TextArea&gt;** component. Defines the controller for controlling the **\<TextArea>** component.
### Objects to Import ### Objects to Import
...@@ -77,9 +70,9 @@ caretPosition(value: number): void ...@@ -77,9 +70,9 @@ caretPosition(value: number): void
Sets the position of the caret. Sets the position of the caret.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ----- | ------ | --------- | ------------- | ------------------------------------------------------------ | | ----- | ------ | ---- | ---- | ------------------- |
| value | number | Yes | - | Length from the start of the text string to the position where the caret is located. | | value | number | Yes | - | Length from the start of the string to the position where the caret is located.|
## Example ## Example
...@@ -87,7 +80,6 @@ Sets the position of the caret. ...@@ -87,7 +80,6 @@ Sets the position of the caret.
### Multi-line Text Input ### Multi-line Text Input
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或