diff --git a/README.en.md b/README.en.md new file mode 100644 index 0000000000000000000000000000000000000000..34e4fdea763482e868eeab18f4db1250037c971b --- /dev/null +++ b/README.en.md @@ -0,0 +1,533 @@ +# Component Collection + +### Overview + +This sample shows the ArkUI component collection, which includes the **component**, **universal**, **animation**, and **global method** modules. + +### Preview + +| Component | Universal | Animation | Global Method | +|-----------------------------------------------|------------------------------------------------|---------------------------------------------------------------|----------------------------------------------------| +| ![image](screenshots/devices/component.en.png) | ![image](screenshots/devices/general.en.png) | ![image](screenshots/devices/animation.en.png) | ![image](screenshots/devices/global.en.png) | +|
Button
|
onClick Event
|
Shared Element Transition
|
Alert Dialog
| +| ![image](screenshots/devices/button.en.png) | ![image](screenshots/devices/click_event.en.png) | ![image](screenshots/devices/share_element_transition.en.png) | ![image](screenshots/devices/warning_popup.en.png) | + +### How to Use + +1. Tap **Component**, **Universal**, **Animation**, and **Global Method**, or swipe left or right to switch between different views. + +2. Tap the navigation (such as onClick and touch events) to go to the details page. + +### Project Directory + +``` +├──entry/src/main/ets // Code +│ ├──application +│ │ └──MyAbilityStage.ets +│ ├──common +│ │ ├──AttributeModificationTool.ets // Components +│ │ ├──IntroductionTitle.ets // Introductory title component of on the home page +│ │ ├──TabContentNavigation.ets // Component for managing tabbed navigation. +│ │ └──TitleBar.ets // Title bar component +│ ├──data +│ │ ├──CollectionCategory.ets // Data category +│ │ └──ResourceDataHandle.ets // Source data +│ ├──entryability +│ │ └──EntryAbility.ets +│ ├──model +│ │ └──CategoricalDataType.ets // Data types +│ ├──pages +│ │ ├──animations // Animations +│ │ │ ├──animateToSample +│ │ │ │ └──AnimateToSample.ets +│ │ │ ├──animationSample +│ │ │ │ └──AnimationSample.ets +│ │ │ ├──interpolationCalculationSample +│ │ │ │ └──InterpolationCalculationSample.ets // Interpolation calculation +│ │ │ ├──motionPathSample +│ │ │ │ └──MotionPathSample.ets // Motion paths +│ │ │ ├──TransitionAnimations // Transition animations +│ │ │ │ ├──componentTransitionSample // Intra-component transitions +│ │ │ │ │ └──ComponentTransitionSample.ets +│ │ │ │ ├──floatingSample // Floating window +│ │ │ │ │ ├──FloatingWindowComponent.ets +│ │ │ │ │ └──FloatingWindowSample.ets +│ │ │ │ ├──folderSample // Folder expansion +│ │ │ │ │ ├──Folder.ets +│ │ │ │ │ ├──FolderItem.ets +│ │ │ │ │ └──FolderSample.ets +│ │ │ │ ├──gallerySample // Gallery card expansion +│ │ │ │ │ └──GalleryCardSample.ets +│ │ │ │ ├──layoutAnimationSample // Layout animation +│ │ │ │ │ └──LayoutAnimationSample.ets +│ │ │ │ ├──multiplexSample // Multiple tasks +│ │ │ │ │ ├──MultiplexModel.ets +│ │ │ │ │ ├──MultiplexSample.ets +│ │ │ │ │ └──ScrollItem.ets +│ │ │ │ ├──pageTransitionSample // Transition between pages +│ │ │ │ │ ├──PageTransitionSample.ets +│ │ │ │ │ └──PageTransitionSampleTo.ets +│ │ │ │ ├──shareElementTransitionSample // Transition of shared elements +│ │ │ │ │ ├──ShareElementTransitionSample.ets +│ │ │ │ │ └──ShareElementTransitionSampleTo.ets +│ │ │ │ ├──shopSample // Shop card expansion +│ │ │ │ │ └──ShopCardSample.ets +│ │ │ │ ├──sideBarTransitionSample // Side bar transition +│ │ │ │ │ ├──ChangePanel.ets +│ │ │ │ │ └──SideBarTransitionSample.ets +│ │ │ │ ├──sizeTransitionSample // Size transition +│ │ │ │ │ └──SizeTransitionSample.ets +│ │ │ │ ├──systemIcon // System icons +│ │ │ │ │ └──SystemIcon.ets +│ │ │ │ └──AnimationData.ets +│ │ ├──components +│ │ │ ├──auxiliary // Auxiliary components +│ │ │ │ ├──alphabetIndexerSample +│ │ │ │ │ └──AlphabetIndexerSample.ets // Alphabet indexers +│ │ │ │ ├──badgeSample +│ │ │ │ │ └──BadgeSample.ets // Badge +│ │ │ │ ├──refreshSample +│ │ │ │ │ └──RefreshSample.ets // Pull-down refresh +│ │ │ │ ├──scrollbarSample +│ │ │ │ │ └──ScrollBarSample.ets // Scroll bar +│ │ │ ├──blankAndDivider // Blank and divider +│ │ │ │ └──dividerSample +│ │ │ │ ├──ChangePanel.ets +│ │ │ │ └──DividerSample.ets +│ │ │ ├──buttonAndSelection // Button and selection +│ │ │ │ ├──buttonSample +│ │ │ │ │ └──ButtonSample.ets // Button +│ │ │ │ ├──checkboxSample +│ │ │ │ │ └──CheckboxSample.ets // Check box +│ │ │ │ ├──counterSample +│ │ │ │ │ └──CounterSample.ets // Counter +│ │ │ │ ├──datePickerSample +│ │ │ │ │ └──DatePickerSample.ets // Date picker +│ │ │ │ ├──radioSample +│ │ │ │ │ └──RadioSample.ets // Radio button +│ │ │ │ ├──ratingSample +│ │ │ │ │ └──RatingSample.ets // Rating bar +│ │ │ │ ├──selectSample +│ │ │ │ │ └──SelectSample.ets // Select menu +│ │ │ │ ├──sliderSample +│ │ │ │ │ ├──ChangePanel.ets +│ │ │ │ │ └──SliderSample.ets // Slider +│ │ │ │ ├──textPickerSample +│ │ │ │ │ └──TextPickerSample.ets // Text picker +│ │ │ │ ├──timePickerSample +│ │ │ │ │ └──TimePickerSample.ets // Time picker +│ │ │ │ └──toggleSample +│ │ │ │ └──ToggleSample.ets // Toggle button +│ │ │ ├──canvas +│ │ │ │ ├──attributesSample +│ │ │ │ │ └──AttributesSample.ets // Attributes +│ │ │ │ ├──gradientSample +│ │ │ │ │ └──GradientSample.ets // Gradient object +│ │ │ │ ├──imageBitmapSample +│ │ │ │ │ └──ImageBitmapSample.ets // Bitmap object +│ │ │ │ ├──methodsSample +│ │ │ │ │ └──MethodsSample.ets // Methods +│ │ │ │ ├──path2dSample +│ │ │ │ │ └──Path2dSample.ets // Path object +│ │ │ │ ├──sampleResources +│ │ │ │ │ ├──icon.png +│ │ │ │ │ └──smoothoff.png +│ │ │ │ ├──shadowsSample +│ │ │ │ │ └──ShadowsSample.ets // Shadow +│ │ │ │ └──transformSample +│ │ │ │ └──TransformSample.ets // Transform +│ │ │ ├──canvasAndGraphicDrawing // Canvas and graphic drawing +│ │ │ │ ├──canvasSample +│ │ │ │ │ └──CanvasSample.ets // Canvas sample +│ │ │ │ ├──circleSample +│ │ │ │ │ ├──ChangePanel.ets +│ │ │ │ │ └──CircleSample.ets // Circle +│ │ │ │ ├──ellipseSample +│ │ │ │ │ ├──ChangePanel.ets +│ │ │ │ │ └──EllipseSample.ets // Ellipse +│ │ │ │ ├──lineSample +│ │ │ │ │ ├──ChangePanel.ets +│ │ │ │ │ └──LineSample.ets // Lines +│ │ │ │ ├──pathSample +│ │ │ │ │ ├──ChangePanel.ets +│ │ │ │ │ └──PathSample.ets // Path +│ │ │ │ ├──polygonSample +│ │ │ │ │ ├──ChangePanel.ets +│ │ │ │ │ └──PolygonSample.ets // Polygon +│ │ │ │ ├──polylineSample +│ │ │ │ │ ├──ChangePanel.ets +│ │ │ │ │ └──PolylineSample.ets // Polyline +│ │ │ │ ├──rectSample +│ │ │ │ │ ├──ChangePanel.ets +│ │ │ │ │ └──RectSample.ets // Rectangle +│ │ │ │ └──shapeSample +│ │ │ │ ├──ChangePanel.ets +│ │ │ │ └──ShapeSample.ets // Shape +│ │ │ ├──imageVideoAndMedia +│ │ │ │ ├──imageAnimatorSample +│ │ │ │ │ └──ImageAnimatorSample.ets // Component for creating animations by displaying a sequence of images in a specified order and duration. +│ │ │ │ ├──imageSample +│ │ │ │ │ ├──ImageControlPanel.ets +│ │ │ │ │ └──ImageSample.ets // Image +│ │ │ │ ├──pluginComponentSample +│ │ │ │ │ └──PluginComponentSample.ets // Plugin component +│ │ │ │ ├──videoSample +│ │ │ │ │ ├──VideoControlPanel.ets +│ │ │ │ │ └──VideoSample.ets // Video component, used to embed and control video playback within your app +│ │ │ │ └──xcomponentSample +│ │ │ │ └──XComponentSample.ets // Component for advanced graphics rendering and media processing +│ │ │ ├──informationPresentationAndDynamicEffects +│ │ │ │ ├──dataPanelSample +│ │ │ │ │ └──DataPanelSample.ets // Data panel +│ │ │ │ ├──gaugeSample +│ │ │ │ │ └──GaugeSample.ets // Gauge +│ │ │ │ ├──imageFitFullSample +│ │ │ │ │ └──ImageFitFullSample.ets // Component used to display images with scaling and fitting options +│ │ │ │ ├──listSample // List +│ │ │ │ │ └──ListSample.ets +│ │ │ │ ├──loadingProgressSample +│ │ │ │ │ └──LoadingProgressSample.ets +│ │ │ │ ├──marqueeSample +│ │ │ │ │ └──MarqueeSample.ets // Marquee +│ │ │ │ ├──particleSample +│ │ │ │ │ └──ParticleSample.ets // Particle effect +│ │ │ │ ├──progressSample +│ │ │ │ │ └──ProgressSample.ets // Progress bar +│ │ │ │ ├──qrCodeSample +│ │ │ │ │ └──QRCodeSample.ets // QR code +│ │ │ │ ├──scrollToSample +│ │ │ │ │ └──ScrollToSample.ets // Scrolling to a specific position within a scrollable container. +│ │ │ │ ├──tapsSwitchSample +│ │ │ │ │ └──TapsSwitchSample.ets // Tap and swith interactions within UI components +│ │ │ │ ├──textclockSample +│ │ │ │ │ └──TextClockSample.ets // Text clock +│ │ │ │ └──textTimerSample +│ │ │ │ └──TextTimerSample.ets // Text timer +│ │ │ ├──listAndGrid +│ │ │ │ ├──gridItemSample +│ │ │ │ │ │──GridItemControlPanel.ets +│ │ │ │ │ └──GridItemSample.ets // Component for creating and managing grid layouts and items within the grids +│ │ │ │ ├──gridSample +│ │ │ │ │ │──GridControlPanel.ets +│ │ │ │ │ └──GridSample.ets // Grid container +│ │ │ │ ├──listItemSample +│ │ │ │ │ └──ListItemSample.ets // Component for creating and managing lists and list items +│ │ │ │ └──listSample +│ │ │ │ │──ListControlPanel.ets +│ │ │ │ └──ListSample.ets // List container +│ │ │ ├──navigation +│ │ │ │ ├──navigationSample +│ │ │ │ │ └──NavigationSample.ets // Navigation root container +│ │ │ │ ├──navigatorSample +│ │ │ │ │ ├──NavigatorSample.ets // Routing +│ │ │ │ │ ├──NavigatorSecondPage.ets +│ │ │ │ │ └──NavigatorThirdPage.ets +│ │ │ │ ├──navRouterSample +│ │ │ │ │ └──NavRouterSample.ets // Component for routing and navigation +│ │ │ │ ├──stepperAndStepperItemSample +│ │ │ │ │ └──StepperAndStepperItemSample.ets // Component used to create step-by-step navigation +│ │ │ │ ├──tabContentSample +│ │ │ │ │ └──TabContentSample.ets // Tab content component +│ │ │ │ └──tabSample +│ │ │ │ ├──TabControlPanel.ets +│ │ │ │ └──TabSample.ets // Tab +│ │ │ ├──rowsAndColumns +│ │ │ │ ├──columnSample +│ │ │ │ │ ├──ColumnControlPanel.ets +│ │ │ │ │ └──ColumnSample.ets // Column container +│ │ │ │ ├──columnSplitSample +│ │ │ │ │ └──ColumnSplitSample.ets // Column split container +│ │ │ │ ├──rowSample +│ │ │ │ │ ├──RowControlPanel.ets +│ │ │ │ │ └──RowSample.ets // Row container +│ │ │ │ ├──rowSplitSample +│ │ │ │ │ └──RowSplitSample.ets // Row split container +│ │ │ │ └──sideBarContainerSample +│ │ │ │ ├──SideBarContainerControlPanel.ets +│ │ │ │ └──SideBarContainerSample.ets // Side bar container +│ │ │ ├──scrollAndSwipe +│ │ │ │ ├──scrollSample +│ │ │ │ │ └──ScrollSample.ets // Component used to implement scrolling functionality in your app +│ │ │ │ └──swiperSample +│ │ │ │ ├──SwiperControlPanel.ets +│ │ │ │ └──SwiperSample.ets // Swiper +│ │ │ ├──stackFlexAndGrid +│ │ │ │ ├──flexSample +│ │ │ │ │ ├──FlexControlPanel.ets +│ │ │ │ │ └──FlexSample.ets // Flexible layout +│ │ │ │ ├──gridRowSample +│ │ │ │ │ ├──GridRowControlPanel.ets +│ │ │ │ │ └──GridRowSample.ets // Grid +│ │ │ │ └──stackSample +│ │ │ │ ├──StackControlPanel.ets +│ │ │ │ └──StackSample.ets // Stack layout +│ │ │ ├──stackFlexAndGrid +│ │ │ │ ├──imageSpanSample +│ │ │ │ │ ├──ChangePanel.ets +│ │ │ │ │ └──ImageSpanSample.ets // Component used to display an image in text. +│ │ │ │ ├──patternLockSample +│ │ │ │ │ ├──ChangePanel.ets +│ │ │ │ │ └──PattternLockSample.ets // Pattern lock +│ │ │ │ ├──richTextSample +│ │ │ │ │ └──RichTextSample.ets // Rich text +│ │ │ │ ├──searchSample +│ │ │ │ │ ├──ChangePanel.ets +│ │ │ │ │ └──SearchSample.ets // Search bar +│ │ │ │ ├──spanSample +│ │ │ │ │ ├──ChangePanel.ets +│ │ │ │ │ └──SpanSample.ets // Component used to display a segment of text as part of a larger Text component +│ │ │ │ ├──textAreaSample +│ │ │ │ │ ├──ChangePanel.ets +│ │ │ │ │ └──TextAreaSample.ets // Text area +│ │ │ │ ├──textInputSample +│ │ │ │ │ └──TextInputSample.ets // Text input +│ │ │ │ └──textSample +│ │ │ │ ├──ChangePanel.ets +│ │ │ │ └──TextSample.ets // Text +│ │ │ ├────web +│ │ │ │ └────webSample +│ │ │ │ └──WebSample.ets // Web page +│ │ │ └──ComponentData.ets +│ │ ├──globalMethods // Details page +│ │ │ ├──dialogs +│ │ │ │ ├──actionSheetDialogSample +│ │ │ │ │ └──ActionSheetDialogSample.ets // Action sheet dialog +│ │ │ │ ├──alertDialogSample +│ │ │ │ │ └──AlertDialogSample.ets // Alert dialog +│ │ │ │ ├──customDialogSample +│ │ │ │ │ │──CustomDialog.ets +│ │ │ │ │ └──CustomDialogSample.ets // Custom dialog +│ │ │ │ ├──dateDialogSample +│ │ │ │ │ └──DateDialogSample.ets // Date dialog +│ │ │ │ ├──menuSample +│ │ │ │ │ └──MenuSample.ets // Menu +│ │ │ │ ├──textPickerDialogSample +│ │ │ │ │ └──TextPickerDialogSample.ets // Text picker dialog +│ │ │ │ └──timeDialogSample +│ │ │ │ └──TimeDialogSample.ets // Time dialog +│ │ │ └──GlobalMethodData.ets +│ │ ├──universal // Universal events, gestures, and properties +│ │ │ ├──events +│ │ │ │ ├──areaChangeEventSample +│ │ │ │ │ └──AreaChangeEventSample.ets // Area change event +│ │ │ │ ├──clickEventSample +│ │ │ │ │ └──ClickEventSample.ets // Click event +│ │ │ │ ├──dragEventSample +│ │ │ │ │ ├──component // Components related to the drag event +│ │ │ │ │ │ ├──GridItemDrag.ets +│ │ │ │ │ │ ├──HyperlinkDrag.ets +│ │ │ │ │ │ ├──ImageDrag.ets +│ │ │ │ │ │ ├──ListItemDrag.ets +│ │ │ │ │ │ ├──TextDrag.ets +│ │ │ │ │ │ └──VideoDrag.ets +│ │ │ │ │ └──DragEventSample.ets // Drag event +│ │ │ │ ├──focusEventSample +│ │ │ │ │ └──FocusEventSample.ets // Focus event +│ │ │ │ ├──keyPressEventSample +│ │ │ │ │ └──KeyPressEventSample.ets // Key press event +│ │ │ │ ├──mountUnmountEventSample +│ │ │ │ │ └──MountUnmountEventSample.ets // Mount/Unmount event +│ │ │ │ ├──mouseEventSample +│ │ │ │ │ └──MouseEventSample.ets // Mouse event +│ │ │ │ ├──scrollEventSample +│ │ │ │ │ └──ScrollEventSample.ets // Scroll event +│ │ │ │ └──touchEventSample +│ │ │ │ └──TouchEventSample.ets // Touch event +│ │ │ ├──gesture +│ │ │ │ ├──bindGestureSample +│ │ │ │ │ └──BindGestureSample.ets // APIs for binding a gesture +│ │ │ │ ├──combinedSample +│ │ │ │ │ └──CombinedSample.ets // Combined gesture +│ │ │ │ ├──longPressSample +│ │ │ │ │ └──LongPressSample.ets // Long press gesture +│ │ │ │ ├──panSample +│ │ │ │ │ └──PanSample.ets // Pan gesture +│ │ │ │ ├──pinchSample +│ │ │ │ │ └──PinchSample.ets // Pinch gesture +│ │ │ │ ├──rotationSample +│ │ │ │ │ └──RotationSample.ets // Rotation gesture +│ │ │ │ ├──swipeSample +│ │ │ │ │ └──SwipeSample.ets // Swipe gesture +│ │ │ │ └──tapGestureSample +│ │ │ │ └──TapGestureSample.ets // Tap gesture +│ │ │ ├──properties +│ │ │ │ ├──backgroundSample +│ │ │ │ │ ├──BackgroundSample.ets // Background +│ │ │ │ │ └──ChangePanel.ets +│ │ │ │ ├──borderSample +│ │ │ │ │ └──BorderSample.ets // Border +│ │ │ │ ├──componentBlurredSample +│ │ │ │ │ └──ComponentBlurredSample.ets // Blurred effect, indicating a component is inactive, disabled, or just a visual aesthetic +│ │ │ │ ├──componentIDSample +│ │ │ │ │ └──ComponentIDSample.ets // Component ID +│ │ │ │ ├──displaySample +│ │ │ │ │ └──DisplaySample.ets // Display +│ │ │ │ ├──effectsSample +│ │ │ │ │ ├──ChangePanel.ets +│ │ │ │ │ └──EffectsSample.ets // Effects +│ │ │ │ ├──flexSample +│ │ │ │ │ └──FlexSample.ets // Flex layout +│ │ │ │ ├──focusControlSample +│ │ │ │ │ └──FocusControlSample.ets // Focus control +│ │ │ │ ├──fontSample +│ │ │ │ │ └──FontSample.ets // Font +│ │ │ │ ├──foregroundSample +│ │ │ │ │ └──ForegroundSample.ets // Foreground +│ │ │ │ ├──gridSettingsSample +│ │ │ │ │ └──GridSettingsSample.ets // Grid settings +│ │ │ │ ├──interactionSample +│ │ │ │ │ └──InteractionSample.ets // Interaction +│ │ │ │ ├──layoutConstraintSample +│ │ │ │ │ └──LayoutConstraintSample.ets // Layout constraint +│ │ │ │ ├──locationSample +│ │ │ │ │ └──LocationSample.ets // Location settings +│ │ │ │ ├──pictureBorderSample +│ │ │ │ │ └──PictureBorderSample.ets // Picture border settings +│ │ │ │ ├──restoreIdSample +│ │ │ │ │ └──RestoreIdSample.ets // Use of a restore ID +│ │ │ │ ├──rotateSample +│ │ │ │ │ └──RotateSample.ets // Rotate +│ │ │ │ ├──safeAreaSample +│ │ │ │ │ ├──ChangePanel.ets +│ │ │ │ │ └──SafeAreaSample.ets // Safe area +│ │ │ │ ├──scaleSample +│ │ │ │ │ └──ScaleSample.ets // Scaling +│ │ │ │ ├──shapeCropSample +│ │ │ │ │ └──ShapeCropSample.ets // Shape crop +│ │ │ │ ├──sizeSample +│ │ │ │ │ └──SizeSample.ets // Size +│ │ │ │ ├──transformSample +│ │ │ │ │ └──TransformSample.ets // Transformations, including rotate, scale, skew or any bombination of these, to UI components +│ │ │ │ └──translateSample +│ │ │ │ └──TranslateSample.ets // Moving UI components from one position to another within a container +│ │ │ └──UniversialData.ets +│ │ └──Index.ets // Home page +│ └──util +│ ├──Logger.ts // Logging utility +│ └──ShowToast.ets // Displaying a small, temporary notification to the user +└──entry/src/main/resources // Resources +``` + +### How to Implement + +In this sample, the **Tabs** container component is used to set up the app framework. Each **TabContent** view uses the **List** layout. In each **ListItem**, the navigation data of that category is loaded through cyclic rendering. The bottom navigation menu uses **tabBar** in **TabContent** to customize the style. + +* The components are classified into four modules: + + * Component module: + - Blank and divider + * Encapsulated custom components: **CommonItemSlider**, **CommonItemSelect**, and **CommonItemColorSelect**. + * APIs: @ohos.app.ability.common + + * Buttons and selections + + UI components including the button, date picker, radio button, select menu, slider, toggle, check box, text picker, time picker, counter, and rating bar. + + - Scroll and swiper + + Scroll and swiper. + + * Information display and effect + + QR code, progress bar, marquee, text timer, text clock, gauge, and data panel. + + - Text and input + + Span, image span, text input, text, and rich text. + + * Auxiliary + + Badge, scroll bar, pull-down refresh, pop-up panel, and alphabet indexer. + + * Canvas + + Attributes of graphic drawing, methods of graphic drawing, gradient object drawing, path object drawing, bitmap drawing, shadow drawing, and transformation drawing. + + * Row and column + + Horizontal layout, vertical layout, horizontal split layout, and vertical split layout. + + * Stack, Flex, and grid + + Stack, Flex, and grid containers. + + * List and grid + + List container and grid container. + + * Navigation + + List navigation, navigator, tabs, stepper, and navigation components. + + * Canvas and graphics drawing + + Drawing components such as canvas components, circles, ellipses, and straight lines. + + * Image, video, and media + + Image, image animation, video, XComponent, and external app components. + + * Web page + + Web component functionalities. + + * Universal module: + * Universal events + * Global components **TitleBar** and **IntroductionTitle** are used. + * The **resetBallMotion**, **isSideReached**, **calculateReachedSide**, **decideMoveDirection** and **moveBall** APIs are used. + + - Universal properties + * Global components **TitleBar** and **AttributeModificationTool** are used. + * APIs: @ohos.promptAction + + - Gesture handling + + Global components **TitleBar** and **AttributeModificationTool** are used. + + * Animation module: + - Transition animation + * Global components **TitleBar** and **IntroductionTitle** are used. + * APIs: @ohos.promptAction + + * Interpolation calculation + * Global components **TitleBar** and **IntroductionTitle** are used. + * APIs: @ohos.curves, @ohos.router + + * Explicit animation + * Global components **TitleBar** and **IntroductionTitle** are used. + * APIs: animateTo + + - Property animation + * Global components **TitleBar** and **IntroductionTitle** are used. + * APIs: animation + + * Path animation + * Global components **TitleBar** and **IntroductionTitle** are used. + * APIs: path + + * Global method module: + - Dialog + + Global components **ShowToast**, **TitleBar**, and **IntroductionTitle** are used. + + - Menu + + Global components **ShowToast**, **TitleBar**, and **IntroductionTitle** are used. + +### Required Permissions + +ohos.permission.GET_BUNDLE_INFO + +### Dependencies + +N/A + +### Constraints + +1. The sample app is supported only on Huawei phones running the standard system. + +2. The HarmonyOS version must be HarmonyOS NEXT Developer Beta1 or later. + +3. The DevEco Studio version must be DevEco Studio NEXT Developer Beta1 or later. + +4. The HarmonyOS SDK version must be HarmonyOS NEXT Developer Beta1 or later. diff --git a/README.md b/README.md index 63e687ea25dde265cc657e7f25d8876ff9b616a9..f9974546af69b0734afcb01fb3fdc17b41fbccbd 100644 --- a/README.md +++ b/README.md @@ -80,7 +80,7 @@ │ │ │ │ ├──systemIcon // 系统图标 │ │ │ │ │ └──SystemIcon.ets │ │ │ │ └──AnimationData.ets -│ │ ├──components +│ │ ├──components // 组件 │ │ │ ├──auxiliary // 辅助 │ │ │ │ ├──alphabetIndexerSample │ │ │ │ │ └──AlphabetIndexerSample.ets // 字母索引条 @@ -288,7 +288,7 @@ │ │ │ │ └────webSample │ │ │ │ └──WebSample.ets // 网页 │ │ │ └──ComponentData.ets -│ │ ├──globalMethods // 详情页面 +│ │ ├──globalMethods // 全局方法 │ │ │ ├──dialogs │ │ │ │ ├──actionSheetDialogSample │ │ │ │ │ └──ActionSheetDialogSample.ets // 列表选择弹窗 @@ -306,7 +306,7 @@ │ │ │ │ └──timeDialogSample │ │ │ │ └──TimeDialogSample.ets // 时间选择弹窗 │ │ │ └──GlobalMethodData.ets -│ │ ├──universal // 详情页面 +│ │ ├──universal // 通用 │ │ │ ├──events │ │ │ │ ├──areaChangeEventSample │ │ │ │ │ └──AreaChangeEventSample.ets // 组件区域变化事件 diff --git a/entry/src/main/ets/common/AttributeModificationTool.ets b/entry/src/main/ets/common/AttributeModificationTool.ets index f6f8f18f1bc2d71518e09cada7050364ba780ce2..967d702bf735e9c83aa1e60288bef6fe45aaf6c3 100644 --- a/entry/src/main/ets/common/AttributeModificationTool.ets +++ b/entry/src/main/ets/common/AttributeModificationTool.ets @@ -123,7 +123,7 @@ export struct CommonItemSelect { private selectIndex: number = 0; private fontSize: Font = { size: 15, weight: FontWeight.Medium }; private isItemStyle: boolean = true; - private text: string = "请选择"; + private text: string = getContext(this).resourceManager.getStringSync($r('app.string.choose_please')); aboutToAppear() { this.selects.forEach((selects, index) => { diff --git a/entry/src/main/ets/common/IntroductionTitle.ets b/entry/src/main/ets/common/IntroductionTitle.ets index cc67db2380adffe92d27eae15af7f56ea6dd5b23..bfb100e6a332c0ab0528eed8cd9ff1e013c7d57d 100644 --- a/entry/src/main/ets/common/IntroductionTitle.ets +++ b/entry/src/main/ets/common/IntroductionTitle.ets @@ -22,7 +22,7 @@ export struct IntroductionTitle { .fontSize(18) .width('100%') .direction(Direction.Ltr) - .margin({ left: 26, top: 8, bottom: 8 }) + .margin({ left: 26, top: 8, bottom: 8, right: 26}) .fontColor($r('app.color.font_color_shallow')) } } \ No newline at end of file diff --git a/entry/src/main/ets/common/TabContentNavigation.ets b/entry/src/main/ets/common/TabContentNavigation.ets index ee590ad0ab8a7d4825a13a6575e2c6330f2f9bbf..1bd9ef8d17df08a726eb8a4a2ec719108d9971c8 100644 --- a/entry/src/main/ets/common/TabContentNavigation.ets +++ b/entry/src/main/ets/common/TabContentNavigation.ets @@ -148,7 +148,7 @@ struct ThirdLevelNavigation { }) } } - // 整体字符串折行会被识别出来,导致功能异常,只能放在单独一行,1和0分别为首页标题层级index + // The whole string will be recognized as line break, causing malfunction. It can only be placed in a single line. 1 and 0 are the index of the home page title level. .id(`secondLevelMenu${this.secondLevelCategoryIndex}${this.secondLevelCategoryIndex === 1 ? 0 : this.ThirdLevelNavigationIndex}`) } } diff --git a/entry/src/main/ets/pages/animations/TransitionAnimations/componentTransitionSample/ComponentTransitionSample.ets b/entry/src/main/ets/pages/animations/TransitionAnimations/componentTransitionSample/ComponentTransitionSample.ets index f66828794b68822df960f9e6b3cdab7da8cdbbd2..0c4b1fe4cefb7d19b28535454d811467107c4b7f 100644 --- a/entry/src/main/ets/pages/animations/TransitionAnimations/componentTransitionSample/ComponentTransitionSample.ets +++ b/entry/src/main/ets/pages/animations/TransitionAnimations/componentTransitionSample/ComponentTransitionSample.ets @@ -30,9 +30,9 @@ struct ComponentTransitionSample { Column() { Row() { if (this.flag) { - // Image的显示和消失配置为不同的过渡效果 - // 出现时从指定的x方向scale为0、y方向scale为1的状态变为默认的x、y方向scale都为1的状态 - // 消失时从默认的旋转角为0变为绕z轴顺时针旋转180°的状态 + // The appearance and disappearance of the Image are configured with different transition effects + // When it appears, the specified x-direction scale is 0 and the y-direction scale is 1, which changes to default x- and y-direction scales are both 1 + // When it disappears, the default rotation angle changes from 0 to 180° clockwise around the z axis. Image($r('app.media.img_love')) .width(200) .height(200) @@ -53,13 +53,13 @@ struct ComponentTransitionSample { .width('90%') .margin({ top: 16 }) .onClick(() => { - // 点击Button控制Image的显示和消失 + // Click the Button to control the display and disappearance of the Image if (this.flag) { this.show = $r('app.string.component_transition_show'); } else { this.show = $r('app.string.component_transition_hide'); } - // 使用TransitionOptions指定transition时,必须配合animateTo才能产生动画 + // When using TransitionOptions to specify transition, you must use animate to produce animation animateTo({ duration: 1000 }, () => { this.flag = !this.flag; }) diff --git a/entry/src/main/ets/pages/animations/TransitionAnimations/floatingSample/FloatingWindowSample.ets b/entry/src/main/ets/pages/animations/TransitionAnimations/floatingSample/FloatingWindowSample.ets index c735734edf2b270c3776d3f4c95e1c6412821d1f..6a1c36d03d42c543895e3a2310c5fbe262559c9e 100644 --- a/entry/src/main/ets/pages/animations/TransitionAnimations/floatingSample/FloatingWindowSample.ets +++ b/entry/src/main/ets/pages/animations/TransitionAnimations/floatingSample/FloatingWindowSample.ets @@ -23,26 +23,26 @@ const TAG = '[FloatingWindowPage]'; @Entry @Component struct FloatingWindowSample { - private diameter: number = 120; // 触摸点相对偏移量 - @State positionX: number = 50; // 组件位置X - @State positionY: number = 500; // 组件位置Y - @State displayHalfWidth: number = 0; // 屏幕一半的宽 - @State displayHalfHeight: number = 0; // 屏幕一半的高 - @State moveStartX: number = 0; // X方向起始点 - @State moveStartY: number = 0; // Y方向起始点 - @State moveEndX: number = 0; // X方向终点 - @State moveEndY: number = 0; // Y方向终点 - @State moveSumLengthX: number = 0; // X方向移动距离总和 - @State moveSumLengthY: number = 0; // Y方向移动距离总和 - @State moveStartTime: number = 0; // 触摸开始时间 - @State moveEndTime: number = 0; // 触摸结束时间 + private diameter: number = 120; // Relative offset of touch point + @State positionX: number = 50; // Component Position X + @State positionY: number = 500; // Component Position Y + @State displayHalfWidth: number = 0; // Half the screen width + @State displayHalfHeight: number = 0; // Half the screen height + @State moveStartX: number = 0; // X direction starting point + @State moveStartY: number = 0; // Y direction starting point + @State moveEndX: number = 0; // X direction end point + @State moveEndY: number = 0; // Y direction end point + @State moveSumLengthX: number = 0; // Total moving distance in X direction + @State moveSumLengthY: number = 0; // Total moving distance in Y direction + @State moveStartTime: number = 0; // Touch start time + @State moveEndTime: number = 0; // Touch end time aboutToAppear() { display.getAllDisplays((err, data) => { - // 拿到屏幕宽高的一半,作为判断基准值 + // Get half of the screen width and height as the reference value this.displayHalfWidth = data[0].width / 2; this.displayHalfHeight = data[0].height / 2; - // 将拿到的px转为vp + // Convert the obtained px to vp Logger.info(TAG, `aboutToAppear getAllDisplays data 1 width:${this.displayHalfWidth}, height:${this.displayHalfHeight}`); this.displayHalfWidth = px2vp(this.displayHalfWidth); this.displayHalfHeight = px2vp(this.displayHalfHeight); @@ -65,44 +65,44 @@ struct FloatingWindowSample { .position({ x: this.positionX, y: this.positionY }) .onTouch((event: TouchEvent) => { if (event.type === TouchType.Down) { - this.moveStartX = event.touches[0].windowX; // 按下时获取X坐标初始值 - this.moveStartY = event.touches[0].windowY; // 按下时获取Y坐标初始值 - this.moveStartTime = Date.now(); // 按下时开始时间 - this.moveSumLengthX = 0; // 按下时初始化x方向移动距离 - this.moveSumLengthY = 0; // 按下时初始化y方向移动距离 + this.moveStartX = event.touches[0].windowX; // Get the initial value of the X coordinate when pressed + this.moveStartY = event.touches[0].windowY; // Get the initial value of the Y coordinate when pressed + this.moveStartTime = Date.now(); // Press to start time + this.moveSumLengthX = 0; // Initialize the X direction movement distance when pressed + this.moveSumLengthY = 0; // Initialize the Y direction movement distance when pressed } if (event.type === TouchType.Move) { - this.moveEndX = event.touches[0].windowX; // X方向移动的当前位置 - this.moveEndY = event.touches[0].windowY; // Y方向移动的当前位置 - this.moveSumLengthX += Math.abs(this.moveEndX - this.moveStartX); // 每一次移动计算相对于上一次X方向位置的距离 - this.moveSumLengthY += Math.abs(this.moveEndY - this.moveStartY); // 每一次移动计算相对于上一次Y方向位置的距离 + this.moveEndX = event.touches[0].windowX; // Current position of X direction movement + this.moveEndY = event.touches[0].windowY; // Current position of Y direction movement + this.moveSumLengthX += Math.abs(this.moveEndX - this.moveStartX); // Each movement calculates the distance relative to the previous X position + this.moveSumLengthY += Math.abs(this.moveEndY - this.moveStartY); // Each movement calculates the distance relative to the previous Y position this.moveStartX = this.moveEndX; this.moveStartY = this.moveEndY; Logger.info(TAG, `move ing, moveSumLengthX:${this.moveSumLengthX}, moveSumLengthY:${this.moveSumLengthY}`); - // 跟手过程,使用responsiveSpringMotion曲线 + // Hand-following process, using responsiveSpringMotion curve animateTo({ curve: curves.responsiveSpringMotion() }, () => { - // 减去半径,以使球的中心运动到手指位置 + // Subtract the radius to move the center of the ball to the finger position this.positionX = event.touches[0].windowX - this.diameter / 2; this.positionY = event.touches[0].windowY - this.diameter / 2 - 120; Logger.info(TAG, `move end, animateTo x:${this.positionX}, y:${this.positionY}`); }) } else if (event.type === TouchType.Up) { this.moveEndTime = Date.now(); - let moveDiffTime = this.moveEndTime - this.moveStartTime; // 最后一秒移动的距离 - // 距离 + let moveDiffTime = this.moveEndTime - this.moveStartTime; // Distance traveled in the last second + // distance let s = Math.sqrt((this.moveSumLengthX * this.moveSumLengthX) + (this.moveSumLengthY * this.moveSumLengthY)); - // 时间 + // time let t = moveDiffTime; - // 速度 + // speed let v = s / t; Logger.info(TAG, `moveEnd, moveSumLengthX:${this.moveSumLengthX}, moveSumLengthY:${this.moveSumLengthY}, moveDiffTime:${moveDiffTime}`); Logger.info(TAG, `moveEnd, s:${s}, t:${t}, v:${v}`); - // 离手时,使用springMotion曲线,且将移动时速度赋值给离手时速度 + // When leaving the hand, use the springMotion curve and assign the moving speed to the leaving speed animateTo({ curve: curves.springMotion(), tempo: v }, () => { if (this.positionX >= this.displayHalfWidth) { - // 如果划到右边,则定位至屏幕右边减去自身宽度80,再减去10留出间隙 + // If you scroll to the right, it will be positioned to the right side of the screen minus its own width 80, and then minus 10 to leave a gap this.positionX = this.displayHalfWidth * 2 - 90; } else { this.positionX = 10; diff --git a/entry/src/main/ets/pages/animations/TransitionAnimations/multiplexSample/MultiplexSample.ets b/entry/src/main/ets/pages/animations/TransitionAnimations/multiplexSample/MultiplexSample.ets index 93af829422b9b4a19e9edb0d296de1045fb382c5..03a6ee9d6e3dc00c8da4b56926ba136705ded5bc 100644 --- a/entry/src/main/ets/pages/animations/TransitionAnimations/multiplexSample/MultiplexSample.ets +++ b/entry/src/main/ets/pages/animations/TransitionAnimations/multiplexSample/MultiplexSample.ets @@ -16,22 +16,22 @@ import { ScrollItem } from './ScrollItem'; import { MultiplexModel } from './MultiplexModel'; import { TitleBar } from '../../../../common/TitleBar'; -const MARGIN_BETWEEN: number = 15; // 间距 -const SELECT_SIZE: number = 0.6; // 当前选中大小 -const UNSELECT_SIZE: number = 0.5; // 未选中大小 +const MARGIN_BETWEEN: number = 15; // Spacing +const SELECT_SIZE: number = 0.6; // Current selected size +const UNSELECT_SIZE: number = 0.5; // Unselected size @Entry @Component struct MultiplexSample { private scroller: Scroller = new Scroller(); - private currentX: number = 0; // 当前X轴位置 - private startScroll: boolean = false; // 开始滑动 + private currentX: number = 0; // Current X-axis position + private startScroll: boolean = false; // Start sliding @StorageProp('windowWidth') windowWidth: number = 480; @StorageProp('windowHeight') windowHeight: number = 720; @State resources: Array = new Array(); - @State currentModel: MultiplexModel = new MultiplexModel('', $r('app.media.img_test_1')); // 当前item - @State onceXOffset: number = 0; // 本次滑动X轴距离 - @State @Watch('scrollIndexUpdated') scrollIndex: number = 0; // 当前滑动item下标 + @State currentModel: MultiplexModel = new MultiplexModel('', $r('app.media.img_test_1')); // Current item + @State onceXOffset: number = 0; // The X-axis distance of this slide + @State @Watch('scrollIndexUpdated') scrollIndex: number = 0; // Current sliding item index aboutToAppear() { this.resources.push(new MultiplexModel('1', $r('app.media.img_test_1'))); @@ -97,7 +97,7 @@ struct MultiplexSample { } .id('scroll') .scrollable(ScrollDirection.Horizontal) - .scrollBar(BarState.Off) // 滚动条常驻显示 + .scrollBar(BarState.Off) // Scroll bar always displayed .edgeEffect(EdgeEffect.None) .onWillScroll((xOffset: number, yOffset: number) => { this.currentX += xOffset; diff --git a/entry/src/main/ets/pages/animations/TransitionAnimations/multiplexSample/ScrollItem.ets b/entry/src/main/ets/pages/animations/TransitionAnimations/multiplexSample/ScrollItem.ets index 30c4613adf8e634e5b0c20c1a50faa0aaaaf10a1..d88ae8cd28a67c0af8cb77d5553141a9ca872f40 100644 --- a/entry/src/main/ets/pages/animations/TransitionAnimations/multiplexSample/ScrollItem.ets +++ b/entry/src/main/ets/pages/animations/TransitionAnimations/multiplexSample/ScrollItem.ets @@ -21,12 +21,12 @@ export struct ScrollItem { private onDelete: (id: string) => void = () => { }; @StorageProp('windowHeight') windowHeight: number = 720; - @State offsetX: number = 0; // X轴滑动距离 - @State offsetY: number = 0; // Y轴滑动距离 - @State scaleX: number = 1; // 缩放比例 - @State angle: number = 0; // 旋转角度 - @State translateY: number = 0; // Y轴移动距离 - @State sx: number = 1; // 滑动系数 + @State offsetX: number = 0; // X-axis sliding distance + @State offsetY: number = 0; // Y-axis sliding distance + @State scaleX: number = 1; // Scaling + @State angle: number = 0; // Rotation Angle + @State translateY: number = 0; // Y-axis movement distance + @State sx: number = 1; // Sliding coefficient build() { Column() { @@ -107,7 +107,7 @@ export struct ScrollItem { } /** - * 还原 + * Restore */ restore() { let that = this; @@ -120,7 +120,7 @@ export struct ScrollItem { } /** - * 删除 + * Delete */ delete() { let that = this; diff --git a/entry/src/main/ets/pages/animations/TransitionAnimations/shopSample/ShopCardSample.ets b/entry/src/main/ets/pages/animations/TransitionAnimations/shopSample/ShopCardSample.ets index 1a13db5868c77b6a1909380cb33558f51918702f..7fd9e5bd3b537263aa71813bb54bcce8de7717bf 100644 --- a/entry/src/main/ets/pages/animations/TransitionAnimations/shopSample/ShopCardSample.ets +++ b/entry/src/main/ets/pages/animations/TransitionAnimations/shopSample/ShopCardSample.ets @@ -53,7 +53,7 @@ struct ShopCardSample { .transition({ type: TransitionType.Insert }) .transition({ type: TransitionType.Delete }) .onClick(e => { - // 使用TransitionOptions指定transition时,必须配合animateTo才能产生动画 + // When using TransitionOptions to specify transition,you must use animateTo to produce animation animateTo({ duration: 350 }, () => { this.isUnfold = true; }) @@ -69,7 +69,7 @@ struct ShopCardSample { .transition({ type: TransitionType.Insert, translate: { y: 0 } }) .transition({ type: TransitionType.Delete }) .onClick(e => { - // 使用TransitionOptions指定transition时,必须配合animateTo才能产生动画 + // When using TransitionOptions to specify transition,you must use animateTo to produce animation animateTo({ duration: 350 }, () => { this.isUnfold = false; }) diff --git a/entry/src/main/ets/pages/animations/TransitionAnimations/systemIcon/SystemIcon.ets b/entry/src/main/ets/pages/animations/TransitionAnimations/systemIcon/SystemIcon.ets index e85b8daafd4451d2c8dc17e63442f4cc458a3bba..8f22378659d7e33d2ba141148fd148c152fee3db 100644 --- a/entry/src/main/ets/pages/animations/TransitionAnimations/systemIcon/SystemIcon.ets +++ b/entry/src/main/ets/pages/animations/TransitionAnimations/systemIcon/SystemIcon.ets @@ -29,14 +29,14 @@ function animatableWidth(size: number) { @Component struct SystemIcon { @State sliderValue: number = 100; - @State centralDiameter: number = 12; // 中心圆直径 - @State lineWidth: number = 6; // 线条宽度 + @State centralDiameter: number = 12; // Center circle diameter + @State lineWidth: number = 6; // Line width build() { Column() { TitleBar({ title: $r('app.string.System_icon') }) Stack() { - // 亮度条件组件 + // Brightness condition component Stack() { Slider({ value: this.sliderValue, @@ -65,9 +65,9 @@ struct SystemIcon { } }) - // 亮度图标 + // Brightness icon Stack() { - // 中心圆 + // Center circle Text() .animatableWidthAndHeight(this.centralDiameter) .animation({ duration: 500, curve: "ease" }) @@ -100,7 +100,7 @@ struct SystemIcon { .backgroundColor($r('app.color.background_shallow_grey')) } - // 线条组件 + // Line components @Builder lineComponent(angle: number) { Row({ space: 20 }) { diff --git a/entry/src/main/ets/pages/animations/animateToSample/AnimateToSample.ets b/entry/src/main/ets/pages/animations/animateToSample/AnimateToSample.ets index 249deb90f289f6526771d271881510c905ab3094..8918d4315f554c479caf2385ceb612cd65b5eab3 100644 --- a/entry/src/main/ets/pages/animations/animateToSample/AnimateToSample.ets +++ b/entry/src/main/ets/pages/animations/animateToSample/AnimateToSample.ets @@ -164,7 +164,7 @@ struct AnimationToSample { duration: 1200, curve: Curve.Friction, delay: 500, - iterations: -1, // -1为无限播放 + iterations: -1, // -1 for unlimited playback playMode: PlayMode.Alternate, tempo: 10 }, () => { diff --git a/entry/src/main/ets/pages/animations/animationSample/AnimationSample.ets b/entry/src/main/ets/pages/animations/animationSample/AnimationSample.ets index 08c64c94676d6011079da0de6cca72df036092c7..c4693c7c7eff4c70fb2b73a03d295de6006a5299 100644 --- a/entry/src/main/ets/pages/animations/animationSample/AnimationSample.ets +++ b/entry/src/main/ets/pages/animations/animationSample/AnimationSample.ets @@ -157,7 +157,7 @@ struct AnimationSample { duration: 1200, curve: Curve.Friction, delay: 500, - iterations: -1, // -1为无限播放 + iterations: -1, // -1 for unlimited playback playMode: PlayMode.Alternate, tempo: 10 }) diff --git a/entry/src/main/ets/pages/animations/motionPathSample/MotionPathSample.ets b/entry/src/main/ets/pages/animations/motionPathSample/MotionPathSample.ets index 9bf048dd55db24d7dc1d5a7f4b6fd2866b4a5ebc..d527073ce5aac0cc75c5c9b3a873cd59c34d8786 100644 --- a/entry/src/main/ets/pages/animations/motionPathSample/MotionPathSample.ets +++ b/entry/src/main/ets/pages/animations/motionPathSample/MotionPathSample.ets @@ -35,7 +35,7 @@ struct MotionPathSample { }) .onClick(() => { animateTo({ duration: 4000, curve: Curve.Linear }, () => { - this.toggle = !this.toggle; // 通过this.toggle变化组件的位置 + this.toggle = !this.toggle; // Change the position of the component through this.toggle }) }) .id('motion_click') diff --git a/entry/src/main/ets/pages/components/ComponentData.ets b/entry/src/main/ets/pages/components/ComponentData.ets index 80132ad9d9798cf25f388503df85e0b08a856188..eda2dfb8e79878a829680f8c7a66215a548ffeed 100644 --- a/entry/src/main/ets/pages/components/ComponentData.ets +++ b/entry/src/main/ets/pages/components/ComponentData.ets @@ -457,7 +457,7 @@ export const COMPONENT_CATEGORIES: ThirdLevelCategory[] = WEB ] -// 辅助/AlphabetIndexerSampleData +// Assist/AlphabetIndexerSampleData export let alphabetIndexerDataB: Resource[] = [$r('app.string.alphabetindexer_bu'), $r('app.string.alphabetindexer_bai'), $r('app.string.alphabetindexer_bao'), $r('app.string.alphabetindexer_bi'), $r('app.string.alphabetindexer_bing')]; export let alphabetIndexerDataC: Resource[] = [$r('app.string.alphabetindexer_cao'), $r('app.string.alphabetindexer_cheng'), $r('app.string.alphabetindexer_chen'), $r('app.string.alphabetindexer_cui')]; @@ -469,98 +469,98 @@ export let letterValue: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; -// 辅助&按钮与选择/panel&textPickerArrayData +// Assist&Buttons and Selections/panel&textPickerArrayData export let fruitArray: Resource[] = [$r('app.string.checkbox_apple'), $r('app.string.checkbox_banbana'), $r('app.string.checkbox_cherries'), $r('app.string.checkbox_durian')]; -// 信息展示与动效/dataPanelSample +// Information display and animation/dataPanelSample export let panelData: number[] = [10, 10, 30, 10, 10, 20]; -// 文本与输入/spanSelectData +// Text and Input/spanSelectData export let selectData: Resource[] = [$r('app.string.span_decoration_none'), $r('app.string.span_decoration_linethrough'), $r('app.string.span_decoration_underline'), $r('app.string.span_decoration_overline')]; -// 三级类别 Scroll 通用 left padding +// Level 3 Category Scroll General left padding export const LEFT_PADDING: number = 12; -// 三级类别 Scroll 通用 right padding +// Level 3 Category Scroll General right padding export const RIGHT_PADDING: number = 12; -// 行列与分栏/rowAlignItemsData +// Row and Column/rowAlignItemsData export const ROW_ALIGNITEMS_DATA: Resource[] = [$r('app.string.row_alignitems_top'), $r('app.string.row_alignitems_center'), $r('app.string.row_alignitems_bottom')]; -// 行列与分栏/rowJustifyContentData +// Row and Column/rowJustifyContentData export const ROW_JUSTIFYCONTENT_DATA: Resource[] = [$r('app.string.row_justifycontent_start'), $r('app.string.row_justifycontent_center'), $r('app.string.row_justifycontent_end'), $r('app.string.row_justifycontent_spacebetween'), $r('app.string.row_justifycontent_spacearound'), $r('app.string.row_justifycontent_spaceevenly')]; -// 行列与分栏/columnAlignItemsData +// Row and Column/columnAlignItemsData export const COLUMN_ALIGNITEMS_DATA: Resource[] = [$r('app.string.column_alignitems_start'), $r('app.string.column_alignitems_center'), $r('app.string.column_alignitems_end')]; -// 行列与分栏/columnJustifyContentData +// Row and Column/columnJustifyContentData export const COLUMN_JUSTIFYCONTENT_DATA: Resource[] = [$r('app.string.column_justifycontent_start'), $r('app.string.column_justifycontent_center'), $r('app.string.column_justifycontent_end'), $r('app.string.column_justifycontent_spacebetween'), $r('app.string.column_justifycontent_spacearound'), $r('app.string.column_justifycontent_spaceevenly')]; -// 行列与分栏/sidebarContainerTypeData +// Row and Column/sidebarContainerTypeData export const SBC_TYPE_DATA: Resource[] = [$r('app.string.sidebarcontainer_type_embed'), $r('app.string.sidebarcontainer_type_overlay')]; -// 行列与分栏/sidebarContainerPositionData +// Row and Column/sidebarContainerPositionData export const SBC_POSITION_DATA: Resource[] = [$r('app.string.sidebarcontainer_sidebar_show_position_start'), $r('app.string.sidebarcontainer_sidebar_show_position_end')]; -// 堆叠、Flex与栅格/stackArgsSelectData +// Stack, Flex and Grid/stackArgsSelectData export const STACK_ARGUMENTS_SELECT_DATA: Resource[] = [$r('app.string.stack_alignments_topstart'), $r('app.string.stack_alignments_top'), $r('app.string.stack_alignments_topend'), $r('app.string.stack_alignments_start'), $r('app.string.stack_alignment_center'), $r('app.string.stack_alignment_end'), $r('app.string.stack_alignments_bottomstart'), $r('app.string.stack_alignments_bottom'), $r('app.string.stack_alignments_bottomend')]; -// 堆叠、Flex与栅格/stackZIndexSelectData +// Stack, Flex and Grid/stackZIndexSelectData export const STACK_ZIND_SELECT_DATA: Resource[] = [$r('app.string.stack_zindex_four'), $r('app.string.stack_zindex_one')]; -// 堆叠、Flex与栅格/flexDirectionSelectData +// Stack, Flex and Grid/flexDirectionSelectData export const FLEX_DIRECTION_SELECT_DATA: Resource[] = [$r('app.string.flex_argument_direction_row'), $r('app.string.flex_argument_direction_row_reverse'), $r('app.string.flex_argument_direction_column'), $r('app.string.flex_argument_direction_column_reverse')]; -// 堆叠、Flex与栅格/flexWrapSelectData +// Stack, Flex and Grid/flexWrapSelectData export const FLEX_WRAP_SELECT_DATA: Resource[] = [$r('app.string.flex_argument_wrap_no_wrap'), $r('app.string.flex_argument_wrap_wrap'), $r('app.string.flex_argument_wrap_wrap_reverse')]; -// 堆叠、Flex与栅格/flexJustifyContentSelectData +// Stack, Flex and Grid/flexJustifyContentSelectData export const FLEX_JUSTIFY_CONTENT_SELECT_DATA: Resource[] = [$r('app.string.flex_argument_justifycontent_start'), $r('app.string.flex_argument_justifycontent_center'), $r('app.string.flex_argument_justifycontent_End'), $r('app.string.flex_argument_justifycontent_space_between'), $r('app.string.flex_argument_justifycontent_space_around'), $r('app.string.flex_argument_justifycontent_speac_evenly')]; -// 堆叠、Flex与栅格/flexAlignItemsSelectData +// Stack, Flex and Grid/flexAlignItemsSelectData export const FLEX_ALIGN_ITEMS_SELECT_DATA: Resource[] = [$r('app.string.flex_argumen_alignItems_auto'), $r('app.string.flex_argumen_alignItems_start'), $r('app.string.flex_argumen_alignItems_center'), $r('app.string.flex_argumen_alignItems_end'), $r('app.string.flex_argumen_alignItems_stretch'), $r('app.string.flex_argumen_alignItems_baseline')]; -//图片、视频与媒体/imageSelectObjectFit +// Images, Videos and Media/imageSelectObjectFit export const OBJECT_FIT_SELECT: Resource[] = [$r('app.string.object_fit_none'), $r('app.string.object_fit_cover'), $r('app.string.object_fit_contain'), $r('app.string.object_fit_fill'), $r('app.string.object_fit_scale_down'), $r('app.string.object_fit_auto')]; -//图片、视频与媒体/imageSelectRenderMode +// Images, Videos and Media/imageSelectRenderMode export const RENDER_MODE_SELECT: Resource[] = [$r('app.string.image_rendermode_original'), $r('app.string.image_rendermode_template')]; -//图片、视频与媒体/imageSelectRepeat +// Images, Videos and Media/imageSelectRepeat export const REPEAT_SELECT: Resource[] = [$r('app.string.image_repeat_no'), $r('app.string.image_repeat_x'), $r('app.string.image_repeat_y'), $r('app.string.image_repeat_xy')]; -// 图片、视频与媒体/videoSelectCurrentRate +// Images, Videos and Media/videoSelectCurrentRate export const CURRENT_RATE: string[] = ['0.75X', '1X', '1.25X', '1.75X', '2X']; -// 列表与宫格/listDirectionSelectData +// List and Grid/listDirectionSelectData export const LIST_DIRECTION_SELECT_DATA: Resource[] = [$r('app.string.list_properties_direction_vertical'), $r('app.string.list_properties_direction_Horizontal')]; -// 列表与宫格/listScrollBarSelectData +// List and Grid/listScrollBarSelectData export const LIST_SCROLLBAR_SELECT_DATA: Resource[] = [$r('app.string.list_properties_scroll_bar_off'), $r('app.string.list_properties_scroll_bar_on'), $r('app.string.list_properties_scroll_bar_auto')]; -// 列表与宫格/listEdgeEffectSelectData +// List and Grid/listEdgeEffectSelectData export const LIST_EDGE_EFFECT_SELECT_DATA: Resource[] = [$r('app.string.list_properties_edge_effect_spring'), $r('app.string.list_properties_edge_effect_fade'), $r('app.string.list_properties_edge_effect_none')]; -// 列表与宫格/listAlignListItemSelectData +// List and Grid/listAlignListItemSelectData export const LIST_ALIGN_LIST_ITEM_SELECT_DATA: Resource[] = [$r('app.string.list_properties_align_list_item_start'), $r('app.string.list_properties_align_list_item_Center'), $r('app.string.list_properties_align_list_item_End')]; -// 列表与宫格/gridLayoutDirectionSelectData +// List and Grid/gridLayoutDirectionSelectData export const GRID_LAYOUT_DIRECTION_SELECT: Resource[] = [$r('app.string.grid_properties_layout_direction_row'), $r('app.string.grid_properties_layout_direction_column') , $r('app.string.grid_properties_layout_direction_row_reverse'), $r('app.string.grid_properties_layout_direction_column_reverse')]; -// 导航/tabsBarPositionSelectData +// Navigation/tabsBarPositionSelectData export const TABS_BAR_POSITION_SELECT: Resource[] = [$r('app.string.tabs_arguments_bar_position_start'), $r('app.string.tabs_arguments_bar_position_end')]; -// 导航/tabsBarModeSelectData +// Navigation/tabsBarModeSelectData export const TABS_BAR_MODE_SELECT: Resource[] = [$r('app.string.tabs_properties_bar_mode_fixed'), $r('app.string.tabs_properties_bar_scrollable')]; -//画布与图形绘制/PathSelectCommands +//Canvas and Graphics drawing/PathSelectCommands export const PATH_SELECT_COMMANDS: Resource[] = [$r('app.string.path_line'), $r('app.string.path_triangle'), $r('app.string.path_square'), $r('app.string.path_polygon') , $r('app.string.path_camber_first'), $r('app.string.path_camber_second'), $r('app.string.path_camber_third')]; \ No newline at end of file diff --git a/entry/src/main/ets/pages/components/auxiliary/alphabetIndexerSample/AlphabetIndexerSample.ets b/entry/src/main/ets/pages/components/auxiliary/alphabetIndexerSample/AlphabetIndexerSample.ets index 9eee3bc0ac855ca0402106fdc38244a932091489..724f58766296bd107a2d1e23caac5c047fdbbcab 100644 --- a/entry/src/main/ets/pages/components/auxiliary/alphabetIndexerSample/AlphabetIndexerSample.ets +++ b/entry/src/main/ets/pages/components/auxiliary/alphabetIndexerSample/AlphabetIndexerSample.ets @@ -195,15 +195,15 @@ struct AlphabetIndexerSample { Blank() AlphabetIndexer({ arrayValue: this.value, selected: 0 }) - .selectedColor(this.selectTextColor)// 选中项文本颜色 - .popupColor(this.popupColor)// 弹出框文本颜色 - .selectedBackgroundColor(this.selectBackgroundColor)// 选中项背景颜色 - .popupBackground(this.popupBackgroundColor)// 弹出框背景颜色 - .usingPopup(this.needPopup)// 是否显示弹出框 - .selectedFont({ size: 16, weight: FontWeight.Bolder })// 选中项字体样式 - .popupFont({ size: 30, weight: FontWeight.Bolder })// 弹出框内容的字体样式 - .itemSize(28)// 每一项的尺寸大小 - .alignStyle(IndexerAlign.Right)// 弹出框在索引条左侧弹出 + .selectedColor(this.selectTextColor)// Selected item text color + .popupColor(this.popupColor)// Popup text color + .selectedBackgroundColor(this.selectBackgroundColor)// Selected item background color + .popupBackground(this.popupBackgroundColor)// Popup box background color + .usingPopup(this.needPopup)// Whether to display a popup box + .selectedFont({ size: 16, weight: FontWeight.Bolder })// Selected item font style + .popupFont({ size: 30, weight: FontWeight.Bolder })// The font style of the popup content + .itemSize(28)// The size of each time + .alignStyle(IndexerAlign.Right)// The popup box pops up on the left side of the index bar .onSelect((index: number) => { Logger.info(`${this.value[index]} Selected!`); }) @@ -212,7 +212,7 @@ struct AlphabetIndexerSample { if (this.value[index] === 'A') { this.currentSelectIndex = 0; this.scroller.scrollToIndex(0); - return this.arrayA; // 当选中A时,弹出框里面的提示文本列表显示A对应的列表arrayA,选中B、C、L时也同样 + return this.arrayA; // When A is selected, the prompt text list in the popup box shows the list arrayA corresponding to A. The same is true when B, C, and L are selected. } else if (this.value[index] === 'B') { this.currentSelectIndex = 1; this.scroller.scrollToIndex(this.arrayA.length); @@ -226,7 +226,7 @@ struct AlphabetIndexerSample { this.scroller.scrollToIndex(this.arrayA.length + this.arrayB.length + this.arrayC.length); return this.arrayL; } else { - return []; // 选中其余子母项时,提示文本列表为空 + return []; // When other sub-items are selected, the prompt text list is empty } }) .onPopupSelect((index: number) => { diff --git a/entry/src/main/ets/pages/components/auxiliary/badgeSample/BadgeSample.ets b/entry/src/main/ets/pages/components/auxiliary/badgeSample/BadgeSample.ets index f5fb65c90d8003bf2e1adfd64e712864539e480a..c5ec02b33c3533a90e56151ce26b102c65b9a980 100644 --- a/entry/src/main/ets/pages/components/auxiliary/badgeSample/BadgeSample.ets +++ b/entry/src/main/ets/pages/components/auxiliary/badgeSample/BadgeSample.ets @@ -72,7 +72,7 @@ struct BadgeSample { IntroductionTitle({ introduction: $r('app.string.badge_max') }) Row() { Badge({ - count: 10, // 设置提醒消息数100 + count: 10, // Set the number of reminder messages to 100 style: { color: 0xFFFFFF, fontSize: 16, @@ -84,7 +84,7 @@ struct BadgeSample { .badgeStyle() Badge({ - count: 100, // 设置提醒消息数100 + count: 100, // Set the number of reminder messages to 100 style: { color: 0xFFFFFF, fontSize: 16, @@ -100,7 +100,7 @@ struct BadgeSample { IntroductionTitle({ introduction: $r('app.string.badge_location') }) Row() { Badge({ - count: 1, // 设置提醒消息数 + count: 1, // Set the number of reminder messages position: BadgePosition.Left, style: { color: 0xFFFFFF, @@ -113,7 +113,7 @@ struct BadgeSample { .badgeStyle() Badge({ - count: 1, // 设置提醒消息数 + count: 1, // Set the number of reminder messages position: BadgePosition.RightTop, style: { color: 0xFFFFFF, @@ -126,7 +126,7 @@ struct BadgeSample { .badgeStyle() Badge({ - count: 1, // 设置提醒消息数 + count: 1, // Set the number of reminder messages position: BadgePosition.Right, style: { color: 0xFFFFFF, diff --git a/entry/src/main/ets/pages/components/buttonAndSelection/buttonSample/ButtonSample.ets b/entry/src/main/ets/pages/components/buttonAndSelection/buttonSample/ButtonSample.ets index 64b6d12d39004b370c432e360a4e9ee3ac7c41c3..57cf23000417ac7bd4fe730a5a27186c69ba6dfb 100644 --- a/entry/src/main/ets/pages/components/buttonAndSelection/buttonSample/ButtonSample.ets +++ b/entry/src/main/ets/pages/components/buttonAndSelection/buttonSample/ButtonSample.ets @@ -148,7 +148,7 @@ struct ButtonSample { Image($r('app.media.ic_button_loading')) .size({ width: 18, height: 18 }) .margin({ left: 6, right: 6 }) - Text($r('app.string.button_with_icon')) + Text($r('app.string.button_with_icon_en')) .fontSize(16) .fontColor(Color.White) } diff --git a/entry/src/main/ets/pages/components/buttonAndSelection/datePickerSample/DatePickerSample.ets b/entry/src/main/ets/pages/components/buttonAndSelection/datePickerSample/DatePickerSample.ets index 2677b494e91fe16e62badeb807c2ee7565cb7ecc..a0300d55e942ccba93c1cce9aff6703aa42bf6ad 100644 --- a/entry/src/main/ets/pages/components/buttonAndSelection/datePickerSample/DatePickerSample.ets +++ b/entry/src/main/ets/pages/components/buttonAndSelection/datePickerSample/DatePickerSample.ets @@ -20,7 +20,7 @@ import { TitleBar } from '../../../../common/TitleBar'; struct DatePickerSample { @State isLunar: boolean = false; @State selectDate: string = '2022-10-30'; - // 当前日期选择器组件的日期 + // The current data of the date picker component private currentPickerDate: Date = new Date('2022-10-30'); ; diff --git a/entry/src/main/ets/pages/components/buttonAndSelection/ratingSample/RatingSample.ets b/entry/src/main/ets/pages/components/buttonAndSelection/ratingSample/RatingSample.ets index 429431b9651d8ad5abb173ff792ba99972e0369e..9b9aa9f939597e798f0c1ee82b088b2036f964f1 100644 --- a/entry/src/main/ets/pages/components/buttonAndSelection/ratingSample/RatingSample.ets +++ b/entry/src/main/ets/pages/components/buttonAndSelection/ratingSample/RatingSample.ets @@ -80,7 +80,7 @@ struct RatingSample { } .onInc(() => { if (this.rating < this.stars) - this.rating += 0.5; // 评分0.5 + this.rating += 0.5; // rating 0.5 }) .onDec(() => { if (this.rating > 0) @@ -98,7 +98,7 @@ struct RatingSample { Text(this.stars.toString()) } .onInc(() => { - if (this.stars <= 8) // 总分为8 + if (this.stars <= 8) // Total score: 8 this.stars++; }) .onDec(() => { diff --git a/entry/src/main/ets/pages/components/canvasAndGraphicDrawing/circleSample/CircleSample.ets b/entry/src/main/ets/pages/components/canvasAndGraphicDrawing/circleSample/CircleSample.ets index a15e21d7d065ee8fd251d9354b516f758aa200e0..6dc91d8371fc32aa4ebb77c59e1e6073a809190d 100644 --- a/entry/src/main/ets/pages/components/canvasAndGraphicDrawing/circleSample/CircleSample.ets +++ b/entry/src/main/ets/pages/components/canvasAndGraphicDrawing/circleSample/CircleSample.ets @@ -21,7 +21,7 @@ import { CircleControlPanel } from './ChangePanel'; @Extend(Column) function cardStyle() { .backgroundColor($r('app.color.white')) - //参考规范 卡片:16vp + //Reference Specification Card: 16vp .borderRadius(16) .width('100%') .padding(12) @@ -43,7 +43,7 @@ struct CircleSample { TitleBar({ title: $r('app.string.circle_title') }) Column() { Column() { - // 绘制一个直径为100的圆,宽高设置不一致时以短边为直径 + // Draw a circle width a diameter of 100. If the width and height are inconsistent, the short side is used as the diameter. Circle() .width(this.circleRadius) .height(this.circleRadius) diff --git a/entry/src/main/ets/pages/components/canvasAndGraphicDrawing/ellipseSample/EllipseSample.ets b/entry/src/main/ets/pages/components/canvasAndGraphicDrawing/ellipseSample/EllipseSample.ets index 9f3f7330b074d7c271e8cac090be6f0fe92c9ef1..764c1a00ead7fc2da1e8e99feff91309b6f19820 100644 --- a/entry/src/main/ets/pages/components/canvasAndGraphicDrawing/ellipseSample/EllipseSample.ets +++ b/entry/src/main/ets/pages/components/canvasAndGraphicDrawing/ellipseSample/EllipseSample.ets @@ -43,7 +43,7 @@ struct EllipseSample { TitleBar({ title: $r('app.string.ellipse_title') }) Column() { Column() { - // 绘制一个 150 * 80 的椭圆 + // Draw a 150 * 80 ellipse Ellipse() .size({ width: this.ellipseWidth, height: this.ellipseHeight }) .fill(this.fill) diff --git a/entry/src/main/ets/pages/components/canvasAndGraphicDrawing/polylineSample/PolylineSample.ets b/entry/src/main/ets/pages/components/canvasAndGraphicDrawing/polylineSample/PolylineSample.ets index e176804e5f6f555072086d6764eccc2550ea67a3..c0b93df45825e6aba7a84207a18e9a3e1863252b 100644 --- a/entry/src/main/ets/pages/components/canvasAndGraphicDrawing/polylineSample/PolylineSample.ets +++ b/entry/src/main/ets/pages/components/canvasAndGraphicDrawing/polylineSample/PolylineSample.ets @@ -44,15 +44,15 @@ struct PolylineSample { TitleBar({ title: $r('app.string.polyline_title') }) Column() { Column() { - // 在 100 * 100 的矩形框中绘制一段折线,起点(0, 0),经过(20,60),到达终点(100, 100) + // Draw a polyline in a 100 * 100 rectangular box, starting from (0, 0), passing through (20,60), and reaching the end point (100, 100) Polyline({ width: 100, height: 100 }) .points([[this.polylineFirstX, this.polylineFirstY], [this.polylineSecondX, this.polylineSecondY], [this.polylineThirdX, this.polylineThirdY]]) .fillOpacity(0) .stroke(this.stroke) .strokeWidth(this.strokeWidth) .strokeDashArray([this.strokeDashArray]) - .strokeOpacity(this.strokeOpacity / 100)// 设置折线拐角处为圆弧 - .strokeLineJoin(LineJoinStyle.Round)// 设置折线两端为半圆 + .strokeOpacity(this.strokeOpacity / 100)// Set the corners of the polyline to arcs + .strokeLineJoin(LineJoinStyle.Round)// Set both ends of the polyline to semicircles .strokeLineCap(LineCapStyle.Round) }.cardStyle() .height('35%') diff --git a/entry/src/main/ets/pages/components/listAndGrid/gridItemSample/GridItemSample.ets b/entry/src/main/ets/pages/components/listAndGrid/gridItemSample/GridItemSample.ets index c86fd59c4ea6dc46bf1e712c02e9f40d53e80d19..af9b549da9dbaaa0be1869bfb40077cd2335a7b0 100644 --- a/entry/src/main/ets/pages/components/listAndGrid/gridItemSample/GridItemSample.ets +++ b/entry/src/main/ets/pages/components/listAndGrid/gridItemSample/GridItemSample.ets @@ -88,7 +88,7 @@ struct GridItemSample { .flexGrow(0) Scroll() { - // 控制面板 + // Control Panel Column() { IntroductionTitle({ introduction: $r('app.string.grid_item_introduction') }) Column() { diff --git a/entry/src/main/ets/pages/components/listAndGrid/gridSample/GridSample.ets b/entry/src/main/ets/pages/components/listAndGrid/gridSample/GridSample.ets index 062db70ad83f0d5d92982c3987c25213222faeb0..e740e2adace445a6306b22e235f1bfe18a9d97c4 100644 --- a/entry/src/main/ets/pages/components/listAndGrid/gridSample/GridSample.ets +++ b/entry/src/main/ets/pages/components/listAndGrid/gridSample/GridSample.ets @@ -81,7 +81,7 @@ struct GridSample { .flexGrow(0) Scroll() { - // 控制面板 + // Control Panel Column() { Column() { ArgumentsControlPanel( diff --git a/entry/src/main/ets/pages/components/listAndGrid/listItemSample/ListItemSample.ets b/entry/src/main/ets/pages/components/listAndGrid/listItemSample/ListItemSample.ets index 91d6abf355ed03910957bc93237901f5d559c03e..9360c872c6b74eeb4d71a26138252cc244dbc68c 100644 --- a/entry/src/main/ets/pages/components/listAndGrid/listItemSample/ListItemSample.ets +++ b/entry/src/main/ets/pages/components/listAndGrid/listItemSample/ListItemSample.ets @@ -45,7 +45,7 @@ struct RowSample { @Builder swipeAction(index: number) { Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) { - Button(`删除`) + Button($r('app.string.swipe_action_button')) .onClick(() => { this.numberArray.splice(index, 1); }) @@ -71,7 +71,7 @@ struct RowSample { } .selectable(this.selectable) .onSelect((b) => { - this.output = b === true ? `进入鼠标框选范围` : `移除鼠标框选范围`; + this.output = b === true ? getContext(this).resourceManager.getStringSync($r('app.string.enter_range')) : getContext(this).resourceManager.getStringSync($r('app.string.remove_range')); }) .swipeAction({ end: this.swipeAction(index) @@ -89,7 +89,7 @@ struct RowSample { .width('100%') .flexGrow(0) - // 状态栏 + // Status Bar IntroductionTitle({ introduction: $r('app.string.list_item_introduction_drag') }) Column() { Text(this.output) @@ -105,7 +105,7 @@ struct RowSample { .flexGrow(0) Scroll() { - // 控制面板 + // Control Panel Column() { IntroductionTitle({ introduction: $r('app.string.list_item_introduction_properties') }) Column() { diff --git a/entry/src/main/ets/pages/components/listAndGrid/listSample/ListSample.ets b/entry/src/main/ets/pages/components/listAndGrid/listSample/ListSample.ets index 39db7c4933e9afdd4986317fff2735ca871de944..b2b91c6a4df62483cf61d5892d37c4bccb5a870e 100644 --- a/entry/src/main/ets/pages/components/listAndGrid/listSample/ListSample.ets +++ b/entry/src/main/ets/pages/components/listAndGrid/listSample/ListSample.ets @@ -96,11 +96,10 @@ struct ListSample { .width('100%') .flexGrow(0) - // 状态栏 + // Status bar IntroductionTitle({ introduction: $r('app.string.list_introduction_state') }) Column() { - Text(`当前 initialIndex 为:${this.initIndex} -修改 initialIndex 后请再次进入本页面查看效果`) + Text(getContext(this).resourceManager.getStringSync($r('app.string.status_bar_desc1')) + String(this.initIndex) + getContext(this).resourceManager.getStringSync($r('app.string.status_bar_desc2'))) .textAlign(TextAlign.Center) .fontColor(Color.Red) } @@ -111,10 +110,10 @@ struct ListSample { .justifyContent(FlexAlign.Center) .flexGrow(0) - // 控制面板 + // Control Panel Scroll() { Column() { - // 参数 + // Parameter IntroductionTitle({ introduction: $r('app.string.list_introduction_arguments') }) Column() { ArgumentsControlPanel({ @@ -124,7 +123,7 @@ struct ListSample { } .backgroundStyle() - // 属性 + // Property IntroductionTitle({ introduction: $r('app.string.list_introduction_properties') }) Column() { PropertiesControlPanel({ diff --git a/entry/src/main/ets/pages/components/navigation/navigatorSample/NavigatorSample.ets b/entry/src/main/ets/pages/components/navigation/navigatorSample/NavigatorSample.ets index 5925136dd8cc86abf03083670a1ca931e7c3d020..5c274c056e0c0d1600b7fcfb2e0fbe442ae55915 100644 --- a/entry/src/main/ets/pages/components/navigation/navigatorSample/NavigatorSample.ets +++ b/entry/src/main/ets/pages/components/navigation/navigatorSample/NavigatorSample.ets @@ -31,7 +31,7 @@ struct NavigationSample { .width('100%') .textAlign(TextAlign.Center) .id(`navigator_001`) - }.params({ text: this.Text }) // 传参数到Detail页面 + }.params({ text: this.Text }) // Pass parameters to the Detail page .margin({bottom:12}) } .padding({ left: LEFT_PADDING, right: RIGHT_PADDING }) diff --git a/entry/src/main/ets/pages/components/navigation/navigatorSample/NavigatorSecondPage.ets b/entry/src/main/ets/pages/components/navigation/navigatorSample/NavigatorSecondPage.ets index 4bbbbdfb91b3eba47d2a60b5888da14ecf7f92d9..1452f6a032e05cf241027d171436c0017d3ab162 100644 --- a/entry/src/main/ets/pages/components/navigation/navigatorSample/NavigatorSecondPage.ets +++ b/entry/src/main/ets/pages/components/navigation/navigatorSample/NavigatorSecondPage.ets @@ -20,7 +20,7 @@ import { LEFT_PADDING, RIGHT_PADDING } from '../../ComponentData'; @Entry @Component struct DetailExample { - // 接收Navigator.ets的传参 + // Receive the parameters passed by Navigator.ets private text: string = (router.getParams() as Record)['text'] as string; build() { diff --git a/entry/src/main/ets/pages/components/navigation/tabContentSample/TabContentSample.ets b/entry/src/main/ets/pages/components/navigation/tabContentSample/TabContentSample.ets index 91c9d6b92691a60d5f27a365b14088ba75657d08..19fb870115dc51e00b6cb7f8602f8a8717dbb0a8 100644 --- a/entry/src/main/ets/pages/components/navigation/tabContentSample/TabContentSample.ets +++ b/entry/src/main/ets/pages/components/navigation/tabContentSample/TabContentSample.ets @@ -113,7 +113,7 @@ struct TabSample { .flexGrow(0) Scroll() { - // 控制面板 + // Control Panel Column() { Column() { CommonSwitcher({ diff --git a/entry/src/main/ets/pages/components/navigation/tabSample/TabSample.ets b/entry/src/main/ets/pages/components/navigation/tabSample/TabSample.ets index f279b4e45cb319516bfe6fa1f92e5dcd1932c0dc..4835915b0c34c01ba998161619845b15e1e9f52f 100644 --- a/entry/src/main/ets/pages/components/navigation/tabSample/TabSample.ets +++ b/entry/src/main/ets/pages/components/navigation/tabSample/TabSample.ets @@ -102,7 +102,7 @@ struct TabSample { .flexGrow(0) Scroll() { - // 控制面板 + // Control Panel Column() { IntroductionTitle({ introduction: $r('app.string.tabs_introduction_arguments') }) Column() { diff --git a/entry/src/main/ets/pages/components/rowsAndColumns/sideBarContainerSample/SideBarContainerSample.ets b/entry/src/main/ets/pages/components/rowsAndColumns/sideBarContainerSample/SideBarContainerSample.ets index 823f150a071d96c92f0bcbc32d20bc366c9ca64d..58185c65e7716d4ea251387c80279f76bf135b78 100644 --- a/entry/src/main/ets/pages/components/rowsAndColumns/sideBarContainerSample/SideBarContainerSample.ets +++ b/entry/src/main/ets/pages/components/rowsAndColumns/sideBarContainerSample/SideBarContainerSample.ets @@ -58,10 +58,10 @@ struct SideBarContainerSample { Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { TitleBar({ title: $r('app.string.sidebarcontainer_title') }) IntroductionTitle({ introduction: $r('app.string.sidebarcontainer_drag_divider') }) - // 展示区 + // Exhibition Area Column() { SideBarContainer(this.sbcType) { - // 侧边栏 + // Sidebar Column({ space: 20 }) { Button() { Text($r('app.string.sidebarcontainer_sidebar_text_one')) @@ -79,7 +79,7 @@ struct SideBarContainerSample { .borderWidth({ right: 1 }) .borderColor({ right: $r('app.color.font_color_red') }) - // 内容区 + // Content Area Column() { Scroll() { Text(this.state == true ? $r('app.string.sidebarcontainer__is_show_true') : $r('app.string.sidebarcontainer__is_show_false')) @@ -113,7 +113,7 @@ struct SideBarContainerSample { .backgroundStyle() .height(400) - // 控制面板 + // Control Panel Scroll() { Column() { IntroductionTitle({ introduction: $r('app.string.sidebarcontainer_argument') }) diff --git a/entry/src/main/ets/pages/components/scrollAndSwipe/swiperSample/SwiperSample.ets b/entry/src/main/ets/pages/components/scrollAndSwipe/swiperSample/SwiperSample.ets index 22aec6ed50c83b299320de4fb7012581410f7a53..5537e7ed23ade82ff831ada138ab61e7449dde3b 100644 --- a/entry/src/main/ets/pages/components/scrollAndSwipe/swiperSample/SwiperSample.ets +++ b/entry/src/main/ets/pages/components/scrollAndSwipe/swiperSample/SwiperSample.ets @@ -94,7 +94,7 @@ struct SwiperSample { .flexGrow(0) Scroll() { - // 控制面板 + // Control Panel Column() { IntroductionTitle({ introduction: $r('app.string.swiper_introduction_arguments') }) Column() { diff --git a/entry/src/main/ets/pages/components/textAndInput/patternLockSample/PattternLockSample.ets b/entry/src/main/ets/pages/components/textAndInput/patternLockSample/PattternLockSample.ets index 0d507acd1a66b3513efe8b8b6fbad8f54feda2bb..cf10769a42a9f225f7638632a7d259242f3c6296 100644 --- a/entry/src/main/ets/pages/components/textAndInput/patternLockSample/PattternLockSample.ets +++ b/entry/src/main/ets/pages/components/textAndInput/patternLockSample/PattternLockSample.ets @@ -56,14 +56,14 @@ struct PattternLockSample { .regularColor(this.regularColor) .autoReset(true) .onPatternComplete((input: Array) => { - // 输入的密码长度小于5时,提示重新输入 + // If the length of the entered password is less than 5, you will prompted to re-enter it if (input === null || input === undefined || input.length < 5) { this.message = 'The password length needs to be greater than 5, please enter again.'; return; } - // 判断密码长度是否大于0 + // Determine whether password length if greater than 0 if (this.passwords.length > 0) { - // 判断两次输入的密码是否相同,相同则提示密码设置成功,否则提示重新输入 + // Determine whether the passwords entered twice are the same. If they are the same, it indicates that the password setting is successful. Otherwise, it prompts you to re-enter the password if (this.passwords.toString() === input.toString()) { this.passwords = input; this.message = 'Set password successfully: ' + this.passwords.toString(); @@ -71,13 +71,13 @@ struct PattternLockSample { this.message = 'Inconsistent passwords, please enter again.'; } } else { - // 提示第二次输入密码 + // Prompt to enter password for the second time this.passwords = input; this.message = "Please enter again."; } }) Button('Reset PatternLock').margin(30).onClick(() => { - // 重置密码锁 + // Reset password lock this.patternLockController.reset(); this.passwords = []; this.message = 'Please input password'; diff --git a/entry/src/main/ets/pages/components/textAndInput/richTextSample/RichTextSample.ets b/entry/src/main/ets/pages/components/textAndInput/richTextSample/RichTextSample.ets index 146810696693fed985a484639bd0f955bc52cb9d..886314bce9becada74e7f2978519e2a69e7fdfe4 100644 --- a/entry/src/main/ets/pages/components/textAndInput/richTextSample/RichTextSample.ets +++ b/entry/src/main/ets/pages/components/textAndInput/richTextSample/RichTextSample.ets @@ -14,16 +14,16 @@ */ import { TitleBar } from '../../../../common/TitleBar'; -const RIGH_TEXT = '

