diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174104404.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174104404.png new file mode 100644 index 0000000000000000000000000000000000000000..e370a44cf043fc34bd8891f57faad2cd2ca05707 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174104404.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264376.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264376.png new file mode 100644 index 0000000000000000000000000000000000000000..dfcb0c5e259b3f8d7375c21712249c1e847edd67 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264376.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174422914.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174422914.png new file mode 100644 index 0000000000000000000000000000000000000000..bc28f5056c679e189543c8ad6fba67fb56db7655 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174422914.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582864.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582864.png new file mode 100644 index 0000000000000000000000000000000000000000..b54dbc2391d1a8f16312dd02dc3d65a35ea2626f Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582864.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582866.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582866.png new file mode 100644 index 0000000000000000000000000000000000000000..56d32d4cd371c5374b133cb81c9c077aaf7b110d Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582866.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219662661.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219662661.png new file mode 100644 index 0000000000000000000000000000000000000000..9c43caf5fdfd466eafc37b793f509a6bde2b885d Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219662661.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219662663.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219662663.png new file mode 100644 index 0000000000000000000000000000000000000000..5c5e360f249a2002ba68ad9b94bd7f66f5d6aab1 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219662663.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219662665.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219662665.png new file mode 100644 index 0000000000000000000000000000000000000000..309d1c46f8bc396df5eaed381a5ffa2f0389d602 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219662665.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219744201.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219744201.png new file mode 100644 index 0000000000000000000000000000000000000000..0d22570503febc7a7dcba0d1e870f49f32fe489a Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219744201.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219864153.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219864153.png new file mode 100644 index 0000000000000000000000000000000000000000..58293d5e874f2aa36ecaf7282ca9e4736318092f Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219864153.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/search.png b/en/application-dev/reference/arkui-ts/figures/search.png new file mode 100644 index 0000000000000000000000000000000000000000..fddf98d7104f3bd8a370b5be86da322834ff0180 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/search.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-appendix-enums.md b/en/application-dev/reference/arkui-ts/ts-appendix-enums.md index 8bb7437c05ac703286d85f0a87c8d9b5d85fa890..c6b823d9d0b560ca1b3c157f715c2e93df4a2ad9 100644 --- a/en/application-dev/reference/arkui-ts/ts-appendix-enums.md +++ b/en/application-dev/reference/arkui-ts/ts-appendix-enums.md @@ -1,103 +1,423 @@ # 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) | +| Transparent9+ | rgba(0,0,0,0) | Transparent | - | 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. | +## 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. | -## Axis Enums +## BorderStyle - | Name | Description | -| -------- | -------- | -| Vertical | Vertical direction. | -| Horizontal | Horizontal direction. | +| Name | Description | +| ------ | ----------------------------------------------- | +| Dotted | Dotted border. The radius of a dot is half of **borderWidth**.| +| 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 | -| -------- | -------- | -| 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. | +## 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. | -## LineCapStyle Enums +## MouseButton - | Name | Description | -| -------- | -------- | -| Butt | The ends of dividing lines are square. | -| Round | The ends of dividing lines are rounded. | -| Square | The ends of dividing lines are square. | +| 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 -## PlayMode Enums +| Name | Description | +| ------- | -------------- | +| Press | The mouse button is pressed.| +| Release | The mouse button is released.| +| Move | The mouse cursor moves. | - | Name | Description | -| -------- | -------- | -| 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...). | +## 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). | -## ImageRepeat Enums +## AnimationStatus - | Name | Description | -| -------- | -------- | -| 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 | +| ------- | ------------------ | +| 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 -## 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 | -| -------- | -------- | -| Underline | Line under the text. | -| LineThrough | Line through the text. | -| Overline | Line over the text. | -| None | No decorative lines. | +## 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...).| -## TextCase Enums +## KeyType - | Name | Description | -| -------- | -------- | -| Normal | Normal case. | -| LowerCase | All lowercase. | -| UpperCase | All uppercase. | +| Name| Description | +| ---- | ---------- | +| Down | The key is pressed.| +| Up | The key is released.| +## KeySource -## BarState Enums +| Name | Description | +| -------- | -------------------- | +| Unknown | Unknown input device. | +| Keyboard | The input device is a keyboard.| - | Name | Description | -| -------- | -------- | -| Off | Hide. | -| On | Display. | -| Auto | Display on demand (displays when the screen is touched and disappears after 2s). | +## Edge -## 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 **\** component are arranged in a single line, and they cannot overflow. | +| Wrap | The child components in the **\** component are arranged in multiple lines, and they may overflow. | +| WrapReverse | The child components in the **\** 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. | + +## ResponseType8+ + +| Name | Description | +| ---------- | -------------------------- | +| LongPress | The menu is displayed when the component is long-pressed. | +| RightClick | The menu is displayed when the component is right-clicked.| + +## HoverEffect8+ + +| Name | Description | +| --------- | ---------------------------- | +| Auto | Default hover effect.| +| Scale | Scale effect. | +| Highlight | Background fade-in and fade-out effect. | +| None | No effect. | + +## Placement8+ + +| Name | Description | | ------------- | ------------------------------------------------------------ | -| Row | The child components are arranged in the same direction as the main axis runs along the rows. | -| Column | The child components are arranged in the same direction as the main axis runs down the columns. | -| RowReverse | The child components are arranged opposite to the **Row** direction. | -| ColumnReverse | The child components are arranged opposite to the **Column** direction. | +| Left | The popup is on the left of the component, vertically aligned with the component on the left. | +| Right | The popup is on the right of the component, vertically aligned with the component on the right. | +| Top | The popup is at the top of the component, horizontally aligned with the component at the top. | +| 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. | + +## CopyOptions9+ + +| 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.| + +## HitTestMode9+ +| 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.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-search.md b/en/application-dev/reference/arkui-ts/ts-basic-components-search.md index 386f5aa23c7467f88e77d0c34647f2467af903b3..b67cfbe4702823a97f90e5dbf97537bce464bddd 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-search.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-search.md @@ -1,11 +1,11 @@ # Search +The **\** component provides an input area for users to search. + > **NOTE** > > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. -The **\** component provides an input area for users to search. - ## Required Permissions None @@ -20,32 +20,33 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll - Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | value | string | No| - | Text input in the search text box. | - | 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. | - | controller | SearchController | No| - | Controller. | + | Name | Type | Mandatory | Default Value | Description | + | ----------- | ---------------- | ---- | ---- | ---------------------------------------- | + | value | string | No | - | Text input in the search text box. | + | 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.| + | controller | SearchController | No | - | Controller. | ## Attributes -| 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. | -| placeholderColor | [ResourceColor](../../ui/ts-types.md) | - | Placeholder text color. | -| placeholderFont | [Font](../../ui/ts-types.md) | - | Placeholder text style. | -| textFont | [Font](../../ui/ts-types.md) | - | Text font for the search text box. | +| 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.| +| placeholderColor | [ResourceColor](../../ui/ts-types.md) | - | Placeholder text color. | +| placeholderFont | [Font](../../ui/ts-types.md) | - | Placeholder text style. | +| textFont | [Font](../../ui/ts-types.md) | - | Text font for the search text box. | +| copyOption9+ | [CopyOptions](ts-basic-components-text.md) | CopyOptions.CrossDevice | Whether copy and paste is allowed.| ## Events -| 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.
- **value**: current text input. | -| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.
- **value**: current text input. | -| onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.
- **value**: text copied. | -| onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.
- **value**: text cut. | -| onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.
- **value**: text pasted. | +| Name | Description | +| ---------------------------------------- | ---------------------------------------- | +| 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.
-**value**: current text input.| +| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.
-**value**: current text input. | +| onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.
-**value**: text copied. | +| onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.
-**value**: text cut. | +| onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.
-**value**: text pasted. | ## SearchController @@ -63,9 +64,9 @@ Sets the position of the caret. - Parameters - | 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. | + | Name | Type | Mandatory | Default Value | Description | + | ----- | ------ | ---- | ---- | ----------------- | + | 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. @Entry @Component struct SearchExample { - @State changevalue: string = '' - @State submitvalue: string = '' + @State changeValue: string = '' + @State submitValue: string = '' controller: SearchController = new SearchController() build() { Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { - Text(this.submitvalue) - Text(this.changevalue) - Search({value: '', placeholder: 'Type to search', controller: this.controller}) + Text(this.submitValue) + Text(this.changeValue) + Search({value: this.changeValue, placeholder: 'Type to search', controller: this.controller}) .searchButton('Search') .width(400) .height(35) .backgroundColor(Color.White) .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) => { - this.submitvalue = value + this.submitValue = value }) .onChange((value: string) => { - this.changevalue = value + this.changeValue = value }) - .margin({ top: 30 }) + .margin({ top: 30, left:10, right:10 }) } } } ``` +![search](figures/search.png) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md index 198465ee6bbc043905554cb585365a27c5254a42..37666275de96d6b3e55124c96ae75785ed76009f 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md @@ -1,8 +1,8 @@ # TextArea -The **\