diff --git a/en/application-dev/reference/apis-arkui/Readme-EN.md b/en/application-dev/reference/apis-arkui/Readme-EN.md index 20930adbb3865e9f10793d9c2d72001a38fbbfcb..fb5e19e614b753e74502fd4b50136d1b49863858 100644 --- a/en/application-dev/reference/apis-arkui/Readme-EN.md +++ b/en/application-dev/reference/apis-arkui/Readme-EN.md @@ -1,7 +1,7 @@ # ArkUI -- ArkTS APIs - - UI +- ArkTS API + - UI - [@ohos.animator (Animator)](js-apis-animator.md) - [@ohos.arkui.componentSnapshot (Component Snapshot)](js-apis-arkui-componentSnapshot.md) - [@ohos.arkui.componentUtils (componentUtils)](js-apis-arkui-componentUtils.md) @@ -12,7 +12,7 @@ - [@ohos.arkui.observer (Observer)](js-apis-arkui-observer.md) - [@ohos.arkui.prefetcher (Prefetching)](js-apis-arkui-Prefetcher.md) - [@ohos.arkui.shape(Shape)](js-apis-arkui-shape.md) - - [@ohos.arkui.Theme (Theme)](js-apis-arkui-theme.md) + - [@ohos.arkui.theme (Theme)](js-apis-arkui-theme.md) - [@ohos.arkui.UIContext (UIContext)](js-apis-arkui-UIContext.md) - [@ohos.arkui.uiExtension (uiExtension)](js-apis-arkui-uiExtension.md) - [@ohos.arkui.StateManagement (State Management)](js-apis-StateManagement.md) @@ -37,7 +37,7 @@ - [@ohos.arkui.UIContext (UIContext) (System API)](js-apis-arkui-UIContext-sys.md) - [@ohos.promptAction (Prompt) (System API)](js-apis-promptAction-sys.md) - - arkui + - ArkUI - [BuilderNode](js-apis-arkui-builderNode.md) - [ComponentContent](js-apis-arkui-ComponentContent.md) - [FrameNode](js-apis-arkui-frameNode.md) @@ -47,21 +47,24 @@ - [AttributeUpdater](js-apis-arkui-AttributeUpdater.md) - [Content](js-apis-arkui-Content.md) - [NodeContent](js-apis-arkui-NodeContent.md) - - Graphics - - [@ohos.display (Display)](js-apis-display.md) + - Window Manager - [@ohos.PiPWindow (PiP Window)](js-apis-pipWindow.md) - [@ohos.window (Window)](js-apis-window.md) - - [@ohos.screenshot (Screenshot)](js-apis-screenshot.md) - [@ohos.animation.windowAnimationManager (Window Animation Management) (System API)](js-apis-windowAnimationManager-sys.md) - [@ohos.application.WindowExtensionAbility (WindowExtensionAbility) (System API)](js-apis-application-windowExtensionAbility-sys.md) + - [@ohos.window (Window) (System API)](js-apis-window-sys.md) + - [WindowExtensionContext (System API)](js-apis-inner-application-windowExtensionContext-sys.md) + + - Display Management + - [@ohos.display (Display)](js-apis-display.md) + - [@ohos.screenshot (Screenshot)](js-apis-screenshot.md) + - [@ohos.display (Display) (System API)](js-apis-display-sys.md) - [@ohos.screen (Screen) (System API)](js-apis-screen-sys.md) - [@ohos.screenshot (Screenshot) (System API)](js-apis-screenshot-sys.md) - - [@ohos.window (Window) (System API)](js-apis-window-sys.md) - - [WindowExtensionContext (System API)](js-apis-inner-application-windowExtensionContext-sys.md) - - APIs No Longer Maintained + - APIs No Longer Maintained - [@ohos.prompt (Prompt)](js-apis-prompt.md) - [@system.app (Application Context)](js-apis-system-app.md) - [@system.configuration (Application Configuration)](js-apis-system-configuration.md) @@ -69,9 +72,9 @@ - [@system.prompt (Prompt)](js-apis-system-prompt.md) - [@system.router (Page Routing)](js-apis-system-router.md) - [XComponentNode](js-apis-arkui-xcomponentNode.md) -- ArkTS Components - - Universal Component Information - - Universal Events +- ArkTS Components + - Universal Components + - [Universal Events](arkui-ts/ts-component-general-events.md) - [Click Event](arkui-ts/ts-universal-events-click.md) - [Touch Event](arkui-ts/ts-universal-events-touch.md) - [Show/Hide Event](arkui-ts/ts-universal-events-show-hide.md) @@ -89,7 +92,8 @@ - [Custom Event Dispatch](arkui-ts/ts-universal-attributes-on-child-touch-test.md) - [Custom Event Interception](arkui-ts/ts-universal-attributes-on-touch-intercept.md) - [Focus Axis Event](arkui-ts/ts-universal-events-focus_axis.md) - - Universal attributes + - [Axis Event](arkui-ts/ts-universal-events-axis.md) + - [Universal Attributes](arkui-ts/ts-component-general-attributes.md) - [Size](arkui-ts/ts-universal-attributes-size.md) - [Location](arkui-ts/ts-universal-attributes-location.md) - [Layout Constraints](arkui-ts/ts-universal-attributes-layout-constraints.md) @@ -106,20 +110,22 @@ - [Transformation](arkui-ts/ts-universal-attributes-transformation.md) - [Image Effect](arkui-ts/ts-universal-attributes-image-effect.md) - [Shape Clipping](arkui-ts/ts-universal-attributes-sharp-clipping.md) - - [Gradient Color](arkui-ts/ts-universal-attributes-gradient-color.md) + - [Color Gradient](arkui-ts/ts-universal-attributes-gradient-color.md) - [Popup Control](arkui-ts/ts-universal-attributes-popup.md) + - [Tooltip Control](arkui-ts/ts-universal-attributes-tips.md) - [Menu Control](arkui-ts/ts-universal-attributes-menu.md) - [Focus Control](arkui-ts/ts-universal-attributes-focus.md) - [Hover Effect](arkui-ts/ts-universal-attributes-hover-effect.md) - [Component ID](arkui-ts/ts-universal-attributes-component-id.md) - [Reuse ID](arkui-ts/ts-universal-attributes-reuse-id.md) + - [Reuse Options](arkui-ts/ts-universal-attributes-reuse.md) - [Polymorphic Style](arkui-ts/ts-universal-attributes-polymorphic-style.md) - [restoreId](arkui-ts/ts-universal-attributes-restoreId.md) - [Foreground Color](arkui-ts/ts-universal-attributes-foreground-color.md) - [Foreground Effect](arkui-ts/ts-universal-attributes-foreground-effect.md) - [Foreground Blur](arkui-ts/ts-universal-attributes-foreground-blur-style.md) - [Motion Blur](arkui-ts/ts-universal-attributes-motionBlur.md) - - [Click Effect](arkui-ts/ts-universal-attributes-click-effect.md) + - [Click Feedback Effect](arkui-ts/ts-universal-attributes-click-effect.md) - [Accessibility](arkui-ts/ts-universal-attributes-accessibility.md) - [Attribute Modifier](arkui-ts/ts-universal-attributes-attribute-modifier.md) - [Gesture Modifier](arkui-ts/ts-universal-attributes-gesture-modifier.md) @@ -128,10 +134,10 @@ - [Drawing Modifier](arkui-ts/ts-universal-attributes-draw-modifier.md) - [Content Modifier](arkui-ts/ts-universal-attributes-content-modifier.md) - [Custom Property](arkui-ts/ts-universal-attributes-custom-property.md) - - Touch Interactions + - Touch Interactions - [Touch Target](arkui-ts/ts-universal-attributes-touch-target.md) - [Hit Test Control](arkui-ts/ts-universal-attributes-hit-test-behavior.md) - - Transition + - Transition - [Modal Transition](arkui-ts/ts-universal-attributes-modal-transition.md) - [Sheet Transition](arkui-ts/ts-universal-attributes-sheet-transition.md) - [Sheet Transition (System API)](arkui-ts/ts-universal-attributes-sheet-transition-sys.md) @@ -147,7 +153,7 @@ - [Point Light Style (System API)](arkui-ts/ts-universal-attributes-point-light-style-sys.md) - [Image Effect (System API)](arkui-ts/ts-universal-attributes-image-effect-sys.md) - - Gesture Handling + - Gesture Handling - [Gesture Binding Methods](arkui-ts/ts-gesture-settings.md) - [TapGesture](arkui-ts/ts-basic-gestures-tapgesture.md) - [LongPressGesture](arkui-ts/ts-basic-gestures-longpressgesture.md) @@ -159,28 +165,25 @@ - [Custom Gesture Judgment](arkui-ts/ts-gesture-customize-judge.md) - [Bound Gesture Configuration](arkui-ts/ts-uigestureevent.md) - [Gesture Blocking Enhancement](arkui-ts/ts-gesture-blocking-enhancement.md) - - Rows, Columns, and Stacking + - Rows, Columns, and Stacking - [Flex](arkui-ts/ts-container-flex.md) - [Column](arkui-ts/ts-container-column.md) - [Row](arkui-ts/ts-container-row.md) - [Stack](arkui-ts/ts-container-stack.md) - [RelativeContainer](arkui-ts/ts-container-relativecontainer.md) - - [FolderStack](arkui-ts/ts-container-folderstack.md) - [Flex (System API)](arkui-ts/ts-container-flex-sys.md) - [Column (System API)](arkui-ts/ts-container-column-sys.md) - [Row (System API)](arkui-ts/ts-container-row-sys.md) - [Stack (System API)](arkui-ts/ts-container-stack-sys.md) - - Grid and Column Layout + - Grid and Column Layout - [GridRow](arkui-ts/ts-container-gridrow.md) - [GridCol](arkui-ts/ts-container-gridcol.md) - [ColumnSplit](arkui-ts/ts-container-columnsplit.md) - [RowSplit](arkui-ts/ts-container-rowsplit.md) - - [SplitLayout](arkui-ts/ohos-arkui-advanced-SplitLayout.md) - - [FoldSplitContainer](arkui-ts/ohos-arkui-advanced-FoldSplitContainer.md) - [SideBarContainer](arkui-ts/ts-container-sidebarcontainer.md) - - Scroll and Swipe + - Scroll and Swipe - [List](arkui-ts/ts-container-list.md) - [ListItem](arkui-ts/ts-container-listitem.md) - [ListItemGroup](arkui-ts/ts-container-listitemgroup.md) @@ -190,19 +193,18 @@ - [GridItem](arkui-ts/ts-container-griditem.md) - [Scroll](arkui-ts/ts-container-scroll.md) - [Swiper](arkui-ts/ts-container-swiper.md) + - [ArcSwiper](arkui-ts/ts-container-arcswiper.md) - [WaterFlow](arkui-ts/ts-container-waterflow.md) - [FlowItem](arkui-ts/ts-container-flowitem.md) + - [LazyVGridLayout](arkui-ts/ts-container-lazyvgridlayout.md) - [ScrollBar](arkui-ts/ts-basic-components-scrollbar.md) - [Refresh](arkui-ts/ts-container-refresh.md) - - [ComposeListItem](arkui-ts/ohos-arkui-advanced-ComposeListItem.md) - - [GridObjectSortComponent](arkui-ts/ohos-arkui-advanced-GridObjectSortComponent.md) - - [SwipeRefresher](arkui-ts/ohos-arkui-advanced-SwipeRefresher.md) - [ArcScrollBar](arkui-ts/ts-basic-components-arcscrollbar.md) - [Scrollable Component Common APIs](arkui-ts/ts-container-scrollable-common.md) - [List (System API)](arkui-ts/ts-container-list-sys.md) - - Navigation and Switching + - Navigation and Switching - [Indicator](arkui-ts/ts-swiper-components-indicator.md) - [Navigation](arkui-ts/ts-basic-components-navigation.md) - [NavDestination](arkui-ts/ts-basic-components-navdestination.md) @@ -211,7 +213,7 @@ - [StepperItem](arkui-ts/ts-basic-components-stepperitem.md) - [Tabs](arkui-ts/ts-container-tabs.md) - [TabContent](arkui-ts/ts-container-tabcontent.md) - - Buttons and Selections + - Buttons and Selections - [Button](arkui-ts/ts-basic-components-button.md) - [Toggle](arkui-ts/ts-basic-components-toggle.md) - [Checkbox](arkui-ts/ts-basic-components-checkbox.md) @@ -224,13 +226,10 @@ - [Rating](arkui-ts/ts-basic-components-rating.md) - [Select](arkui-ts/ts-basic-components-select.md) - [Slider](arkui-ts/ts-basic-components-slider.md) - - [DownloadFileButton](arkui-ts/ohos-arkui-advanced-DownloadFileButton.md) - - [ProgressButton](arkui-ts/ohos-arkui-advanced-ProgressButton.md) - - [SegmentButton](arkui-ts/ohos-arkui-advanced-SegmentButton.md) - [SegmentButtonV2](arkui-ts/ohos-arkui-advanced-SegmentButtonV2.md) - - [Filter](arkui-ts/ohos-arkui-advanced-Filter.md) - [ArcButton](arkui-ts/ohos-arkui-advanced-ArcButton.md) - - Text and Input + - [ArcSlider](arkui-ts/ohos-arkui-advanced-ArcSlider.md) + - Text and Input - [Text](arkui-ts/ts-basic-components-text.md) - [TextArea](arkui-ts/ts-basic-components-textarea.md) - [TextInput](arkui-ts/ts-basic-components-textinput.md) @@ -243,14 +242,15 @@ - [SymbolGlyph](arkui-ts/ts-basic-components-symbolGlyph.md) - [Hyperlink](arkui-ts/ts-container-hyperlink.md) - [RichText](arkui-ts/ts-basic-components-richtext.md) - - [SelectionMenu](arkui-ts/ohos-arkui-advanced-SelectionMenu.md) - [Styled String](arkui-ts/ts-universal-styled-string.md) - [Text Component Common APIs](arkui-ts/ts-text-common.md) + - [Text Component Common APIs (System API)](arkui-ts/ts-text-common-sys.md) - [TextInput (System API)](arkui-ts/ts-basic-components-textinput-sys.md) - [Styled String (System API)](arkui-ts/ts-universal-styled-string-sys.md) + - [RichEditor (System API)](arkui-ts/ts-basic-components-richeditor-sys.md) - - Images and Videos + - Images and Videos - [Image](arkui-ts/ts-basic-components-image.md) - [ImageAnimator](arkui-ts/ts-basic-components-imageanimator.md) - [Video](arkui-ts/ts-media-components-video.md) @@ -258,32 +258,27 @@ - [Image (System API)](arkui-ts/ts-basic-components-image-sys.md) - [MediaCachedImage (System API)](arkui-ts/ts-basic-components-mediacachedimage-sys.md) + - [Video (System API)](arkui-ts/ts-media-components-video-sys.md) - - Information Display + - Information Display - [AlphabetIndexer](arkui-ts/ts-container-alphabet-indexer.md) - [ArcAlphabetIndexer](arkui-ts/ts-container-arc-alphabet-indexer.md) - [Badge](arkui-ts/ts-container-badge.md) - - [Chip](arkui-ts/ohos-arkui-advanced-Chip.md) - - [ChipGroup](arkui-ts/ohos-arkui-advanced-ChipGroup.md) - [Counter](arkui-ts/ts-container-counter.md) - [advanced.Counter](arkui-ts/ohos-arkui-advanced-Counter.md) - [DataPanel](arkui-ts/ts-basic-components-datapanel.md) - - [ExceptionPrompt](arkui-ts/ohos-arkui-advanced-ExceptionPrompt.md) - [Gauge](arkui-ts/ts-basic-components-gauge.md) - [LoadingProgress](arkui-ts/ts-basic-components-loadingprogress.md) - - [LinearIndicator](arkui-ts/ts-basic-components-linearindicator.md) - [Marquee](arkui-ts/ts-basic-components-marquee.md) - [PatternLock](arkui-ts/ts-basic-components-patternlock.md) - [Progress](arkui-ts/ts-basic-components-progress.md) - - [Popup](arkui-ts/ohos-arkui-advanced-Popup.md) - [QRCode](arkui-ts/ts-basic-components-qrcode.md) - [TextClock](arkui-ts/ts-basic-components-textclock.md) - [TextTimer](arkui-ts/ts-basic-components-texttimer.md) - - [TreeView](arkui-ts/ohos-arkui-advanced-TreeView.md) - - Blank and Divider + - Blank and Divider - [Blank](arkui-ts/ts-basic-components-blank.md) - [Divider](arkui-ts/ts-basic-components-divider.md) - - Canvas Drawing + - Canvas Drawing - [Canvas](arkui-ts/ts-components-canvas-canvas.md) - [CanvasGradient](arkui-ts/ts-components-canvas-canvasgradient.md) - [CanvasPattern](arkui-ts/ts-components-canvas-canvaspattern.md) @@ -295,7 +290,7 @@ - [OffscreenCanvas](arkui-ts/ts-components-offscreencanvas.md) - [OffscreenCanvasRenderingContext2D](arkui-ts/ts-offscreencanvasrenderingcontext2d.md) - [Path2D](arkui-ts/ts-components-canvas-path2d.md) - - Graphic Drawing + - Graphic Drawing - [Circle](arkui-ts/ts-drawing-components-circle.md) - [Ellipse](arkui-ts/ts-drawing-components-ellipse.md) - [Line](arkui-ts/ts-drawing-components-line.md) @@ -304,24 +299,17 @@ - [Path](arkui-ts/ts-drawing-components-path.md) - [Rect](arkui-ts/ts-drawing-components-rect.md) - [Shape](arkui-ts/ts-drawing-components-shape.md) - - Rendering Drawing + - Rendering Drawing - [XComponent](arkui-ts/ts-basic-components-xcomponent.md) - [Component3D](arkui-ts/ts-basic-components-component3d.md) - [EmbeddedComponent](arkui-ts/ts-container-embedded-component.md) - [XComponent (System API)](arkui-ts/ts-basic-components-xcomponent-sys.md) - - Title Bars and Toolbars - - [ComposeTitleBar](arkui-ts/ohos-arkui-advanced-ComposeTitleBar.md) - - [EditableTitleBar](arkui-ts/ohos-arkui-advanced-EditableTitleBar.md) - - [SelectTitleBar](arkui-ts/ohos-arkui-advanced-SelectTitleBar.md) - - [TabTitleBar](arkui-ts/ohos-arkui-advanced-TabTitleBar.md) - - [ToolBar](arkui-ts/ohos-arkui-advanced-ToolBar.md) - - [SubHeader](arkui-ts/ohos-arkui-advanced-SubHeader.md) - - Menus + - Menus - [Menu](arkui-ts/ts-basic-components-menu.md) - [MenuItem](arkui-ts/ts-basic-components-menuitem.md) - [MenuItemGroup](arkui-ts/ts-basic-components-menuitemgroup.md) - [ContextMenu](arkui-ts/ts-methods-menu.md) - - Animation + - Animation - [Property Animation (animation)](arkui-ts/ts-animatorproperty.md) - [Explicit Animation (animateTo)](arkui-ts/ts-explicit-animation.md) - [Keyframe Animation (keyframeAnimateTo)](arkui-ts/ts-keyframeAnimateTo.md) @@ -335,7 +323,7 @@ - [Implicit Shared Element Transition (geometryTransition) (System API)](arkui-ts/ts-transition-animation-geometrytransition-sys.md) - - Dialog Boxes + - Dialog Boxes - [Alert Dialog Box (AlertDialog)](arkui-ts/ts-methods-alert-dialog-box.md) - [Action Sheet (ActionSheet)](arkui-ts/ts-methods-action-sheet.md) - [Custom Dialog Box (CustomDialog)](arkui-ts/ts-methods-custom-dialog-box.md) @@ -344,47 +332,77 @@ - [Time Picker Dialog Box (TimePickerDialog)](arkui-ts/ts-methods-timepicker-dialog.md) - [Text Picker Dialog Box (TextPickerDialog)](arkui-ts/ts-methods-textpicker-dialog.md) - [Dialog Box (Dialog)](arkui-ts/ohos-arkui-advanced-Dialog.md) - - Service Widgets + - Service Widgets - [FormLink](arkui-ts/ts-container-formlink.md) - - [FormMenu](arkui-ts/ohos-arkui-advanced-formmenu.md) - [FormComponent (System API)](arkui-ts/ts-basic-components-formcomponent-sys.md) - - Security + - Security - [Security Component Universal Attributes](arkui-ts/ts-securitycomponent-attributes.md) - [PasteButton](arkui-ts/ts-security-components-pastebutton.md) - [SaveButton](arkui-ts/ts-security-components-savebutton.md) - [SaveButton (System API)](arkui-ts/ts-security-components-savebutton-sys.md) - - Themes + - Themes - [WithTheme](arkui-ts/ts-container-with-theme.md) - - Atomic Services + - Atomic Services - [AtomicServiceNavigation](arkui-ts/ohos-atomicservice-AtomicServiceNavigation.md) + - [AtomicServiceSearch](arkui-ts/ohos-atomicservice-AtomicServiceSearch.md) - [AtomicServiceTabs](arkui-ts/ohos-atomicservice-AtomicServiceTabs.md) - [AtomicServiceWeb](arkui-ts/ohos-atomicservice-AtomicServiceWeb.md) - [InterstitialDialogAction](arkui-ts/ohos-atomicservice-InterstitialDialogAction.md) - - [FullScreenLaunchComponent](arkui-ts/ohos-arkui-advanced-FullScreenLaunchComponent.md) + - [HalfScreenLaunchComponent](arkui-ts/ohos-atomicservice-HalfScreenLaunchComponent.md) - [InnerFullScreenLaunchComponent (System API)](arkui-ts/ohos-arkui-advanced-InnerFullScreenLaunchComponent-sys.md) - [NavPushPathHelper](arkui-ts/ohos-atomicservice-NavPushPathHelper.md) - - Custom Placeholder Components + - Custom Placeholder Components - [NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md) - [ContentSlot](arkui-ts/ts-components-contentSlot.md) - - Custom Components + - Custom Components - [Custom Component Lifecycle](arkui-ts/ts-custom-component-lifecycle.md) - [Custom Component Layout](arkui-ts/ts-custom-component-layout.md) - [Custom Component Built-in APIs](arkui-ts/ts-custom-component-api.md) - - State Management and Rendering Control + - System Preset UI Component Library + - [Chip](arkui-ts/ohos-arkui-advanced-Chip.md) + - [ChipGroup](arkui-ts/ohos-arkui-advanced-ChipGroup.md) + - [ComposeListItem](arkui-ts/ohos-arkui-advanced-ComposeListItem.md) + - [ComposeTitleBar](arkui-ts/ohos-arkui-advanced-ComposeTitleBar.md) + - [DownloadFileButton](arkui-ts/ohos-arkui-advanced-DownloadFileButton.md) + - [DialogV2](arkui-ts/ohos-arkui-advanced-DialogV2.md) + - [EditableTitleBar](arkui-ts/ohos-arkui-advanced-EditableTitleBar.md) + - [ExceptionPrompt](arkui-ts/ohos-arkui-advanced-ExceptionPrompt.md) + - [Filter](arkui-ts/ohos-arkui-advanced-Filter.md) + - [FolderStack](arkui-ts/ts-container-folderstack.md) + - [FoldSplitContainer](arkui-ts/ohos-arkui-advanced-FoldSplitContainer.md) + - [FormMenu](arkui-ts/ohos-arkui-advanced-formmenu.md) + - [FullScreenLaunchComponent](arkui-ts/ohos-arkui-advanced-FullScreenLaunchComponent.md) + - [GridObjectSortComponent](arkui-ts/ohos-arkui-advanced-GridObjectSortComponent.md) + - [Popup](arkui-ts/ohos-arkui-advanced-Popup.md) + - [ProgressButton](arkui-ts/ohos-arkui-advanced-ProgressButton.md) + - [ProgressButtonV2](arkui-ts/ohos-arkui-advanced-ProgressButtonV2.md) + - [SegmentButton](arkui-ts/ohos-arkui-advanced-SegmentButton.md) + - [SelectTitleBar](arkui-ts/ohos-arkui-advanced-SelectTitleBar.md) + - [SelectionMenu](arkui-ts/ohos-arkui-advanced-SelectionMenu.md) + - [SplitLayout](arkui-ts/ohos-arkui-advanced-SplitLayout.md) + - [SubHeader](arkui-ts/ohos-arkui-advanced-SubHeader.md) + - [SubHeaderV2](arkui-ts/ohos-arkui-advanced-SubHeaderV2.md) + - [SwipeRefresher](arkui-ts/ohos-arkui-advanced-SwipeRefresher.md) + - [TabTitleBar](arkui-ts/ohos-arkui-advanced-TabTitleBar.md) + - [ToolBar](arkui-ts/ohos-arkui-advanced-ToolBar.md) + - [ToolBarV2](arkui-ts/ohos-arkui-advanced-ToolBarV2.md) + - [TreeView](arkui-ts/ohos-arkui-advanced-TreeView.md) + - State Management and Rendering Control - [State Management with Application-level Variables](arkui-ts/ts-state-management.md) + - [State Variable Change Listening](arkui-ts/ts-state-management-watch-monitor.md) - [ForEach](arkui-ts/ts-rendering-control-foreach.md) - [LazyForEach](arkui-ts/ts-rendering-control-lazyforeach.md) - [Repeat](arkui-ts/ts-rendering-control-repeat.md) - [State Management with Application-level Variables (System API)](arkui-ts/ts-state-management-sys.md) - - Common Definitions + - Common Definitions - [Basic Types](arkui-ts/ts-types.md) - [Pixel Units](arkui-ts/ts-pixel-units.md) - [Enums](arkui-ts/ts-appendix-enums.md) @@ -394,14 +412,14 @@ - [Enums (System API)](arkui-ts/ts-appendix-enums-sys.md) - - Other + - Other - [EffectComponent (System API)](arkui-ts/ts-container-effectcomponent-sys.md) - [IsolatedComponent (System API)](arkui-ts/ts-container-isolated-component-sys.md) - [RemoteWindow (System API)](arkui-ts/ts-basic-components-remotewindow-sys.md) - [PluginComponent (System API)](arkui-ts/ts-basic-components-plugincomponent-sys.md) - [UIExtensionComponent (System API)](arkui-ts/ts-container-ui-extension-component-sys.md) - - Components and APIs No Longer Maintained + - Components and APIs No Longer Maintained - [AbilityComponent](arkui-ts/ts-container-ability-component-sys.md) @@ -412,19 +430,19 @@ - [Navigator](arkui-ts/ts-container-navigator.md) - [Click Control](arkui-ts/ts-universal-attributes-click.md) - [Grid](arkui-ts/ts-universal-attributes-grid.md) -- JavaScript Components +- JavaScript Components - [JavaScript-compatible Web-like Development Paradigm (ArkUI.Full)](arkui-js/Readme-EN.md) - [JavaScript-compatible Web-like Development Paradigm (ArkUI.Lite)](arkui-js-lite/Readme-EN.md) - [JavaScript Service Widget UI Components](js-service-widget-ui/Readme-EN.md) -- C APIs - - Modules +- C API + - Modules - [ArkUI_NativeModule](_ark_u_i___native_module.md) - [Native Accessibility](arkui_native_interface_accessibility.md) - [Native XComponent](_o_h___native_x_component.md) - [ArkUI_EventModule](_ark_u_i___event_module.md) - - [WindowManager_NativeModule](_window_manager___native_module.md) + - [WindowManager](_window_manager___native_module.md) - [OH_DisplayManager](_o_h___display_manager.md) - - Header Files + - Header Files - [drag_and_drop.h](drag__and__drop_8h.md) - [drawable_descriptor.h](drawable__descriptor_8h.md) - [native_animate.h](native__animate_8h.md) @@ -441,30 +459,38 @@ - [native_xcomponent_key_event.h](native__xcomponent__key__event_8h.md) - [styled_string.h](styled__string_8h.md) - [ui_input_event.h](ui__input__event_8h.md) + - [oh_window.h](oh__window_8h.md) - [oh_window_comm.h](oh__window__comm_8h.md) - [oh_window_event_filter.h](oh__window__event__filter_8h.md) - [oh_display_capture.h](oh__display__capture_8h.md) - [oh_display_info.h](oh__display__info_8h.md) - [oh_display_manager.h](oh__display__manager_8h.md) - - Structs + - Structs - [ArkUI_AnimateCompleteCallback](_ark_u_i___animate_complete_callback.md) - [ArkUI_AttributeItem](_ark_u_i___attribute_item.md) - [ArkUI_ColorStop](_ark_u_i___color_stop.md) + - [ArkUI_Context](_ark_ui__context.md) - [ArkUI_ContextCallback](_ark_u_i___context_callback.md) + - [ArkUI_NativeDialog](_ark_ui__native_dialog.md) - [ArkUI_ExpectedFrameRateRange](_ark_u_i___expected_frame_rate_range.md) - [ArkUI_IntOffset](_ark_u_i___int_offset.md) - [ArkUI_IntSize](_ark_u_i___int_size.md) - [ArkUI_Margin](_ark_u_i___margin.md) - [ArkUI_NativeAnimateAPI_1](_ark_u_i___native_animate_a_p_i__1.md) - [ArkUI_NativeDialogAPI_1](_ark_u_i___native_dialog_a_p_i__1.md) + - [ArkUI_NativeDialogAPI_2](_ark_u_i___native_dialog_a_p_i__2.md) + - [ArkUI_NativeDialogAPI_3](_ark_u_i___native_dialog_a_p_i__3.md) - [ArkUI_NativeGestureAPI_1](_ark_u_i___native_gesture_a_p_i__1.md) + - [ArkUI_NativeGestureAPI_2](_ark_u_i___native_gesture_a_p_i__2.md) - [ArkUI_NativeNodeAPI_1](_ark_u_i___native_node_a_p_i__1.md) + - [ArkUI_Node](_ark_ui__node.md) - [ArkUI_NodeComponentEvent](_ark_u_i___node_component_event.md) - [ArkUI_NumberValue](union_ark_u_i___number_value.md) - [ArkUI_Rect](_ark_u_i___rect.md) - [ArkUI_RotationOptions](_ark_u_i___rotation_options.md) - [ArkUI_ScaleOptions](_ark_u_i___scale_options.md) - [ArkUI_StringAsyncEvent](_ark_u_i___string_async_event.md) + - [ArkUI_TextChangeEvent](_ark_u_i___text_change_event.md) - [ARKUI_TextPickerCascadeRangeContent](_a_r_k_u_i___text_picker_cascade_range_content.md) - [ARKUI_TextPickerRangeContent](_a_r_k_u_i___text_picker_range_content.md) - [ArkUI_TranslationOptions](_ark_u_i___translation_options.md) @@ -474,6 +500,7 @@ - [OH_NativeXComponent_MouseEvent_Callback](_o_h___native_x_component___mouse_event___callback.md) - [OH_NativeXComponent_TouchEvent](_o_h___native_x_component___touch_event.md) - [OH_NativeXComponent_TouchPoint](_o_h___native_x_component___touch_point.md) + - [OH_NativeXComponent_HistoricalPoint](_o_h___native_x_component___historical_point.md) - [NativeDisplayManager_CutoutInfo](_native_display_manager___cutout_info.md) - [NativeDisplayManager_DisplayColorSpace](_native_display_manager___display_color_space.md) - [NativeDisplayManager_DisplayHdrFormat](_native_display_manager___display_hdr_format.md) @@ -481,20 +508,34 @@ - [NativeDisplayManager_DisplaysInfo](_native_display_manager___displays_info.md) - [NativeDisplayManager_Rect](_native_display_manager___rect.md) - [NativeDisplayManager_WaterfallDisplayAreaRects](ive_display_manager___waterfall_display_area_rects.md) -- Error Codes - - UI + - [WindowManager_AvoidArea](_window_manager___avoid_area.md) + - [WindowManager_Rect](_window_manager___rect.md) + - [WindowManager_WindowProperties](_window_manager___window_properties.md) +- Error Codes + - UI - [Animator Error Codes](errorcode-animator.md) - [promptAction Error Codes](errorcode-promptAction.md) - [Router Error Codes](errorcode-router.md) - - [UI Appearance Error Codes](errorcode-uiappearance.md) - [Drag Event Error Codes](errorcode-drag-event.md) - - [AI Image Analyzer Error Codes](errorcode-image-analyzer.md) + - [AI Image Analyzer Error Codes](arkui-ts/errorcode-image-analyzer.md) - [Focus Error Codes](errorcode-focus.md) - [System Resource Error Codes](errorcode-system-resource.md) - [Sheet Error Codes](errorcode-bindSheet.md) - [Scrollable Component Error Codes](errorcode-scroll.md) - [Snapshot Error Codes](errorcode-snapshot.md) - - Graphics + - [Styled String Error Codes](errorcode-styled-string.md) + - [UI Context Error Codes](errorcode-uicontext.md) + - [Interaction Event Error Codes](errorcode-event.md) + - [Custom Node Error Codes](errorcode-node.md) + - [NodeAdapter Error Codes](errorcode-nodeadapter.md) + + - [UI Appearance Error Codes](errorcode-uiappearance.md) + - [UIExtension Error Codes](errorcode-uiextension.md) + + - [XComponent Error Codes](errorcode-xcomponent.md) + - Graphics - [Display Error Codes](errorcode-display.md) - [Window Error Codes](errorcode-window.md) - \ No newline at end of file + - UI Compilation + - [Compilation Error Codes](_ark_ui_compile.md) + diff --git a/en/application-dev/reference/apis-arkui/arkui-ts/figures/focusScopePriority1.png b/en/application-dev/reference/apis-arkui/arkui-ts/figures/focusScopePriority1.png new file mode 100644 index 0000000000000000000000000000000000000000..e29425a969fdc76f8f28a290ed4f570fef2e43fc Binary files /dev/null and b/en/application-dev/reference/apis-arkui/arkui-ts/figures/focusScopePriority1.png differ diff --git a/en/application-dev/reference/apis-arkui/arkui-ts/figures/focusScopePriority2.png b/en/application-dev/reference/apis-arkui/arkui-ts/figures/focusScopePriority2.png new file mode 100644 index 0000000000000000000000000000000000000000..bc6a636b0a2fb85fbbb5df829af60f10f9bea0a9 Binary files /dev/null and b/en/application-dev/reference/apis-arkui/arkui-ts/figures/focusScopePriority2.png differ diff --git a/en/application-dev/reference/apis-arkui/arkui-ts/figures/focusScopePriority3.png b/en/application-dev/reference/apis-arkui/arkui-ts/figures/focusScopePriority3.png new file mode 100644 index 0000000000000000000000000000000000000000..07383fdaa44a69596e1a784f7e1cd0c7f89a3683 Binary files /dev/null and b/en/application-dev/reference/apis-arkui/arkui-ts/figures/focusScopePriority3.png differ diff --git a/en/application-dev/reference/apis-arkui/arkui-ts/figures/focusScopePriority4.png b/en/application-dev/reference/apis-arkui/arkui-ts/figures/focusScopePriority4.png new file mode 100644 index 0000000000000000000000000000000000000000..797828c8c322cd24946d16dfc33397b6962dd7a8 Binary files /dev/null and b/en/application-dev/reference/apis-arkui/arkui-ts/figures/focusScopePriority4.png differ diff --git a/en/application-dev/reference/apis-arkui/arkui-ts/figures/focusScopePriority5.png b/en/application-dev/reference/apis-arkui/arkui-ts/figures/focusScopePriority5.png new file mode 100644 index 0000000000000000000000000000000000000000..50544aa1be394d9af32bea72a348e092b4c2d189 Binary files /dev/null and b/en/application-dev/reference/apis-arkui/arkui-ts/figures/focusScopePriority5.png differ diff --git a/en/application-dev/reference/apis-arkui/arkui-ts/figures/imageAnimator_resource.gif b/en/application-dev/reference/apis-arkui/arkui-ts/figures/imageAnimator_resource.gif new file mode 100644 index 0000000000000000000000000000000000000000..d932723cde6b3559ccd49d801267e70fd4cf216a Binary files /dev/null and b/en/application-dev/reference/apis-arkui/arkui-ts/figures/imageAnimator_resource.gif differ diff --git a/en/application-dev/reference/apis-arkui/arkui-ts/ts-appendix-enums.md b/en/application-dev/reference/apis-arkui/arkui-ts/ts-appendix-enums.md index 023bf95b9cd45b5c6d2fbc1bc63426c0ab6afa64..22f20163a1948533fa0cb9bed19157bf2cbc80d9 100644 --- a/en/application-dev/reference/apis-arkui/arkui-ts/ts-appendix-enums.md +++ b/en/application-dev/reference/apis-arkui/arkui-ts/ts-appendix-enums.md @@ -33,12 +33,12 @@ | Name | Value | Description | | --------- | ----- | ------------------------------- | -| Contain | 0 | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
![ImageFit-Examples01](figures/image_fit_contain.png) | -| Cover | 1 | The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
![ImageFit-Examples02](figures/image_fit_cover.png) | -| Auto | 2 | The image is scaled automatically based on its own size and the size of the component to fit the display area.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
![ImageFit-Examples03](figures/image_fit_auto.png) | -| Fill | 3 | The image is scaled to fill the display area, and its aspect ratio is not retained.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
![ImageFit-Examples04](figures/image_fit_fill.png) | -| ScaleDown | 4 | The image is displayed with its aspect ratio retained, in a size smaller than or equal to the original size.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
![ImageFit-Examples05](figures/image_fit_scaleDown.png) | -| None | 5 | The image is displayed in its original size.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
![ImageFit-Examples06](figures/image_fit_none.png) | +| Fill | 0 | The image is scaled without maintaining the aspect ratio to fill the display boundaries, aligned horizontally in the center.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
![ImageFit-Examples04](figures/image_fit_fill.png) | +| Contain | 1 | The image is scaled while maintaining the aspect ratio to fit entirely within the display boundaries, aligned horizontally in the center.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
![ImageFit-Examples01](figures/image_fit_contain.png) | +| Cover | 2 | The image is scaled while maintaining the aspect ratio so that both sides are greater than or equal to the display boundaries, aligned horizontally in the center.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
![ImageFit-Examples02](figures/image_fit_cover.png) | +| Auto | 3 | The image is scaled appropriately based on its own dimensions and the component's size to fill the view while maintaining the aspect ratio, aligned horizontally in the center.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
![ImageFit-Examples03](figures/image_fit_auto.png) | +| None | 5 | The image is displayed at its original size, aligned horizontally in the center.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
![ImageFit-Examples06](figures/image_fit_none.png) | +| ScaleDown | 6 | The image is displayed while maintaining the aspect ratio, only scaling down or keeping the original size, aligned horizontally in the center.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.
**Atomic service API**: This API can be used in atomic services since API version 11.
![ImageFit-Examples05](figures/image_fit_scaleDown.png) | | TOP_START12+ | 7 | The image is displayed at the top start corner of the **Image** component, keeping its original size.
**Widget capability**: This API can be used in ArkTS widgets since API version 12.
**Atomic service API**: This API can be used in atomic services since API version 12.
![ImageFit-Examples07](figures/image_fit_top_start.png) | | TOP12+ | 8 | The image is displayed horizontally centered at the top of the **Image** component, keeping its original size.
**Widget capability**: This API can be used in ArkTS widgets since API version 12.
**Atomic service API**: This API can be used in atomic services since API version 12.
![ImageFit-Examples08](figures/image_fit_top.png) | | TOP_END12+ | 9 | The image is displayed at the top end corner of the **Image** component, keeping its original size.
**Widget capability**: This API can be used in ArkTS widgets since API version 12.
**Atomic service API**: This API can be used in atomic services since API version 12.
![ImageFit-Examples09](figures/image_fit_top_end.png) | @@ -89,7 +89,7 @@ | 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. | +| Cancel | A touch event is canceled. Examples: 1. touching the home button to return to the home screen while keeping a finger on the screen; 2. folding a foldable phone to switch to the external screen while keeping a finger on the screen.| ## MouseButton8+ @@ -161,7 +161,7 @@ Enumerates the input method function keys. ## Curve -Enumerates the interpolation curves. For details about the animation, see Bezier Curve. +Enumerates the interpolation curves. For details about the animation, see [Bezier Curve](../../../../design/ux-design/animation-attributes.md). **Widget capability**: This API can be used in ArkTS widgets since API version 9. @@ -417,10 +417,10 @@ Enumerates the interpolation curves. For details about the animation, see + +```ts +// EntryAbility.ets +import { Configuration, UIAbility } from '@kit.AbilityKit'; +import { i18n } from '@kit.LocalizationKit'; +import { CommonUtil } from '../common/CommonUtil'; + +export default class EntryAbility extends UIAbility { + onConfigurationUpdate(newConfig: Configuration): void { + // Listen for system configuration changes. + if (newConfig.language) { + CommonUtil.setIsRTL(i18n.isRTL(newConfig.language)); + } + } +} +``` + + + +```ts +// CommonUtil.ets +import { i18n, intl } from '@kit.LocalizationKit'; + +export class CommonUtil { + private static isRTL: boolean = i18n.isRTL((new intl.Locale()).language); -This example presents how to implement a custom page turning animation for the **Swiper** component through the **customContentTransition** API. + public static setIsRTL(isRTL: boolean): void { + CommonUtil.isRTL = isRTL; + } + + public static getIsRTL(): boolean { + return CommonUtil.isRTL; + } +} +``` ```ts // xxx.ets +import { CommonUtil } from '../common/CommonUtil'; + @Entry @Component struct SwiperCustomAnimationExample { @@ -1996,7 +2100,7 @@ struct SwiperCustomAnimationExample { ForEach(this.backgroundColors, (backgroundColor: Color, index: number) => { Text(index.toString()).width('100%').height('100%').fontSize(50).textAlign(TextAlign.Center) .backgroundColor(backgroundColor) - // Customize how the opacity, scale, translate, and other attributes change during the custom switching animation. + // Customize how the opacity, scale, translate, and other properties change during the custom page transition animation. .opacity(this.opacityList[index]) .scale({ x: this.scaleList[index], y: this.scaleList[index] }) .translate({ x: this.translateList[index] }) @@ -2019,7 +2123,7 @@ struct SwiperCustomAnimationExample { this.translateList[proxy.index] = 0.0; this.zIndexList[proxy.index] = 0; } else { - // When a page in the same group is swiped right but is still within the viewport, the attribute values of the left and right pages in the same group are changed frame by frame based on the position. The changes implement the custom switching animation in which the two pages move close to the middle of the Swiper and are transparently scaled in or out. + // When a page in the same group is swiped right but is still within the viewport, the attribute values of the left and right pages in the same group are changed frame by frame based on the position. The changes implement the custom page transition animation in which the two pages move close to the middle of the and are transparently scaled in or out. if (proxy.index % this.DISPLAY_COUNT === 0) { this.opacityList[proxy.index] = 1 - proxy.position / this.DISPLAY_COUNT; this.scaleList[proxy.index] = this.MIN_SCALE + (1 - this.MIN_SCALE) * (1 - proxy.position / this.DISPLAY_COUNT); @@ -2031,13 +2135,33 @@ struct SwiperCustomAnimationExample { } this.zIndexList[proxy.index] = -1; } - this.zIndexList[proxy.index] = -1 + } else { + // Layout adaptation for right-to-left scripts + if (proxy.position >= -proxy.index % this.DISPLAY_COUNT || proxy.position <= -this.DISPLAY_COUNT - proxy.index % this.DISPLAY_COUNT) { + // Reset the properties when a page in the same group is swiped out of the viewport. + this.opacityList[proxy.index] = 1.0; + this.scaleList[proxy.index] = 1.0; + this.translateList[proxy.index] = 0.0; + this.zIndexList[proxy.index] = 0; + } else { + // When a page in the same group is swiped left but is still within the viewport, modify property values frame by frame based on the position for the left and right pages in the group to achieve a custom transition animation where the two pages move toward the center of the Swiper with opacity and scaling effects. + if (proxy.index % this.DISPLAY_COUNT === 0) { + this.opacityList[proxy.index] = 1 + proxy.position / this.DISPLAY_COUNT; + this.scaleList[proxy.index] = this.MIN_SCALE + (1 - this.MIN_SCALE) * (1 + proxy.position / this.DISPLAY_COUNT); + this.translateList[proxy.index] = -proxy.position * proxy.mainAxisLength - (1 - this.scaleList[proxy.index]) * proxy.mainAxisLength / 2.0; + } else { + this.opacityList[proxy.index] = 1 + (proxy.position + 1) / this.DISPLAY_COUNT; + this.scaleList[proxy.index] = this.MIN_SCALE + (1 - this.MIN_SCALE) * (1 + (proxy.position + 1) / this.DISPLAY_COUNT); + this.translateList[proxy.index] = -(proxy.position + 1) * proxy.mainAxisLength + (1 - this.scaleList[proxy.index]) * proxy.mainAxisLength / 2.0; + } + this.zIndexList[proxy.index] = -1; + } } } }) .onContentDidScroll((selectedIndex: number, index: number, position: number, mainAxisLength: number) => { - // Called when content in the component scrolls. In this callback, you can customize the navigation indicator switching animation. - console.info("onContentDidScroll selectedIndex: " + selectedIndex + ", index: " + index + ", position: " + position + ", mainAxisLength: " + mainAxisLength) + // Listen for Swiper page scroll events. In this callback, you can customize the navigation indicator animation. + console.info("onContentDidScroll selectedIndex: " + selectedIndex + ", index: " + index + ", position: " + position + ", mainAxisLength: " + mainAxisLength); }) }.width('100%') } diff --git a/en/application-dev/reference/apis-arkui/arkui-ts/ts-container-tabs.md b/en/application-dev/reference/apis-arkui/arkui-ts/ts-container-tabs.md index 66b18545a161c3ddad2594a1f7523a15925cb08e..2018df09fd6eaf889c04eb88c59008fe2fe9ba40 100644 --- a/en/application-dev/reference/apis-arkui/arkui-ts/ts-container-tabs.md +++ b/en/application-dev/reference/apis-arkui/arkui-ts/ts-container-tabs.md @@ -988,7 +988,7 @@ Sets the opacity of the tab bar. | Name | Type | Mandatory | Description | | ----- | ------ | ---- | ---------------------------------------- | -| opacity | number | Yes| Opacity of the tab bar. The value range is [0.0, 1.0].| +| opacity | number | Yes| Opacity of the tab bar. The value range is [0.0, 1.0]. A value less than 0.0 is handed as **0.0**. A value greater than **1.0** is handed as **1.0**.
Default value: **1.0**.| ## Example diff --git a/en/application-dev/reference/apis-arkui/arkui-ts/ts-text-common-sys.md b/en/application-dev/reference/apis-arkui/arkui-ts/ts-text-common-sys.md new file mode 100644 index 0000000000000000000000000000000000000000..7160d4ed3b2efbc6b78b924b8845139415a035f4 --- /dev/null +++ b/en/application-dev/reference/apis-arkui/arkui-ts/ts-text-common-sys.md @@ -0,0 +1,41 @@ +# Text Component Common APIs (System API) + +This topic covers the common APIs of text components. + +> **NOTE** +> +> The initial APIs of this module are supported since API version 10. Newly added APIs will be marked with a superscript to indicate their earliest API version. +> +> This topic describes only the system APIs provided by the module. For details about its public APIs, see [Basic Types](ts-types.md) and [Text Component Common APIs](ts-text-common.md). + +## TextContentControllerBase + +Represents the base controller for **TextInput**, **TextArea**, and **Search** components. + +**Atomic service API**: This API can be used in atomic services since API version 11. + +**System capability**: SystemCapability.ArkUI.ArkUI.Full + +### getText19+ + +getText(range?: TextRange): string + +Obtains the text content within a specified range. + +**Atomic service API**: This API can be used in atomic services since API version 19. + +**System API**: This is a system API. + +**System capability**: SystemCapability.ArkUI.ArkUI.Full + +**Parameters** + +| Name | Type | Mandatory | Description | +| ------- | ------ | ---- | ----- | +| range | [TextRange](ts-text-common.md#textrange12) | No | Range of the text content to obtain, defined by start and end positions.
If the range is not specified, the entire text is obtained by default. If the start position is not specified, it defaults to index 0. If the end position is not specified, it defaults to the end of the text.| + +**Return value** + +| Type | Description | +| ------ | ---------------- | +| string | Text content within the specified range.| diff --git a/en/application-dev/reference/apis-arkui/arkui-ts/ts-types.md b/en/application-dev/reference/apis-arkui/arkui-ts/ts-types.md index 87a6c7379015f03853c189473468b26dea2873b0..397fd247c836c2c046cf91620552cc6091904db5 100644 --- a/en/application-dev/reference/apis-arkui/arkui-ts/ts-types.md +++ b/en/application-dev/reference/apis-arkui/arkui-ts/ts-types.md @@ -6,9 +6,13 @@ ## Resource +The **Resource** type is used to reference resources for setting component attributes. Resource files must be stored and managed in specific subdirectories. For examples of resource directories, see [Resource Categories](../../../quick-start/resource-categories-and-access.md#resource-categories). + +**Widget capability**: This API can be used in ArkTS widgets since API version 9. + **Atomic service API**: This API can be used in atomic services since API version 11. -The **Resource** type is used to reference resources for setting component attributes. +**System capability**: SystemCapability.ArkUI.ArkUI.Full You can use `$r` or `$rawfile` to create a **Resource** object, but its attribute values cannot be changed. @@ -24,14 +28,22 @@ You can use `$r` or `$rawfile` to create a **Resource** object, but its attribut **filename**: name of the file in the **resources/rawfile** directory of the project. - **NOTE**
When referencing resources of the **Resource** type, make sure the data type is the same as that of the attribute method. For example, if an attribute method supports the **string | Resource** types, the data type of the **Resource** type must be string. + > **NOTE** + > + > When referencing resources of the **Resource** type, make sure the data type is the same as that of the attribute method. For example, if an attribute method supports the **string | Resource** types, the data type of the **Resource** type must be string. ## Length +type Length = string | number | Resource + The **Length** type is used to represent a size unit. +**Widget capability**: This API can be used in ArkTS widgets since API version 9. + **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Type | Description | | --------------------- | -------------------------------------- | | string | String type. Specify the length [unit](ts-pixel-units.md) explicitly, for example, **'10px'**, or provide the length in percentage, for example, **'100%'**.
**NOTE**
If the unit is not specified, the default unit vp is used, in which case '10' is equivalent to 10 vp.| @@ -42,8 +54,12 @@ The **Length** type is used to represent a size unit. The **ResourceStr** type is used to represent the types that can be used by input parameters of the string type. +**Widget capability**: This API can be used in ArkTS widgets since API version 9. + **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Type | Description | | --------------------- | ------------------------- | | string | String type. | @@ -53,8 +69,12 @@ The **ResourceStr** type is used to represent the types that can be used by inpu The **Padding** type is used to describe the paddings in different directions of a component. +**Widget capability**: This API can be used in ArkTS widgets since API version 9. + **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory | Description | | ------ | ----------------- | ---- | -------------------- | | top | [Length](#length) | No | Height of the padding on the top of the component. | @@ -66,19 +86,29 @@ The **Padding** type is used to describe the paddings in different directions of The **Padding** type is used to describe the paddings in different directions of a component. +**Widget capability**: This API can be used in ArkTS widgets since API version 12. + +**Atomic service API**: This API can be used in atomic services since API version 12. + +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory | Description | | ------ | ----------------- | ---- | -------------------- | | top | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Height of the padding on the top of the component. | -| end | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Width of the padding on the right of the component.
For right-to-left scripts:
Width of the padding on the left of the component.| +| end | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Width of the padding on the right of the component.
Width of the padding on the left of the component in RTL mode. | | bottom | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Height of the padding at the bottom of the component. | -| start | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Width of the padding on the left of the component.
For right-to-left scripts:
Width of the padding on the right of the component.| +| start | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Width of the padding on the left of the component.
Width of the padding on the right of the component in RTL mode. | ## Margin The **Margin** type is used to describe the margins in different directions of a component. +**Widget capability**: This API can be used in ArkTS widgets since API version 9. + **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory | Description | | ------ | ----------------- | ---- | -------------------- | | top | [Length](#length) | No | Height of the margin above the component. | @@ -90,19 +120,29 @@ The **Margin** type is used to describe the margins in different directions of a The **Margin** type is used to describe the margins in different directions of a component. +**Widget capability**: This API can be used in ArkTS widgets since API version 12. + +**Atomic service API**: This API can be used in atomic services since API version 12. + +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory | Description | | ------ | ----------------- | ---- | -------------------- | | top | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Height of the margin above the component. | -| end | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Width of the margin on the right of the component.
For right-to-left scripts:
Width of the margin on the left of the component.| +| end | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Width of the margin on the right of the component.
Width of the margin on the left of the component in RTL mode.| | bottom | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Height of the margin below the component. | -| start | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Width of the margin on the left of the component.
For right-to-left scripts:
Width of the margin on the right of the component.| +| start | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Width of the margin on the left of the component.
Width of the margin on the right of the component in RTL mode.| ## EdgeWidths9+ The **EdgeWidths** type is used to describe the edge widths in different directions of a component. +**Widget capability**: This API can be used in ArkTS widgets since API version 9. + **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory | Description | | ------ | ----------------- | ---- | -------- | | top | [Length](#length) | No | Width of the top edge of the component.| @@ -114,19 +154,29 @@ The **EdgeWidths** type is used to describe the edge widths in different directi The **EdgeWidths** type is used to describe the edge widths in different directions of a component. +**Widget capability**: This API can be used in ArkTS widgets since API version 12. + +**Atomic service API**: This API can be used in atomic services since API version 12. + +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory | Description | | ------ | ----------------- | ---- | -------- | | top | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Width of the top edge of the component.| -| end | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Width of the right edge of the component.
Width of the left edge of the component for right-to-left scripts.| +| end | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Width of the right edge of the component.
Width of the left edge of the component in RTL mode.| | bottom | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Width of the bottom edge of the component.| -| start | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Width of the left edge of the component.
Width of the right edge of the component for right-to-left scripts.| +| start | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Width of the left edge of the component.
Width of the right edge of the component in RTL mode.| ## BorderRadiuses9+ The **BorderRadiuses** type is used to describe the corner radius of a component's border. +**Widget capability**: This API can be used in ArkTS widgets since API version 9. + **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory | Description | | ----------- | ----------------- | ---- | ---------- | | topLeft | [Length](#length) | No | Radius of the upper left corner of the component.| @@ -138,19 +188,29 @@ The **BorderRadiuses** type is used to describe the corner radius of a component The **LocalizedBorderRadiuses** type is used to describe the corner radius of a component's border. +**Widget capability**: This API can be used in ArkTS widgets since API version 12. + +**Atomic service API**: This API can be used in atomic services since API version 12. + +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory | Description | | ----------- | ----------------- | ---- | ---------- | -| topStart | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Radius of the upper left corner of the component.
For right-to-left scripts, this indicates the radius of the upper left right of the component.| -| topEnd | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Radius of the upper right corner of the component.
For right-to-left scripts, this indicates the radius of the upper left corner of the component.| -| bottomStart | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Radius of the lower left corner of the component.
For right-to-left scripts, this indicates the radius of the lower right corner of the component.| -| bottomEnd | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Radius of the lower right corner of the component.
For right-to-left scripts, this indicates the radius of the lower left corner of the component.| +| topStart | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Radius of the upper left corner of the component.
Radius of the upper left right of the component in RTL mode.| +| topEnd | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Radius of the upper right corner of the component.
Radius of the upper left corner of the component in RTL mode.| +| bottomStart | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Radius of the lower left corner of the component.
Radius of the lower right corner of the component in RTL mode.| +| bottomEnd | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Radius of the lower right corner of the component.
Radius of the lower left corner of the component in RTL mode.| ## EdgeColors9+ The **EdgeColors** type is used to describe the edge colors of a component. +**Widget capability**: This API can be used in ArkTS widgets since API version 9. + **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory | Description | | ------ | ------------------------------- | ---- | -------- | | top | [ResourceColor](#resourcecolor) | No | Color of the top edge of the component.| @@ -162,21 +222,29 @@ The **EdgeColors** type is used to describe the edge colors of a component. The **EdgeColors** type is used to describe the edge colors of a component. +**Widget capability**: This API can be used in ArkTS widgets since API version 12. + **Atomic service API**: This API can be used in atomic services since API version 12. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory | Description | | ------ | ------------------------------- | ---- | -------- | | top | [ResourceColor](#resourcecolor) | No | Color of the top edge of the component.| -| end | [ResourceColor](#resourcecolor) | No | Color of the right edge of the component.
Color of the left edge of the component for right-to-left scripts.| +| end | [ResourceColor](#resourcecolor) | No | Color of the right edge of the component.
Color of the left edge of the component in RTL mode.| | bottom | [ResourceColor](#resourcecolor) | No | Color of the bottom edge of the component.| -| start | [ResourceColor](#resourcecolor) | No | Color of the left edge of the component.
Color of the right edge of the component for right-to-left scripts.| +| start | [ResourceColor](#resourcecolor) | No | Color of the left edge of the component.
Color of the right edge of the component in RTL mode.| ## EdgeStyles9+ The **EdgeStyles** type is used to describe the edge styles of a component. +**Widget capability**: This API can be used in ArkTS widgets since API version 9. + **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory | Description | | ------ | ---------------------------------------- | ---- | -------- | | top | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the top edge of the component.| @@ -190,6 +258,8 @@ The **Offset** type is used to describe the offset coordinates of a component in **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory | Description | | ---- | ----------------- | ---- | -------- | | dx | [Length](#length) | Yes | X coordinate of the offset.| @@ -201,6 +271,8 @@ The **RectResult** type is used to describe the position, width, and height of a **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Description| | ------- | ------ | ----------------------- | | x | number | Horizontal coordinate.| @@ -212,21 +284,29 @@ The **RectResult** type is used to describe the position, width, and height of a The **ResourceColor** type is used to describe the color types of resources. +**Widget capability**: This API can be used in ArkTS widgets since API version 9. + **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Type | Description | | ----------------------------------- | ------------------------------------------------------------ | | [Color](ts-appendix-enums.md#color) | Color enums. | | number | Color in hexadecimal notation. RGB and ARGB are supported. Examples: **0xffffff** and **0xffff0000**. The number of input digits cannot be identified. The format is selected based on the value. For example, 0x00ffffff is parsed in RGB format.| -| string | Color in RGB or ARGB notation. Example: **'#ffffff', '#ff000000', 'rgb(255, 100, 255)', 'rgba(255, 100, 255, 0.5)'**| +| string | Color in RGB or ARGB notation. Example: **'#ffffff'**, **'#ff000000'**, **'rgb(255, 100, 255)'**, **'rgba(255, 100, 255, 0.5)'**| | [Resource](#resource) | Color referenced from system or application resources. | ## LengthConstrain The **LengthConstrain** type is used to describe the maximum and minimum lengths of a component. +**Widget capability**: This API can be used in ArkTS widgets since API version 9. + **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory | Description | | --------- | ----------------- | ---- | ------- | | minLength | [Length](#length) | Yes | Minimum length of the component.| @@ -239,9 +319,11 @@ The **Font** type is used to set the text style. **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory| Description | | ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | -| size | [Length](#length) | No | Font size. If the value is of the number type, the unit fp is used. The value cannot be a percentage.
Default value: **16.0**| +| size | [Length](#length) | No | Font size. If the value is of the number type, the unit fp is used. Percentage strings are not supported.
Default value: **16.0**| | weight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | No | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. A larger value indicates a thicker font.
Default value: **400** \| **FontWeight.Normal** | | family | string \| [Resource](#resource) | No | Font family of the text. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, HarmonyOS Sans'**. The 'HarmonyOS Sans' font and [registered custom fonts](../js-apis-font.md) are supported.| | style | [FontStyle](ts-appendix-enums.md#fontstyle) | No | Font style.
Default value: **FontStyle.Normal** | @@ -250,8 +332,12 @@ The **Font** type is used to set the text style. The **Area** type is used to describe the area information of a component. +**Widget capability**: This API can be used in ArkTS widgets since API version 9. + **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Description | | -------------- | ---------------------- | ------------------------------ | | width | [Length](#length) | Width of the component. The value is of the number type in vp when used as the return value.| @@ -263,8 +349,12 @@ The **Area** type is used to describe the area information of a component. The **Position** type is used to represent coordinates of a point. +**Widget capability**: This API can be used in ArkTS widgets since API version 9. + **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory | Description | | ---- | ----------------- | ---- | --------------------------- | | x | [Length](#length) | No | X coordinate. The value is of the number type in vp when used as the return value.| @@ -274,17 +364,25 @@ The **Position** type is used to represent coordinates of a point. The **LocalizedPosition** type is used to represent coordinates of a point. +**Atomic service API**: This API can be used in atomic services since API version 12. + +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory | Description | | ---- | ----------------- | ---- | --------------------------- | -| start | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | X-coordinate relative to the left for left-to-right scripts; X-coordinate relative to the right for right-to-left scripts. | +| start | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | X-coordinate relative to the left for left-to-right (LTR) scripts; X-coordinate relative to the right for right-to-left (RTL) scripts. | | top | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | Y-coordinate.| ## Edges12+ The **Edges** type is used to describe the offset relative to the four edges. If both **top** and **bottom** are set, only **top** takes effect. If both **left** and **right** are set, only **left** takes effect. +**Widget capability**: This API can be used in ArkTS widgets since API version 12. + **Atomic service API**: This API can be used in atomic services since API version 12. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory | Description | | ---- | ------ | ---- | --------------------------- | | top | [Dimension](#dimension10) | No | Offset relative to the top edge.| @@ -296,19 +394,27 @@ The **Edges** type is used to describe the offset relative to the four edges. If The **LocalizedEdges** type is used to describe the offset relative to the four edges. If both **top** and** bottom **are set, only **top** takes effect. If both **start** and **end** are set, only **start** takes effect. +**Atomic service API**: This API can be used in atomic services since API version 12. + +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory | Description | | ---- | ------ | ---- | --------------------------- | | top | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | Offset relative to the top edge.| | bottom | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | Offset relative to the bottom edge.| -| start | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | Offset relative to the left for left-to-right scripts; offset relative to the right for right-to-left scripts.| -| end | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | Offset relative to the right for left-to-right scripts; offset relative to the left for right-to-left scripts.| +| start | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | Offset relative to the left in LTR mode; offset relative to the right in RTL mode.| +| end | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | Offset relative to the right for in LTR mode; offset relative to the left in RTL mode.| ## ConstraintSizeOptions The **ConstraintSizeOptions** type is used to set the size constraints of a component during component layout. +**Widget capability**: This API can be used in ArkTS widgets since API version 9. + **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory | Description | | --------- | ----------------- | ---- | ------- | | minWidth | [Length](#length) | No | Minimum width of the component.| @@ -320,8 +426,12 @@ The **ConstraintSizeOptions** type is used to set the size constraints of a comp The **SizeOptions** type is used to set the width and height. +**Widget capability**: This API can be used in ArkTS widgets since API version 9. + **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory | Description | | ------ | ----------------- | ---- | ----- | | width | [Length](#length) | No | Width of the component.| @@ -332,21 +442,27 @@ The **SizeOptions** type is used to set the width and height. The **BorderOptions** type is used to provide border information. -**Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full -| Name | Type | Mandatory | Description | -| ------ | ---------------------------------------- | ---- | ------- | -| width | [Length](#length) \| [EdgeWidths](#edgewidths9)9+ \| [LocalizedEdgeWidths](#localizededgewidths12)12+ | No | Border width. | -| color | [ResourceColor](#resourcecolor) \| [EdgeColors](#edgecolors9)9+ | No | Border color. | -| radius | [Length](#length) \| [BorderRadiuses](#borderradiuses9)9+ | No | Radius of the rounded corner border.| -| style | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9)9+| No | Border style. | +| Name | Type | Mandatory| Description | +| ------ | ------------------------------------------------------------ | ---- | ------------------ | +| width | [Length](ts-types.md#length) \| [EdgeWidths](ts-universal-attributes-border.md#edgewidths9)9+ \| [LocalizedEdgeWidths](ts-universal-attributes-border.md#localizededgewidths12)12+ | No | Border width.
**Atomic service API**: This API can be used in atomic services since API version 11.
**Widget capability**: This API can be used in ArkTS widgets since API version 9. | +| color | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](ts-universal-attributes-border.md#edgecolors9)9+ \| [LocalizedEdgeColors](ts-universal-attributes-border.md#localizededgecolors12)12+ | No | Border color.
**Atomic service API**: This API can be used in atomic services since API version 11.
**Widget capability**: This API can be used in ArkTS widgets since API version 9. | +| radius | [Length](ts-types.md#length) \| [BorderRadiuses](ts-universal-attributes-border.md#borderradiuses9)9+ \| [LocalizedBorderRadiuses](ts-universal-attributes-border.md#localizedborderradiuses12)12+ | No | Border corner radius.
**Atomic service API**: This API can be used in atomic services since API version 11.
**Widget capability**: This API can be used in ArkTS widgets since API version 9.| +| style | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](ts-universal-attributes-border.md#edgestyles9)9+ | No | Border style.
**Atomic service API**: This API can be used in atomic services since API version 11.
**Widget capability**: This API can be used in ArkTS widgets since API version 9. | +| dashGap12+ | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) \| [EdgeWidths](ts-universal-attributes-border.md#edgewidths9) \| [LocalizedEdgeWidths](ts-universal-attributes-border.md#localizededgewidths12) | No | Gap between dashed line segments. It takes effect when the border style is set to dashed.
Percentage values are not supported.
**Atomic service API**: This API can be used in atomic services since API version 12.
**Widget capability**: This API cannot be used in ArkTS widgets.| +| dashWidth12+ | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) \| [EdgeWidths](ts-universal-attributes-border.md#edgewidths9) \| [LocalizedEdgeWidths](ts-universal-attributes-border.md#localizededgewidths12) | No | Width of dashed line segments. It takes effect when the border style is set to dashed.
Percentage values are not supported.
**Atomic service API**: This API can be used in atomic services since API version 12.
**Widget capability**: This API cannot be used in ArkTS widgets. | ## ColorFilter9+ The **ColorFilter** type is used to create a color filter with a 4 x 5 matrix. +**Widget capability**: This API can be used in ArkTS widgets since API version 9. + **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory | Description | | ----------- | -------- | ---- | ---------------------------------------- | | constructor | number[] | Yes | Constructor for creating a color filter with a 4\*5 matrix. The input parameter is [m\*n], which is the matrix value in row m and column n. The matrix is row-first.| @@ -358,7 +474,7 @@ The **CustomBuilder** type is used to define custom UI descriptions in component | Name | Type | Description | | ------------- | ---------------------- | ---------------------------------------- | -| CustomBuilder | () => any \| void | Builder for creating a custom component; must be used with @Builder. For details, see [@Builder](../../../ui/state-management/arkts-builder.md).| +| CustomBuilder | () => any \| void | Builder used to generate a custom UI component when used with the [@Builder](../../../ui/state-management/arkts-builder.md) decorator.| ## MarkStyle10+ @@ -368,9 +484,9 @@ The **CustomBuilder** type is used to define custom UI descriptions in component | Name | Type | Mandatory| Default Value | Description | | ----------- | ------------------------------------------ | ---- | ----------- | ------------------------------------------------------------ | -| strokeColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color.White | Color of the mark. | -| size | [Length](ts-types.md#length) | No | - | Size of the mark, in vp. The default size is the same as the width of the check box.
This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used.| -| strokeWidth | [Length](ts-types.md#length) | No | 2 | Stroke width of the mark, in vp. This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used.| +| strokeColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color.White | Color of the check mark. | +| size | [Length](ts-types.md#length) | No | - | Size of the check mark, in vp. The default size is the same as the width of the check box component.
Percentage values are not supported. If an invalid value is set, the default value is used.| +| strokeWidth | [Length](ts-types.md#length) | No | 2 | Stroke width of the check mark, in vp. Percentage values are not supported. If an invalid value is set, the default value is used.| ## ModalTransition10+ @@ -378,6 +494,8 @@ The **ModalTransition** type is used to set the transition type for a full-scree **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Description | | ------- | ------------ | | NONE | No transition animation for the modal. | @@ -386,10 +504,12 @@ The **ModalTransition** type is used to set the transition type for a full-scree ## Dimension10+ -The **Length** type is used to represent a size unit. +The **Dimension** type is used to represent a size unit. **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Type | Description | | --------------------- | -------------------------------------- | | [PX](#px10) | Physical pixel unit type. The unit px must be included, for example, **'10px'**.| @@ -405,6 +525,8 @@ The **PX** type is used to represent a length in px. **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Type | Description | | --------------------- | -------------------------------------- | | {number}px | Physical pixel unit type. The unit px must be included, for example, **'10px'**.| @@ -415,6 +537,8 @@ The **VP** type is used to represent a length in vp. **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Type | Description | | --------------------- | -------------------------------------- | | {number}vp\|number | Pixel unit type specific to the screen density. The unit vp can be included or omitted, for example, **10** or **'10vp'**.| @@ -425,6 +549,8 @@ The **FP** type is used to represent a length in fp. **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Type | Description | | --------------------- | -------------------------------------- | | {number}fp | Font pixel unit type. The unit fp must be included, for example, **'10fp'**.| @@ -435,6 +561,8 @@ The **LPX** type is used to represent a length in lpx. **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Type | Description | | --------------------- | -------------------------------------- | | {number}lpx | Logical pixel unit type. The unit lpx must be included, for example, **'10lpx'**.| @@ -445,6 +573,8 @@ The **Percentage** type is used to represent a length in percentage. **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Type | Description | | --------------------- | -------------------------------------- | | {number}% | Percentage type. The unit % must be included, for example, **'10%'**.| @@ -455,6 +585,8 @@ The **Degree** type is used to represent a length in deg. **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Type | Description | | --------------------- | -------------------------------------- | | {number}deg | Degree type. The unit deg must be included, for example, **'10deg'**.| @@ -465,11 +597,13 @@ The **MultiShadowOptions** type is used to describe the shadow style. **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type| Mandatory| Description| | ------------- | ------- | ---- | -------- | | radius | number \| [Resource](#resource) | No| Shadow blur radius.
The default value varies by API version.
API version 10 and earlier versions: **5**
Since API version 11: **20**
Unit: vp
**NOTE**
A value less than or equal to 0 is handled as the default value.| -| offsetX | number \| [Resource](#resource) | No| Offset on the x-axis.
Default value: **5**
Unit: vp| -| offsetY | number \| [Resource](#resource) | No| Offset on the y-axis.
Default value: **5**
Unit: vp| +| offsetX | number \| [Resource](#resource) | No| X-axis offset.
Default value: **5**.
Unit: vp| +| offsetY | number \| [Resource](#resource) | No| Y-axis offset.
Default value: **5**.
Unit: vp| ## SafeAreaType10+ @@ -477,6 +611,8 @@ The **SafeAreaType** type is used to describe the types of expanded safe areas. **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Description | | -------- | ------------------------------------------ | | SYSTEM | Default non-safe area of the system, including the status bar and navigation bar. | @@ -489,6 +625,8 @@ The **SafeAreaEdge** type is used to define the edge for expanding the safe area **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Description | | ------ | ---------- | | TOP | Top edge.| @@ -498,6 +636,8 @@ The **SafeAreaEdge** type is used to define the edge for expanding the safe area ## KeyboardAvoidMode12+ +Enumerates modes in which a dialog box responds when the keyboard is displayed. + **Atomic service API**: This API can be used in atomic services since API version 12. **System capability**: SystemCapability.ArkUI.ArkUI.Full @@ -521,8 +661,8 @@ The **LayoutSafeAreaEdge** type is used to define the edge for expanding the saf | Name | Description | | ------ | ---------- | -| TOP | Top edge.| -| BOTTOM | Bottom edge.| +| TOP | Top edge. | +| BOTTOM | Bottom edge. | ## TouchPoint11+ @@ -530,6 +670,8 @@ The **TouchPoint** type is used to define the coordinates of the touch point. **Atomic service API**: This API can be used in atomic services since API version 12. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type| Description | | ------ | ----------------------| ---------- | | X | [Dimension](#dimension10) | X coordinate of the touch point.| @@ -539,8 +681,12 @@ The **TouchPoint** type is used to define the coordinates of the touch point. The **PixelRoundPolicy** type is used to describe the direction of pixel rounding at the component level. +**Widget capability**: This API can be used in ArkTS widgets since API version 11. + **Atomic service API**: This API can be used in atomic services since API version 11. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Mandatory | Description | | ------ | ----------------- | ---- | -------------------- | | start | [PixelRoundCalcPolicy](ts-appendix-enums.md#pixelroundcalcpolicy11) | No| Rounding for alignment with the start edge.| @@ -554,6 +700,8 @@ type VoidCallback: () => void; **Atomic service API**: This API can be used in atomic services since API version 12. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + ## Callback12+ Callback = (data: T) => V; @@ -562,6 +710,8 @@ The **Callback** type is used to represent the callback with parameters. **Atomic service API**: This API can be used in atomic services since API version 12. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + ## HoverCallback12+ The **HoverCallback** type is used to represent the callback for the hover event. @@ -570,6 +720,8 @@ type HoverCallback = (isHover: boolean, event: HoverEvent) => void; **Atomic service API**: This API can be used in atomic services since API version 12. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Description | | ------------- | ---------------------- | ---------------------------------------- | | HoverCallback | (isHover: boolean, event: HoverEvent) => void | Callback for the hover event.| @@ -580,6 +732,8 @@ The **VisibleAreaEventOptions** type is used to describe visible area changes. **Atomic service API**: This API can be used in atomic services since API version 12. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name| Type | Mandatory| Description | | ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ | | ratios | Array<number> | Yes | Threshold array. Each threshold represents a ratio of the component's visible area (that is, the area of the component that is visible on screen; only the area within the parent component is counted) to the component's total area. The value range of the threshold is [0.0, 1.0]. If the threshold set exceeds this range, the value **0.0** or **1.0** will be used.| @@ -593,6 +747,8 @@ type VisibleAreaChangeCallback = (isExpanding: boolean, currentRatio: number) => **Atomic service API**: This API can be used in atomic services since API version 12. +**System capability**: SystemCapability.ArkUI.ArkUI.Full + | Name | Type | Description | | ------------- | ---------------------- | ---------------------------------------- | | VisibleAreaChangeCallback | (isExpanding: boolean, currentRatio: number) => void | Callback for visible area changes of the component.
- **isExpanding**: whether the ratio of the component's visible area to its total area is greater than the previous one. The value **true** means that the ratio is greater than the previous one, and **false** means the opposite.
- **currentRatio**: ratio of the component's visible area to its total area when this callback is invoked.| @@ -601,6 +757,8 @@ type VisibleAreaChangeCallback = (isExpanding: boolean, currentRatio: number) => The **DividerStyleOptions** type is used to provide the information about the divider. +**Atomic service API**: This API can be used in atomic services since API version 12. + **System capability**: SystemCapability.ArkUI.ArkUI.Full | Name | Type | Mandatory| Description | @@ -609,6 +767,7 @@ The **DividerStyleOptions** type is used to provide the information about the di | color | [ResourceColor](#resourcecolor) | No | Color of the divider. | | startMargin | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+ | No | Distance between the divider and the start edge of the menu.| | endMargin | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)12+| No | Distance between the divider and the end edge of the menu.| +| mode | [DividerMode](ts-appendix-enums.md#dividermode19)19+| No | Mode of the divider.| ## TextContentControllerBase10+ @@ -687,6 +846,8 @@ addText(text: string, textOperationOptions?: TextContentControllerOptions): numb Inserts text at a specified position in the editable content. If no position is specified, the text is appended to the end of the existing content. This API does not work when the text is being dragged. +**addText** only affects the UI performance within the application and has no effect on the internal logic of the input method application. Therefore, avoid calling this API for preview text. + **Atomic service API**: This API can be used in atomic services since API version 15. **System capability**: SystemCapability.ArkUI.ArkUI.Full @@ -698,6 +859,12 @@ This API does not work when the text is being dragged. | text | string | Yes | Text to insert.| | textOperationOptions | [TextContentControllerOptions](#textcontentcontrolleroptions15) | No | Configuration option for inserting text. If this parameter is not provided, the text is appended to the end.| +**Return value** + +| Type | Description | +| ----- | -------- | +| number| New cursor position after insertion.| + ### deleteText15+ deleteText(range?: TextRange): void @@ -705,6 +872,8 @@ deleteText(range?: TextRange): void Deletes text within a specified range in the editable content. This API does not work when the text is being dragged. +**deleteText** only affects the UI performance within the application and has no effect on the internal logic of the input method application. Therefore, avoid calling this API for preview text. + **Atomic service API**: This API can be used in atomic services since API version 15. **System capability**: SystemCapability.ArkUI.ArkUI.Full @@ -731,45 +900,25 @@ Obtains the current text selection range. | ----------------------- | ---------------- | | [TextRange](ts-text-common.md#textrange12) | Current text selection range, or cursor position if no text is selected.| -### clearPreviewText18+ +### clearPreviewText17+ clearPreviewText(): void Clears the current preview text. -**Atomic service API**: This API can be used in atomic services since API version 18. - -**System capability**: SystemCapability.ArkUI.ArkUI.Full - -### getText18+ - -getText(range?: TextRange): string - -Obtains the text content within a specified range. - -**Atomic service API**: This API can be used in atomic services since API version 18. +**Atomic service API**: This API can be used in atomic services since API version 17. **System capability**: SystemCapability.ArkUI.ArkUI.Full -**Parameters** - -| Name | Type | Mandatory | Description | -| ------- | ------ | ---- | ----- | -| range | [TextRange](ts-text-common.md#textrange12) | No | Range of the text content to obtain, defined by start and end positions.
If the range is not specified, the entire text is obtained by default. If the start position is not specified, it defaults to index 0. If the end position is not specified, it defaults to the end of the text.| - -**Return value** - -| Type | Description | -| ------ | ---------------- | -| string | Text content within the specified range.| - ## TextDecorationOptions12+ +**Atomic service API**: This API can be used in atomic services since API version 12. + **System capability**: SystemCapability.ArkUI.ArkUI.Full | Name | Type | Mandatory| Description | | ------- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | -| type | [TextDecorationType](ts-appendix-enums.md#textdecorationtype) | Yes | Style of the text decorative line.
**Atomic service API**: This API can be used in atomic services since API version 11.| +| type | [TextDecorationType](ts-appendix-enums.md#textdecorationtype) | Yes | Type of the text decorative line.
**Atomic service API**: This API can be used in atomic services since API version 11.| | color | [ResourceColor](#resourcecolor) | No | Color of the text decorative line.
**Atomic service API**: This API can be used in atomic services since API version 11.| | style | [TextDecorationStyle](ts-appendix-enums.md#textdecorationstyle12) | No | Style of the text decorative line.
**Atomic service API**: This API can be used in atomic services since API version 12.| @@ -860,9 +1009,9 @@ The **LayoutPolicy** type is used to set the layout strategy for linear layouts. **System capability**: SystemCapability.ArkUI.ArkUI.Full -| Name | Type | Read Only| Description| -| --------- | ------ | ---- |---------- | -| MATCH_PARENT | LayoutPolicy | Yes| Adjusts the size to match the parent component's layout.| +| Name | Type | Read Only| Optional| Description| +| --------- | ------ | ---- | ---- |---------- | +| matchParent | LayoutPolicy | Yes| No | The current component adapts to the parent container's layout, with its size equal to the parent container's content area.
**Widget capability**: This API can be used in ArkTS widgets since API version 15.
**Atomic service API**: This API can be used in atomic services since API version 15.| > **NOTE** > diff --git a/en/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-expand-safe-area.md b/en/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-expand-safe-area.md index 0e32d3404c5310e9fc490150c22cf3383e656e1d..8de5a95aec72ef1185912bbc5bc0520fcec9e766 100644 --- a/en/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-expand-safe-area.md +++ b/en/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-expand-safe-area.md @@ -17,7 +17,7 @@ A safe area refers to the display area that isn't covered by a status bar, navig ## expandSafeArea -expandSafeArea(types?: Array<SafeAreaType>, edges?: Array<SafeAreaEdge>) +expandSafeArea(types?: Array<SafeAreaType>, edges?: Array<SafeAreaEdge>): T Sets the safe area to be expanded to. @@ -32,6 +32,12 @@ Sets the safe area to be expanded to. | types | Array <[SafeAreaType](ts-types.md#safeareatype10)> | No | Types of non-safe areas to extend into. For the **CUTOUT** type to take effect, the [Metadata](../../apis-ability-kit/js-apis-bundleManager-metadata.md) item must be added to the configuration file.
Default value: **[SafeAreaType.SYSTEM, SafeAreaType.CUTOUT, SafeAreaType.KEYBOARD]**| | edges | Array <[SafeAreaEdge](ts-types.md#safeareaedge10)> | No | Edges for expanding the safe area.
Default value: **[SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM, SafeAreaEdge.START, SafeAreaEdge.END]**
The default value expands the safe area on all available edges.| +**Return value** + +| Type| Description| +| -------- | -------- | +| T | Current component.| + > **NOTE** > > When using **expandSafeArea** to expand the drawing of a component, avoid setting a fixed width or height for the component (except for percentages). If a fixed width or height is set, the edges for the expanded safe area can only be [SafeAreaEdge.TOP, SafeAreaEdge.START], and the size of the component remains unchanged after the expansion. diff --git a/en/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-focus.md b/en/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-focus.md index 93e280d00c46107d5892190d277ac7d95f86f66e..cb46caa474a88f15df7a58a0ffc73232a2187943 100644 --- a/en/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-focus.md +++ b/en/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-focus.md @@ -4,7 +4,7 @@ Focus control attributes set whether a component is focusable and how it partici > **NOTE** > -> - The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. +> - The initial APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > > - Custom components are inherently unfocusable, and setting [focusable](#focusable) and [enabled](ts-universal-attributes-enable.md#enabled) attributes to **false** or setting the [visibility](ts-universal-attributes-visibility.md#visibility) attribute to **Hidden** or **None** does not impact their child components' capability to gain focus. > @@ -14,7 +14,7 @@ Focus control attributes set whether a component is focusable and how it partici ## focusable -focusable(value: boolean) +focusable(value: boolean): T Sets whether the component is focusable. @@ -28,9 +28,15 @@ Sets whether the component is focusable. | ------ | ------- | ---- | ------------------------------------------------------------ | | value | boolean | Yes | Whether the component is focusable.
**true**: The component is focusable.
**false**: The component is not focusable.
**NOTE**
Components that have default interaction logic, such as [Button](ts-basic-components-button.md) and [TextInput](ts-basic-components-textinput.md), are focusable by default. Other components, such as [Text](ts-basic-components-text.md) and [Image](ts-basic-components-image.md), are not focusable by default. Only focusable components can trigger a [focus event](ts-universal-focus-event.md).| +**Return value** + +| Type| Description| +| -------- | -------- | +| T | Current component.| + ## tabIndex9+ -tabIndex(index: number) +tabIndex(index: number): T Sets the Tab order of the component in sequential focus navigation with the **Tab** key. @@ -42,14 +48,24 @@ Sets the Tab order of the component in sequential focus navigation with the **Ta | Name| Type | Mandatory| Description | | ------ | ------ | ---- | ------------------------------------------------------------ | -| index | number | Yes | Tab order of the component in sequential focus navigation with the **Tab** key. When components with positive **tabIndex** values are present, only these components are reachable through sequential focus navigation, and they are navigated cyclically in ascending order based on the **tabIndex** value. When components with positive **tabIndex** values are not present, those components with a **tabIndex** value of **0** are navigated based on the preset focus navigation rule.
**tabIndex** is not yet compatible with [UiExtension](../js-apis-arkui-uiExtension.md) component. As such, using **tabIndex** on a page that contains [UiExtension](../js-apis-arkui-uiExtension.md) may lead to disordered focus navigation.
- **tabIndex** >= 0: The component is focusable and can be reached through sequential keyboard navigation.
- **tabIndex** < 0 (usually **tabIndex** = -1): The component is focusable, but cannot be reached through sequential keyboard navigation.
Default value: **0**
**NOTE**
**tabIndex** and **focusScopeId** cannot be used together. +| index | number | Yes | Tab order of the component in sequential focus navigation with the **Tab** key. When components with positive **tabIndex** values are present, only these components are reachable through sequential focus navigation, and they are navigated cyclically in ascending order based on the **tabIndex** value. When components with positive **tabIndex** values are not present, those components with a **tabIndex** value of **0** are navigated based on the preset focus navigation rule.
The [UiExtension](../js-apis-arkui-uiExtension.md) component does not support **tabIndex**. As such, using **tabIndex** on [hierarchical pages](../../../ui/arkts-common-events-focus-event.md#basic-concepts) that contain **UiExtension** components may lead to disordered focus navigation.
- **tabIndex** >= 0: The component is focusable and can be reached through sequential keyboard navigation.
- **tabIndex** < 0 (usually **tabIndex** = -1): The component is focusable, but cannot be reached through sequential keyboard navigation.
Default value: **0**
**NOTE**
**tabIndex** and **focusScopeId** cannot be used together. | +**Return value** + +| Type| Description| +| -------- | -------- | +| T | Current component.| + ## defaultFocus9+ -defaultFocus(value: boolean) +defaultFocus(value: boolean): T -Specifies whether to set the component as the default focus of the page. +Specifies whether to set this component as the default focus of the current [hierarchical page](../../../ui/arkts-common-events-focus-event.md#basic-concepts). + +> **NOTE** +> +> This setting applies to pages that support routing or modal-type container components, such as **Page**, **NaviDestination**, **NavBar**, **PopUp**, and **Dialog**. **Atomic service API**: This API can be used in atomic services since API version 11. @@ -59,11 +75,17 @@ Specifies whether to set the component as the default focus of the page. | Name| Type | Mandatory| Description | | ------ | ------- | ---- | ------------------------------------------------------------ | -| value | boolean | Yes | Whether to set the component as the default focus of the page. This parameter takes effect only when the page is new and accessed for the first time.
Default value: **false**
**NOTE**
The value **true** means to set the component as the default focus, and the value **false** has no effect.
If no component on the page has **defaultFocus(true)** set:
For API version 11 and earlier, the default focus is on the first focusable non-container component on the page.
For API version versions later than 11, the default focus is on the page's root container.
If **defaultFocus(true)** is set for multiple components on the page, the first component found in the component tree in-depth traversal is used as the default focus.| +| value | boolean | Yes | Whether to set the component as the default focus of the current [hierarchical page](../../../ui/arkts-common-events-focus-event.md#basic-concepts). This parameter takes effect only when the hierarchical page is new and accessed for the first time.
Default value: **false**
**NOTE**
The value **true** means to set the component as the default focus, and the value **false** has no effect.
If no component on the hierarchical page has **defaultFocus(true)** set:
For API version 11 and earlier, the default focus is on the first focusable non-container component.
For API version versions later than 11, the default focus is on the hierarchical page's root container.
If **defaultFocus(true)** is set for multiple components on the hierarchical page, the first component found in the component tree depth-first traversal is used as the default focus.| + +**Return value** + +| Type| Description| +| -------- | -------- | +| T | Current component.| ## groupDefaultFocus9+ -groupDefaultFocus(value: boolean) +groupDefaultFocus(value: boolean): T Specifies whether to set the component as the default focus of the container. @@ -77,9 +99,15 @@ Specifies whether to set the component as the default focus of the container. | ------ | ------- | ---- | ------------------------------------------------------------ | | value | boolean | Yes | Whether to set the component as the default focus of the parent container. This parameter takes effect only when the container is new and obtains focus for the first time.
**true**: The component is the default focus of the parent container.
**false**: The component is not the default focus of the parent container.
Default value: **false**
**NOTE**
This parameter must be used together with [tabIndex](#tabindex9). When **tabIndex** is set for a container and **groupDefaultFocus(true)** is set for a child in the container or for the container itself, then when the container obtains focus for the first time through sequential Tab navigation, the focus automatically moves to the specified component. If **groupDefaultFocus(true)** is set for multiple components in the container (including the container itself), the first component found in the component tree in-depth traversal receives the focus.| +**Return value** + +| Type| Description| +| -------- | -------- | +| T | Current component.| + ## focusOnTouch9+ -focusOnTouch(value: boolean) +focusOnTouch(value: boolean): T Sets whether the component is focusable on touch. @@ -93,6 +121,12 @@ Sets whether the component is focusable on touch. | ------ | ------- | ---- | ------------------------------------------------------------ | | value | boolean | Yes | Whether the component is focusable on touch.
**true**: The component is focusable on touch.
**false**: The component is not focusable on touch.
Default value: **false**
**NOTE**
The component is focusable only when it is touchable.| +**Return value** + +| Type| Description| +| -------- | -------- | +| T | Current component.| + ## focusBox12+ focusBox(style: FocusBoxStyle): T @@ -109,6 +143,11 @@ Sets the system focus box style for the component. | ---- | ---- | ---- | ---- | | style | [FocusBoxStyle](#focusboxstyle12) | Yes | System focus box style for the component.
**NOTE**
This style affects only the components that display the system focus box during focus traversal.| +**Return value** + +| Type| Description| +| -------- | -------- | +| T | Current component.| ## focusControl9+ @@ -120,7 +159,8 @@ Implements focus control. requestFocus(value: string): boolean -Requests the focus to move to the specified component. It is a global API. This API does not take effect in the current frame; the focus change will occur in the next frame. Use the [requestFocus](../js-apis-arkui-UIContext.md#requestfocus12) API in **FocusController** for immediate effect. +Requests focus transfer to the specified component during the next frame rendering. This global API provides asynchronous focus control. +For scenarios requiring immediate focus changes, it is recommended that you use the focus synchronization transfer API [requestFocus](../js-apis-arkui-UIContext.md#requestfocus12) in **FocusController**. **Atomic service API**: This API can be used in atomic services since API version 11. @@ -134,7 +174,7 @@ Requests the focus to move to the specified component. It is a global API. This | Type| Description| | ------- | ---- | -| boolean | Returns whether the focus is successfully moved to the target component. Returns **true** if the specified component exists and the focus is successfully moved to the target component; returns **false** otherwise.| +| boolean | Returns whether focus transfer is successfully requested for the target component. Returns **true** if the target component exists and can receive focus; returns **false** otherwise.| > **NOTE** > @@ -164,8 +204,14 @@ Sets the focus priority of this component in a specified container. It must be u | Name| Type | Mandatory| Description | | ------ | ------- | ---- | ------------------------------------------------------------ | -| scopeId | string | Yes | ID of the container component where the current component's focus priority takes effect.
**NOTE**
1. The current component must be within the container identified by **scopeId**, or the container to which the current component belongs must be within the container identified by **scopeId**.
2. A component cannot set multiple priorities.
3. A container component with **focusScopeId** set cannot have its priority set.| -| priority | [FocusPriority](#focuspriority12) | No | Focus priority.
**NOTE**
If **priority** is not set, the component uses the default **AUTO** priority.
Impact of the priority on focus traversal and component focus:
1. When the container gains focus as a whole (page level switching/focus switching to a focus group/container component requesting focus with **requestFocus**), if there is a component with a priority of **PREVIOUS** within the container, that component gains focus; otherwise, the last focused component does.
2. When a container does not gain focus as a whole (using **Tab** or arrow keys in non-focus group scenarios), the highest priority component gets focus on first focus; subsequent focus follows position order regardless of priority.| +| scopeId | string | Yes | ID of the container component where the current component's focus priority takes effect.
**NOTE**
1. The current component must be inside the container identified by **scopeId** or inside a sub-container of that container.
2. A component cannot set multiple priorities.
3. A container component with **focusScopeId** set cannot have its priority set.| +| priority | [FocusPriority](#focuspriority12) | No | Focus priority.
**NOTE**
If **priority** is not set, **AUTO** is used by default.
Impact of the priority on focus traversal and component focus:
1. When the container gains focus as a whole (hierarchical page level switching/focus switching to a focus group/container component requesting focus with **requestFocus**), if there is a component with a priority of **PREVIOUS** within the container, that component gains focus; otherwise, the last focused component does.
2. When a container does not gain focus as a whole (using **Tab** or arrow keys in non-focus group scenarios), the highest priority component gets focus on first focus; subsequent focus follows position order regardless of priority.| + +**Return value** + +| Type| Description| +| -------- | -------- | +| T | Current component.| ### FocusPriority12+ @@ -194,7 +240,7 @@ Enumerates the modes for processing key events. ## focusScopeId12+ -focusScopeId(id: string, isGroup?: boolean) +focusScopeId(id: string, isGroup?: boolean): T Assigns an ID to this container component and specifies whether the container is a focus group. @@ -206,12 +252,18 @@ Assigns an ID to this container component and specifies whether the container is | Name| Type | Mandatory| Description | | ------ | ------- | ---- | ------------------------------------------------------------ | -| id | string | Yes | ID of the current container component.
**NOTE**
The ID must be unique within a single level page.| -| isGroup | boolean | No | Whether the current container component is a focus group.
**true**: The current container component is a focus group.
**false**: The current container component is not a focus group.
**NOTE**
Focus groups cannot be nested and should not be configured repeatedly.
The focus group and **tabIndex** cannot be used together.
The focus group enables the container and its elements to navigate focus according to the focus group rules as follows:
1. Only arrow keys are allowed for focus traversal within the focus group; the **Tab** key will move the focus out of the focus group.
2. When arrow keys are used to move the focus from outside the focus group to inside, if there is a component with a priority of **PREVIOUS** within the focus group, that component gains focus; otherwise, the last focused component does.| +| id | string | Yes | ID of the current container component.
**NOTE**
The ID must be unique within a single [hierarchical page](../../../ui/arkts-common-events-focus-event.md#basic-concepts).| +| isGroup | boolean | No | Whether the current container component is a focus group.
**true**: The current container component is a focus group.
**false**: The current container component is not a focus group.
Default value: **false**.
**NOTE**
Focus groups cannot be nested and should not be configured repeatedly.
The focus group and **tabIndex** cannot be used together.
The focus group enables the container and its elements to navigate focus according to the focus group rules as follows:
1. Only arrow keys are allowed for focus traversal within the focus group; the **Tab** key will move the focus out of the focus group.
2. When arrow keys are used to move the focus from outside the focus group to inside, if there is a component with a priority of **PREVIOUS** within the focus group, that component gains focus; otherwise, the last focused component does.| + +**Return value** + +| Type| Description| +| -------- | -------- | +| T | Current component.| ## focusScopeId14+ -focusScopeId(id: string, isGroup?: boolean, arrowStepOut?: boolean) +focusScopeId(id: string, isGroup?: boolean, arrowStepOut?: boolean): T Assigns an ID to this container component and specifies whether the container is a focus group. @@ -221,13 +273,19 @@ Assigns an ID to this container component and specifies whether the container is | Name| Type | Mandatory| Description | | ------ | ------- | ---- | ------------------------------------------------------------ | -| id | string | Yes | ID of the current container component.
**NOTE**
The ID must be unique within a single level page.
**Atomic service API**: This API can be used in atomic services since API version 12.| -| isGroup | boolean | No | Whether the current container component is a focus group.
**true**: The current container component is a focus group.
**false**: The current container component is not a focus group.
**NOTE**
Focus groups cannot be nested and should not be configured repeatedly.
The focus group and **tabIndex** cannot be used together.
The focus group enables the container and its elements to navigate focus according to the focus group rules as follows:
1. Only arrow keys are allowed for focus traversal within the focus group; the **Tab** key will move the focus out of the focus group.
2. When arrow keys are used to move the focus from outside the focus group to inside, if there is a component with a priority of **PREVIOUS** within the focus group, that component gains focus; otherwise, the last focused component does.
**Atomic service API**: This API can be used in atomic services since API version 12.| -| arrowStepOut14+ | boolean | No | Whether the focus can be moved out of the current focus group using arrow keys.
**true**: The focus can be moved out of the current focus group using arrow keys.
**false**: The focus cannot be moved out of the current focus group using arrow keys.
**Atomic service API**: This API can be used in atomic services since API version 14.| +| id | string | Yes | ID of the current container component.
**NOTE**
The ID must be unique within a single [hierarchical page](../../../ui/arkts-common-events-focus-event.md#basic-concepts).
**Atomic service API**: This API can be used in atomic services since API version 12.| +| isGroup | boolean | No | Whether the current container component is a focus group.
**true**: The current container component is a focus group.
**false**: The current container component is not a focus group.
Default value: **false**.
**NOTE**
Focus groups cannot be nested and should not be configured repeatedly.
The focus group and **tabIndex** cannot be used together.
The focus group enables the container and its elements to navigate focus according to the focus group rules as follows:
1. Only arrow keys are allowed for focus traversal within the focus group; the **Tab** key will move the focus out of the focus group.
2. When arrow keys are used to move the focus from outside the focus group to inside, if there is a component with a priority of **PREVIOUS** within the focus group, that component gains focus; otherwise, the last focused component does.
**Atomic service API**: This API can be used in atomic services since API version 12.| +| arrowStepOut14+ | boolean | No | Whether the focus can be moved out of the current focus group using arrow keys.
**true**: The focus can be moved out of the current focus group using arrow keys.
**false**: The focus cannot be moved out of the current focus group using arrow keys.
The default value is **true**.
**Atomic service API**: This API can be used in atomic services since API version 14.| + +**Return value** + +| Type| Description| +| -------- | -------- | +| T | Current component.| ## tabStop14+ -tabStop(isTabStop: boolean) :T +tabStop(isTabStop: boolean): T Sets whether this container component is a focus stop. During focus traversal, the focus stops at the container component serving as a focus stop. @@ -239,7 +297,13 @@ Sets whether this container component is a focus stop. During focus traversal, t | Name| Type | Mandatory| Description | | ------ | ------- | ---- | ------------------------------------------------------------ | -| isTabStop | boolean | Yes | Whether the current container component is a focus stop.
**true**: The current container component is a focus stop.
**false**: The current container component is not a focus stop.
**NOTE**
1. To configure **tabStop**, make sure the component is a container and has focusable child components. By default, container components cannot directly gain focus.
2. When [requestFocus](../js-apis-arkui-UIContext.md#requestfocus12) is used for requesting focus, if the component is a container and **tabStop** is configured, the focus can stop at the container. If **tabStop** is not configured, the component can still gain focus, even if there are other components in the focus chain with **tabStop** configured.
3. Containers with **tabStop** configured should not be nested more than two levels deep.
Focus traversal rules with **tabStop**:
1. During focus traversal using the **Tab** key or arrow keys, the focus stops at components with **tabStop** configured. If the focus is inside a container with **tabStop** configured, it can move to the next focusable component within the container. If the focus is outside such a container, it can move to the next focusable component outside the container.
2. When the focus is on a container with **tabStop** configured, pressing **Enter** moves the focus to the first focusable component inside the container. Pressing **ESC** moves the focus back to the previous component with **tabStop** configured, without exceeding the current level of the page root container. Pressing the spacebar triggers the **onClick** event of the container.
3. Whenever possible, avoid configuring **tabStop** on the root container. If **tabStop** is configured on the root container, the following behaviors will occur:
- Using [clearFocus](../js-apis-arkui-UIContext.md#clearfocus12) to clear the focus to the root container and then pressing **Enter** will move the focus to the previously focused component inside the root container.
- Using **ESC** to clear the focus to the root container and then pressing **Enter** will move the focus to the first focusable component inside the root container.| +| isTabStop | boolean | Yes | Whether the current container component is a focus stop.
**true**: The current container component is a focus stop.
**false**: The current container component is not a focus stop.
**NOTE**
1. To configure **tabStop**, make sure the component is a container and has focusable child components. By default, container components cannot directly gain focus.
2. When [requestFocus](../js-apis-arkui-UIContext.md#requestfocus12) is used for requesting focus, if the component is a container and **tabStop** is configured, the focus can stop at the container. If **tabStop** is not configured, the component can still gain focus, even if there are other components in the focus chain with **tabStop** configured.
3. Containers with **tabStop** configured should not be nested more than two levels deep.
Focus traversal rules with **tabStop**:
1. During focus traversal using the **Tab** key or arrow keys, the focus stops at components with **tabStop** configured. If the focus is inside a container with **tabStop** configured, it can move to the next focusable component within the container. If the focus is outside such a container, it can move to the next focusable component outside the container.
2. When the focus is on a container with **tabStop** configured: Pressing **Enter** moves the focus to the first focusable component inside the container.
Pressing **ESC** moves the focus back to the last component with **tabStop** configured within the current [hierarchical page](../../../ui/arkts-common-events-focus-event.md#basic-concepts).
Pressing the spacebar triggers the **onClick** event of the container.
3. Whenever possible, avoid configuring **tabStop** on the root container. If **tabStop** is configured on the root container, the following behaviors will occur:
- Using [clearFocus](../js-apis-arkui-UIContext.md#clearfocus12) to clear the focus to the root container and then pressing **Enter** will move the focus to the previously focused component inside the root container.
- Using **ESC** to clear the focus to the root container and then pressing **Enter** will move the focus to the first focusable component inside the root container.| + +**Return value** + +| Type| Description| +| -------- | -------- | +| T | Current component.| **Example for describing the keys and focusable components during focus traversal** @@ -263,6 +327,12 @@ Sets the custom focus movement logic for the component. | ------ | ------- | ---- | ------------------------------------------------------------ | | nextStep | [FocusMovement](#focusmovement18) | No| Custom focus movement logic of the component.
**NOTE**
The default value resets **nextStep** to empty.
If custom focus movement is not set or the specified component does not exist, the default focus movement logic applies.| +**Return value** + +| Type| Description| +| -------- | -------- | +| T | Current component.| + ## FocusMovement18+ Sets the target component for focus movement based on key presses. If it is not specified, the default focus movement logic applies. @@ -284,14 +354,14 @@ Sets the target component for focus movement based on key presses. If it is not ### Example 1: Setting Focus and Focus Traversal Effects for Components -This example shows how to use **defaultFocus**, **groupDefaultFocus**, and **focusOnTouch**. **defaultFocus** sets the bound component as the initial focus after the page is created. **groupDefaultFocus** sets the bound component as the initial focus after the container with the specified **tabIndex** is created. **focusOnTouch** sets the bound component to obtain focus upon being clicked. +This example shows how to use **defaultFocus**, **groupDefaultFocus**, and **focusOnTouch**. **defaultFocus** sets the bound component as the initial focus after the [hierarchical page](../../../ui/arkts-common-events-focus-event.md#basic-concepts) is created. **groupDefaultFocus** sets the bound component as the initial focus after the container with the specified **tabIndex** is created. **focusOnTouch** sets the bound component to obtain focus upon being clicked. ```ts // focusTest.ets @Entry @Component struct FocusableExample { - @State inputValue: string = '' + @State inputValue: string = ''; build() { Scroll() { @@ -361,7 +431,7 @@ struct FocusableExample { this.inputValue = value }) .width(156) - .defaultFocus(true) // The component is the initial default focus of the page. + .defaultFocus(true) // The TextInput component is the initial default focus of the hierarchical page. Button('Group3') .width(165) .height(40) @@ -417,19 +487,19 @@ On first-time access, the focus is on the **TextInput** component bound to **def ![defaultFocus](figures/defaultFocus.png) -When you press the **Tab** key for the first time, the focus switches to the container that matches **tabIndex(1)** and automatically moves to the component bound to **groupDefaultFocus**. +Pressing the **Tab** key for the first time moves the focus to the container with **tabIndex(1)** and automatically navigates to the first focusable component inside the container. ![groupDefaultFocus1](figures/groupDefaultFocus1.png) -When you press the **Tab** key for the second time, the focus switches to the container that matches **tabIndex(2)** and automatically moves to the component bound to **groupDefaultFocus**. +Pressing the **Tab** key a second time shifts the focus to the container with **tabIndex(2)** and automatically navigates to the component bound to **groupDefaultFocus**. ![groupDefaultFocus2](figures/groupDefaultFocus2.png) -When you press the **Tab** key for the third time, the focus switches to the container that matches **tabIndex(3)** and automatically moves to the component bound to **groupDefaultFocus**. +Pressing the **Tab** key a third time shifts the focus to the container with **tabIndex(3)** and automatically navigates to the component bound to **DefaultFocus**. ![groupDefaultFocus3](figures/groupDefaultFocus3.png) -Clicking the component bound to **focusOnTouch** sets the focus on the component and removes the focus indicator. Pressing the Tab key again displays the focus indicator. +Clicking the component bound to **focusOnTouch** sets the focus on the component and removes the focus indicator. Pressing the **Tab** key again displays the focus indicator. ![focusOnTouch](figures/focusOnTouch.png) @@ -439,15 +509,15 @@ This example demonstrates how to set focus on a specific component using **focus > **NOTE** > -> To avoid confusion with **focusControl** instances, it is recommended that you obtain a **UIContext** instance using the [getUIContext](../js-apis-arkui-UIContext.md#uicontext) API, and then obtain the **focusControl** instance bound to the context through the [getFocusController](../js-apis-arkui-UIContext.md#getfocuscontroller12) API. +> Directly using **focusControl** can lead to the issue of [ambiguous UI context](../../../ui/arkts-global-interface.md#ambiguous-ui-context). To avoid this, obtain a [UIContext](../js-apis-arkui-UIContext.md#uicontext) instance using **getUIContext()**, and then obtain the associated **focusControl** object using [getFocusController](../js-apis-arkui-UIContext.md#getfocuscontroller12). ```ts // requestFocus.ets @Entry @Component struct RequestFocusExample { - @State idList: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'LastPageId'] - @State selectId: string = 'LastPageId' + @State idList: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'LastPageId']; + @State selectId: string = 'LastPageId'; build() { Column({ space:20 }){ @@ -525,7 +595,7 @@ Below shows how the UI behaves when you request focus for a focusable component. This example shows how to change the focus box style of a component by configuring **focusBox**. ```ts -import { ColorMetrics, LengthMetrics } from '@kit.ArkUI' +import { ColorMetrics, LengthMetrics } from '@kit.ArkUI'; @Entry @Component @@ -562,7 +632,7 @@ This example demonstrates how to set a component as the initial focus when its c @Entry @Component struct FocusableExample { - @State inputValue: string = '' + @State inputValue: string = ''; build() { Scroll() { @@ -679,13 +749,34 @@ struct FocusableExample { } } ``` +Diagrams: + +Pressing the **Tab** key for the first time shifts the focus to the component bound to **focusScopePriority** in container 1. + +![focusScopePriority1](figures/focusScopePriority1.png) + +Pressing the **Tab** key again moves the focus to the next component in container 1. + +![focusScopePriority2](figures/focusScopePriority2.png) + +Pressing the **Tab** key once more shifts the focus to the subsequent component in container 1. + +![focusScopePriority3](figures/focusScopePriority3.png) + +Continuing to press the **Tab** key transfers the focus to the component configured with **focusScopePriority** in container 2. + +![focusScopePriority4](figures/focusScopePriority4.png) + +Pressing the **Tab** key again moves the focus to the component named **Group1** in container 1. + +![focusScopePriority5](figures/focusScopePriority5.png) ### Example 5: Setting Focus Stop -This example illustrates how to use **tabStop** to make the focus stop on a component during focus traversal with the **Tab** key. +This example illustrates how to use **tabStop** to enable focus stop on a component during focus traversal with the **Tab** key. ```ts -import { ColorMetrics, LengthMetrics } from '@kit.ArkUI' +import { ColorMetrics, LengthMetrics } from '@kit.ArkUI'; @Entry @Component @@ -783,8 +874,8 @@ class MyButtonModifier implements AttributeModifier { @Entry @Component struct Index { - @State modifier: MyButtonModifier = new MyButtonModifier() - @State idList: string[] = ['A', 'B', 'C', 'D', 'E', 'F'] + @State modifier: MyButtonModifier = new MyButtonModifier(); + @State idList: string[] = ['A', 'B', 'C', 'D', 'E', 'F']; build() { Column({space: 10}) { diff --git a/en/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-foreground-blur-style.md b/en/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-foreground-blur-style.md index fd4a58962863c02feea1262448432178defb4177..994c9a7ea022c843e34d7be3a63676cfbb35f8ec 100644 --- a/en/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-foreground-blur-style.md +++ b/en/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-foreground-blur-style.md @@ -78,7 +78,7 @@ Applies a foreground blur style to the component. Compared to [foregroundBlurSty > **NOTE** > -> **foregroundBlurStyle** is a real-time blurring API that performs rendering frame by frame, which incurs significant performance overhead. When both the blur content and blur radius remain unchanged, it is recommended that you use the static blur API [blur](../../apis-arkgraphics2d/js-apis-effectKit.md#blur). For best practices, see [Image Blurring Optimization – C When to Use](https://developer.huawei.com/consumer/en/doc/best-practices/bpta-fuzzy-scene-performance-optimization#section4945532519). +> **foregroundBlurStyle** is a real-time blurring API that performs rendering frame by frame, which incurs significant performance overhead. When both the blur content and blur radius remain unchanged, it is recommended that you use the static blur API [blur](../../apis-arkgraphics2d/js-apis-effectKit.md#blur). For best practices, see [Image Blurring Optimization – When to Use](https://developer.huawei.com/consumer/en/doc/best-practices/bpta-fuzzy-scene-performance-optimization#section4945532519). ## ForegroundBlurStyleOptions Inherited from [BlurStyleOptions](#blurstyleoptions). diff --git a/en/application-dev/reference/apis-arkui/errorcode-node.md b/en/application-dev/reference/apis-arkui/errorcode-node.md new file mode 100644 index 0000000000000000000000000000000000000000..d39beff0305e13cd3167b20a76d96305345b1105 --- /dev/null +++ b/en/application-dev/reference/apis-arkui/errorcode-node.md @@ -0,0 +1,95 @@ +# Custom Node Error Codes + +> **NOTE** +> +> This topic describes only module-specific error codes. For details about universal error codes, see [Universal Error Codes](../errorcode-universal.md). + +## 100021 FrameNode Not Modifiable + +**Error Message** + +The FrameNode is not modifiable. + +**Description** + +This error code is reported when the current FrameNode is unmodifiable, preventing the requested operation, for example, setting properties, adding or removing child nodes, or binding controllers. + +**Possible Causes** + +An attempt is made to modify a declarative node. + +**Solution** + +Avoid modifying unmodifiable nodes. Use try-catch to handle errors and prevent impact on other logic. + +## 100022 Cross-Language Attribute Configuration Not Supported + +**Error Message** + +The FrameNode cannot be set whether to support cross-language common attribute setting. + +**Description** + +This error code is reported when the target FrameNode does not support cross-language attribute configuration. + +**Possible Causes** + +An attempt is made to adjust the cross-language attribute permission of the target FrameNode. + +**Solution** + +NA + +## 100023 Parameter Error + +**Error Message** + +Parameter error. Possible causes: 1. The component type of the node is incorrect. 2. The node is null or undefined. 3. The controller is null or undefined. + +**Description** + +This error code is reported when the parameters passed to the API are incorrect. + +**Possible Causes** + +1. The component type of the provided node is incorrect. +2. The provided node is null or undefined. +3. The provided controller is null or undefined. + +**Solution** + +Adjust the passed parameter values or perform pre-checks. + +## 106103 Operation Not Allowed on Nodes Created by ArkTS + +**Error Message** + +The corresponding operation does not support nodes created by ArkTS. + +**Description** + +This error code is reported when the operation does not support nodes created by ArkTS. + +**Possible Causes** + +The current operation is incompatible with nodes created by ArkTS. + +**Solution** + +Pass nodes not created by ArkTS. + +## 106203 Passed Node Not Mounted to Component Tree + +**Error Message** + +**Description** + +This error code is reported when the passed node is not mounted to the component tree. + +**Possible Causes** + +The passed node is not mounted to the component tree when the API is called. + +**Solution** + +Adjust the API call timing to ensure the node is mounted to the component tree. diff --git a/en/application-dev/reference/apis-arkui/errorcode-xcomponent.md b/en/application-dev/reference/apis-arkui/errorcode-xcomponent.md new file mode 100644 index 0000000000000000000000000000000000000000..4c39d91db86798ee00bb08c41e9d12b00a3ed6a4 --- /dev/null +++ b/en/application-dev/reference/apis-arkui/errorcode-xcomponent.md @@ -0,0 +1,23 @@ +# XComponent Error Codes + +> **NOTE** +> +> This topic describes only module-specific error codes. For details about universal error codes, see [Universal Error Codes](../errorcode-universal.md). + +## 103501 XComponent in Invalid State + +**Error Message** + +XComponent is in invalid state. + +**Description** + +This error code is reported when the **XComponent** is in an invalid or unsupported state. + +**Possible Causes** + +Refer to the specific documentation of the API that triggers this error. + +**Solution** + +Ensure that the Surface held by the **XComponent** is in a normal state. diff --git a/en/application-dev/ui/arkts-layout-development-arcswiper.md b/en/application-dev/ui/arkts-layout-development-arcswiper.md index 70fcfb189a78c2d6e366909bb544502e0052c075..4ab5aaa408697b2cd2c70e6436d011e7ec04b096 100644 --- a/en/application-dev/ui/arkts-layout-development-arcswiper.md +++ b/en/application-dev/ui/arkts-layout-development-arcswiper.md @@ -12,7 +12,7 @@ import { ArcDotIndicator, ArcDirection, ArcSwiperController -} from '@kit.ArkUI' +} from '@kit.ArkUI'; ``` ## Setting the Navigation Point Indicator Style @@ -90,7 +90,7 @@ The **ArcSwiper** component supports four page switching modes: swiping with fin @Entry @Component struct SwiperCustomAnimationExample { - private wearableSwiperController: ArcSwiperController = new ArcSwiperController() + private wearableSwiperController: ArcSwiperController = new ArcSwiperController(); build() { Column() { @@ -191,20 +191,27 @@ When **vertical** is set to **true**, swiping occurs in the vertical direction. Use the [customContentTransition](../reference/apis-arkui/arkui-ts/ts-container-arcswiper.md#customcontenttransition) attribute to set a custom transition animation for **ArcSwiper**. Define the animation by adjusting opacity, scale, translation, and rendering layer for all pages within the viewport frame by frame in the callback. ```ts -import { Decimal } from '@kit.ArkTS' +import { Decimal } from '@kit.ArkTS'; +import { + ArcSwiper, + ArcSwiperAttribute, + ArcDotIndicator, + ArcDirection, + ArcSwiperController +} from '@kit.ArkUI'; @Entry @Component struct SwiperCustomAnimationExample { - private MIN_SCALE: number = 0.1 - @State backgroundColors: Color[] = [Color.Green, Color.Blue, Color.Yellow, Color.Pink, Color.Gray, Color.Orange] - @State opacityList: number[] = [] - @State scaleList: number[] = [] + private MIN_SCALE: number = 0.1; + @State backgroundColors: Color[] = [Color.Green, Color.Blue, Color.Yellow, Color.Pink, Color.Gray, Color.Orange]; + @State opacityList: number[] = []; + @State scaleList: number[] = []; aboutToAppear(): void { for (let i = 0; i < this.backgroundColors.length; i++) { - this.opacityList.push(1.0) - this.scaleList.push(1.0) + this.opacityList.push(1.0); + this.scaleList.push(1.0); } } @@ -227,13 +234,13 @@ struct SwiperCustomAnimationExample { transition: (proxy: SwiperContentTransitionProxy) => { if (proxy.position <= -1 || proxy.position >= 1) { // When a group of pages is completely scrolled out of the viewport, reset the attribute values. - this.opacityList[proxy.index] = 1.0 - this.scaleList[proxy.index] = 1.0 + this.opacityList[proxy.index] = 1.0; + this.scaleList[proxy.index] = 1.0; } else { - let position: number = Decimal.abs(proxy.position).toNumber() - this.opacityList[proxy.index] = 1 - position + let position: number = Decimal.abs(proxy.position).toNumber(); + this.opacityList[proxy.index] = 1 - position; this.scaleList[proxy.index] = - this.MIN_SCALE + (1 - this.MIN_SCALE) * (1 - position) + this.MIN_SCALE + (1 - this.MIN_SCALE) * (1 - position); } } }) @@ -249,11 +256,19 @@ struct SwiperCustomAnimationExample { The swipe gesture of the **ArcSwiper** component may conflict with the swipe-to-return functionality. To resolve this, you can use [gesture judgment](../reference/apis-arkui/arkui-ts/ts-gesture-blocking-enhancement.md#ongesturerecognizerjudgebegin) to determine whether **ArcSwiper** has scrolled to the beginning. This allows you to intercept the swipe gesture and enable the swipe-to-return functionality. ```ts +import { + ArcSwiper, + ArcSwiperAttribute, + ArcDotIndicator, + ArcDirection, + ArcSwiperController +} from '@kit.ArkUI'; + @Entry @Component struct SwiperCustomAnimationExample { - @State backgroundColors: Color[] = [Color.Green, Color.Blue, Color.Yellow, Color.Pink, Color.Gray, Color.Orange] - innerSelectedIndex: number = 0 + @State backgroundColors: Color[] = [Color.Green, Color.Blue, Color.Yellow, Color.Pink, Color.Gray, Color.Orange]; + innerSelectedIndex: number = 0; build() { Column() { @@ -268,18 +283,18 @@ struct SwiperCustomAnimationExample { }) } .onAnimationStart((index: number, targetIndex: number) => { - this.innerSelectedIndex = targetIndex + this.innerSelectedIndex = targetIndex; }) .onGestureRecognizerJudgeBegin((event: BaseGestureEvent, current: GestureRecognizer, others: Array): GestureJudgeResult => { // When the implementation is about to succeed, set the recognizer enabling state based on the current component state. if (current) { let target = current.getEventTargetInfo(); if (target && current.isBuiltIn() && current.getType() == GestureControl.GestureType.PAN_GESTURE) { - let swiperTaget = target as ScrollableTargetInfo - if (swiperTaget instanceof ScrollableTargetInfo && - (swiperTaget.isBegin() || this.innerSelectedIndex === 0)) { // This condition checks whether ArcSwiper has scrolled to the beginning. + let swiperTarget = target as ScrollableTargetInfo; + if (swiperTarget instanceof ScrollableTargetInfo && + (swiperTarget.isBegin() || this.innerSelectedIndex === 0)) { // Check whether the ArcSwiper has scrolled to the beginning: swiperTarget.isBegin() or innerSelectedIndex === 0. let panEvent = event as PanGestureEvent; - if (panEvent && panEvent.offsetX > 0 && (swiperTaget.isBegin() || this.innerSelectedIndex === 0)) { + if (panEvent && panEvent.offsetX > 0 && (swiperTarget.isBegin() || this.innerSelectedIndex === 0)) { return GestureJudgeResult.REJECT; } } @@ -291,4 +306,3 @@ struct SwiperCustomAnimationExample { } } ``` - \ No newline at end of file diff --git a/en/application-dev/ui/ndk-drag-event.md b/en/application-dev/ui/ndk-drag-event.md index de5ea7a8a3f5fa3260d68fed7fd71c57e59b84b4..e8b2a1646be60c1937b7aa00bf266bc21e252e1d 100644 --- a/en/application-dev/ui/ndk-drag-event.md +++ b/en/application-dev/ui/ndk-drag-event.md @@ -1,6 +1,6 @@ # Drag Event -The ArkUI framework provides a set of drag event APIs to help you implement drag-and-drop functionality.These events include [NODE_ON_PRE_DRAG](../reference/apis-arkui/_ark_u_i___native_module.md#arkui_nodeeventtype), [NODE_ON_DRAG_START](../reference/apis-arkui/_ark_u_i___native_module.md#arkui_nodeeventtype), [NODE_ON_DROP](../reference/apis-arkui/_ark_u_i___native_module.md#arkui_nodeeventtype), [NODE_ON_DRAG_ENTER](../reference/apis-arkui/_ark_u_i___native_module.md#arkui_nodeeventtype), [NODE_ON_DRAG_MOVE](../reference/apis-arkui/_ark_u_i___native_module.md#arkui_nodeeventtype), [NODE_ON_DRAG_LEAVE](../reference/apis-arkui/_ark_u_i___native_module.md#arkui_nodeeventtype), and [NODE_ON_DRAG_END](../reference/apis-arkui/_ark_u_i___native_module.md#arkui_nodeeventtype). These events are triggered at different stages of the drag operation, allowing you to perform specific actions and manage the drag interaction as needed. +The ArkUI framework provides a set of drag event APIs to help you implement drag-and-drop functionality. These events include [NODE_ON_PRE_DRAG](../reference/apis-arkui/_ark_u_i___native_module.md#arkui_nodeeventtype), [NODE_ON_DRAG_START](../reference/apis-arkui/_ark_u_i___native_module.md#arkui_nodeeventtype), [NODE_ON_DROP](../reference/apis-arkui/_ark_u_i___native_module.md#arkui_nodeeventtype), [NODE_ON_DRAG_ENTER](../reference/apis-arkui/_ark_u_i___native_module.md#arkui_nodeeventtype), [NODE_ON_DRAG_MOVE](../reference/apis-arkui/_ark_u_i___native_module.md#arkui_nodeeventtype), [NODE_ON_DRAG_LEAVE](../reference/apis-arkui/_ark_u_i___native_module.md#arkui_nodeeventtype), and [NODE_ON_DRAG_END](../reference/apis-arkui/_ark_u_i___native_module.md#arkui_nodeeventtype). These events are triggered at different stages of the drag operation, allowing you to perform specific actions and manage the drag interaction as needed. ## Basic Drag Implementation