h1标题

' + - '

h1斜体

' + - '

h1下划线

' + - '

h2标题

' + - '

h3标题

' + - '

p常规


' + - '
' + - '

字体大小35px,行高45px

' + - '

' + - '

这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字

' // 为了更好的体现出富文本效果,所以此常量内容包括中文字符 +const RIGH_TEXT = getContext(this).resourceManager.getStringSync($r('app.string.H1_title')) + + getContext(this).resourceManager.getStringSync($r('app.string.H1_italic')) + + getContext(this).resourceManager.getStringSync($r('app.string.H1_underline')) + + getContext(this).resourceManager.getStringSync($r('app.string.H2_title')) + + getContext(this).resourceManager.getStringSync($r('app.string.H3_title')) + + getContext(this).resourceManager.getStringSync($r('app.string.P_common')) + + getContext(this).resourceManager.getStringSync($r('app.string.font_title_desc')) + + getContext(this).resourceManager.getStringSync($r('app.string.font_title')) + + getContext(this).resourceManager.getStringSync($r('app.string.font_content_desc')) + + getContext(this).resourceManager.getStringSync($r('app.string.font_content')) // Inorder to better reflect the rich text effect, this constant content includes Chinese characters @Extend(Text) function leftTitleStyle() { diff --git a/entry/src/main/ets/pages/components/textAndInput/textAreaSample/TextAreaSample.ets b/entry/src/main/ets/pages/components/textAndInput/textAreaSample/TextAreaSample.ets index 648193ee179e40408379e5fb41293d17d8e27842..2f5af5120d46679057c094c4488cae60ddda3d53 100644 --- a/entry/src/main/ets/pages/components/textAndInput/textAreaSample/TextAreaSample.ets +++ b/entry/src/main/ets/pages/components/textAndInput/textAreaSample/TextAreaSample.ets @@ -57,7 +57,7 @@ struct TextAreaSample { .copyOption(this.copyOptions) .borderRadius(16) .width('100%') - .height(80) + .height(85) .fontSize(20) .enableKeyboardOnFocus(false) .onChange(() => { diff --git a/entry/src/main/ets/pages/globalMethods/dialogs/customDialogSample/CustomDialog.ets b/entry/src/main/ets/pages/globalMethods/dialogs/customDialogSample/CustomDialog.ets index d3790295f42e9da32c376b4378043c3334005a93..bcb8627d5af5f39fcd3dcd29772722d1920a2079 100644 --- a/entry/src/main/ets/pages/globalMethods/dialogs/customDialogSample/CustomDialog.ets +++ b/entry/src/main/ets/pages/globalMethods/dialogs/customDialogSample/CustomDialog.ets @@ -35,7 +35,7 @@ export struct UpgradeDialog { }) } .margin(20) - .height(380) + .height(450) .borderRadius(24) .padding({ top: 20, bottom: 32 }) .backgroundColor($r('app.color.background_shallow_grey')) @@ -56,6 +56,7 @@ export struct UpgradeDialog { .fontColor($r('app.color.font_color_shallow')) .constraintSize({ maxWidth: 280 }) } + .margin({ right: 120}) .alignItems(HorizontalAlign.Start) } .width('100%') diff --git a/entry/src/main/ets/pages/globalMethods/dialogs/dateDialogSample/DateDialogSample.ets b/entry/src/main/ets/pages/globalMethods/dialogs/dateDialogSample/DateDialogSample.ets index b1e406b60f4e750a40816a942fe5308cc3b7aa30..801a9e253f7fbebb2514fe9fdfad9943ff42ed00 100644 --- a/entry/src/main/ets/pages/globalMethods/dialogs/dateDialogSample/DateDialogSample.ets +++ b/entry/src/main/ets/pages/globalMethods/dialogs/dateDialogSample/DateDialogSample.ets @@ -34,7 +34,7 @@ function rowStyle() { .padding(6) .width('100%') .borderRadius(24) - .margin({ top: 12, bottom: 12 }) + .margin({ top: 12, bottom: 12, right: 12 }) } @Entry diff --git a/entry/src/main/ets/pages/globalMethods/dialogs/menuSample/MenuSample.ets b/entry/src/main/ets/pages/globalMethods/dialogs/menuSample/MenuSample.ets index 8424aa29ea95407ad435f255879509a1e36ac052..7561cf36c9a5a3425aef83891d9dfd047f42eaa0 100644 --- a/entry/src/main/ets/pages/globalMethods/dialogs/menuSample/MenuSample.ets +++ b/entry/src/main/ets/pages/globalMethods/dialogs/menuSample/MenuSample.ets @@ -81,7 +81,7 @@ struct MenuSample { } .id('menu_scroll') .onClick(() => { - // 点击时关闭菜单 + // Close menu on click ShowToast.shortToast($r('app.string.global_menu_close')); ContextMenu.close(); }) diff --git a/entry/src/main/ets/pages/globalMethods/dialogs/textPickerDialogSample/TextPickerDialogSample.ets b/entry/src/main/ets/pages/globalMethods/dialogs/textPickerDialogSample/TextPickerDialogSample.ets index 60c375cbdc3e6a98f777898c03dffefa20e00439..6ca8626d7648f968e3750c972194ff588923f89f 100644 --- a/entry/src/main/ets/pages/globalMethods/dialogs/textPickerDialogSample/TextPickerDialogSample.ets +++ b/entry/src/main/ets/pages/globalMethods/dialogs/textPickerDialogSample/TextPickerDialogSample.ets @@ -62,7 +62,7 @@ struct TextDialogSample { range: this.fruits, selected: this.select, onAccept: (value: TextPickerResult) => { - // 设置select为按下确定按钮时候的选中项index,这样当弹窗再次弹出时显示选中的是上一次确定的选项 + // Set select to the index of the item selected when the OK button is pressed, so that when the popup window pops up again, the last selected option is displayed ShowToast.shortToast(String(value.index)); }, onCancel: () => { diff --git a/entry/src/main/ets/pages/universal/events/areaChangeEventSample/AreaChangeEventSample.ets b/entry/src/main/ets/pages/universal/events/areaChangeEventSample/AreaChangeEventSample.ets index 72ad5712d27290f3cb1687e3cc8ebeda845e96ca..8ae110e13822379d66819a0ffecf7cf556020d60 100644 --- a/entry/src/main/ets/pages/universal/events/areaChangeEventSample/AreaChangeEventSample.ets +++ b/entry/src/main/ets/pages/universal/events/areaChangeEventSample/AreaChangeEventSample.ets @@ -45,8 +45,8 @@ struct AreaChangeEventSample { private areaBottom: number = 0; private motionStartingCheckingTimer: number = 0; private motionTimer: number = 0; - private xDirection: number = 1; // 1 为正方向,-1 为负方向 - private yDirection: number = 1; // 1 为正方向,-1 为负方向 + private xDirection: number = 1; // 1 is positive direction, -1 is negative direction + private yDirection: number = 1; // 1 is positive direction, -1 is negative direction onPageShow() { this.startMotionControlling() @@ -129,7 +129,7 @@ struct AreaChangeEventSample { return; } - // 再以当前运动方向生成新的方向 + // Then generate a new direction based on the current movement direction if (reachedSide === AreaSideName.LEFT || reachedSide === AreaSideName.RIGHT) { this.xDirection = this.xDirection * -1; } else { diff --git a/entry/src/main/ets/pages/universal/events/dragEventSample/DragEventSample.ets b/entry/src/main/ets/pages/universal/events/dragEventSample/DragEventSample.ets index 581a45b4bd7ef43f07ba1449af0284912b97b1c1..7423cd0372ae95bd13aa32405ed6c835b64d6cbe 100644 --- a/entry/src/main/ets/pages/universal/events/dragEventSample/DragEventSample.ets +++ b/entry/src/main/ets/pages/universal/events/dragEventSample/DragEventSample.ets @@ -41,7 +41,7 @@ function columnStyle() { @Entry @Component struct DragEventSample { - // 是否可接收 + // Receivable @State isAreaValid: boolean = false; @State backgroundBlur: boolean = false; @State hideLeftIcon: boolean = true; @@ -51,7 +51,7 @@ struct DragEventSample { @State leftIconWidth: number = 64; @State rightIconWidth: number = 64; - // 自定义拖拽过程中显示的内容 + // Customize the content displayed during dragging @Builder pixelMapBuilder() { Stack({ alignContent: Alignment.TopEnd }) { @@ -114,7 +114,7 @@ struct DragEventSample { IntroductionTitle({ introduction: $r('app.string.drag_drop_action_tips') }) Stack() { Row() { - // 左侧绿色可接收区域 + // Green acceptable area on the left Row() { Stack({ alignContent: Alignment.TopEnd }) { Image($r('app.media.icon')) @@ -158,7 +158,7 @@ struct DragEventSample { Blank() - // 右侧红色不可接收区域 + // The red unacceptable area on the right Row() { Stack({ alignContent: Alignment.TopEnd }) { Image($r('app.media.icon')) @@ -201,11 +201,11 @@ struct DragEventSample { } .rowStyle() - // 模糊层 + // Fuzzy Layer Row() { Blank() - // 中间拖拽图标 + // Middle drag icon Column() { if (this.hideLeftIcon) { Row() { @@ -218,7 +218,7 @@ struct DragEventSample { .bindContextMenu(this.menuBuilder(), ResponseType.LongPress) .onDragStart(() => { this.backgroundBlur = false; - // 拖拽时关闭菜单 + // Close menu while dragging ContextMenu.close(); return this.pixelMapBuilder; }) diff --git a/entry/src/main/ets/pages/universal/events/dragEventSample/component/GridItemDrag.ets b/entry/src/main/ets/pages/universal/events/dragEventSample/component/GridItemDrag.ets index 2b31456e8b4c948e5cbc689b48d451c2e100483c..1c657757198df72dcb724a18d305a002d593a7f7 100644 --- a/entry/src/main/ets/pages/universal/events/dragEventSample/component/GridItemDrag.ets +++ b/entry/src/main/ets/pages/universal/events/dragEventSample/component/GridItemDrag.ets @@ -18,7 +18,7 @@ export struct GridItemDrag { @State numbers: string[] = Array.from({ length: 15 }, (item: string, i: number) => i.toString()); @State dragIndex: number = -1; - // 自定义拖拽过程中显示的内容 + // Customize the content displayed during dragging @Builder pixelMapBuilder(item: string) { Text(item) diff --git a/entry/src/main/ets/pages/universal/events/dragEventSample/component/HyperlinkDrag.ets b/entry/src/main/ets/pages/universal/events/dragEventSample/component/HyperlinkDrag.ets index 30b5414e163eb59b7189a5a926fd8e36b5f91815..de1327e653a8b8b04a2e806612f6acef3a47220a 100644 --- a/entry/src/main/ets/pages/universal/events/dragEventSample/component/HyperlinkDrag.ets +++ b/entry/src/main/ets/pages/universal/events/dragEventSample/component/HyperlinkDrag.ets @@ -17,7 +17,7 @@ export struct HyperlinkDrag { @State visible: boolean = true; - // 自定义拖拽过程中显示的内容 + // Customize the content displayed during dragging @Builder pixelMapBuilder() { Hyperlink("https://www.developer.huawei.com", 'HarmonyOS') diff --git a/entry/src/main/ets/pages/universal/events/dragEventSample/component/ImageDrag.ets b/entry/src/main/ets/pages/universal/events/dragEventSample/component/ImageDrag.ets index cb1ab392e818ceec868bc5840b7fe86e8c11b2f0..0ca314cb6f58db3dbf05610f8ffaf98660dfc217 100644 --- a/entry/src/main/ets/pages/universal/events/dragEventSample/component/ImageDrag.ets +++ b/entry/src/main/ets/pages/universal/events/dragEventSample/component/ImageDrag.ets @@ -17,7 +17,7 @@ export struct ImageDrag { @State visible: boolean = true; - // 自定义拖拽过程中显示的内容 + // Customize the content displayed during dragging @Builder pixelMapBuilder() { Image($r('app.media.icon')) diff --git a/entry/src/main/ets/pages/universal/events/dragEventSample/component/ListItemDrag.ets b/entry/src/main/ets/pages/universal/events/dragEventSample/component/ListItemDrag.ets index df1fdb0297abde24140283772fcd309deb7ee386..8865a0dcf83acb30e1f05fbf9703f56cb58c73c9 100644 --- a/entry/src/main/ets/pages/universal/events/dragEventSample/component/ListItemDrag.ets +++ b/entry/src/main/ets/pages/universal/events/dragEventSample/component/ListItemDrag.ets @@ -18,7 +18,7 @@ export struct ListItemDrag { @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']; @State dragIndex: number = -1; - // 自定义拖拽过程中显示的内容 + // Customize the content displayed during dragging @Builder pixelMapBuilder(item: string) { Text(item) diff --git a/entry/src/main/ets/pages/universal/events/dragEventSample/component/TextDrag.ets b/entry/src/main/ets/pages/universal/events/dragEventSample/component/TextDrag.ets index 76c518309587faff369c715acd4456f1c31c064c..443b3944fc1b11717ffe7d6f22b79b860348834c 100644 --- a/entry/src/main/ets/pages/universal/events/dragEventSample/component/TextDrag.ets +++ b/entry/src/main/ets/pages/universal/events/dragEventSample/component/TextDrag.ets @@ -17,7 +17,7 @@ export struct TextDrag { @State visible: boolean = true; - // 自定义拖拽过程中显示的内容 + // Customize the content displayed during dragging @Builder pixelMapBuilder() { Text('HarmonyOS') diff --git a/entry/src/main/ets/pages/universal/events/dragEventSample/component/VideoDrag.ets b/entry/src/main/ets/pages/universal/events/dragEventSample/component/VideoDrag.ets index d46d4fbbd499faa2b65371da7b4a8e12b2058a53..85d4f373ef0f2a615cd0fd764858b1eb442ad19e 100644 --- a/entry/src/main/ets/pages/universal/events/dragEventSample/component/VideoDrag.ets +++ b/entry/src/main/ets/pages/universal/events/dragEventSample/component/VideoDrag.ets @@ -17,7 +17,7 @@ export struct VideoDrag { @State visible: boolean = true; - // 自定义拖拽过程中显示的内容 + // Customize the content displayed during dragging @Builder pixelMapBuilder() { Video({}) .width(400) diff --git a/entry/src/main/ets/pages/universal/events/focusEventSample/FocusEventSample.ets b/entry/src/main/ets/pages/universal/events/focusEventSample/FocusEventSample.ets index d5f535c055065a0e299b93bac68076f15dca5788..5ad07219189db8e16c5c6a7338d5b6d57cfc141d 100644 --- a/entry/src/main/ets/pages/universal/events/focusEventSample/FocusEventSample.ets +++ b/entry/src/main/ets/pages/universal/events/focusEventSample/FocusEventSample.ets @@ -33,7 +33,7 @@ struct FocusEventSample { Scroll() { Column({ space: 16 }) { IntroductionTitle({ introduction: $r('app.string.focus_event_description') }) - // 通过外接键盘的Tab可以让焦点在三个按钮间移动,按钮获焦时颜色变化,失焦时变回原背景色 + // The focus can be moved between the three buttons by pressing Tab on an external keyboard. The color of a button changes when it is in focus, and returns to the original background color when it loses focus Button($r('app.string.focus_event_button_one')) .backgroundColor(this.oneButtonColor) .width('100%') diff --git a/entry/src/main/ets/pages/universal/events/mouseEventSample/MouseEventSample.ets b/entry/src/main/ets/pages/universal/events/mouseEventSample/MouseEventSample.ets index a743b09813489da99a3ed616df59aeaada463b36..e23fc52d8ed0cd799789db5d96603f2e86d0913e 100644 --- a/entry/src/main/ets/pages/universal/events/mouseEventSample/MouseEventSample.ets +++ b/entry/src/main/ets/pages/universal/events/mouseEventSample/MouseEventSample.ets @@ -46,7 +46,7 @@ struct MouseEventSample { .width('90%') .height(40) .onHover((isHover: boolean) => { - // 通过onHover事件动态修改按钮在是否有鼠标悬浮时的文本内容与背景颜色 + // Dynamically modify the text content and background color of a button when the mouse is hovering through the onHover event if (isHover) { this.hoverText = $r('app.string.mouse_event_hover_description'); } else { diff --git a/entry/src/main/ets/pages/universal/gesture/bindGestureSample/BindGestureSample.ets b/entry/src/main/ets/pages/universal/gesture/bindGestureSample/BindGestureSample.ets index 7a284fc554af57f963ed3c4ca1905ff932c20ff4..cc5eec5f08c16a5c3fb6b7c1794592bcfdb0fa39 100644 --- a/entry/src/main/ets/pages/universal/gesture/bindGestureSample/BindGestureSample.ets +++ b/entry/src/main/ets/pages/universal/gesture/bindGestureSample/BindGestureSample.ets @@ -56,7 +56,7 @@ struct BindExample { .margin({ left: 12, right: 12 }) .width('100%') - Button($r('app.string.bind_click'))// 设置为priorityGesture时,点击文本会忽略Text组件的TapGesture手势事件,优先识别父组件Column的TapGesture手势事件 + Button($r('app.string.bind_click'))// When set to priorityGesture, clicking on the text will ignore the TapGesture gesture event of the Text component and give priority to the TapGesture gesture event of the parent component Column .priorityGesture( TapGesture() .onAction((event: GestureEvent) => { @@ -81,7 +81,7 @@ struct BindExample { Row() { Button($r('app.string.bind_click')) - .buttonStyle(0)// 设置为parallelGesture时,点击文本会同时触发子组件Text与父组件Column的TapGesture手势事件 + .buttonStyle(0)// When set to parallelGesture, clicking on the text will trigger the TapGesture gesture event of both the child component Text and the parent component Column .gesture( TapGesture() .onAction(() => { diff --git a/entry/src/main/ets/pages/universal/gesture/combinedSample/CombinedSample.ets b/entry/src/main/ets/pages/universal/gesture/combinedSample/CombinedSample.ets index 9cddfac686423bc0cb8ef82ce10b3e1ff06eeec8..255e9f68db47186870b4e3ad5f928e94092cee06 100644 --- a/entry/src/main/ets/pages/universal/gesture/combinedSample/CombinedSample.ets +++ b/entry/src/main/ets/pages/universal/gesture/combinedSample/CombinedSample.ets @@ -17,7 +17,7 @@ import { TitleBar } from '../../../../common/TitleBar'; import { getStringData } from '../../../../data/ResourceDataHandle'; import ShowToast from '../../../../util/ShowToast'; -const LEFT_UP_X = -80; // 限定距离 +const LEFT_UP_X = -80; // Limited distance const RIGHT_UP_X = 80; const LEFT_UP_Y = -130; const RIGHT_UP_Y = 130; @@ -49,7 +49,7 @@ struct CombinedExample { .margin(20) .border({ width: 3, style: this.borderStyles }) .gesture( - // 以下组合手势为顺序识别,当长按手势事件未正常触发时则不会触发拖动手势事件 + // The following combination gesture are recognized in sequence. If the long press gesture event is not triggered normally, the drag gesture event will not be triggered GestureGroup(GestureMode.Sequence, LongPressGesture({ repeat: true }) .onAction((event: GestureEvent) => { diff --git a/entry/src/main/ets/pages/universal/gesture/longPressSample/LongPressSample.ets b/entry/src/main/ets/pages/universal/gesture/longPressSample/LongPressSample.ets index 3fc51a726d6db4ba0f0f2aa8bcc3c7308ae7862c..b41705814f6853ee7182961e38cc18c4da006fe4 100644 --- a/entry/src/main/ets/pages/universal/gesture/longPressSample/LongPressSample.ets +++ b/entry/src/main/ets/pages/universal/gesture/longPressSample/LongPressSample.ets @@ -56,18 +56,18 @@ struct TapGestureExample { .width('100%') Button($r('app.string.long_press_text')) - .buttonStyle(0)// 单指长按文本触发该手势事件 + .buttonStyle(0)// Long press the text with one finger to trigger this gesture event .gesture( LongPressGesture({ fingers: 1, duration: 500, repeat: true - })// 由于repeat设置为true,长按动作存在时会连续触发,触发间隔为duration(默认值500ms) + })// Since repeat is set to true, the long press action will be triggered continuously when it exists, and the trigger interval is duration (the default value is 500ms) .onAction((event: GestureEvent) => { if (event.repeat) { this.count++; } - })// 长按动作一结束触发 + })// Triggered once the long press action ends .onActionEnd(() => { this.count = 0; }) diff --git a/entry/src/main/ets/pages/universal/gesture/panSample/PanSample.ets b/entry/src/main/ets/pages/universal/gesture/panSample/PanSample.ets index 770a66ae0469bea107b3b1b23e716be93dcaf039..9b8d02770a156aabeaae9d5463641f28347fde93 100644 --- a/entry/src/main/ets/pages/universal/gesture/panSample/PanSample.ets +++ b/entry/src/main/ets/pages/universal/gesture/panSample/PanSample.ets @@ -17,7 +17,7 @@ import { TitleBar } from '../../../../common/TitleBar'; import { getStringData } from '../../../../data/ResourceDataHandle'; import ShowToast from '../../../../util/ShowToast'; -const LEFT_UP_X = -110; // 限定距离 +const LEFT_UP_X = -110; // Limited distance const RIGHT_UP_X = 110; const LEFT_UP_Y = -118; const RIGHT_UP_Y = 118; @@ -59,7 +59,7 @@ struct PanExample { .padding(20) .margin(50) .border({ width: 3 }) - .translate({ x: this.offsetX, y: this.offsetY, z: 0 })// 左右拖动触发该手势事件 + .translate({ x: this.offsetX, y: this.offsetY, z: 0 })// Drag left or right to trigger this gesture event .gesture( PanGesture(this.panOption) .onActionStart((event: GestureEvent) => { @@ -104,7 +104,7 @@ struct PanExample { .buttonStyle(0) .onClick(() => { this.flag = !this.flag; - // 将PanGesture手势事件触发条件改为双指以任意方向拖动 + // Change the trigger condition of PanGesture event to dragging with two fingers in any direction this.panOption.setDirection(PanDirection.All); this.panOption.setFingers(2); if (this.flag === false) { diff --git a/entry/src/main/ets/pages/universal/gesture/pinchSample/PinchSample.ets b/entry/src/main/ets/pages/universal/gesture/pinchSample/PinchSample.ets index 503891b4dd1c6a07003d6c72da5b47ed29c6c1ab..1ba3aa2734f4707896d2c81977866a502e97cbec 100644 --- a/entry/src/main/ets/pages/universal/gesture/pinchSample/PinchSample.ets +++ b/entry/src/main/ets/pages/universal/gesture/pinchSample/PinchSample.ets @@ -43,7 +43,7 @@ struct PanExample { .padding(20) .border({ width: 3 }) .scale({ x: this.scaleValue, y: this.scaleValue, z: 1 }) - // 三指捏合触发该手势事件 + // Three-finger pinch triggers this gesture event .gesture( PinchGesture({ fingers: 3, distance: 5 }) .onActionStart((event: GestureEvent) => { diff --git a/entry/src/main/ets/pages/universal/gesture/rotationSample/RotationSample.ets b/entry/src/main/ets/pages/universal/gesture/rotationSample/RotationSample.ets index 9f7d93bbd10215fbb1a669b51a53417197d79ada..9e7fda018f1aeeaf1b68f154e766f4bf2b91daf6 100644 --- a/entry/src/main/ets/pages/universal/gesture/rotationSample/RotationSample.ets +++ b/entry/src/main/ets/pages/universal/gesture/rotationSample/RotationSample.ets @@ -37,7 +37,7 @@ struct RotationExample { .padding(20) .border({ width: 3 }) .rotate({ angle: this.angle }) - // 双指旋转触发该手势事件 + // Two-finger rotation triggers this gesture event .gesture( RotationGesture({ fingers: 2 }) .onActionStart((event: GestureEvent) => { diff --git a/entry/src/main/ets/pages/universal/gesture/swipeSample/SwipeSample.ets b/entry/src/main/ets/pages/universal/gesture/swipeSample/SwipeSample.ets index 95774f1012435fd7fd20f2aa3d7dabca3fadd65c..af0d219691574bd2541d6e431f2a7dbc811207fc 100644 --- a/entry/src/main/ets/pages/universal/gesture/swipeSample/SwipeSample.ets +++ b/entry/src/main/ets/pages/universal/gesture/swipeSample/SwipeSample.ets @@ -38,7 +38,7 @@ struct SwipeExample { .width(300) .height(150) .rotate({ angle: this.rotateAngle }) - // 单指竖直方向滑动时触发该事件 + // This event is triggered when a single finger slides vertically .gesture( SwipeGesture({ direction: SwipeDirection.All, fingers: 1, speed: 100 }) .onAction((event: GestureEvent) => { diff --git a/entry/src/main/ets/pages/universal/gesture/tapGestureSample/TapGestureSample.ets b/entry/src/main/ets/pages/universal/gesture/tapGestureSample/TapGestureSample.ets index ea6d0b4f6cc754291f8e7e04290933276be917fe..e3a442e22bb5a38bb38b26dadd2669150c926843 100644 --- a/entry/src/main/ets/pages/universal/gesture/tapGestureSample/TapGestureSample.ets +++ b/entry/src/main/ets/pages/universal/gesture/tapGestureSample/TapGestureSample.ets @@ -59,7 +59,7 @@ struct TapGestureExample { .justifyContent(FlexAlign.Center) .rowStyle() - // 单指双击文本触发手势事件 + // Double-click the text with one finger to trigger a gesture event Button($r('app.string.double_click')) .buttonStyle(0) .id('tap_click') diff --git a/entry/src/main/ets/pages/universal/properties/componentIDSample/ComponentIDSample.ets b/entry/src/main/ets/pages/universal/properties/componentIDSample/ComponentIDSample.ets index e71a9cc68db170764066a0814fd509221c3cf911..ea49147f2f4879130cfe2856c3661816392d68d6 100644 --- a/entry/src/main/ets/pages/universal/properties/componentIDSample/ComponentIDSample.ets +++ b/entry/src/main/ets/pages/universal/properties/componentIDSample/ComponentIDSample.ets @@ -22,8 +22,9 @@ class Utils { static rect_bottom: number; static rect_value: Record; - // 获取组件所占矩形区域坐标 + // Get the coordinates of the rectangular area occupied by the component static getComponentRect(key: string) { + // This interface is only used for testing your application. It is not recommended due to its long time. let strJson = getInspectorByKey(key); let obj: Record = JSON.parse(strJson); let rectInfo: Record = JSON.parse('[' + obj.$rect + ']'); @@ -80,7 +81,8 @@ struct ComponentIDSample { .onClick(() => { this.text = getStringData($r('app.string.component_id_click_text')); setTimeout(() => { - // 向id为"longClick"的组件发送长按事件 + // Send a long click event to the component with id "longClick" + // This interface is only used for testing your application. It is not recommended due to its long time. sendEventByKey(getStringData($r('app.string.componentId_longClick')), 11, ''); }, 2000); }) @@ -92,23 +94,24 @@ struct ComponentIDSample { LongPressGesture().onActionEnd(() => { this.text = getStringData($r('app.string.component_id_longClick_text')); setTimeout(() => { - // 获取id为"onTouch"组件的矩形区域坐标 + // Get the coordinates of the rectangular area the component with id "onTouch" let rect = Utils.getComponentRect(getStringData($r('app.string.componentId_onTouch'))); let touchPoint: TouchObject = { id: 1, - displayX: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标 - displayY: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标 - windowX: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标 - windowY: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标 - x: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标 - y: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标 + displayX: rect.left + (rect.right - rect.left) / 2, // Component center point x coordinate + displayY: rect.top + (rect.bottom - rect.top) / 2, // Component center point y coordinate + windowX: rect.left + (rect.right - rect.left) / 2, // Component center point x coordinate + windowY: rect.top + (rect.bottom - rect.top) / 2, // Component center point y coordinate + x: rect.left + (rect.right - rect.left) / 2, // Component center point x coordinate + y: rect.top + (rect.bottom - rect.top) / 2, // Component center point y coordinate type: TouchType.Down, - screenX: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标 - screenY: rect.top + (rect.right - rect.left) / 2, // 组件中心点y坐标 + screenX: rect.left + (rect.right - rect.left) / 2, // Component center point x coordinate + screenY: rect.top + (rect.right - rect.left) / 2, // Component center point y coordinate }; - sendTouchEvent(touchPoint); // 发送触摸事件 + // This interface is only used for testing your application. It is not recommended due to its long time. + sendTouchEvent(touchPoint); // Send touch events touchPoint.type = TouchType.Up; - sendTouchEvent(touchPoint); // 发送触摸事件 + sendTouchEvent(touchPoint); // Send touch events }, 2000); })) .id('longClick') @@ -118,19 +121,19 @@ struct ComponentIDSample { .onClick(() => { this.text = getStringData($r('app.string.component_id_onTouch_text')) setTimeout(() => { - // 获取id为"onMouse"组件的矩形区域坐标 + // Get the coordinates of the rectangular area of the component with id "onMouse" let rect = Utils.getComponentRect(getStringData($r('app.string.componentId_onMouse'))); let mouseEvent: MouseEvent = { button: MouseButton.Left, action: MouseAction.Press, - displayX: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标 - displayY: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标 - windowY: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标 - windowX: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标 - x: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标 - y: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标 - screenX: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标 - screenY: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标 + displayX: rect.left + (rect.right - rect.left) / 2, // Component center point x coordinate + displayY: rect.top + (rect.bottom - rect.top) / 2, // Component center point y coordinate + windowY: rect.top + (rect.bottom - rect.top) / 2, // Component center point y coordinate + windowX: rect.left + (rect.right - rect.left) / 2, // Component center point x coordinate + x: rect.left + (rect.right - rect.left) / 2, // Component center point x coordinate + y: rect.top + (rect.bottom - rect.top) / 2, // Component center point y coordinate + screenX: rect.left + (rect.right - rect.left) / 2, // Component center point x coordinate + screenY: rect.top + (rect.bottom - rect.top) / 2, // Component center point y coordinate timestamp: 1, target: { area: { @@ -152,7 +155,8 @@ struct ComponentIDSample { tiltY: 1, sourceTool: SourceTool.Unknown } as MouseEvent; - sendMouseEvent(mouseEvent); // 发送鼠标事件 + // This interface is only used for testing your application. It is not recommended due to its long time. + sendMouseEvent(mouseEvent); // Send mouse events }, 2000) }) .id('onTouch') @@ -172,7 +176,8 @@ struct ComponentIDSample { timestamp: 0, intentionCode: 2 } as KeyEvent; - sendKeyEvent(keyEvent); // 发送按键事件 + // This interface is only used for testing your application. It is not recommended due to its long time. + sendKeyEvent(keyEvent); // Send key events }, 2000) }) .id('onMouse') diff --git a/entry/src/main/ets/pages/universal/properties/displaySample/DisplaySample.ets b/entry/src/main/ets/pages/universal/properties/displaySample/DisplaySample.ets index 12e92bf75a5364556136d8829781f37d542112bd..63af2fa6dd2b649bc15b95f167d017a12527fbdb 100644 --- a/entry/src/main/ets/pages/universal/properties/displaySample/DisplaySample.ets +++ b/entry/src/main/ets/pages/universal/properties/displaySample/DisplaySample.ets @@ -77,7 +77,7 @@ struct Page { .height(2) .position({ y: 48 }) } - }.width(48) + }.width(88) .height(56) } @@ -198,7 +198,7 @@ struct Page { this.offsetX = value; }) .layoutWeight(1) - }.width('100%') + }.width('90%') Row({ space: 20 }) { Text($r('app.string.y_offset')) @@ -208,7 +208,7 @@ struct Page { this.offsetY = value; }) .layoutWeight(1) - }.width('100%') + }.width('90%') }.cardStyle() }.padding(12) } @@ -277,7 +277,7 @@ struct Page { }) Text('1') .fontSize(15) - }.width('100%') + }.width('90%') .padding({ left: 5, right: 15 }) }.cardStyle() }.width('100%') diff --git a/entry/src/main/ets/pages/universal/properties/effectsSample/EffectsSample.ets b/entry/src/main/ets/pages/universal/properties/effectsSample/EffectsSample.ets index 581ae482e1a4047ed90be6f7810c30768eabc97a..f130be6863831fc99e417c130ca3faaa5d97b9aa 100644 --- a/entry/src/main/ets/pages/universal/properties/effectsSample/EffectsSample.ets +++ b/entry/src/main/ets/pages/universal/properties/effectsSample/EffectsSample.ets @@ -97,7 +97,7 @@ struct Effects { .height(2) .position({ y: 48 }) } - }.width(48) + }.width(88) .height(56) } diff --git a/entry/src/main/ets/pages/universal/properties/flexSample/FlexSample.ets b/entry/src/main/ets/pages/universal/properties/flexSample/FlexSample.ets index c7c9552bb30e3b58a3d8b1501d920a5bf8325d9a..c1f2ebe3f34858d2e9bd9beb9d30239465d9da29 100644 --- a/entry/src/main/ets/pages/universal/properties/flexSample/FlexSample.ets +++ b/entry/src/main/ets/pages/universal/properties/flexSample/FlexSample.ets @@ -38,12 +38,12 @@ struct FlexSample { Row() { Flex() { Text($r('app.string.flex_basis_100')) - .flexBasis(100)// 这里表示宽度为100vp + .flexBasis(100)// It means the width is 100vp .height(100) .backgroundColor(0xF5DEB3) .textAlign(TextAlign.Center) Text($r('app.string.flex_basis_auto')) - .flexBasis(getStringData($r('app.string.flex_auto')))// 这里表示宽度保持原本设置的60%的宽度 + .flexBasis(getStringData($r('app.string.flex_auto')))// It means that the width remains 60% of the original width. .width('60%') .height(100) .backgroundColor(0xD2B48C) @@ -60,12 +60,12 @@ struct FlexSample { Row() { Flex() { Text($r('app.string.flex_grow_2')) - .flexGrow(2)// 父容器分配给该Text的宽度为剩余宽度的2/3 + .flexGrow(2)// The width of the parent container allocated to the Text is 2/3 of the remaining width .height(100) .backgroundColor(0xF5DEB3) .textAlign(TextAlign.Center) Text($r('app.string.flex_grow_1')) - .flexGrow(1)// 父容器分配给该Text的宽度为剩余宽度的1/3 + .flexGrow(1)// The width of the parent container allocated to the Text is 1/3 of the remaining width .height(100) .backgroundColor(0xD2B48C) .textAlign(TextAlign.Center) @@ -86,7 +86,7 @@ struct FlexSample { .height(100) .backgroundColor(0xF5DEB3) .textAlign(TextAlign.Center) - Text($r('app.string.flex_shrink_default'))// 默认值为1 + Text($r('app.string.flex_shrink_default'))// The default value is 1 .width('40%') .height(100) .backgroundColor(0xD2B48C) @@ -140,7 +140,7 @@ struct FlexSample { .height(100) .backgroundColor(0xF5DEB3) .textAlign(TextAlign.Center) - Text($r('app.string.flex_layoutWeight'))// 默认值为1 + Text($r('app.string.flex_layoutWeight'))// The default value is 1 .layoutWeight(1) .height(100) .backgroundColor(0xD2B48C) diff --git a/entry/src/main/ets/pages/universal/properties/focusControlSample/FocusControlSample.ets b/entry/src/main/ets/pages/universal/properties/focusControlSample/FocusControlSample.ets index 433130281522575bc0b085d7c9d7b4a0d2f01138..a7b17c37cccc0e1036f192bb78d4712c6e9e3fbd 100644 --- a/entry/src/main/ets/pages/universal/properties/focusControlSample/FocusControlSample.ets +++ b/entry/src/main/ets/pages/universal/properties/focusControlSample/FocusControlSample.ets @@ -51,7 +51,7 @@ struct FocusControlSample { .width(165) .height(40) .fontColor(Color.White) - .focusOnTouch(true) // 该Button组件点击后可获焦 + .focusOnTouch(true) // The Button component can be focused after clicking Row({ space: 5 }) { Button() .width(80) @@ -61,13 +61,13 @@ struct FocusControlSample { .width(80) .height(40) .fontColor(Color.White) - .focusOnTouch(true) // 该Button组件点击后可获焦 + .focusOnTouch(true) // The Button component can be focused after clicking } } .borderWidth(2) .borderColor(Color.Red) .borderStyle(BorderStyle.Dashed) - .tabIndex(1) // 该Column组件为按TAB键走焦的第一个获焦的组件 + .tabIndex(1) // This Column component is the first component that is focused when TAB key is pressed Column({ space: 5 }) { Button($r('app.string.focus_control_group2')) .width(165) @@ -82,13 +82,13 @@ struct FocusControlSample { .width(80) .height(40) .fontColor(Color.White) - .groupDefaultFocus(true) // 该Button组件上级Column组件获焦时获焦 + .groupDefaultFocus(true) // The Button component gains focus when the parent Column component gains focus } } .borderWidth(2) .borderColor(Color.Green) .borderStyle(BorderStyle.Dashed) - .tabIndex(2) // 该Column组件为按TAB键走焦的第二个获焦的组件 + .tabIndex(2) // This Column component if the second component that gains focus when the TAB key is pressed } .width('50%') @@ -99,7 +99,7 @@ struct FocusControlSample { .onChange((value: string) => { this.inputValue = value; }) - .defaultFocus(true) // 该TextInput组件为页面的初始默认焦点 + .defaultFocus(true) // The TestInput component is the initial default focus of the page Button($r('app.string.focus_control_group3')) .width(165) .height(40) @@ -109,7 +109,7 @@ struct FocusControlSample { .borderWidth(2) .borderColor(Color.Orange) .borderStyle(BorderStyle.Dashed) - .tabIndex(3) // 该Column组件为按TAB键走焦的第三个获焦的组件 + .tabIndex(3) // This Column component is the third component that is focused when the TAB key is pressed } .alignItems(VerticalAlign.Top) .rowStyle() @@ -119,13 +119,13 @@ struct FocusControlSample { Column({ space: 20 }) { Row({ space: 16 }) { Button(this.idList[0]) - .width(200) + .width(150) .height(40) .fontColor(Color.White) .key(this.idList[0]) .focusable(false) Button(this.idList[1]) - .width(200) + .width(150) .height(40) .fontColor(Color.White) .key(this.idList[1]) @@ -133,12 +133,12 @@ struct FocusControlSample { Row({ space: 16 }) { Button(this.idList[2]) - .width(200) + .width(150) .height(40) .fontColor(Color.White) .key(this.idList[2]) Button(this.idList[3]) - .width(200) + .width(150) .height(40) .fontColor(Color.White) .key(this.idList[3]) @@ -161,7 +161,7 @@ struct FocusControlSample { .height(40) .fontColor(Color.White) .onClick(() => { - let res: boolean = focusControl.requestFocus(this.selectId); // 使选中的this.selectId的组件获焦 + let res: boolean = focusControl.requestFocus(this.selectId); // Focus the selected component of this.selectId if (res) { ShowToast.shortToast($r('app.string.focus_control_success')); } else { diff --git a/entry/src/main/ets/pages/universal/properties/interactionSample/InteractionSample.ets b/entry/src/main/ets/pages/universal/properties/interactionSample/InteractionSample.ets index 594844e6cd4d8d67c0c0674a7bd4d99c65234f39..6f7a4c2d3949f5d24efcb3208b7614ea44b25190 100644 --- a/entry/src/main/ets/pages/universal/properties/interactionSample/InteractionSample.ets +++ b/entry/src/main/ets/pages/universal/properties/interactionSample/InteractionSample.ets @@ -31,7 +31,7 @@ import { MeasureText } from '@kit.ArkUI'; function leftTitleStyle() { .fontColor($r('app.color.sub_title_color')) .fontSize(14) - .height(22) + .height(44) .alignSelf(ItemAlign.Start) .margin({ left: 12, top: 12 }) } @@ -419,7 +419,7 @@ struct Interaction { }).id('test_customButton') }.cardStyle() }.width('100%') - .padding(12) + .padding({left: 12, right: 12, top: 12, bottom: 80}) } }.tabBar(this.tabbarTitle($r('app.string.popup_window'), 1)) @@ -671,7 +671,7 @@ struct Interaction { } }.height('100%') .width('100%') - .padding(20) + .padding({left: 20, right: 20, top: 40, bottom: 20}) }.tabBar(this.tabbarTitle($r('app.string.menu'), 5)) TabContent() { @@ -774,7 +774,7 @@ struct Interaction { }.width('100%') }.cardStyle() }.width('100%') - .padding(12) + .padding({left: 12, right: 12, top: 40, bottom: 80}) } }.tabBar(this.tabbarTitle($r('app.string.multimode_input'), 7)) } diff --git a/entry/src/main/ets/pages/universal/properties/layoutConstraintSample/LayoutConstraintSample.ets b/entry/src/main/ets/pages/universal/properties/layoutConstraintSample/LayoutConstraintSample.ets index 8b11c3c6359813e25850b77102a248c534f04d1f..5748f1fdc417d21010df9a49f0fbe72707724e5e 100644 --- a/entry/src/main/ets/pages/universal/properties/layoutConstraintSample/LayoutConstraintSample.ets +++ b/entry/src/main/ets/pages/universal/properties/layoutConstraintSample/LayoutConstraintSample.ets @@ -40,7 +40,7 @@ class ChildInfo { @Entry @Component struct LayoutExample { - // 显示容器大小 + // Display container size private container: ContainerInfo[] = [ { label: getStringData($r('app.string.layout_constrain_big_container')), size: '100%' }, { label: getStringData($r('app.string.layout_constrain_middle_container')), size: '50%' }, @@ -63,13 +63,13 @@ struct LayoutExample { Row() { Row({ space: 5 }) { ForEach(this.childrenOne, (item: string) => { - // 组件宽度 = 组件高度*1.5 = 90 + // Component width = component height*1.5 = 90 Text(item) .backgroundColor(0xbbb2cb) .fontSize(20) .aspectRatio(1.5) .height(60) - // 组件高度 = 组件宽度/1.5 = 60/1.5 = 40 + // Component height = component width/1.5 = 60/1.5 = 40 Text(item) .backgroundColor(0xbbb2cb) .fontSize(20) @@ -86,17 +86,17 @@ struct LayoutExample { IntroductionTitle({ introduction: $r('app.string.layout_constrain_displayPriority') }) Row() { Column() { - // 切换父级容器大小 + // Toggle parent container size Button(this.container[this.currentIndex].label).backgroundColor(0x317aff) .onClick(() => { this.currentIndex = (this.currentIndex + 1) % this.container.length; }) .margin({ bottom: 5 }) .id('layout_btn') - // 通过变量设置Flex父容器宽度 + // Set the Flex parent container width through variables Flex({ justifyContent: FlexAlign.SpaceBetween }) { ForEach(this.children, (item: ChildInfo) => { - // 使用displayPriority给子组件绑定显示优先级 + // Use displayPriority to bind display priority to child components Text(item.text) .width(50) .height(60) diff --git a/entry/src/main/ets/pages/universal/properties/locationSample/LocationSample.ets b/entry/src/main/ets/pages/universal/properties/locationSample/LocationSample.ets index 859c93677b204943a220690ff2ef21607934167c..1ff25840c00102ec6050de8e77e78b37814cc889 100644 --- a/entry/src/main/ets/pages/universal/properties/locationSample/LocationSample.ets +++ b/entry/src/main/ets/pages/universal/properties/locationSample/LocationSample.ets @@ -96,7 +96,7 @@ struct LocationSample { .width('90%') .direction(Direction.Ltr) - // 父容器设置direction为Direction.Rtl,子元素从右到左排列 + // The parent container sets direction to Direction.Rtl, and the child elements are arranged from right to left Row() { Text($r('app.string.text_picker_text_banana')) .height(50) diff --git a/entry/src/main/ets/pages/universal/properties/restoreIdSample/RestoreIdSample.ets b/entry/src/main/ets/pages/universal/properties/restoreIdSample/RestoreIdSample.ets index e22df41ea1d60372584808bc4410e0ab58a8f20b..453a0614fcc545f6f9fd11c27fd31786bec49f84 100644 --- a/entry/src/main/ets/pages/universal/properties/restoreIdSample/RestoreIdSample.ets +++ b/entry/src/main/ets/pages/universal/properties/restoreIdSample/RestoreIdSample.ets @@ -79,6 +79,7 @@ struct RestoreIdExample { ListItem() { Button(item) .buttonStyle(0) + .width('90%') } }, (item: string) => item) } diff --git a/entry/src/main/ets/pages/universal/properties/shapeCropSample/ShapeCropSample.ets b/entry/src/main/ets/pages/universal/properties/shapeCropSample/ShapeCropSample.ets index 3a0de1bfa3518a1e5776a3bf1605670d26a646df..13993c2d87231dd932a50f61b2f952ad74d3a641 100644 --- a/entry/src/main/ets/pages/universal/properties/shapeCropSample/ShapeCropSample.ets +++ b/entry/src/main/ets/pages/universal/properties/shapeCropSample/ShapeCropSample.ets @@ -34,7 +34,7 @@ struct ShapeCropSample { TitleBar({ title: $r('app.string.shape_crop') }) IntroductionTitle({ introduction: $r('app.string.shape_crop_clip') }) Row() { - // 用一个200px直径的圆对图片进行裁剪 + // Crop the image with a 200px diameter circle Image($r('app.media.ic_scenery1')) .clipShape(new Circle({ width: 200, height: 200 })) .width(350) @@ -44,7 +44,7 @@ struct ShapeCropSample { IntroductionTitle({ introduction: $r('app.string.shape_crop_mask') }) Row() { - // 给图片添加了一个200px*200px的圆形遮罩 + // Add a 200px*200px circular mask to the image Image($r('app.media.ic_scenery1')) .maskShape(new Circle({ width: 200, height: 200 }).fill(Color.Gray)) .width(350) diff --git a/entry/src/main/ets/pages/universal/properties/transformSample/TransformSample.ets b/entry/src/main/ets/pages/universal/properties/transformSample/TransformSample.ets index 72a173751324c847832de08c8e9bae93d849ceb2..681187f182d8d7ead6f61345e64c224da26308d4 100644 --- a/entry/src/main/ets/pages/universal/properties/transformSample/TransformSample.ets +++ b/entry/src/main/ets/pages/universal/properties/transformSample/TransformSample.ets @@ -26,7 +26,7 @@ function rowStyle() { .margin({ left: 12, right: 12 }) } -// 创建一个四阶矩阵 +// Create a fourth-order matrix let matrix: matrix4.Matrix4Transit = matrix4.init([1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, @@ -89,7 +89,7 @@ struct TransformSample { Row() { Column() { Row() { - // 矩阵变换前 + // Before matrix transformation Image($r('app.media.ic_scenery1')) .width('40%') .height(100) @@ -99,7 +99,7 @@ struct TransformSample { .margin({ left: 20 }) } - // 先平移x轴200px,再缩放两倍x轴,得到矩阵变换后的效果图 + // Translate the x-axis by 200px, then scale twice the x-axis to get the effect after matrix transformation Image($r('app.media.ic_scenery1')) .transform(this.matrix3.combine(this.matrix4)) .width('40%') diff --git a/entry/src/main/ets/pages/universal/properties/translateSample/TranslateSample.ets b/entry/src/main/ets/pages/universal/properties/translateSample/TranslateSample.ets index 2191c5b22873edbd46bc24673cfffaaf62bdadaa..494cb9ae7ac50ae45a7e862d86fe3b194b9ccd5e 100644 --- a/entry/src/main/ets/pages/universal/properties/translateSample/TranslateSample.ets +++ b/entry/src/main/ets/pages/universal/properties/translateSample/TranslateSample.ets @@ -88,7 +88,7 @@ struct TranslateSample { ForEach(this.componentSliders, (item: AxisInfo) => { Row() { if (item.isXAxis) { - // -20和20为平移的区间 + // -20 and 20 are the intervals of translation CommonItemSlider({ changeValue: $containerTranslateX, min: -20, max: 20, name: item.axisName }) } else { CommonItemSlider({ changeValue: $containerTranslateY, min: -20, max: 20, name: item.axisName }) diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json index 0b2945448a411d9cf11befd52c3ad11c7ef8aaa6..ec3d2d6bb80656bcf478d28b9eb475be7a64afa2 100644 --- a/entry/src/main/resources/base/element/string.json +++ b/entry/src/main/resources/base/element/string.json @@ -36,6 +36,7 @@ "name": "prop_background", "value": "Background" }, + { "name": "prop_foreground", "value": "Foreground" @@ -158,7 +159,7 @@ }, { "name": "information_presentation_and_dynamic_effects", - "value": "Information presentation and dynamic effects" + "value": "Information presentation and\ndynamic effects" }, { "name": "blank_and_divider", @@ -386,19 +387,19 @@ }, { "name": "set_background_image_size", - "value": "Set background image size" + "value": "Set background\nimage size" }, { "name": "set_background_image_position", - "value": "Set background image position" + "value": "Set background\nimage position" }, { "name": "set_background_blur_style_color_mode", - "value": "Set background blur style color mode" + "value": "Set background blur\nstyle color mode" }, { "name": "set_background_blur_style_adaptive_color", - "value": "Set background blur style adaptive color" + "value": "Set background blur\nstyle adaptive color" }, { "name": "blur_style_system", @@ -440,6 +441,7 @@ "name": "background_image_size_contain", "value": "Contain" }, + { "name": "background_image_position_top_start", "value": "TopStart" @@ -472,10 +474,12 @@ "name": "background_image_position_bottom", "value": "Bottom" }, + { "name": "background_image_position_bottom_end", "value": "BottomEnd" }, + { "name": "background_image", "value": "Set background image" @@ -638,11 +642,11 @@ }, { "name": "button_confirm", - "value": "Confirm" + "value": "Confirm " }, { "name": "button_type_capsule", - "value": "Capsule" + "value": "Capsule " }, { "name": "button_type_normal", @@ -650,7 +654,7 @@ }, { "name": "button_type_circle", - "value": "Circle" + "value": "Circle " }, { "name": "button_state_effect", @@ -658,11 +662,11 @@ }, { "name": "button_state_effect_true", - "value": "Has effect" + "value": "Has effect " }, { "name": "button_state_effect_false", - "value": "No effect" + "value": "No effect " }, { "name": "button_disable_style", @@ -674,15 +678,19 @@ }, { "name": "button_border_radius", - "value": " Rounded button" + "value": " Rounded button " }, { "name": "button_with_icon", - "value": "Icon button" + "value": "Icon button " + }, + { + "name": "button_with_icon_en", + "value": "Icon\nbutton" }, { "name": "button_custom_bg_color", - "value": "Custom color" + "value": "Custom color " }, { "name": "button_click", @@ -1502,7 +1510,7 @@ }, { "name": "text_area_set_text_selection", - "value": "Set Text Selection" + "value": "Set Text\nSelection" }, { "name": "text_area_set_text_selection_start_select_error", @@ -1514,11 +1522,11 @@ }, { "name": "text_input_set_text_selection_start_select", - "value": "Start Select:" + "value": "Start:" }, { "name": "text_input_set_text_selection_end_select", - "value": "End Select:" + "value": "End:" }, { "name": "avoiding_input_method_testing", @@ -1894,7 +1902,7 @@ }, { "name": "hueRotate_change", - "value": "HueRoate" + "value": "Hue\nRoate" }, { "name": "color_blend_change", @@ -1902,15 +1910,15 @@ }, { "name": "spherical_effect_change", - "value": "sphericalEffect" + "value": "spherical\nEffect" }, { "name": "light_up_effect_change", - "value": "lightUpEffect" + "value": "lightUp\nEffect" }, { "name": "pixel_stretch_effect_change", - "value": "pixelStretchEffect" + "value": "pixelStretch\nEffect" }, { "name": "z_index", @@ -2699,8 +2707,7 @@ { "name": "animate_over", "value": "AnimateOver" - }, - { + },{ "name": "interaction_showpopup", "value": "Show Popup" }, @@ -2714,11 +2721,11 @@ }, { "name": "action_sheet_dialog_click_content", - "value": "点击内容" + "value": "Click Content" }, { "name": "text_picker_click_text", - "value": "点击文字" + "value": "Click Text" }, { "name": "global_menu", @@ -2726,31 +2733,31 @@ }, { "name": "global_menu_create_way", - "value": "创建方式" + "value": "Create Way" }, { "name": "global_menu_click_right", - "value": "右击" + "value": "Right Click" }, { "name": "global_menu_long_press", - "value": "长按" + "value": "Long Press" }, { "name": "global_menu_close", - "value": "点击关闭菜单" + "value": "Click to close the menu" }, { "name": "general_mount", - "value": "挂载卸载事件" + "value": "Mount unmount events" }, { "name": "general_mount_toast", - "value": "挂载图片" + "value": "Mount the image" }, { "name": "general_unmount_toast", - "value": "卸载图片" + "value": "Unmount the image" }, { "name": "general_mount_text", @@ -2802,7 +2809,7 @@ }, { "name": "size_size_description_one", - "value": "宽高为100vp" + "value": "Width and height are 100vp" }, { "name": "size_size_description_two", @@ -2834,27 +2841,27 @@ }, { "name": "keyPress_event", - "value": "按压事件" + "value": "Press Event" }, { "name": "focus_event_description", - "value": "按压外接键盘Tab键获取焦点,再按上下键切换焦点" + "value": "Press the Tab key on the external keyboard to get the focus, then press the up and down keys to switch the focus" }, { "name": "focus_event_button_one", - "value": "第一个按钮" + "value": "The first button" }, { "name": "focus_event_button_two", - "value": "第二个按钮" + "value": "The second button" }, { "name": "focus_event_button_three", - "value": "第三个按钮" + "value": "The third button" }, { "name": "focus_event_toast_text", - "value": "触发焦点" + "value": "Trigger Focus" }, { "name": "press_event_toast_text", @@ -2866,19 +2873,19 @@ }, { "name": "mouse_event_move_description", - "value": "使用外接鼠标移入按钮" + "value": "Move into the button with an external mouse" }, { "name": "mouse_event_click_description", - "value": "使用外接鼠标点击按钮" + "value": "Click the button with an external mouse" }, { "name": "mouse_event_hover_description", - "value": "鼠标移入" + "value": "The mouse is hovering" }, { "name": "mouse_event_onHover_description", - "value": "鼠标未移入" + "value": "The mouse is not hovering" }, { "name": "mouse_event_onMouse_text", @@ -2926,19 +2933,19 @@ }, { "name": "scroll_event", - "value": "组件可见区域变化事件" + "value": "Component visible area change event" }, { "name": "scroll_event_description", - "value": "滑动列表使图片消失和显示" + "value": "Slide the list to make the picture disappear and appear" }, { "name": "scroll_event_toast_visible", - "value": "爱心图片完全可见" + "value": "The heart image is fully visible" }, { "name": "scroll_event_toast_invisible", - "value": "爱心图片完全消失" + "value": "The heart image is completely disappeared" }, { "name": "location_settings", @@ -2946,27 +2953,27 @@ }, { "name": "location_settings_align", - "value": "对齐方式" + "value": "Alignment" }, { "name": "location_settings_direction", - "value": "水平布局" + "value": "Horizontal Layout" }, { "name": "location_settings_position", - "value": "绝对定位" + "value": "Absolute Positioning" }, { "name": "location_settings_markAnchor", - "value": "设置锚点" + "value": "Set mark anchor" }, { "name": "location_settings_offset", - "value": "相对定位" + "value": "Relative Position" }, { "name": "location_settings_alignRules", - "value": "对齐规则" + "value": "Align Rules" }, { "name": "location_settings_bottom_end", @@ -2990,27 +2997,27 @@ }, { "name": "layout_constrain", - "value": "布局约束" + "value": "Layout Constrain" }, { "name": "layout_constrain_aspectRatio", - "value": "组件宽高比" + "value": "Layout constrain aspect ratio" }, { "name": "layout_constrain_displayPriority", - "value": "组件优先级" + "value": "Layout constrain display priority" }, { "name": "layout_constrain_big_container", - "value": "大型容器" + "value": "Large Container" }, { "name": "layout_constrain_middle_container", - "value": "中型容器" + "value": "Medium Container" }, { "name": "layout_constrain_small_container", - "value": "小型容器" + "value": "Small Container" }, { "name": "layout_constrain_children_one", @@ -3042,11 +3049,11 @@ }, { "name": "flex", - "value": "flex" + "value": "Flex" }, { "name": "flex_flexBasis", - "value": "flexBasis" + "value": "FlexBasis" }, { "name": "flex_flexGrow", @@ -3114,7 +3121,7 @@ }, { "name": "picture_border", - "value": "图片边框设置" + "value": "Picture border settings" }, { "name": "scale", @@ -3134,75 +3141,75 @@ }, { "name": "transform_init", - "value": "创建四阶矩阵" + "value": "Create a fourth-order matrix" }, { "name": "transform_copy", - "value": "矩阵复制" + "value": "Matrix Copy" }, { "name": "transform_combine", - "value": "矩阵效果叠加" + "value": "Matrix effect combine" }, { "name": "transform_invert", - "value": "矩阵效果反转" + "value": "Matrix effect inversion" }, { "name": "transform_translate", - "value": "矩阵平移效果" + "value": "Matrix translation effect" }, { "name": "transform_scale", - "value": "矩阵缩放效果" + "value": "Matrix scaling effect" }, { "name": "transform_rotate", - "value": "矩阵旋转效果" + "value": "Matrix rotation effect" }, { "name": "transform_transformPoint", - "value": "矩阵坐标点转换效果" + "value": "Matrix coordinate point conversion effect" }, { "name": "transform_combine_text", - "value": "x平移20,x放大两倍" + "value": "x translates 20,\nx magnifies twice" }, { "name": "transform_translate_text", - "value": "平移 x: 40, y: 40, z: 20" + "value": "Translation\nx: 40, y: 40,\nz: 20" }, { "name": "transform_scale_text", - "value": "宽高缩小一倍" + "value": "Reduce width and height\nby half" }, { "name": "transform_rotate_text", - "value": "旋转30度" + "value": "Rotate 30 degrees" }, { "name": "transform_transformPoint_before", - "value": "矩阵变换后的坐标:[50,50]" + "value": "Coordinates after matrix transformation: [50,50]" }, { "name": "transform_transformPoint_after", - "value": "矩阵变换后的坐标:[100,0]" + "value": "Coordinates after matrix transformation: [100,0]" }, { "name": "shape_crop", - "value": "形状裁剪" + "value": "Shape Crop" }, { "name": "shape_crop_clip", - "value": "裁剪" + "value": "Crop" }, { "name": "shape_crop_mask", - "value": "遮盖" + "value": "Cover" }, { "name": "grid_settings", - "value": "栅格设置" + "value": "Grid Settings" }, { "name": "grid_settings_sm", @@ -3222,11 +3229,11 @@ }, { "name": "focus_control", - "value": "焦点控制" + "value": "Focus Control" }, { "name": "focus_control_tab", - "value": "按外接键盘Tab键切换焦点" + "value": "Press the Tab key on the external keyboard to switch focus" }, { "name": "focus_control_lastPageId", @@ -3234,11 +3241,11 @@ }, { "name": "focus_control_success", - "value": "请求成功" + "value": "Request Success" }, { "name": "focus_control_failed", - "value": "请求失败" + "value": "Request Failed" }, { "name": "focus_control_group1", @@ -3258,11 +3265,11 @@ }, { "name": "focus_control_request_focus", - "value": "选择水果请求聚焦" + "value": "Selected fruit request focus" }, { "name": "component_id", - "value": "组件标识" + "value": "Component Identification" }, { "name": "component_id_onKeyTab", @@ -3302,31 +3309,31 @@ }, { "name": "component_blurred", - "value": "组件背景模糊" + "value": "Component background blur" }, { "name": "component_blurred_thin", - "value": "薄材料" + "value": "Thin Materials" }, { "name": "restore_id", - "value": "分布式迁移标识" + "value": "Distributed migration identifier" }, { "name": "gesture_process", - "value": "手势处理" + "value": "Gesture process" }, { "name": "bind_gesture_methods", - "value": "绑定手势方法" + "value": "Bind gesture method" }, { "name": "bind_gesture_priorityGesture", - "value": "priorityGesture会忽略text,优先识别父组件column" + "value": "priorityGesture will ignore text and prioritize parent component column" }, { "name": "bind_gesture_parallelGesture", - "value": "parallelGesture识别父子组件column,text" + "value": "parallelGesture identifies parent and child components column, text" }, { "name": "bind_gesture_tapGesture", @@ -3342,7 +3349,7 @@ }, { "name": "double_click", - "value": "单指双击触发" + "value": "Single finger double click trigger" }, { "name": "onAction", @@ -3350,7 +3357,7 @@ }, { "name": "long_press", - "value": "单指长按文本" + "value": "Long press the text with on finger" }, { "name": "long_press_cancel", @@ -3358,27 +3365,27 @@ }, { "name": "long_press_text", - "value": "请单指长按我" + "value": "Long press me" }, { "name": "pan_text", - "value": "双指任意方式拖动黑色框" + "value": "Drag the black frame with two fingers in any way" }, { "name": "pan_text_one", - "value": "单指左右拖动黑色框" + "value": "Drag the black frame left or right with one finger" }, { "name": "pan_start", - "value": "开始" + "value": "Start" }, { "name": "pan_end", - "value": "结束" + "value": "End" }, { "name": "pan_button", - "value": "修改PanGesture触发条件" + "value": "Modify the PanGesture trigger condition" }, { "name": "pan_offset", @@ -3390,7 +3397,7 @@ }, { "name": "pinch_description", - "value": "三指捏合黑色框" + "value": "Pinch the black frame with three fingers" }, { "name": "pinch_scale", @@ -3402,7 +3409,7 @@ }, { "name": "rotation_description", - "value": "双指旋转黑色框" + "value": "Rotate the black box with two fingers" }, { "name": "rotation_text", @@ -3410,7 +3417,7 @@ }, { "name": "swipe_description", - "value": "单指任一方向快速滑动黑色框" + "value": "Quickly slide the black box with one finger in either direction" }, { "name": "swipe_text_speed", @@ -3422,7 +3429,7 @@ }, { "name": "combinded_description", - "value": "先长按再拖动黑色框" + "value": "Long press and then drag the black box" }, { "name": "combinded_pan_start", @@ -3462,11 +3469,11 @@ }, { "name": "transform_translate_invert", - "value": "放大两倍反转(缩小两倍)" + "value": "Zoom in twice and reverse (zoom out twice)" }, { "name": "key_press_description", - "value": "按压外接键盘Tab键,再按压任意键" + "value": "Press the external keyboard Tab key, and then press any key" }, { "name": "key_press_keyType", @@ -3510,7 +3517,7 @@ }, { "name": "bind_click", - "value": "点击我" + "value": "Click me" }, { "name": "action_sheet_dialog", @@ -3518,7 +3525,7 @@ }, { "name": "action_sheet_click_sheets", - "value": "点击选项内容" + "value": "Click options content" }, { "name": "text_picker_text_peach", @@ -3542,11 +3549,11 @@ }, { "name": "text_picker_dialog", - "value": "TextPickerDialog 文本滑动选择器弹窗" + "value": "TextPickerDialog" }, { "name": "text_picker_show", - "value": "显示文本弹窗" + "value": "Show test dialog" }, { "name": "row_title", @@ -3602,11 +3609,11 @@ }, { "name": "row_justifycontent_description", - "value": "Spindle alignment format" + "value": "Spindle alignment\nformat" }, { "name": "row_alignitems_description", - "value": "Cross axis alignment format" + "value": "Cross axis alignment\nformat" }, { "name": "row_introduction_tips", @@ -3686,11 +3693,11 @@ }, { "name": "column_justifycontent_description", - "value": "Spindle alignment format" + "value": "Spindle alignment\nformat" }, { "name": "column_alignitems_description", - "value": "Cross axis alignment format" + "value": "Cross axis alignment\nformat" }, { "name": "column_introduction_tips", @@ -3742,7 +3749,7 @@ }, { "name": "sidebarcontainer_argument_type", - "value": "The sidebar shows the type" + "value": "The sidebar shows\nthe type" }, { "name": "sidebarcontainer_type_embed", @@ -3770,7 +3777,7 @@ }, { "name": "sidebarcontainer_position_title", - "value": "The sidebar shows the location" + "value": "The sidebar shows\nthe location" }, { "name": "sidebarcontainer_sidebar_show_position_start", @@ -3790,7 +3797,7 @@ }, { "name": "sidebarcontainer_auto_hide", - "value": "Whether the sidebar is hidden in its smallest state" + "value": "Whether the sidebar is hidden in its\nsmallest state" }, { "name": "sidebarcontainer_divider_width", @@ -3902,7 +3909,7 @@ }, { "name": "flex_argument_wrap", - "value": "Modify the wrap for this flex" + "value": "Modify the wrap for\nthis flex" }, { "name": "flex_argument_wrap_no_wrap", @@ -3918,11 +3925,11 @@ }, { "name": "flex_introduction_direction", - "value": "Change the direction of all flex" + "value": "Change the direction of\nall flex" }, { "name": "flex_argument_justifycontent", - "value": "Revised this Flex justifyContent" + "value": "Revised this Flex\njustifyContent" }, { "name": "flex_argument_justifycontent_start", @@ -3950,7 +3957,7 @@ }, { "name": "flex_argument_alignItems", - "value": "Modify alignItems in this Flex" + "value": "Modify alignItems in\nthis Flex" }, { "name": "flex_argumen_alignItems_auto", @@ -3978,7 +3985,7 @@ }, { "name": "flex_argument_alignContent", - "value": "Modify the alignContent of this Flex" + "value": "Modify the alignContent\nof this Flex" }, { "name": "gridrow_title", @@ -4082,7 +4089,7 @@ }, { "name": "image_renderMode_change", - "value": "RenderModeChange" + "value": "RenderMode\nChange" }, { "name": "image_repeat_xy", @@ -4230,23 +4237,23 @@ }, { "name": "patternlock_active_color", - "value": "PatternLockActiveColor" + "value": "Pattern Lock Active\nColor" }, { "name": "patternlock_path_color", - "value": "PatternLockParhColor" + "value": "Pattern Lock Path\nColor" }, { "name": "patternlock_select_color", - "value": "PatternLockSelectColor" + "value": "Pattern Lock Select\nColor" }, { "name": "patternlock_regular_color", - "value": "PatternLockRegularColor" + "value": "Pattern Lock Regular\nColor" }, { "name": "patternlock_side_length", - "value": "PatternLockSideLengh" + "value": "PatternLockSideLength" }, { "name": "patternlock_circle_radius", @@ -4262,15 +4269,15 @@ }, { "name": "search_textalign_change", - "value": "SearchTextAlignChange" + "value": "Search Text Align\nChange" }, { "name": "search_placeholder_change", - "value": "SearchPlaceholderChange" + "value": "Search Place holder\nChange" }, { "name": "search_copyOption_change", - "value": "SearchCopyOptionChange" + "value": "Search Copy Option\nChange" }, { "name": "search_change", @@ -4398,7 +4405,7 @@ }, { "name": "list_item_introduction_properties", - "value": "修改 ListItem 的属性" + "value": "Modify the properties of ListItem" }, { "name": "grid_title", @@ -4410,7 +4417,7 @@ }, { "name": "grid_properties_columns_template", - "value": "Control the proportion of the third column" + "value": "Control the third column" }, { "name": "grid_properties_columns_gap", @@ -4442,7 +4449,7 @@ }, { "name": "grid_properties_rows_template", - "value": "Control the proportion of the third rows" + "value": "Control the third row" }, { "name": "grid_item_introduction", @@ -4450,19 +4457,19 @@ }, { "name": "grid_item_row_start", - "value": "Change the start line number" + "value": "Change the start\nline number" }, { "name": "grid_item_row_end", - "value": "Modify the end line number" + "value": "Modify the end\nline number" }, { "name": "grid_item_column_start", - "value": "Change the start column number" + "value": "Change the start\ncolumn number" }, { "name": "grid_item_column_end", - "value": "Modify the end column number" + "value": "Modify the end\ncolumn number" }, { "name": "swiper_title", @@ -4482,7 +4489,7 @@ }, { "name": "swiper_properties_disable_swipe", - "value": "Disable swipe left or right to switch function" + "value": "Disable left and right swipe switch" }, { "name": "swiper_properties_item_space", @@ -4494,7 +4501,7 @@ }, { "name": "swiper_properties_duration", - "value": "Duration of slide switching animation (unit: ms)" + "value": "Slide switch animation\n(unit: ms)" }, { "name": "swiper_properties_loop", @@ -4506,7 +4513,7 @@ }, { "name": "swiper_properties_interval", - "value": "Interval of automatic playback (unit: ms)" + "value": "Autoplay interval\n(unit: ms)" }, { "name": "swiper_controller_next", @@ -4602,7 +4609,7 @@ }, { "name": "tabs_arguments_controller", - "value": "Switches to the specified index" + "value": "Switches to the\nspecified index" }, { "name": "tab_content_title", @@ -4654,7 +4661,7 @@ }, { "name": "shape_title", - "value": "shape" + "value": "Shape" }, { "name": "circle_change", @@ -4886,7 +4893,7 @@ }, { "name": "path_commands_select", - "value": "PathCommandsSelect" + "value": "PathCommands" }, { "name": "path_fill", @@ -5300,6 +5307,70 @@ "name": "navigator_return_message", "value": "hello! This is a param form the first page" }, + { + "name": "swipe_action_button", + "value": "Delete" + }, + { + "name": "enter_range", + "value": "Enter the mouse selection range" + }, + { + "name": "remove_range", + "value": "Remove the mouse selection" + }, + { + "name": "status_bar_desc1", + "value": "The current initialIndex is " + }, + { + "name": "status_bar_desc2", + "value": " after modifying initialIndex, please enter this page again to view the effect" + }, + { + "name": "choose_please", + "value": "Choice" + }, + { + "name": "H1_title", + "value": "

