Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
“4ced312d19882aee516a7783bce1b64e0f0af837”上不存在“...application-models/js-ui-widget-development.md”
未验证 提交 2b2d664a 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!9091 翻译完成 7869：ts-basic-components-textarea.md & ts-basic-components-search.md 

Merge pull request !9091 from ester.zhou/TR-7869
上级 3deeef70 75d9a8ab
显示空白变更内容
内联 并排
Showing with 452 addition and 138 deletion
en/application-dev/reference/arkui-ts/ts-appendix-enums.md
浏览文件 @ 2b2d664a
# 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
| -------- | -------- |
| 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. |
## BorderStyle
| Name | Description |
| ------ | ----------------------------------------------- |
| Dotted | Dotted border. The radius of a dot is half of **borderWidth**.|
| Dashed | Dashed border. |
| Solid | Solid border. |
## LineJoinStyle
| Name | Description |
| ----- | -------------------- |
| Bevel | Bevel is used to connect paths.|
| Miter | Miter is used to connect paths.|
| Round | Round is used to connect paths.|
## TouchType
| 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. |
## MouseButton
| Name | Description |
| ------- | ---------------- |
| Left | Left button on the mouse. |
| Right | Right button on the mouse. |
| 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
| Name | Description |
| ------- | -------------- |
| Press | The mouse button is pressed.|
| Release | The mouse button is released.|
| Move | The mouse cursor moves. |
## Curve
| 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). |
## AnimationStatus
| Name | Description |
| ------- | ------------------ |
| Initial | The animation is in the initial state. |
| Running | The animation is being played.|
| Paused | The animation is paused.|
| Stopped | The animation is stopped.|
## FillMode
| 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.|
## PlayMode
| 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...).|
## KeyType
| Name| Description |
| ---- | ---------- |
| Down | The key is pressed.|
| Up | The key is released.|
## KeySource
| Name | Description |
| -------- | -------------------- |
| Unknown | Unknown input device. |
| Keyboard | The input device is a keyboard.|
## Edge
| 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. |
## 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. | | TopStart | Top start. |
| Top | Horizontally centered on the top. | | Top | Horizontally centered on the top. |
| TopEnd | Top end. | | TopEnd | Top end. |
| Start | Vertically centered start. | | Start | Vertically centered start.|
| Center | Horizontally and vertically centered. | | Center | Horizontally and vertically centered.|
| End | Vertically centered end. | | End | Vertically centered end. |
| BottomStart | Bottom start. | | BottomStart | Bottom start. |
| Bottom | Horizontally centered on the bottom. | | Bottom | Horizontally centered on the bottom. |
| BottomEnd | Bottom end. | | BottomEnd | Bottom end. |
## TransitionType
## Axis Enums | 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. |
| Name | Description | ## RelateType
| -------- | -------- |
| Vertical | Vertical direction. |
| Horizontal | Horizontal direction. |
| 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. |
## ItemAlign Enums ## Visibility
| Name | Description | | 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. | | 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 | | 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. | | 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. | | 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. | | 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. | | Baseline | The elements are in the Flex container, text baseline aligned in the cross-axis direction. |
## FlexDirection
## LineCapStyle Enums | 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. |
| Name | Description | ## FlexWrap
| -------- | -------- |
| Butt | The ends of dividing lines are square. | | Name | Description |
| Round | The ends of dividing lines are rounded. | | ----------- | ------------------------------------------------- |
| Square | The ends of dividing lines are square. | | 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
## PlayMode Enums | 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. |
| Name | Description | ## GradientDirection
| -------- | -------- |
| Normal | The animation is played normally. | | Name | Description |
| 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...). | | Left | The gradient direction is from right to left.|
| 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...). | | 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
## ImageRepeat Enums | Name | Description |
| ------ | -------------- |
| Start | Aligned with the start.|
| Center | Horizontally centered.|
| End | Aligned with the end.|
| Name | Description | ## TextOverflow
| -------- | -------- |
| X | Images are repeatedly drawn only on the horizontal axis. |
| Y | Images are repeatedly drawn only on the vertical axis. |
| XY | Images are repeatedly drawn on both axes. |
| NoRepeat | Images are not repeatedly drawn. |
| 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 Enums ## TextDecorationType
| Name | Description | | Name | Description |
| -------- | -------- | | ----------- | ------------------ |
| Underline | Line under the text. | | Underline | Line under the text. |
| LineThrough | Line through the text. | | LineThrough | Line through the text.|
| Overline | Line over the text. | | Overline | Line over the text. |
| None | No decorative lines. | | None | No decorative lines.|
## TextCase
## TextCase Enums | 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. |
| Name | Description | ## ResponseType<sup>8+</sup>
| -------- | -------- |
| Normal | Normal case. |
| LowerCase | All lowercase. |
| UpperCase | All uppercase. |
| Name | Description |
| ---------- | -------------------------- |
| LongPress | The menu is displayed when the component is long-pressed. |
| RightClick | The menu is displayed when the component is right-clicked.|
## BarState Enums ## HoverEffect<sup>8+</sup>
| Name | Description | | Name | Description |
| -------- | -------- | | --------- | ---------------------------- |
| Off | Hide. | | Auto | Default hover effect.|
| On | Display. | | Scale | Scale effect. |
| Auto | Display on demand (displays when the screen is touched and disappears after 2s). | | Highlight | Background fade-in and fade-out effect. |
| None | No effect. |
## LayoutDirection Enums ## Placement<sup>8+</sup>
| Name | Description | | 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
浏览文件 @ 2b2d664a
# 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
...@@ -21,31 +21,32 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll ...@@ -21,31 +21,32 @@ 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
...@@ -64,8 +65,8 @@ Sets the position of the caret. ...@@ -64,8 +65,8 @@ 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
浏览文件 @ 2b2d664a
# 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**
> >
...@@ -19,35 +19,28 @@ Not supported ...@@ -19,35 +19,28 @@ 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
...@@ -55,13 +48,13 @@ In addition to the universal attributes, the following attributes are supported. ...@@ -55,13 +48,13 @@ In addition to the universal attributes, the following attributes are supported.
| 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
...@@ -78,8 +71,8 @@ Sets the position of the caret. ...@@ -78,8 +71,8 @@ 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.
先完成此消息的编辑！
想要评论请 注册 或