h1 Title

" + }, + { + "name": "H1_italic", + "value": "

h1 Italic

" + }, + { + "name": "H1_underline", + "value": "

h1 Underline

" + }, + { + "name": "H2_title", + "value": "

h2 Title

" + }, + { + "name": "H3_title", + "value": "

h3 Title

" + }, + { + "name": "P_common", + "value": "

p Common


" + }, + { + "name": "font_title_desc", + "value": "
" + }, + { + "name": "font_title", + "value": "

font-size 35px,line-height 45px

" + }, + { + "name": "font_content_desc", + "value": "

" + }, + { + "name": "font_content", + "value": "

This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text.

" + }, { "name": "reason_get_bundle_info", "value": "Allow the app to query information of other apps in component display scenarios" diff --git a/entry/src/main/resources/base/media/banner.png b/entry/src/main/resources/base/media/banner.png index 9e76d6c33be6f0e21059dbb046d3bc52694b1fbb..03ff211c5709806ba2532297692e63a72146085a 100644 Binary files a/entry/src/main/resources/base/media/banner.png and b/entry/src/main/resources/base/media/banner.png differ diff --git a/entry/src/main/resources/en_US/element/string.json b/entry/src/main/resources/en_US/element/string.json index 0fed81a9b5c91c53726473c19f9e353061f2d73a..b7caa37a9644297388fd952769d00574c0b9e767 100644 --- a/entry/src/main/resources/en_US/element/string.json +++ b/entry/src/main/resources/en_US/element/string.json @@ -36,10 +36,7 @@ "name": "prop_background", "value": "Background" }, - { - "name": "safe_area", - "value": "SafeArea" - }, + { "name": "prop_foreground", "value": "Foreground" @@ -139,7 +136,8 @@ { "name": "swipe_gesture", "value": "SwipeGesture" - }, { + }, + { "name": "combined_gestures", "value": "Combined Gestures" }, @@ -161,7 +159,7 @@ }, { "name": "information_presentation_and_dynamic_effects", - "value": "Information presentation and dynamic effects" + "value": "Information presentation and\ndynamic effects" }, { "name": "blank_and_divider", @@ -171,6 +169,26 @@ "name": "text_and_input", "value": "Text and input" }, + { + "name": "rows_and_columns", + "value": "Rows and columns" + }, + { + "name": "stack_flex_and_grid", + "value": "Stack, flex and grid" + }, + { + "name": "list_and_grid", + "value": "List and grid" + }, + { + "name": "navigation", + "value": "Navigation" + }, + { + "name": "canvas_and_graphic_drawing", + "value": "Canvas and graphic drawing" + }, { "name": "layout_animation_expansion", "value": "Layout animation" @@ -215,6 +233,30 @@ "name": "size_transition_expansion", "value": "Size transition" }, + { + "name": "size_transition_flex", + "value": "Flex" + }, + { + "name": "size_transition_grid_item", + "value": "GridItem" + }, + { + "name": "size_transition_list_item", + "value": "ListItem" + }, + { + "name": "size_transition_swiper_item", + "value": "SwiperItem" + }, + { + "name": "size_transition_font_size", + "value": "FontSize" + }, + { + "name": "size_transition_expansion_tabContent", + "value": "TabContent" + }, { "name": "alert_dialog", "value": "Alert dialog" @@ -345,11 +387,51 @@ }, { "name": "set_background_image_size", - "value": "Set background image size" + "value": "Set background\nimage size" }, { "name": "set_background_image_position", - "value": "Set background image position" + "value": "Set background\nimage position" + }, + { + "name": "set_background_blur_style_color_mode", + "value": "Set background blur\nstyle color mode" + }, + { + "name": "set_background_blur_style_adaptive_color", + "value": "Set background blur\nstyle adaptive color" + }, + { + "name": "blur_style_system", + "value": "System" + }, + { + "name": "blur_style_light", + "value": "Light" + }, + { + "name": "blur_style_dark", + "value": "Dark" + }, + { + "name": "blur_style_default", + "value": "Default" + }, + { + "name": "set_shadow_type", + "value": "Set shadow type" + }, + { + "name": "shadow_type_color", + "value": "COLOR" + }, + { + "name": "shadow_type_blur", + "value": "BLUR" + }, + { + "name": "blur_style_average", + "value": "Average" }, { "name": "background_image_size_cover", @@ -359,6 +441,7 @@ "name": "background_image_size_contain", "value": "Contain" }, + { "name": "background_image_position_top_start", "value": "TopStart" @@ -396,6 +479,7 @@ "name": "background_image_position_bottom_end", "value": "BottomEnd" }, + { "name": "background_image", "value": "Set background image" @@ -528,6 +612,10 @@ "name": "border_radius", "value": "Set the rounded corners of each of the four corners" }, + { + "name": "border_3D", + "value": "Set the border 3D" + }, { "name": "border_radius_left_top", "value": "Top left border" @@ -544,10 +632,6 @@ "name": "border_radius_right_bottom", "value": "Bottom right border" }, - { - "name": "border_3D", - "value": "Set the border 3D" - }, { "name": "button_title", "value": "Button" @@ -558,11 +642,11 @@ }, { "name": "button_confirm", - "value": "Confirm" + "value": "Confirm " }, { "name": "button_type_capsule", - "value": "Capsule" + "value": "Capsule " }, { "name": "button_type_normal", @@ -570,7 +654,7 @@ }, { "name": "button_type_circle", - "value": "Circle" + "value": "Circle " }, { "name": "button_state_effect", @@ -578,11 +662,11 @@ }, { "name": "button_state_effect_true", - "value": "Has effect" + "value": "Has effect " }, { "name": "button_state_effect_false", - "value": "No effect" + "value": "No effect " }, { "name": "button_disable_style", @@ -594,15 +678,19 @@ }, { "name": "button_border_radius", - "value": " Rounded button" + "value": " Rounded button " }, { "name": "button_with_icon", - "value": "Icon button" + "value": "Icon button " + }, + { + "name": "button_with_icon_en", + "value": "Icon\nbutton" }, { "name": "button_custom_bg_color", - "value": "Custom color" + "value": "Custom color " }, { "name": "button_click", @@ -772,6 +860,34 @@ "name": "divider_attribute", "value": "Divider" }, + { + "name": "divider_color_blue", + "value": "Blue" + }, + { + "name": "divider_color_green", + "value": "Green" + }, + { + "name": "divider_color_orange", + "value": "Orange" + }, + { + "name": "divider_color_pink", + "value": "Pink" + }, + { + "name": "divider_line_type_butt", + "value": "Butt" + }, + { + "name": "divider_line_type_round", + "value": "Round" + }, + { + "name": "divider_line_type_square", + "value": "Square" + }, { "name": "font_color", "value": "Color" @@ -908,6 +1024,54 @@ "name": "rotate_image_angle", "value": "Rotate 15°" }, + { + "name": "safe_area_type_and_safe_area_edge", + "value": "SafeAreaType And SafeAreaEdge" + }, + { + "name": "safe_area", + "value": "SafeArea" + }, + { + "name": "save_area_input_text", + "value": "input your word ..." + }, + { + "name": "safe_area_type", + "value": "SafeAreaType" + }, + { + "name": "safe_area_edge", + "value": "SafeAreaEdge" + }, + { + "name": "safe_area_edge_top", + "value": "TOP" + }, + { + "name": "safe_area_edge_bottom", + "value": "BOTTOM" + }, + { + "name": "safe_area_edge_start", + "value": "START" + }, + { + "name": "safe_area_edge_end", + "value": "END" + }, + { + "name": "safe_area_type_system", + "value": "SYSTEM" + }, + { + "name": "safe_area_type_cutout", + "value": "CUTOUT" + }, + { + "name": "safe_area_type_keyboard", + "value": "KEYBOARD" + }, { "name": "select_title", "value": "Select" @@ -980,6 +1144,10 @@ "name": "Shop_card_expansion", "value": "shop card expansion" }, + { + "name": "System_icon", + "value": "System Icon" + }, { "name": "Today", "value": "today" @@ -1236,6 +1404,14 @@ "name": "text_title", "value": "Text" }, + { + "name": "text_content", + "value": "Steel is tempered in fire and sharp cooling, so it can be hard and not afraid of anything. It is also in this way that our generation has been tempered in struggles and terrible trials, learning not to succumb to life." + }, + { + "name": "text_content_en", + "value": "Steel is tempered in fire and sharp cooling, so it can be hard and not afraid of anything. It is also in this way that our generation has been tempered in struggles and terrible trials, learning not to succumb to life." + }, { "name": "text_width", "value": "Text width" @@ -1245,8 +1421,12 @@ "value": "Text height" }, { - "name": "text_content", - "value": "Steel is tempered in fire and sharp cooling, so it can be hard and not afraid of anything. It is also in this way that our generation has been tempered in struggles and terrible trials, learning not to succumb to life." + "name": "text_content_en_first", + "value": "Steel is tempered in fire and sharp cooling, so it can be hard and not afraid of anything. " + }, + { + "name": "text_content_en_last", + "value": "It is also in this way that our generation has been tempered in struggles and terrible trials, learning not to succumb to life. " }, { "name": "text_text_align_center", @@ -1330,7 +1510,7 @@ }, { "name": "text_area_set_text_selection", - "value": "Set Text Selection" + "value": "Set Text\nSelection" }, { "name": "text_area_set_text_selection_start_select_error", @@ -1342,11 +1522,11 @@ }, { "name": "text_input_set_text_selection_start_select", - "value": "Start Select:" + "value": "Start:" }, { "name": "text_input_set_text_selection_end_select", - "value": "End Select:" + "value": "End:" }, { "name": "avoiding_input_method_testing", @@ -1420,14 +1600,14 @@ "name": "text_input_only_input_english", "value": "Only english letters can be entered" }, - { - "name": "text_input_caret_position", - "value": "Caret position" - }, { "name": "text_input_set_text_selection", "value": "Set Text Selection" }, + { + "name": "text_input_caret_position", + "value": "Caret position" + }, { "name": "text_input_max_length", "value": "Limit the input character length" @@ -1482,7 +1662,7 @@ }, { "name": "time_picker_options_usemilitarytime", - "value": "usemilitarytime" + "value": "useMilitaryTime" }, { "name": "time_picker_dialog_timeone", @@ -1508,10 +1688,6 @@ "name": "toggle_type_switch", "value": "Switch" }, - { - "name": "checkbox", - "value": "Checkbox" - }, { "name": "toggle_type_checkbox", "value": "Check box" @@ -1647,7 +1823,8 @@ { "name": "components_display_hidden", "value": "Hidden" - }, { + }, + { "name": "components_display_visible", "value": "Visible" }, @@ -1671,10 +1848,6 @@ "name": "background_blur_style", "value": "Background Blur Style" }, - { - "name": "set_shadow_type", - "value": "Set shadow type" - }, { "name": "shadow_effects", "value": "Shadow Effect" @@ -1729,7 +1902,7 @@ }, { "name": "hueRotate_change", - "value": "HueRoate" + "value": "Hue\nRoate" }, { "name": "color_blend_change", @@ -1737,15 +1910,15 @@ }, { "name": "spherical_effect_change", - "value": "sphericalEffect" + "value": "spherical\nEffect" }, { "name": "light_up_effect_change", - "value": "lightUpEffect" + "value": "lightUp\nEffect" }, { "name": "pixel_stretch_effect_change", - "value": "pixelStretchEffect" + "value": "pixelStretch\nEffect" }, { "name": "z_index", @@ -1771,6 +1944,10 @@ "name": "Red", "value": "Red" }, + { + "name": "Blue", + "value": "Blue" + }, { "name": "Yellow", "value": "Yellow" @@ -1904,308 +2081,160 @@ "value": "Touch test region" }, { - "name": "action_sheet_dialog", - "value": "ActionSheetDialog" + "name": "touch_hit_test", + "value": "Click the hot area: set the hot area as the green area" }, { - "name": "action_sheet_click_sheets", - "value": "Click options content" + "name": "response_region", + "value": "Response Region" }, { - "name": "action_sheet_dialog_click_content", - "value": "Click content" + "name": "touch_hit_subtitle", + "value": "Click the green area to trigger the blue area response" }, { - "name": "text_picker_dialog", - "value": "TextPickerDialog" + "name": "option", + "value": "option" }, { - "name": "text_picker_show", - "value": "Show text dialog" + "name": "hover_region", + "value": "Hover the mouse over the green area to observe the effect" }, { - "name": "text_picker_click_text", - "value": "Click text" + "name": "multistatus_region", + "value": "Switch status and observe the effect" }, { - "name": "text_picker_text_peach", - "value": "peach" + "name": "status_select", + "value": "Status selection" }, { - "name": "text_picker_text_apple", - "value": "apple" + "name": "side_bar_effects_title", + "value": "SideBar effects" }, { - "name": "text_picker_text_orange", - "value": "orange" + "name": "set_side_bar_type", + "value": "Set sideBarType" }, { - "name": "text_picker_text_grape", - "value": "grape" + "name": "side_bar_container_content", + "value": "SideBar container content" }, { - "name": "text_picker_text_banana", - "value": "banana" + "name": "hide_side_bar", + "value": "Hide sideBar" }, { - "name": "global_menu", - "value": "BindContextMenu" + "name": "show_side_bar", + "value": "Show sideBar" }, { - "name": "global_menu_create_way", - "value": "Create way" + "name": "side_bar_type_embed", + "value": "Embed" }, { - "name": "global_menu_click_right", - "value": "Right click" + "name": "side_bar_type_overlay", + "value": "Overlay" }, { - "name": "global_menu_long_press", - "value": "Long press" + "name": "side_bar_type_auto", + "value": "Auto" }, { - "name": "global_menu_close", - "value": "Click to close the menu" + "name": "scroll_bar", + "value": "ScrollBar" }, { - "name": "component_transition", - "value": "Component transition" + "name": "scroll_vertical_title", + "value": "vertical scroll" }, { - "name": "component_transition_show", - "value": " Show" + "name": "scroll_horizontal_title", + "value": "horizontal scroll" }, { - "name": "component_transition_hide", - "value": "Hide" + "name": "auxiliary_refresh", + "value": "Refresh" }, { - "name": "attribute_animation", - "value": "Property animation" + "name": "auxiliary_refresh_refreshing", + "value": "Refreshing" }, { - "name": "motion_path", - "value": "Path animation" + "name": "auxiliary_refresh_offset", + "value": "offset:" }, { - "name": "animate_to", - "value": "Display animation" + "name": "auxiliary_refresh_minvalue", + "value": "0" }, { - "name": "animate_over", - "value": "The animation finishes playing" + "name": "auxiliary_refresh_maxvalue", + "value": "100" }, { - "name": "attribute_animation_change_size", - "value": "Change size" + "name": "auxiliary_refresh_friction", + "value": "friction:" }, { - "name": "attribute_animation_play_complete", - "value": "Playback Complete" + "name": "auxiliary_panel", + "value": "Panel" }, { - "name": "attribute_animation_unlimited_playback", - "value": "Unlimited playback" + "name": "auxiliary_alphabetIndexer", + "value": "AlphabetIndexer" }, { - "name": "attribute_animation_play_speed", - "value": "Play the speed" + "name": "loading_progress", + "value": "LoadingProgress" }, { - "name": "attribute_animation_delay", - "value": "Delay 3 s" + "name": "marquee_name", + "value": "Marquee" }, { - "name": "attribute_animation_set_curve", - "value": "Set the curve" + "name": "marquee_src", + "value": "Hello ArkUI String Length Larger Than Content" }, { - "name": "attribute_animation_change_rotation", - "value": "Change the rotation" + "name": "marquee_fromstart", + "value": "fromStart" }, { - "name": "attribute_animation_play_count", - "value": "Play 2 times" + "name": "marquee_step", + "value": "step" }, { - "name": "motion_path_click_me", - "value": "click me" + "name": "marquee_loop", + "value": "loop" }, { - "name": "general_mount", - "value": "Mount unmount events" + "name": "text_timer", + "value": "TextTimer" }, { - "name": "general_mount_toast", - "value": "Mount the image" + "name": "text_timer_start", + "value": "start" }, { - "name": "general_unmount_toast", - "value": "Unmount the image" + "name": "text_timer_pause", + "value": "pause" }, { - "name": "general_mount_text", - "value": "Click I mount the unmounted image" + "name": "text_timer_reset", + "value": "reset" }, { - "name": "general_drag", - "value": "Drag and drop events" + "name": "text_timer_iscountdown", + "value": "isCountDown" }, { - "name": "general_drag_text_one", - "value": "There are three Text elements here, press and hold the text and drag it to the list below" + "name": "text_timer_timeformatone", + "value": "mm:ss:SS" }, { - "name": "general_drag_text_two", - "value": "This is a List element" - }, - { - "name": "drag_list_one", - "value": "One" - }, - { - "name": "drag_list_two", - "value": "Two" - }, - { - "name": "drag_list_three", - "value": "Three" - }, - { - "name": "drag_list_four", - "value": "Four" - }, - { - "name": "size_size", - "value": "size" - }, - { - "name": "size_padding", - "value": "padding" - }, - { - "name": "size_margin", - "value": "margin" - }, - { - "name": "size_constraintSize", - "value": "constraintSize" - }, - { - "name": "response_region", - "value": "Response Region" - }, - { - "name": "touch_hit_subtitle", - "value": "Click the green area to trigger the blue area response" - }, - { - "name": "option", - "value": "option" - }, - { - "name": "hover_region", - "value": "Hover the mouse over the green area to observe the effect" - }, - { - "name": "multistatus_region", - "value": "Switch status and observe the effect" - }, - { - "name": "status_select", - "value": "Status selection" - }, - { - "name": "scroll_bar", - "value": "ScrollBar" - }, - { - "name": "scroll_vertical_title", - "value": "vertical scroll" - }, - { - "name": "scroll_horizontal_title", - "value": "horizontal scroll" - }, - { - "name": "auxiliary_refresh", - "value": "Refresh" - }, - { - "name": "auxiliary_refresh_offset", - "value": "offset:" - }, - { - "name": "auxiliary_refresh_minvalue", - "value": "0" - }, - { - "name": "auxiliary_refresh_maxvalue", - "value": "100" - }, - { - "name": "auxiliary_refresh_friction", - "value": "friction:" - }, - { - "name": "auxiliary_panel", - "value": "Panel" - }, - { - "name": "auxiliary_alphabetIndexer", - "value": "AlphabetIndexer" - }, - { - "name": "loading_progress", - "value": "LoadingProgress" - }, - { - "name": "marquee_name", - "value": "Marquee" - }, - { - "name": "marquee_src", - "value": "Hello ArkUI String Length Larger Than Content" - }, - { - "name": "marquee_fromstart", - "value": "fromStart" - }, - { - "name": "marquee_step", - "value": "step" - }, - { - "name": "marquee_loop", - "value": "loop" - }, - { - "name": "text_timer", - "value": "TextTimer" - }, - { - "name": "text_timer_start", - "value": "start" - }, - { - "name": "text_timer_pause", - "value": "pause" - }, - { - "name": "text_timer_reset", - "value": "reset" - }, - { - "name": "text_timer_iscountdown", - "value": "isCountDown" - }, - { - "name": "text_timer_timeformatone", - "value": "mm:ss:SS" - }, - { - "name": "text_timer_groupformat", - "value": "format" + "name": "text_timer_groupformat", + "value": "format" }, { "name": "text_timer_timeformattwo", @@ -2275,6 +2304,10 @@ "name": "checkbox_checkboxgroup", "value": "Checkbox && CheckboxGroup" }, + { + "name": "checkbox", + "value": "Checkbox" + }, { "name": "checkbox_title", "value": "Checkbox" @@ -2343,6 +2376,34 @@ "name": "swiper_name", "value": "Swiper" }, + { + "name": "nav_router", + "value": "NavRouter" + }, + { + "name": "tabs_name", + "value": "Tabs" + }, + { + "name": "select_name", + "value": "Select" + }, + { + "name": "slider_name", + "value": "Slider" + }, + { + "name": "swiper_set_next_margin_and_previous_margin", + "value": "set next margin and previous margin" + }, + { + "name": "swiper_next_margin", + "value": "next margin" + }, + { + "name": "swiper_previous_margin", + "value": "previous margin" + }, { "name": "alphabetindexer_an", "value": "An" @@ -2375,6 +2436,10 @@ "name": "alphabetindexer_chen", "value": "Chen" }, + { + "name": "alphabetindexer_cheng", + "value": "Cheng" + }, { "name": "alphabetindexer_lv", "value": "Lv" @@ -2411,10 +2476,6 @@ "name": "alphabetindexer_cui", "value": "Cui" }, - { - "name": "alphabetindexer_cheng", - "value": "Cheng" - }, { "name": "alphabetindexer_list_display", "value": "List Display" @@ -2503,6 +2564,10 @@ "name": "checkbox_select_all", "value": "Select All" }, + { + "name": "delete_list_item", + "value": "Delete listItem" + }, { "name": "normal_display", "value": "Display" @@ -2576,113 +2641,2596 @@ "value": "Change arrowOffset:" }, { - "name": "interaction_showpopup", - "value": "Show Popup" + "name": "interaction_mask", + "value": "isMask:" }, { - "name": "interaction_showcustompopup", - "value": "Show Custom Popup" + "name": "component_transition", + "value": "Component transition" }, { - "name": "pan_start", - "value": "Start" + "name": "component_transition_show", + "value": "Show" }, { - "name": "pan_end", - "value": "End" + "name": "component_transition_hide", + "value": "Hide" }, { - "name": "pan_button", - "value": "Modify the PanGesture trigger condition" + "name": "motion_path", + "value": "MotionPath" }, { - "name": "pinch_description", - "value": "Pinch the black frame with three fingers" + "name": "animate_to", + "value": "AnimateTo" }, { - "name": "pinch_scale", - "value": "PinchGesture scale:\n" + "name": "attribute_animation", + "value": "AttributeAnimation" }, { - "name": "interaction_mask", - "value": "isMask:" + "name": "attribute_animation_change_size", + "value": "ChangeSize" }, { - "name": "rotation_description", - "value": "Rotate the black box with two fingers" + "name": "attribute_animation_change_rotation", + "value": "ChangeRotation" }, { - "name": "swipe_description", - "value": "Quickly slide the black box with one finger in either direction" + "name": "attribute_animation_set_curve", + "value": "SetCurve" }, { - "name": "combinded_description", - "value": "Press and hold and drag the black box" + "name": "attribute_animation_delay", + "value": "delay3s" }, { - "name": "transform_translate_invert", - "value": "Zoom in twice and invert (zoom in by a factor of two)" + "name": "attribute_animation_play_speed", + "value": "PlaySpeed" }, { - "name": "key_press_description", - "value": "Press the External Keyboard Tab key, and then press any key" + "name": "attribute_animation_unlimited_playback", + "value": "UnlimitedPlayback" }, { - "name": "april", - "value": "april" + "name": "attribute_animation_play_complete", + "value": "PlayComplete" }, { - "name": "bind_click", - "value": "Click me" + "name": "attribute_animation_play_count", + "value": "PlayCount" }, { - "name": "interaction_disable", - "value": "Disable Component:" + "name": "motion_path_click_me", + "value": "ClickMe" }, { - "name": "canvas_components", - "value": "Canvas components" + "name": "animate_over", + "value": "AnimateOver" + },{ + "name": "interaction_showpopup", + "value": "Show Popup" }, { - "name": "canvas_component_attributes", - "value": "Base attributes" + "name": "interaction_showcustompopup", + "value": "Show Custom Popup" }, { - "name": "canvas_component_image_bitmap", - "value": "ImageBitmap" + "name": "interaction_disable", + "value": "Disable Component:" }, { - "name": "canvas_component_gradient", - "value": "CanvasGradient" + "name": "action_sheet_dialog_click_content", + "value": "Click Content" }, { - "name": "canvas_component_method", - "value": "Base methods" + "name": "text_picker_click_text", + "value": "Click Text" }, { - "name": "canvas_component_path_2d", - "value": "Path2D" + "name": "global_menu", + "value": "BindContextMenu" }, { - "name": "canvas_component_transform", - "value": "Transform" + "name": "global_menu_create_way", + "value": "Create Way" }, { - "name": "canvas_canvasZone", - "value": "Canvas Zone" + "name": "global_menu_click_right", + "value": "Right Click" }, { - "name": "canvas_attributesOperations", - "value": "Attributes Operations" + "name": "global_menu_long_press", + "value": "Long Press" }, { - "name": "canvas_clearEffects", - "value": "Clear Effects" + "name": "global_menu_close", + "value": "Click to close the menu" + }, + { + "name": "general_mount", + "value": "Mount unmount events" + }, + { + "name": "general_mount_toast", + "value": "Mount the image" + }, + { + "name": "general_unmount_toast", + "value": "Unmount the image" + }, + { + "name": "general_mount_text", + "value": "点击我挂载卸载图片" + }, + { + "name": "general_drag", + "value": "拖拽事件" + }, + { + "name": "general_drag_text_one", + "value": "这里有三个文本元素,长按文本拖到下方列表中" + }, + { + "name": "general_drag_text_two", + "value": "这是一个列表元素" + }, + { + "name": "drag_list_one", + "value": "One" + }, + { + "name": "drag_list_two", + "value": "Two" + }, + { + "name": "drag_list_three", + "value": "Three" + }, + { + "name": "drag_list_four", + "value": "Four" + }, + { + "name": "size_size", + "value": "大小" + }, + { + "name": "size_padding", + "value": "内边距" + }, + { + "name": "size_margin", + "value": "外边距" + }, + { + "name": "size_constraintSize", + "value": "约束大小" + }, + { + "name": "size_size_description_one", + "value": "Width and height are 100vp" + }, + { + "name": "size_size_description_two", + "value": "宽高为100%" + }, + { + "name": "size_size_padding_one", + "value": "上下左右内边距10vp" + }, + { + "name": "size_size_padding_two", + "value": "上内边距20%" + }, + { + "name": "size_size_margin_one", + "value": "上下左右外边距10vp" + }, + { + "name": "size_size_margin_two", + "value": "上外距20%" + }, + { + "name": "size_size_constraintSize_one", + "value": "约束最大宽高90vp" + }, + { + "name": "size_size_constraintSize_two", + "value": "约束最小宽高80vp" + }, + { + "name": "keyPress_event", + "value": "Press Event" + }, + { + "name": "focus_event_description", + "value": "Press the Tab key on the external keyboard to get the focus, then press the up and down keys to switch the focus" + }, + { + "name": "focus_event_button_one", + "value": "The first button" + }, + { + "name": "focus_event_button_two", + "value": "The second button" + }, + { + "name": "focus_event_button_three", + "value": "The third button" + }, + { + "name": "focus_event_toast_text", + "value": "Trigger Focus" + }, + { + "name": "press_event_toast_text", + "value": "触发按键事件" + }, + { + "name": "press_event_toast_description", + "value": "按压外接键盘任何键" + }, + { + "name": "mouse_event_move_description", + "value": "Move into the button with an external mouse" + }, + { + "name": "mouse_event_click_description", + "value": "Click the button with an external mouse" + }, + { + "name": "mouse_event_hover_description", + "value": "The mouse is hovering" + }, + { + "name": "mouse_event_onHover_description", + "value": "The mouse is not hovering" + }, + { + "name": "mouse_event_onMouse_text", + "value": "onMouse" + }, + { + "name": "mouse_event_mouseBtn_none", + "value": "None" + }, + { + "name": "mouse_event_mouseBtn_left", + "value": "Left" + }, + { + "name": "mouse_event_mouseBtn_right", + "value": "Right" + }, + { + "name": "mouse_event_mouseBtn_back", + "value": "Back" + }, + { + "name": "mouse_event_mouseBtn_forward", + "value": "Forward" + }, + { + "name": "mouse_event_mouseBtn_middle", + "value": "Middle" + }, + { + "name": "mouse_event_mouseAction_hover", + "value": "Hover" + }, + { + "name": "mouse_event_mouseAction_press", + "value": "Press" + }, + { + "name": "mouse_event_mouseAction_move", + "value": "Move" + }, + { + "name": "mouse_event_mouseAction_release", + "value": "Release" + }, + { + "name": "scroll_event", + "value": "Component visible area change event" + }, + { + "name": "scroll_event_description", + "value": "Slide the list to make the picture disappear and appear" + }, + { + "name": "scroll_event_toast_visible", + "value": "The heart image is fully visible" + }, + { + "name": "scroll_event_toast_invisible", + "value": "The heart image is completely disappeared" + }, + { + "name": "location_settings", + "value": "Location settings" + }, + { + "name": "location_settings_align", + "value": "Alignment" + }, + { + "name": "location_settings_direction", + "value": "Horizontal Layout" + }, + { + "name": "location_settings_position", + "value": "Absolute Positioning" + }, + { + "name": "location_settings_markAnchor", + "value": "Set mark anchor" + }, + { + "name": "location_settings_offset", + "value": "Relative Position" + }, + { + "name": "location_settings_alignRules", + "value": "Align Rules" + }, + { + "name": "location_settings_bottom_end", + "value": "Bottom end" + }, + { + "name": "location_settings_top_start", + "value": "Top start" + }, + { + "name": "location_settings_center", + "value": "Center" + }, + { + "name": "location_settings_position_text", + "value": "position(30, 10)" + }, + { + "name": "location_settings_position_offSet_text", + "value": "offset(15, 30)" + }, + { + "name": "layout_constrain", + "value": "Layout Constrain" + }, + { + "name": "layout_constrain_aspectRatio", + "value": "Layout constrain aspect ratio" + }, + { + "name": "layout_constrain_displayPriority", + "value": "Layout constrain display priority" + }, + { + "name": "layout_constrain_big_container", + "value": "Large Container" + }, + { + "name": "layout_constrain_middle_container", + "value": "Medium Container" + }, + { + "name": "layout_constrain_small_container", + "value": "Small Container" + }, + { + "name": "layout_constrain_children_one", + "value": "1:(priority:2)" + }, + { + "name": "layout_constrain_children_two", + "value": "2:(priority:1)" + }, + { + "name": "layout_constrain_children_three", + "value": "3:(priority:3)" + }, + { + "name": "layout_constrain_children_four", + "value": "4:(priority:1)" + }, + { + "name": "layout_constrain_children_five", + "value": "5:(priority:2)" + }, + { + "name": "layout_constrain_one", + "value": "1" + }, + { + "name": "layout_constrain_two", + "value": "2" + }, + { + "name": "flex", + "value": "Flex" + }, + { + "name": "flex_flexBasis", + "value": "FlexBasis" + }, + { + "name": "flex_flexGrow", + "value": "FlexGrow" + }, + { + "name": "flex_flexShrink", + "value": "FlexShrink" + }, + { + "name": "flex_alignSelf", + "value": "AlignSelf" + }, + { + "name": "flex_layoutWeight", + "value": "LayoutWeight" + }, + { + "name": "flex_no_layoutWeight", + "value": "On layoutWeight" + }, + { + "name": "flex_no_alignSelf_70", + "value": "On alignSelf,height:70%" + }, + { + "name": "flex_end_alignSelf", + "value": "AlignSelf end" + }, + { + "name": "flex_end_alignSelf_100", + "value": "AlignSelf end" + }, + { + "name": "flex_shrink_0", + "value": "FlexShrink(0)" + }, + { + "name": "flex_shrink_default", + "value": "Default flexShrink" + }, + { + "name": "flex_shrink_1", + "value": "FlexShrink(1)" + }, + { + "name": "flex_grow_1", + "value": "FlexGrow(1)" + }, + { + "name": "flex_grow_2", + "value": "FlexGrow(2)" + }, + { + "name": "flex_no_alignSelf_100", + "value": "On alignSelf,height:100%" + }, + { + "name": "flex_basis_100", + "value": "FlexBasis(100)" + }, + { + "name": "flex_basis_auto", + "value": "FlexBasis(auto)" + }, + { + "name": "picture_border", + "value": "Picture border settings" + }, + { + "name": "scale", + "value": "Scale" + }, + { + "name": "transform", + "value": "Transform" + }, + { + "name": "scale_image", + "value": "ScaleImage" + }, + { + "name": "transform_image", + "value": "TransformImage" + }, + { + "name": "transform_init", + "value": "Create a fourth-order matrix" + }, + { + "name": "transform_copy", + "value": "Matrix Copy" + }, + { + "name": "transform_combine", + "value": "Matrix effect combine" + }, + { + "name": "transform_invert", + "value": "Matrix effect inversion" + }, + { + "name": "transform_translate", + "value": "Matrix translation effect" + }, + { + "name": "transform_scale", + "value": "Matrix scaling effect" + }, + { + "name": "transform_rotate", + "value": "Matrix rotation effect" + }, + { + "name": "transform_transformPoint", + "value": "Matrix coordinate point conversion effect" + }, + { + "name": "transform_combine_text", + "value": "x translates 20,\nx magnifies twice" + }, + { + "name": "transform_translate_text", + "value": "Translation\nx: 40, y: 40,\nz: 20" + }, + { + "name": "transform_scale_text", + "value": "Reduce width and height\nby half" + }, + { + "name": "transform_rotate_text", + "value": "Rotate 30 degrees" + }, + { + "name": "transform_transformPoint_before", + "value": "Coordinates after matrix transformation: [50,50]" + }, + { + "name": "transform_transformPoint_after", + "value": "Coordinates after matrix transformation: [100,0]" + }, + { + "name": "shape_crop", + "value": "Shape Crop" + }, + { + "name": "shape_crop_clip", + "value": "Crop" + }, + { + "name": "shape_crop_mask", + "value": "Cover" + }, + { + "name": "grid_settings", + "value": "Grid Settings" + }, + { + "name": "grid_settings_sm", + "value": "设备宽度为SM" + }, + { + "name": "grid_settings_md", + "value": "设备宽度为MD" + }, + { + "name": "grid_settings_lg", + "value": "设备宽度为LG" + }, + { + "name": "grid_edgeEffect_spring", + "value": "Grid edgeEffect spring" + }, + { + "name": "focus_control", + "value": "Focus Control" + }, + { + "name": "focus_control_tab", + "value": "Press the Tab key on the external keyboard to switch focus" + }, + { + "name": "focus_control_lastPageId", + "value": "LastPageId" + }, + { + "name": "focus_control_success", + "value": "Request Success" + }, + { + "name": "focus_control_failed", + "value": "Request Failed" + }, + { + "name": "focus_control_group1", + "value": "Group1" + }, + { + "name": "focus_control_group2", + "value": "Group2" + }, + { + "name": "focus_control_group3", + "value": "Group3" + }, + { + "name": "focus_control_input", + "value": "Input" + }, + { + "name": "focus_control_request_focus", + "value": "Selected fruit request focus" + }, + { + "name": "component_id", + "value": "Component Identification" + }, + { + "name": "component_id_onKeyTab", + "value": "OnKeyTab" + }, + { + "name": "component_id_click", + "value": "Click to start" + }, + { + "name": "component_id_longClick", + "value": "LongClick" + }, + { + "name": "component_id_onTouch", + "value": "OnTouch" + }, + { + "name": "component_id_onMouse", + "value": "OnMouse" + }, + { + "name": "component_id_click_text", + "value": "Button 'click to start' is clicked" + }, + { + "name": "component_id_longClick_text", + "value": "Button 'longClick' is longClicked" + }, + { + "name": "component_id_onTouch_text", + "value": "Button 'onTouch' is clicked" + }, + { + "name": "component_id_onMouse_text", + "value": "Button 'onMouse' in onMouse" + }, + { + "name": "component_blurred", + "value": "Component background blur" + }, + { + "name": "component_blurred_thin", + "value": "Thin Materials" + }, + { + "name": "restore_id", + "value": "Distributed migration identifier" + }, + { + "name": "gesture_process", + "value": "Gesture process" + }, + { + "name": "bind_gesture_methods", + "value": "Bind gesture method" + }, + { + "name": "bind_gesture_priorityGesture", + "value": "priorityGesture will ignore text and prioritize parent component column" + }, + { + "name": "bind_gesture_parallelGesture", + "value": "parallelGesture identifies parent and child components column, text" + }, + { + "name": "bind_gesture_tapGesture", + "value": "TapGesture:" + }, + { + "name": "bind_gesture_text", + "value": "\nText" + }, + { + "name": "bind_gesture_column", + "value": "\nColumn" + }, + { + "name": "double_click", + "value": "Single finger double click trigger" + }, + { + "name": "onAction", + "value": "onAction:" + }, + { + "name": "long_press", + "value": "Long press the text with on finger" + }, + { + "name": "long_press_cancel", + "value": "取消事件" + }, + { + "name": "long_press_text", + "value": "Long press me" + }, + { + "name": "pan_text", + "value": "Drag the black frame with two fingers in any way" + }, + { + "name": "pan_text_one", + "value": "Drag the black frame left or right with one finger" + }, + { + "name": "pan_start", + "value": "Start" + }, + { + "name": "pan_end", + "value": "End" + }, + { + "name": "pan_button", + "value": "Modify the PanGesture trigger condition" + }, + { + "name": "pan_offset", + "value": "PanGesture offset:\nX:" + }, + { + "name": "pan_offset_y", + "value": "\nY:" + }, + { + "name": "pinch_description", + "value": "Pinch the black frame with three fingers" + }, + { + "name": "pinch_scale", + "value": "PinchGesture scale:\n" + }, + { + "name": "pinch_center", + "value": "PinchGesture center:\nx:" + }, + { + "name": "rotation_description", + "value": "Rotate the black box with two fingers" + }, + { + "name": "rotation_text", + "value": "RotationGesture \n angle:" + }, + { + "name": "swipe_description", + "value": "Quickly slide the black box with one finger in either direction" + }, + { + "name": "swipe_text_speed", + "value": "SwipeGesture\n speed:" + }, + { + "name": "swipe_text_angle", + "value": "SwipeGesture\n angle" + }, + { + "name": "combinded_description", + "value": "Long press and then drag the black box" + }, + { + "name": "combinded_pan_start", + "value": "Pan start" + }, + { + "name": "combinded_pan_update", + "value": "Pan update" + }, + { + "name": "combinded_pan_end", + "value": "Pan end" + }, + { + "name": "combinded_longPress_onAction", + "value": "LongPress onAction" + }, + { + "name": "combinded_longPress_end", + "value": "LongPress end" + }, + { + "name": "combinded_sequence", + "value": "sequence gesture\n" + }, + { + "name": "combinded_longPress", + "value": "LongPress onAction:" + }, + { + "name": "combinded_offset", + "value": "\nPanGesture offset:\nX:" + }, + { + "name": "combinded_x", + "value": "\nX:" + }, + { + "name": "transform_translate_invert", + "value": "Zoom in twice and reverse (zoom out twice)" + }, + { + "name": "key_press_description", + "value": "Press the external keyboard Tab key, and then press any key" + }, + { + "name": "key_press_keyType", + "value": "KeyType:" + }, + { + "name": "key_press_keyCode", + "value": "\nkeyCode:" + }, + { + "name": "key_press_keyText", + "value": "\nkeyText:" + }, + { + "name": "key_press_down", + "value": "Down" + }, + { + "name": "key_press_up", + "value": "Up" + }, + { + "name": "componentId_longClick", + "value": "longClick" + }, + { + "name": "componentId_onTouch", + "value": "onTouch" + }, + { + "name": "componentId_onMouse", + "value": "onMouse" + }, + { + "name": "flex_auto", + "value": "auto" + }, + { + "name": "april", + "value": "april" + }, + { + "name": "bind_click", + "value": "Click me" + }, + { + "name": "action_sheet_dialog", + "value": "ActionSheetDialog" + }, + { + "name": "action_sheet_click_sheets", + "value": "Click options content" + }, + { + "name": "text_picker_text_peach", + "value": "peach" + }, + { + "name": "text_picker_text_apple", + "value": "apple" + }, + { + "name": "text_picker_text_orange", + "value": "orange" + }, + { + "name": "text_picker_text_grape", + "value": "grape" + }, + { + "name": "text_picker_text_banana", + "value": "banana" + }, + { + "name": "text_picker_dialog", + "value": "TextPickerDialog" + }, + { + "name": "text_picker_show", + "value": "Show test dialog" + }, + { + "name": "row_title", + "value": "Row" + }, + { + "name": "row_introduction_arguments", + "value": "Modifying Row parameters" + }, + { + "name": "row_introduction_properties", + "value": "Modifying Row properties" + }, + { + "name": "row_element_spacing", + "value": "element spacing" + }, + { + "name": "row_alignitems_top", + "value": "Top" + }, + { + "name": "row_alignitems_bottom", + "value": "Bottom" + }, + { + "name": "row_alignitems_center", + "value": "Center" + }, + { + "name": "row_justifycontent_start", + "value": "Start" + }, + { + "name": "row_justifycontent_center", + "value": "Center" + }, + { + "name": "row_justifycontent_end", + "value": "End" + }, + { + "name": "row_justifycontent_spacebetween", + "value": "SpaceBetween" + }, + { + "name": "row_justifycontent_spacearound", + "value": "SpaceAround" + }, + { + "name": "row_justifycontent_spaceevenly", + "value": "SpaceEvenly" + }, + { + "name": "row_justifycontent_description", + "value": "Spindle alignment\nformat" + }, + { + "name": "row_alignitems_description", + "value": "Cross axis alignment\nformat" + }, + { + "name": "row_introduction_tips", + "value": "Tips:" + }, + { + "name": "row_tips", + "value": "When the spindle is of type SpaceBetween, SpaceAround, or SpaceEven, the parameter space of the Row component does not take effect" + }, + { + "name": "rowsplit_title", + "value": "RowSplit Indicates the horizontal split layout" + }, + { + "name": "rowsplit_introduction_properties", + "value": "Modify the drag-and-drop property of RowSplit" + }, + { + "name": "rowsplit_drag", + "value": "drag switch" + }, + { + "name": "rowsplit_drag_divider", + "value": "Drag the dividers left and right to change position" + }, + { + "name": "column_title", + "value": "Column" + }, + { + "name": "column_introduction_arguments", + "value": "Modifying Row parameters" + }, + { + "name": "column_introduction_properties", + "value": "Modifying Row properties" + }, + { + "name": "column_element_spacing", + "value": "element spacing" + }, + { + "name": "column_alignitems_start", + "value": "Start" + }, + { + "name": "column_alignitems_end", + "value": "End" + }, + { + "name": "column_alignitems_center", + "value": "Center" + }, + { + "name": "column_justifycontent_start", + "value": "Start" + }, + { + "name": "column_justifycontent_center", + "value": "Center" + }, + { + "name": "column_justifycontent_end", + "value": "End" + }, + { + "name": "column_justifycontent_spacebetween", + "value": "SpaceBetween" + }, + { + "name": "column_justifycontent_spacearound", + "value": "SpaceAround" + }, + { + "name": "column_justifycontent_spaceevenly", + "value": "SpaceEvenly" + }, + { + "name": "column_justifycontent_description", + "value": "Spindle alignment\nformat" + }, + { + "name": "column_alignitems_description", + "value": "Cross axis alignment\nformat" + }, + { + "name": "column_introduction_tips", + "value": "tips:" + }, + { + "name": "column_tips", + "value": "When the spindle is of type SpaceBetween, SpaceAround, or SpaceEven, the parameter space of the Row component does not take effect" + }, + { + "name": "columnsplit_title", + "value": "RowSplit Indicates the vertical split layout" + }, + { + "name": "columnsplit_introduction_properties", + "value": "Modify the drag-and-drop property of ColumnSplit" + }, + { + "name": "columnsplit_drag", + "value": "drag switch" + }, + { + "name": "columnsplit_introduction_drag_divider", + "value": "Drag the split line up and down to change the position" + }, + { + "name": "sidebarcontainer_title", + "value": "SideBarContainer" + }, + { + "name": "sidebarcontainer_content_text", + "value": "SideBarContainer: A sidebar container that provides a sidebar that can be displayed and hidden. The sidebar and content area are defined by subcomponents, the first subcomponent representing the sidebar and the second subcomponent representing the content area. This component is supported starting with API Version 8. If new content is added in later versions, the upper corner mark is used to separately mark the beginning version of the content." + }, + { + "name": "sidebarcontainer_sidebar_text_one", + "value": "Collect" + }, + { + "name": "sidebarcontainer_sidebar_text_two", + "value": "Home" + }, + { + "name": "sidebarcontainer_argument", + "value": "Example Modify SideBarContainer" + }, + { + "name": "sidebarcontainer_property", + "value": "Modify the SideBarContainer property" + }, + { + "name": "sidebarcontainer_argument_type", + "value": "The sidebar shows\nthe type" + }, + { + "name": "sidebarcontainer_type_embed", + "value": "Embed" + }, + { + "name": "sidebarcontainer_type_overlay", + "value": "Overlay" + }, + { + "name": "sidebarcontainer_show_switch", + "value": "Display switch" + }, + { + "name": "sidebarcontainer_left_margin", + "value": "Control button left margin" + }, + { + "name": "sidebarcontainer_top_margin", + "value": "Control button upper margin" + }, + { + "name": "sidebarcontainer_show_button_switch", + "value": "Control button display switch" + }, + { + "name": "sidebarcontainer_position_title", + "value": "The sidebar shows\nthe location" + }, + { + "name": "sidebarcontainer_sidebar_show_position_start", + "value": "Start" + }, + { + "name": "sidebarcontainer_sidebar_show_position_end", + "value": "End" + }, + { + "name": "sidebarcontainer_min_width", + "value": "Minimum width of sidebar" + }, + { + "name": "sidebarcontainer_max_width", + "value": "Maximum width of sidebar" + }, + { + "name": "sidebarcontainer_auto_hide", + "value": "Whether the sidebar is hidden in its\nsmallest state" + }, + { + "name": "sidebarcontainer_divider_width", + "value": "Dividing line width" + }, + { + "name": "sidebarcontainer_drag_divider", + "value": "Drag the divider to change the sidebar size" + }, + { + "name": "sidebarcontainer__is_show_true", + "value": "The sidebar has expanded" + }, + { + "name": "sidebarcontainer__is_show_false", + "value": "The sidebar is closed" + }, + { + "name": "stack_title", + "value": "Stack" + }, + { + "name": "stack_alignments_topstart", + "value": "TopStart" + }, + { + "name": "stack_alignments_top", + "value": "Top" + }, + { + "name": "stack_alignments_topend", + "value": "TopEnd" + }, + { + "name": "stack_alignments_start", + "value": "Start" + }, + { + "name": "stack_alignment_center", + "value": "Center" + }, + { + "name": "stack_alignment_end", + "value": "End" + }, + { + "name": "stack_alignments_bottomstart", + "value": "BottomStart" + }, + { + "name": "stack_alignments_bottom", + "value": "Bottom" + }, + { + "name": "stack_alignments_bottomend", + "value": "BottomEnd" + }, + { + "name": "stack_alignment", + "value": "AlignContent" + }, + { + "name": "stack_introduction", + "value": "The Stack attribute & parameter alignContent is updated" + }, + { + "name": "stack_introduction_zindex", + "value": "sub three zindex" + }, + { + "name": "stack_zindex_four", + "value": "4" + }, + { + "name": "stack_zindex_one", + "value": "1" + }, + { + "name": "stack_zindex", + "value": "ZIndex" + }, + { + "name": "flex_title", + "value": "Flex" + }, + { + "name": "flex_introduction_arguments", + "value": "Modify the Flex elastic layout parameters" + }, + { + "name": "flex_argument_direction", + "value": "direction" + }, + { + "name": "flex_argument_direction_row", + "value": "Row" + }, + { + "name": "flex_argument_direction_row_reverse", + "value": "RowReverse" + }, + { + "name": "flex_argument_direction_column", + "value": "Column" + }, + { + "name": "flex_argument_direction_column_reverse", + "value": "ColumnReverse" + }, + { + "name": "flex_argument_wrap", + "value": "Modify the wrap for\nthis flex" + }, + { + "name": "flex_argument_wrap_no_wrap", + "value": "NoWrap" + }, + { + "name": "flex_argument_wrap_wrap", + "value": "Wrap" + }, + { + "name": "flex_argument_wrap_wrap_reverse", + "value": "WrapReverse" + }, + { + "name": "flex_introduction_direction", + "value": "Change the direction of\nall flex" + }, + { + "name": "flex_argument_justifycontent", + "value": "Revised this Flex\njustifyContent" + }, + { + "name": "flex_argument_justifycontent_start", + "value": "Start" + }, + { + "name": "flex_argument_justifycontent_center", + "value": "Center" + }, + { + "name": "flex_argument_justifycontent_End", + "value": "End" + }, + { + "name": "flex_argument_justifycontent_space_between", + "value": "SpaceBetween" + }, + { + "name": "flex_argument_justifycontent_space_around", + "value": "SpaceAround" + }, + { + "name": "flex_argument_justifycontent_speac_evenly", + "value": "SpaceEvenly" + }, + { + "name": "flex_argument_alignItems", + "value": "Modify alignItems in\nthis Flex" + }, + { + "name": "flex_argumen_alignItems_auto", + "value": "auto" + }, + { + "name": "flex_argumen_alignItems_start", + "value": "Start" + }, + { + "name": "flex_argumen_alignItems_center", + "value": "Center" + }, + { + "name": "flex_argumen_alignItems_end", + "value": "End" + }, + { + "name": "flex_argumen_alignItems_stretch", + "value": "Stretch" + }, + { + "name": "flex_argumen_alignItems_baseline", + "value": "Baseline" + }, + { + "name": "flex_argument_alignContent", + "value": "Modify the alignContent\nof this Flex" + }, + { + "name": "gridrow_title", + "value": "GridRow Grid system" + }, + { + "name": "gridrow_introdional_arguments", + "value": "Modify the GridRow parameters" + }, + { + "name": "gridrow_columns", + "value": "columns" + }, + { + "name": "gridrow_gutterX", + "value": "gutterX" + }, + { + "name": "gridrow_gutterY", + "value": "gutterY" + }, + { + "name": "image_video_and_media", + "value": "Image Video And Media" + }, + { + "name": "image_title", + "value": "Image" + }, + { + "name": "image_animator_title", + "value": "ImageAnimator" + }, + { + "name": "video_title", + "value": "Video" + }, + { + "name": "plugin_component_title", + "value": "PluginComponent" + }, + { + "name": "xcomponent_title", + "value": "XComponent" + }, + { + "name": "image_show_test", + "value": "Show the image" + }, + { + "name": "image_object_fit", + "value": "ObjectFit" + }, + { + "name": "image_sourcesize_height", + "value": "SizeHeight" + }, + { + "name": "image_sourcesize_width", + "value": "SizeWidth" + }, + { + "name": "object_fit_cover", + "value": "Cover" + }, + { + "name": "object_fit_contain", + "value": "Contain" + }, + { + "name": "object_fit_auto", + "value": "Auto" + }, + { + "name": "object_fit_fill", + "value": "Fill" + }, + { + "name": "object_fit_scale_down", + "value": "ScaleDown" + }, + { + "name": "object_fit_none", + "value": "None" + }, + { + "name": "object_fit_change", + "value": "ObjectFitChange" + }, + { + "name": "image_sourcesize_change", + "value": "SourceSizeChange" + }, + { + "name": "image_rendermode_original", + "value": "RenderModeOriginal" + }, + { + "name": "image_rendermode_template", + "value": "RenderModeTemplate" + }, + { + "name": "image_renderMode_change", + "value": "RenderMode\nChange" + }, + { + "name": "image_repeat_xy", + "value": "RepeatXY" + }, + { + "name": "image_repeat_x", + "value": "RepeatX" + }, + { + "name": "image_repeat_y", + "value": "RepeatY" + }, + { + "name": "image_repeat_no", + "value": "NoRepeat" + }, + { + "name": "image_repeat_change", + "value": "RepeatChange" + }, + { + "name": "image_fill_color_title", + "value": "FillColorTitle" + }, + { + "name": "image_animator_show", + "value": "ImageAnimatorShow" + }, + { + "name": "image_animator_control", + "value": "ImageAnimatorControl" + }, + { + "name": "video_show", + "value": "VideoShow" + }, + { + "name": "video_auto_play", + "value": "AutoPlay" + }, + { + "name": "video_controls_show", + "value": "ControlsShow" + }, + { + "name": "video_muted_show", + "value": "MutedShow" + }, + { + "name": "video_fit_change", + "value": "VideoFit" + }, + { + "name": "video_loop_show", + "value": "LoopShow" + }, + { + "name": "video_current_rate_change", + "value": "CurrentRateChange" + }, + { + "name": "video_play_mode", + "value": "VideoPlayMode" + }, + { + "name": "video_play_switch", + "value": "VideoPlaySwitch" + }, + { + "name": "web_title", + "value": "Web (Connect to the network)" + }, + { + "name": "web_show", + "value": "WebShow" + }, + { + "name": "web_use_reason", + "value": "reason" + }, + { + "name": "xcomponent_show", + "value": "XComponentShow" + }, + { + "name": "textarea_title", + "value": "TextArea" + }, + { + "name": "patternlock_title", + "value": "PatternLock" + }, + { + "name": "search_title", + "value": "Search" + }, + { + "name": "textarea_textalign_start", + "value": "Start" + }, + { + "name": "textarea_textalign_center", + "value": "Center" + }, + { + "name": "textarea_textalign_end", + "value": "End" + }, + { + "name": "textareaa_textalign_change", + "value": "textAreatextAlignChange" + }, + { + "name": "textarea_show", + "value": "TextAreaShow" + }, + { + "name": "textarea_control", + "value": "TextAreaControl" + }, + { + "name": "textarea_copyoptions_none", + "value": "None" + }, + { + "name": "textarea_copyoptions_inapp", + "value": "InApp" + }, + { + "name": "textarea_copyoptions_localdevice", + "value": "LocalDevice" + }, + { + "name": "textarea_copyoptions_change", + "value": "CopyOptionsChange" + }, + { + "name": "textarea_placeholder_change", + "value": "PlaceholderChange" + }, + { + "name": "textarea_caretcolor_change", + "value": "CaretcolorChage" + }, + { + "name": "patternlock_active_color", + "value": "Pattern Lock Active\nColor" + }, + { + "name": "patternlock_path_color", + "value": "Pattern Lock Path\nColor" + }, + { + "name": "patternlock_select_color", + "value": "Pattern Lock Select\nColor" + }, + { + "name": "patternlock_regular_color", + "value": "Pattern Lock Regular\nColor" + }, + { + "name": "patternlock_side_length", + "value": "PatternLockSideLength" + }, + { + "name": "patternlock_circle_radius", + "value": "PatternLockCircleRadius" + }, + { + "name": "patternlock_pathstroke_width", + "value": "PatternLockPathStrokeWidth" + }, + { + "name": "patternlock_change", + "value": "PatternLockChange" + }, + { + "name": "search_textalign_change", + "value": "Search Text Align\nChange" + }, + { + "name": "search_placeholder_change", + "value": "Search Place holder\nChange" + }, + { + "name": "search_copyOption_change", + "value": "Search Copy Option\nChange" + }, + { + "name": "search_change", + "value": "SearchChange" + }, + { + "name": "list_title", + "value": "List" + }, + { + "name": "list_introduction_arguments", + "value": "Modifying List arguments" + }, + { + "name": "list_introduction_properties", + "value": "Modifying List properties" + }, + { + "name": "list_introduction_state", + "value": "Status bar" + }, + { + "name": "list_properties_direction", + "value": "listDirection" + }, + { + "name": "list_properties_direction_vertical", + "value": "Vertical" + }, + { + "name": "list_properties_direction_Horizontal", + "value": "Horizontal" + }, + { + "name": "list_argument_space", + "value": "space" + }, + { + "name": "list_properties_divider_stroke_width", + "value": "divider - strokeWidth" + }, + { + "name": "list_properties_divider_color", + "value": "divider - color" + }, + { + "name": "list_properties_scroll_bar", + "value": "scrollBar" + }, + { + "name": "list_properties_scroll_bar_off", + "value": "Off" + }, + { + "name": "list_properties_scroll_bar_on", + "value": "On" + }, + { + "name": "list_properties_scroll_bar_auto", + "value": "Auto" + }, + { + "name": "list_properties_initial_index", + "value": "initialIndex" + }, + { + "name": "list_properties_edge_effect", + "value": "edgeEffect" + }, + { + "name": "list_properties_edge_effect_spring", + "value": "Spring" + }, + { + "name": "list_properties_edge_effect_fade", + "value": "Fade" + }, + { + "name": "list_properties_edge_effect_none", + "value": "None" + }, + { + "name": "list_properties_chain_animation", + "value": "chainAnimation" + }, + { + "name": "list_properties_multi_selectable", + "value": "multiSelectable " + }, + { + "name": "list_properties_lanes", + "value": "lanes" + }, + { + "name": "list_properties_align_list_item", + "value": "alignListItem" + }, + { + "name": "list_properties_align_list_item_start", + "value": "Start" + }, + { + "name": "list_properties_align_list_item_Center", + "value": "Center" + }, + { + "name": "list_properties_align_list_item_End", + "value": "End" + }, + { + "name": "list_introduction_delete", + "value": "Left-click item to delete it" + }, + { + "name": "list_item_title", + "value": "ListItem" + }, + { + "name": "list_item_properties_selectable", + "value": "selectable" + }, + { + "name": "list_item_introduction_drag", + "value": "Drag the item with your mouse to see the selectable property effect" + }, + { + "name": "list_item_introduction_properties", + "value": "Modify the properties of ListItem" + }, + { + "name": "grid_title", + "value": "Grid" + }, + { + "name": "grid_item_title", + "value": "GridItem" + }, + { + "name": "grid_properties_columns_template", + "value": "Control the third column" + }, + { + "name": "grid_properties_columns_gap", + "value": "columnsGap" + }, + { + "name": "girid_properties_rows_gap", + "value": "rowsGap" + }, + { + "name": "grid_properties_layout_direction", + "value": "layoutDirection" + }, + { + "name": "grid_properties_layout_direction_row", + "value": "Row" + }, + { + "name": "grid_properties_layout_direction_column", + "value": "Column" + }, + { + "name": "grid_properties_layout_direction_row_reverse", + "value": "RowReverse" + }, + { + "name": "grid_properties_layout_direction_column_reverse", + "value": "ColumnReverse" + }, + { + "name": "grid_properties_rows_template", + "value": "Control the third row" + }, + { + "name": "grid_item_introduction", + "value": "Change the position of 1" + }, + { + "name": "grid_item_row_start", + "value": "Change the start\nline number" + }, + { + "name": "grid_item_row_end", + "value": "Modify the end\nline number" + }, + { + "name": "grid_item_column_start", + "value": "Change the start\ncolumn number" + }, + { + "name": "grid_item_column_end", + "value": "Modify the end\ncolumn number" + }, + { + "name": "swiper_title", + "value": "swiper" + }, + { + "name": "swiper_introduction", + "value": "Swipe left or right to switch pages" + }, + { + "name": "swiper_introduction_arguments", + "value": "SwiperController Controller" + }, + { + "name": "swiper_introduction_properties", + "value": "Modify the properties of Swiper" + }, + { + "name": "swiper_properties_disable_swipe", + "value": "Disable left and right swipe switch" + }, + { + "name": "swiper_properties_item_space", + "value": "Space between sliding pages" + }, + { + "name": "swiper_properties_vertical", + "value": "Is it vertical sliding" + }, + { + "name": "swiper_properties_duration", + "value": "Slide switch animation\n(unit: ms)" + }, + { + "name": "swiper_properties_loop", + "value": "Enable loop from beginning to end" + }, + { + "name": "swiper_properties_auto_play", + "value": "Enable automatic loop playback" + }, + { + "name": "swiper_properties_interval", + "value": "Autoplay interval\n(unit: ms)" + }, + { + "name": "swiper_controller_next", + "value": "Next page" + }, + { + "name": "swiper_controller_previous", + "value": "Previous page" + }, + { + "name": "navRouter_title", + "value": "NavRouter" + }, + { + "name": "navigation_title", + "value": "Navigation" + }, + { + "name": "navigation_first_page", + "value": "First page of Navigation" + }, + { + "name": "navigation_second_page", + "value": "Second page of Navigation" + }, + { + "name": "navigation_third_page", + "value": "Third page of Navigation" + }, + { + "name": "navigation_first_page_push", + "value": "Go to the second page" + }, + { + "name": "navigation_first_page_active", + "value": "Click to toggle activate status" + }, + { + "name": "navigation_second_page_push", + "value": "Go to the third page" + }, + { + "name": "navigation_third_page_back", + "value": "Go back to the first page" + }, + { + "name": "tabs_title", + "value": "Tabs" + }, + { + "name": "tabs_introduction_arguments", + "value": "Modify the parameters of Tabs" + }, + { + "name": "tabs_introduction_properties", + "value": "Modify the properties of Tabs" + }, + { + "name": "tabs_arguments_bar_position", + "value": "barPosition" + }, + { + "name": "tabs_arguments_bar_position_start", + "value": "Start" + }, + { + "name": "tabs_arguments_bar_position_end", + "value": "End" + }, + { + "name": "tabs_properties_vertical", + "value": "vertical" + }, + { + "name": "tabs_properties_bar_mode", + "value": "barMode" + }, + { + "name": "tabs_properties_bar_mode_fixed", + "value": "Fixed" + }, + { + "name": "tabs_properties_bar_scrollable", + "value": "Scrollable" + }, + { + "name": "tabs_properties_is_scrollable", + "value": "scrollable" + }, + { + "name": "tabs_properties_animation_duration", + "value": "animationDuration(ms)" + }, + { + "name": "tabs_arguments_controller", + "value": "Switches to the\nspecified index" + }, + { + "name": "tab_content_title", + "value": "TabContent" + }, + { + "name": "tab_content_introduction", + "value": "Subtab/Bottom tab switcher" + }, + { + "name": "tab_content_side", + "value": "Switch sidebar" + }, + { + "name": "stepper_title", + "value": "Stepper&StepperItem" + }, + { + "name": "canvas_title", + "value": "Canvas" + }, + { + "name": "circle_title", + "value": "Circle" + }, + { + "name": "ellipse_title", + "value": "Ellipse" + }, + { + "name": "line_title", + "value": "Line" + }, + { + "name": "polyline_title", + "value": "Polyline" + }, + { + "name": "path_title", + "value": "Path" + }, + { + "name": "polygon_title", + "value": "Polygon" + }, + { + "name": "rect_title", + "value": "Rect" + }, + { + "name": "shape_title", + "value": "Shape" + }, + { + "name": "circle_change", + "value": "CircleChange" + }, + { + "name": "circle_change_fill", + "value": "CircleChangeFill" + }, + { + "name": "circle_change_radius", + "value": "CircleRadius" + }, + { + "name": "circle_change_fillopacity", + "value": "CircleChangeFillOpacity" + }, + { + "name": "circle_change_strokewidth", + "value": "CircleStrokeWidth" + }, + { + "name": "circle_stroke_dash", + "value": "CircleStrokeDash" + }, + { + "name": "circle_stroke_color", + "value": "CircleStokeColor" + }, + { + "name": "circle_stroke_opacity", + "value": "CircleStrokeOpacity" + }, + { + "name": "ellipse_fill", + "value": "EllipseFill" + }, + { + "name": "ellipse_stroke_color", + "value": "EllipseStrokeColor" + }, + { + "name": "ellipse_stroke_width", + "value": "EllipseStrokeWidth" + }, + { + "name": "ellipse_width", + "value": "EllipseWidth" + }, + { + "name": "ellipse_height", + "value": "EllipseHeight" + }, + { + "name": "ellipse_fill_opacity", + "value": "EllipseFillOpacity" + }, + { + "name": "ellipse_stroke_opacity", + "value": "EllipseStrokeOpacity" + }, + { + "name": "ellipse_stroke_dash", + "value": "EllipseStrokeDash" + }, + { + "name": "line_start_point_x", + "value": "LineStartPointX" + }, + { + "name": "line_start_point_y", + "value": "LineStartPointY" + }, + { + "name": "line_end_point_x", + "value": "LineEndPointY" + }, + { + "name": "line_end_point_y", + "value": "LineEndPointY" + }, + { + "name": "line_stroke_width", + "value": "LineSrokeWidth" + }, + { + "name": "line_stroke_color", + "value": "LineStrokeColor" + }, + { + "name": "line_stroke_opacity", + "value": "LineStrokeOpacity" + }, + { + "name": "line_stroke_dash", + "value": "LineStrokeDash" + }, + { + "name": "polygon_fill", + "value": "PolygonFill" + }, + { + "name": "polygon_fill_opacity", + "value": "PolygonFillOpacity" + }, + { + "name": "polygon_stroke_color", + "value": "PolygonStrokeColor" + }, + { + "name": "polygon_stroke_opacity", + "value": "PolygonStrokeOpacity" + }, + { + "name": "polygon_stroke_width", + "value": "PolygonStrokeWidth" + }, + { + "name": "polygon_stroke_dash", + "value": "PolygonStrokeDash" + }, + { + "name": "polyline_first_x", + "value": "PolylineFirstX" + }, + { + "name": "polyline_first_y", + "value": "PolylineFirstY" + }, + { + "name": "polyline_second_x", + "value": "PolylineSecondX" + }, + { + "name": "polyline_second_y", + "value": "PolylineSecondY" + }, + { + "name": "polyline_third_x", + "value": "PolylineThirdX" + }, + { + "name": "polyline_third_y", + "value": "PolylineThirdY" + }, + { + "name": "polyline_stroke_width", + "value": "PolylineStrokeWidth" + }, + { + "name": "polyline_stroke_color", + "value": "PolylineStrokeColor" + }, + { + "name": "polyline_stroke_dash", + "value": "PolylineStrokeDash" + }, + { + "name": "polyline_stroke_opacity", + "value": "PolylineStrokeOpacity" + }, + { + "name": "rect_height", + "value": "RectHeight" + }, + { + "name": "rect_width", + "value": "RectWidth" + }, + { + "name": "rect_radius_width", + "value": "RectRadiusWidth" + }, + { + "name": "rect_radius_height", + "value": "RectRadiusHeight" + }, + { + "name": "rect_fill_opacity", + "value": "RectFillOpacity" + }, + { + "name": "rect_stroke", + "value": "RectStroke" + }, + { + "name": "rect_stroke_width", + "value": "RectStrokeWidth" + }, + { + "name": "rect_stroke_dash", + "value": "RectSrokeDash" + }, + { + "name": "rect_stroke_opacity", + "value": "RectStrokeOpacity" + }, + { + "name": "rect_fill", + "value": "RectFill" + }, + { + "name": "path_line", + "value": "PathLine" + }, + { + "name": "path_triangle", + "value": "PathTriangle" + }, + { + "name": "path_square", + "value": "PathSquare" + }, + { + "name": "path_polygon", + "value": "PathPolygon" + }, + { + "name": "path_camber_first", + "value": "PathCamberFirst" + }, + { + "name": "path_camber_second", + "value": "PathCamberSecond" + }, + { + "name": "path_camber_third", + "value": "PathCamberThird" + }, + { + "name": "path_commands_select", + "value": "PathCommands" + }, + { + "name": "path_fill", + "value": "PathFill" + }, + { + "name": "path_fill_opacity", + "value": "PathFillOpacity" + }, + { + "name": "path_stroke_color", + "value": "PathStrokeColor" + }, + { + "name": "path_stroke_opacity", + "value": "PathStrokeOpacity" + }, + { + "name": "path_stroke_dash", + "value": "PathStrokeDash" + }, + { + "name": "path_stroke_width", + "value": "PathStrokeWidth" + }, + { + "name": "shape_fill", + "value": "ShapeFill" + }, + { + "name": "shape_stroke_color", + "value": "ShapeStrokeColor" + }, + { + "name": "shape_view_port_x", + "value": "ShapeViewPortX" + }, + { + "name": "shape_view_port_y", + "value": "ShapeViewPortY" + }, + { + "name": "shape_view_port_width", + "value": "ShapeViewPortWidth" + }, + { + "name": "shape_view_port_height", + "value": "ShapeViewPortHeight" + }, + { + "name": "shape_stroke_opacity", + "value": "ShapeStrokeOpacity" + }, + { + "name": "shape_fill_opacity", + "value": "ShapeFillOpacity" + }, + { + "name": "shape_stroke_width", + "value": "ShapeStrokeWidth" + }, + { + "name": "shape_stroke_dash", + "value": "ShapeStrokeDash" + }, + { + "name": "web", + "value": "Web" + }, + { + "name": "canvas_components", + "value": "Canvas components" + }, + { + "name": "canvas_component_attributes", + "value": "Base attributes" + }, + { + "name": "canvas_component_transform", + "value": "Transform" + }, + { + "name": "canvas_component_gradient", + "value": "CanvasGradient" + }, + { + "name": "canvas_component_path_2d", + "value": "Path2D" + }, + { + "name": "canvas_component_image_bitmap", + "value": "ImageBitmap" + }, + { + "name": "canvas_component_method", + "value": "Base methods" + }, + { + "name": "canvas_fillStyle", + "value": "fillStyle" + }, + { + "name": "canvas_lineWidth", + "value": "lineWidth" + }, + { + "name": "canvas_strokeStyle", + "value": "strokeStyle" + }, + { + "name": "canvas_lineCap", + "value": "lineCap" + }, + { + "name": "canvas_lineJoin", + "value": "lineJoin" + }, + { + "name": "canvas_miterLimit", + "value": "miterLimit" + }, + { + "name": "canvas_font", + "value": "font" + }, + { + "name": "canvas_textAlign", + "value": "textAlign" + }, + { + "name": "canvas_textBaseline", + "value": "textBaseline" + }, + { + "name": "canvas_globalAlpha", + "value": "globalAlpha" + }, + { + "name": "canvas_lineDashOffset", + "value": "lineDashOffset" + }, + { + "name": "canvas_globalCompositeOperation", + "value": "globalCompositeOperation" + }, + { + "name": "canvas_imageSmoothingEnabled", + "value": "imageSmoothingEnabled" + }, + { + "name": "canvas_createLinearGradient", + "value": "createLinearGradient" + }, + { + "name": "cavas_createRadialGradient", + "value": "createRadialGradient" + }, + { + "name": "canvas_createRadialGradient", + "value": "createRadialGradient" + }, + { + "name": "canvas_fillRect", + "value": "fillRect" + }, + { + "name": "canvas_strokeRect", + "value": "strokeRect" + }, + { + "name": "canvas_fillText", + "value": "fillText" + }, + { + "name": "canvas_strokeText", + "value": "strokeText" + }, + { + "name": "canvas_measureText", + "value": "measureText" + }, + { + "name": "canvas_stroke", + "value": "stroke" + }, + { + "name": "canvas_createPattern", + "value": "createPattern" + }, + { + "name": "canvas_fill", + "value": "fill" + }, + { + "name": "canvas_clip", + "value": "clip" + }, + { + "name": "canvas_rotate", + "value": "rotate" + }, + { + "name": "canvas_scale", + "value": "scale" + }, + { + "name": "canvas_drawImage", + "value": "drawImage" + }, + { + "name": "canvas_getImageData", + "value": "getImageData" + }, + { + "name": "canvas_putImageData", + "value": "putImageData" + }, + { + "name": "canvas_setLineDash", + "value": "setLineDash" + }, + { + "name": "canvas_getLineDash", + "value": "getLineDash" + }, + { + "name": "canvas_transferFromImageBitmap", + "value": "transferFromImageBitmap" + }, + { + "name": "canvas_toDataURL", + "value": "toDataURL" + }, + { + "name": "canvas_canvasZone", + "value": "Canvas Zone" + }, + { + "name": "canvas_attributesOperations", + "value": "Attributes Operations" + }, + { + "name": "canvas_clearEffects", + "value": "Clear Effects" + }, + { + "name": "cavnas_clearRect", + "value": "clearRect" + }, + { + "name": "canvas_clearRect", + "value": "clearRect" + }, + { + "name": "canvas_shadowBlur", + "value": "shadowBlur" + }, + { + "name": "canvas_shadowColor", + "value": "shadowColor" + }, + { + "name": "canvas_shadowOffsetX", + "value": "shadowOffsetX" + }, + { + "name": "canvas_shadowOffsetY", + "value": "shadowOffsetY" + }, + { + "name": "canvas_addColorStop", + "value": "addColorStop" + }, + { + "name": "canvas_beginPath", + "value": "beginPath" + }, + { + "name": "canvas_moveTo", + "value": "moveTo" + }, + { + "name": "canvas_lineTo", + "value": "lineTo" + }, + { + "name": "canvas_closePath", + "value": "closePath" + }, + { + "name": "canvas_bezierCurveTo", + "value": "bezierCurveTo" + }, + { + "name": "canvas_quadraticCurveTo", + "value": "quadraticCurveTo" + }, + { + "name": "canvas_arc", + "value": "arc" + }, + { + "name": "canvas_arcTo", + "value": "arcTo" + }, + { + "name": "canvas_component_shadow", + "value": "Shadows" + }, + { + "name": "canvas_ellipse", + "value": "ellipse" + }, + { + "name": "canvas_rect", + "value": "rect" }, { "name": "canvas_show_message", "value": "Printed to the console" }, + { + "name": "canvas_transform", + "value": "transform" + }, + { + "name": "canvas_setTransform", + "value": "setTransform" + }, + { + "name": "canvas_translate", + "value": "translate" + }, + { + "name": "canvas_imageSmoothingQuality", + "value": "imageSmoothingQuality" + }, { "name": "scroll_To_effect", "value": "ScrollTo effect" @@ -2723,6 +5271,106 @@ "name": "particle_spawn_stop", "value": "Stop" }, + { + "name": "navigator_title", + "value": "Navigator" + }, + { + "name": "navigator_first_page", + "value": "First page of Navigaor" + }, + { + "name": "navigator_second_page", + "value": "Second page of Navigator" + }, + { + "name": "navigator_third_page", + "value": "Third page of Navigator" + }, + { + "name": "navigator_first_page_push", + "value": "Go to the second page" + }, + { + "name": "navigator_first_page_active", + "value": "Click to toggle activate status" + }, + { + "name": "navigator_second_page_push", + "value": "Go to the third page" + }, + { + "name": "navigator_third_page_back", + "value": "Go back to the first page" + }, + { + "name": "navigator_return_message", + "value": "hello! This is a param form the first page" + }, + { + "name": "swipe_action_button", + "value": "Delete" + }, + { + "name": "enter_range", + "value": "Enter the mouse selection range" + }, + { + "name": "remove_range", + "value": "Remove the mouse selection" + }, + { + "name": "status_bar_desc1", + "value": "The current initialIndex is " + }, + { + "name": "status_bar_desc2", + "value": " after modifying initialIndex, please enter this page again to view the effect" + }, + { + "name": "choose_please", + "value": "Choice" + }, + { + "name": "H1_title", + "value": "

h1 Title

" + }, + { + "name": "H1_italic", + "value": "

h1 Italic

" + }, + { + "name": "H1_underline", + "value": "

h1 Underline

" + }, + { + "name": "H2_title", + "value": "

h2 Title

" + }, + { + "name": "H3_title", + "value": "

h3 Title

" + }, + { + "name": "P_common", + "value": "

p Common


" + }, + { + "name": "font_title_desc", + "value": "
" + }, + { + "name": "font_title", + "value": "

font-size 35px,line-height 45px

" + }, + { + "name": "font_content_desc", + "value": "

" + }, + { + "name": "font_content", + "value": "

This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text. This is a paragraph of text.

" + }, { "name": "reason_get_bundle_info", "value": "Allow the app to query information of other apps in component display scenarios" diff --git a/entry/src/main/resources/zh_CN/element/string.json b/entry/src/main/resources/zh_CN/element/string.json index 60a77b03c80870e4a9ae75d16bccdd44e17d27b7..9a5fe25d2a195a12b757e4daba9de6784f2218d0 100644 --- a/entry/src/main/resources/zh_CN/element/string.json +++ b/entry/src/main/resources/zh_CN/element/string.json @@ -560,6 +560,10 @@ "name": "button_with_icon", "value": "图标按钮" }, + { + "name": "button_with_icon_en", + "value": "图标按钮" + }, { "name": "button_custom_bg_color", "value": "自定义颜色" @@ -2565,11 +2569,11 @@ }, { "name": "flex", - "value": "flex布局" + "value": "Flex布局" }, { "name": "flex_flexBasis", - "value": "flexBasis" + "value": "FlexBasis" }, { "name": "flex_flexGrow", @@ -2693,7 +2697,7 @@ }, { "name": "transform_translate_text", - "value": "平移 x: 40, y: 40, z: 20" + "value": "平移 x: 40, \ny: 40, z: 20" }, { "name": "transform_scale_text", @@ -3265,7 +3269,7 @@ }, { "name": "flex_argument_wrap", - "value": "修改本 flex 的 wrap" + "value": "修改本flex的wrap" }, { "name": "flex_argument_wrap_no_wrap", @@ -3281,11 +3285,11 @@ }, { "name": "flex_introduction_direction", - "value": "修改全部 Flex 的 direction" + "value": "修改全部Flex的direction" }, { "name": "flex_argument_justifycontent", - "value": "修改本 Flex 的 justifyContent" + "value": "修改本Flex的\njustifyContent" }, { "name": "flex_argument_justifycontent_start", @@ -3313,7 +3317,7 @@ }, { "name": "flex_argument_alignItems", - "value": "修改本 Flex 的 alignItems" + "value": "修改本Flex的alignItems" }, { "name": "flex_argumen_alignItems_auto", @@ -3341,7 +3345,7 @@ }, { "name": "flex_argument_alignContent", - "value": "修改本 Flex 的 alignContent" + "value": "修改本Flex的\nalignContent" }, { "name": "gridrow_title", @@ -3717,7 +3721,7 @@ }, { "name": "list_properties_chain_animation", - "value": "chainAnimation(需要 edgeEffect 为 Spring)" + "value": "chainAnimation\n(需要 edgeEffect 为 Spring)" }, { "name": "list_properties_multi_selectable", @@ -3857,7 +3861,7 @@ }, { "name": "swiper_properties_duration", - "value": "滑动切换的动画时长(单位: ms)" + "value": "滑动切换的动画时长\n(单位: ms)" }, { "name": "swiper_properties_loop", @@ -3869,7 +3873,7 @@ }, { "name": "swiper_properties_interval", - "value": "自动播放的时间间隔(单位: ms)" + "value": "自动播放的时间间隔\n(单位: ms)" }, { "name": "swiper_controller_next", @@ -3965,7 +3969,7 @@ }, { "name": "tabs_arguments_controller", - "value": "(TabsController)切换到指定索引" + "value": "TabsController\n切换到指定索引" }, { "name": "tab_content_title", @@ -4391,6 +4395,118 @@ "name": "navigator_return_message", "value": "hello! 这是第一个页面传过来的参数" }, + { + "name": "side_bar_type_embed", + "value": "嵌入" + }, + { + "name": "side_bar_type_overlay", + "value": "覆盖" + }, + { + "name": "side_bar_type_auto", + "value": "自动" + }, + { + "name": "swipe_action_button", + "value": "删除" + }, + { + "name": "enter_range", + "value": "进入鼠标框选范围" + }, + { + "name": "remove_range", + "value": "移除鼠标框选范围" + }, + { + "name": "status_bar_desc1", + "value": "当前 initialIndex 为" + }, + { + "name": "status_bar_desc2", + "value": "修改 initialIndex 后请再次进去本页面查看效果" + }, + { + "name": "prop_bluefont", + "value": "#409EFF" + }, + { + "name": "prop_orangefont", + "value": "#E6A23C" + }, + { + "name": "prop_pinkfont", + "value": "#F56C6C" + }, + { + "name": "size_transition_flex", + "value": "Flex" + }, + { + "name": "size_transition_grid_item", + "value": "GridItem" + }, + { + "name": "size_transition_list_item", + "value": "ListItem" + }, + { + "name": "size_transition_swiper_item", + "value": "SwiperItem" + }, + { + "name": "size_transition_font_size", + "value": "FontSize" + }, + { + "name": "size_transition_expansion_tabContent", + "value": "TabContent" + }, + { + "name": "choose_please", + "value": "请选择" + }, + { + "name": "H1_title", + "value": "

h1标题

" + }, + { + "name": "H1_italic", + "value": "

h1斜体

" + }, + { + "name": "H1_underline", + "value": "

h1下划线

" + }, + { + "name": "H2_title", + "value": "

h2标题

" + }, + { + "name": "H3_title", + "value": "

h3标题

" + }, + { + "name": "P_common", + "value": "

p常规


" + }, + { + "name": "font_title_desc", + "value": "
" + }, + { + "name": "font_title", + "value": "

字体大小35px,行高45px

" + }, + { + "name": "font_content_desc", + "value": "

" + }, + { + "name": "font_content", + "value": "

这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字

" + }, { "name": "reason_get_bundle_info", "value": "允许应用在组件展示场景中查询其他应用的信息" diff --git a/screenshots/devices/animation.en.png b/screenshots/devices/animation.en.png new file mode 100644 index 0000000000000000000000000000000000000000..5053b9fd70002424d58a6f0ce9dba89ba1537ff7 Binary files /dev/null and b/screenshots/devices/animation.en.png differ diff --git a/screenshots/devices/button.en.png b/screenshots/devices/button.en.png new file mode 100644 index 0000000000000000000000000000000000000000..8a58ca894c64c0c050aa176fcff897497af40c24 Binary files /dev/null and b/screenshots/devices/button.en.png differ diff --git a/screenshots/devices/click_event.en.png b/screenshots/devices/click_event.en.png new file mode 100644 index 0000000000000000000000000000000000000000..10d7dfa607f5c6c83842c34a2f47af3ab2e87dcb Binary files /dev/null and b/screenshots/devices/click_event.en.png differ diff --git a/screenshots/devices/component.en.png b/screenshots/devices/component.en.png new file mode 100644 index 0000000000000000000000000000000000000000..2899c522fc1bd2c23eb96a4795961b07b717e169 Binary files /dev/null and b/screenshots/devices/component.en.png differ diff --git a/screenshots/devices/general.en.png b/screenshots/devices/general.en.png new file mode 100644 index 0000000000000000000000000000000000000000..886f7293668f3680578eed7ff75691604bc0431b Binary files /dev/null and b/screenshots/devices/general.en.png differ diff --git a/screenshots/devices/global.en.png b/screenshots/devices/global.en.png new file mode 100644 index 0000000000000000000000000000000000000000..daa5c9dfdfeab4a2627982d37f152bf91d7502c0 Binary files /dev/null and b/screenshots/devices/global.en.png differ diff --git a/screenshots/devices/share_element_transition.en.png b/screenshots/devices/share_element_transition.en.png new file mode 100644 index 0000000000000000000000000000000000000000..a018bc93c3e29282b9425e0c1bc68573145dc1dc Binary files /dev/null and b/screenshots/devices/share_element_transition.en.png differ diff --git a/screenshots/devices/warning_popup.en.png b/screenshots/devices/warning_popup.en.png new file mode 100644 index 0000000000000000000000000000000000000000..0c8143e4ec65ae71f9be2a1924d9f531d6185197 Binary files /dev/null and b/screenshots/devices/warning_popup.en.png differ