# ohos_highlightguide **Repository Path**: dingchaobing/ohos_highlightguide ## Basic Information - **Project Name**: ohos_highlightguide - **Description**: 基于OpenHarmony的快速实现新手引导层的库，通过简洁链式调用，快速实现引导层的显示。 - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: https://gitee.com/openharmony-sig/ohos_highlightguide - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 12 - **Created**: 2024-12-24 - **Last Updated**: 2024-12-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # ohos_highlightguide ## Introduction **ohos_highlightguide** provides APIs for quickly implementing guide layers, which help users focus on key features by highlighting specific areas of the interface against a dimmed background. ## How to Install 1. Install @ohos/high_light_guide. ``` ohpm install @ohos/high_light_guide ``` For details about the OpenHarmony ohpm environment configuration, see [OpenHarmony HAR](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.en.md). 2. Import the guide page components, for example, **Index.ets**. ``` import { HighLightGuideBuilder,HighLightGuideComponent,Controller,GuidePage,HighLightShape,RectF} from '@ohos/high_light_guide' ``` ## How to Use ``` // Import the guide page and other necessary components. import { Controller, GuidePage, HighLightGuideBuilder, HighLightGuideComponent, RectF } from '@ohos/high_light_guide' private builder: HighLightGuideBuilder | null = null; private controller: Controller | null = null; // Initialize HighLightGuideBuilder. aboutToAppear() { this.builder = new HighLightGuideBuilder() .setLabel('guide1') .alwaysShow(true) .addGuidePage(GuidePage.newInstance() .addHighLight('Simple') .addHighLight(new RectF(0, 310, 200, 360)) .setHighLightIndicator(this.SimpleIndicator)) } build() { Column() { Stack() { // Define the guide page layout. HighLightGuideComponent({ highLightContainer: this.HighLightComponent, // Container for the highlight guide component. currentHLIndicator: null, // Highlight indicator, which is set to null initially. builder: this.builder, // builder instance that defines the guide page configuration. onReady: (controller: Controller) => { // Callback used to obtain the guide page controller when the guide page is ready. this.controller = controller; } }) } } .width('100%') } @Builder private HighLightComponent() { Column() { ... // Layout. }.alignItems(HorizontalAlign.Start) .width('100%') .height('100%'); } @Builder private SimpleIndicator() { ... // Indicator settings. } ``` ## Available APIs **HighLightGuideBuilder** A class used to configure and build highlight guide pages. **setLabel** public setLabel(label: string): HighLightGuideBuilder; Sets a label for the guide page to track how many times the guide page has been shown. **Parameters** | Name | Type | Mandatory| Description | |-------|--------| ---- |-----------| | label | string | Yes | Name of the label to set.| **Return value** | Type | Description | | ------ |---------------| | HighLightGuideBuilder | **HighLightGuideBuilder** instance.| **setShowCounts** public setShowCounts(count: number): HighLightGuideBuilder; Sets the maximum number of times that the guide page can be shown. The value must be a positive integer. This parameter is invalid when **alwaysShow** is set to **true**. **Parameters** | Name| Type | Mandatory| Description | | ------ | ------ | ---- | ------------------ | | count | number | Yes | Maximum number of times that the guide page can be shown.| **Return value** | Type | Description | | --------------------- | -------------------------- | | HighLightGuideBuilder | **HighLightGuideBuilder** instance.| **alwaysShow** public alwaysShow(isAlways: boolean): HighLightGuideBuilder; Sets whether a component is always shown. This API takes precedence over **setShowCounts**. If it is set to **true**, **setShowCounts** will be overridden. | Name | Type | Mandatory| Description | | -------- | ------- | ---- | -------------------- | | isAlways | boolean | Yes | Whether the guide page is always shown.| **Return value** | Type | Description | | --------------------- | -------------------------- | | HighLightGuideBuilder | **HighLightGuideBuilder** instance.| **addGuidePage** public addGuidePage(page: GuidePage): HighLightGuideBuilder; Adds a guide page to the builder. | Name| Type | Mandatory| Description | | ------ | --------- | ---- | ------------ | | page | GuidePage | Yes | Configuration of the guide page.| **Return value** | Type | Description | | --------------------- | -------------------------- | | HighLightGuideBuilder | **HighLightGuideBuilder** instance.| **setOnGuideChangedListener** public setOnGuideChangedListener(listener: OnGuideChangedListener | null): HighLightGuideBuilder; Sets a listener to handle events when the guide page is shown or removed. **Parameters** | Name | Type | Mandatory| Description | | -------- |------------------------------------| ---- | ------------------------ | | listener | OnGuideChangedListener | null | Yes | Listener to add.| **OnGuideChangedListener** | API | Parameter | Description | | --------- | --------------------- | ---------- | | onShowed | controller:Controller | Callback to be invoked when the guide page is shown.| | onRemoved | controller:Controller | Callback to be invoked when the guide page is removed.| **Return value** | Type | Description | | --------------------- | -------------------------- | | HighLightGuideBuilder | **HighLightGuideBuilder** instance.| **setOnPageChangedListener** public setOnPageChangedListener(listener: OnPageChangedListener | null): HighLightGuideBuilder; Sets a listener that responds to page changes in the highlight guide. **Parameters** | Name | Type | Mandatory| Description | | -------- |-----------------------------------| ---- | ------------------------ | | listener | OnPageChangedListener | null | Yes | Listener to set.| **OnPageChangedListener** | API | Parameter | Description | | ------------- | ----------------- | --------------------------- | | onPageChanged | pageIndex: number | Index of the current page.| **Return value** | Type | Description | | --------------------- | -------------------------- | | HighLightGuideBuilder | **HighLightGuideBuilder** instance.| **GuidePage** A class used to configure a guide page. **newInstance** public static newInstance(): GuidePage; Obtains a **GuidePage** instance. **Return value** | Type | Description | | --------- | ---------------------------- | | GuidePage | **GuidePage** instance obtained.| **addHighLight** public addHighLight(componentId: string): GuidePage; Adds a highlight component based on the component ID. The component ID must be unique in the application. By default, the highlighted area is a rectangle. **Parameters** | Name | Type | Mandatory| Description | | ----------- | ------ | ---- | ------------------ | | componentId | string | Yes | Unique ID of the highlight component to add.| **Return value** | Type | Description | | --------- | ---------------------------- | | GuidePage | **GuidePage** instance.| **addHighLight** public addHighLight(componentId: string, shape: HighLightShape): GuidePage; Adds a highlight component with the specified shape. The component ID must be unique in the application. By default, the highlighted area is a rectangle. **Parameters** | Name | Type | Mandatory| Description | | ----------- | -------------- | ---- | ------------------ | | componentId | string | Yes | Unique ID of the highlight component to add.| | shape | HighLightShape | Yes | Shape of the highlight. | **Return value** | Type | Description | | --------- | ---------------------------- | | GuidePage | **GuidePage** instance.| **addHighLight** public addHighLight(componentId: string, shape: HighLightShape, padding: number): GuidePage; Adds a highlight component with the specified shape and padding. The component ID must be unique in the application. By default, the highlighted area is a rectangle. **Parameters** | Name | Type | Mandatory| Description | | ----------- | -------------- | ---- | -------------------------------- | | componentId | string | Yes | Unique ID of the highlight component to add. | | shape | HighLightShape | Yes | Shape of the highlight. | | padding | number | Yes | Margins between the highlighted area and the actual coordinates of the component.| **Return value** | Type | Description | | --------- | ---------------------------- | | GuidePage | **GuidePage** instance.| **addHighLight** public addHighLight(componentId: string, shape: HighLightShape, round: number, padding: number): GuidePage; Adds a highlight component with the specified shape, corner radius (valid only when **shape** is **HighLightShape.ROUND_RECTANGLE**), and padding. The component ID must be unique in the application. By default, the highlighted area is a rectangle. **Parameters** | Name | Type | Mandatory| Description | | ----------- | -------------- | ---- | ------------------------------------ | | componentId | string | Yes | Unique ID of the highlight component to add. | | shape | HighLightShape | Yes | Shape of the highlight. | | round | number | Yes | Corner radius for rounded shapes. | | padding | number | Yes | Margins between the highlighted area and the actual coordinates of the component.| **Return value** | Type | Description | | --------- | ---------------------------- | | GuidePage | **GuidePage** instance.| **addHighLight** public addHighLight(rectF: RectF): GuidePage; Adds a highlight. By default, the highlighted area is a rectangle. **Parameters** | Name| Type | Mandatory| Description | | ------ | ----- | ---- | -------------- | | rectF | RectF | Yes | Highlighted area to add.| **Return value** | Type | Description | | --------- | ---------------------------- | | GuidePage | **GuidePage** instance.| **addHighLight** public addHighLight(rectF: RectF, shape: HighLightShape): GuidePage; Adds a highlight with the specified shape. The default shape is rectangle. | Name| Type | Mandatory| Description | | ------ | -------------- | ---- | ---------------- | | rectF | RectF | Yes | Area to be highlighted. | | shape | HighLightShape | Yes | Shape of the highlight.| **Return value** | Type | Description | | --------- | ---------------------------- | | GuidePage | **GuidePage** instance.| **addHighLight** public addHighLight(rectF: RectF, shape: HighLightShape, round: number): GuidePage; Adds a highlight with the specified shape and corner radius (valid only when **shape** is **HighLightShape.ROUND_RECTANGLE**). The default shape is rectangle. **Parameters** | Name| Type | Mandatory| Description | | ------ | -------------- | ---- | -------------------- | | rectF | RectF | Yes | Area to be highlighted. | | shape | HighLightShape | Yes | Shape of the highlight. | | round | number | Yes | Corner radius for rounded shapes.| **Return value** | Type | Description | | --------- | ---------------------------- | | GuidePage | **GuidePage** instance.| **addHighLightWithOptions** public addHighLightWithOptions(componentId: string, options: HighLightOptions): GuidePage; Adds a highlight with additional options. The value of **componentId** must be unique in the entire application. By default, the highlighted area is a rectangle. The additional options include the click event of the highlighted area, whether to redraw the highlighted image, and whether to update the component position each time the guide page is displayed. **Parameters** | Name | Type | Mandatory| Description | | ----------- | ---------------- | ---- | -------------------- | | componentId | string | Yes | Unique ID of the highlight component to add. | | options | HighLightOptions | Yes | Additional configuration of the highlighted area.| **Return value** | Type | Description | | --------- | ---------------------------- | | GuidePage | **GuidePage** instance.| **addHighLightWithOptions** public addHighLightWithOptions(componentId: string, shape: HighLightShape, options: HighLightOptions): GuidePage; Adds a highlight with the specified shape and additional options. The value of **componentId** must be unique in the entire application. By default, the highlighted area is a rectangle. The additional options include the click event of the highlighted area, whether to redraw the highlighted image, and whether to update the component position each time the guide page is displayed. **Parameters** | Name | Type | Mandatory| Description | | ----------- | ---------------- | ---- | -------------------- | | componentId | string | Yes | Unique ID of the highlight component to add. | | shape | HighLightShape | Yes | Shape of the highlight. | | options | HighLightOptions | Yes | Additional configuration of the highlighted area.| **Return value** | Type | Description | | --------- | ---------------------------- | | GuidePage | **GuidePage** instance.| **addHighLightWithOptions** public addHighLightWithOptions(componentId: string, shape: HighLightShape, round: number, padding: number, options: HighLightOptions): GuidePage; Adds a highlight with the specified shape, corner radius (valid only when **shape** is **HighLightShape.ROUND_RECTANGLE**), padding, and additional options. The value of **componentId** must be unique in the entire application. By default, the highlighted area is a rectangle. The additional options include the click event of the highlighted area, whether to redraw the highlighted image, and whether to update the component position each time the guide page is displayed. **Parameters** | Name | Type | Mandatory| Description | | ----------- | ---------------- | ---- | ------------------------------------ | | componentId | string | Yes | Unique ID of the highlight component to add. | | shape | HighLightShape | Yes | Shape of the highlight. | | round | number | Yes | Corner radius for rounded shapes. | | padding | number | Yes | Margins between the highlighted area and the actual coordinates of the component.| | options | HighLightOptions | Yes | Additional configuration of the highlighted area. | **Return value** | Type | Description | | --------- | ---------------------------- | | GuidePage | **GuidePage** instance.| **addHighLight** public addHighLightWithOptions(rectF: RectF, options: HighLightOptions): GuidePage; Adds a highlight with additional options based on a rectangular area. The additional options include the click event of the highlighted area, whether to redraw the highlighted image, and whether to update the component position each time the guide page is displayed. **Parameters** | Name | Type | Mandatory| Description | | ------- | ---------------- | ---- | -------------------- | | rectF | RectF | Yes | Area to be highlighted. | | options | HighLightOptions | Yes | Additional configuration of the highlighted area.| **Return value** | Type | Description | | --------- | ---------------------------- | | GuidePage | **GuidePage** instance.| **addHighLight** public addHighLightWithOptions(rectF: RectF, shape: HighLightShape, options: HighLightOptions): GuidePage; Adds a highlight with the specified shape and additional options based on a rectangular area. The additional options include the click event of the highlighted area, whether to redraw the highlighted image, and whether to update the component position each time the guide page is displayed. **Parameters** | Name | Type | Mandatory| Description | | ------- | ---------------- | ---- | -------------------- | | rectF | RectF | Yes | Area to be highlighted. | | shape | HighLightShape | Yes | Shape of the highlight. | | options | HighLightOptions | Yes | Additional configuration of the highlighted area.| **Return value** | Type | Description | | --------- | ---------------------------- | | GuidePage | **GuidePage** instance.| **addHighLight** public addHighLightWithOptions(rectF: RectF, shape: HighLightShape, round: number, options: HighLightOptions): GuidePage; Adds a highlight with the specified shape, corner radius (valid only when **shape** is **HighLightShape.ROUND_RECTANGLE**), and additional options based on a rectangular area. The additional options include the click event of the highlighted area, whether to redraw the highlighted image, and whether to update the component position each time the guide page is displayed. **Parameters** | Name | Type | Mandatory| Description | | ------- | ---------------- | ---- | -------------------- | | rectF | RectF | Yes | Area to be highlighted. | | shape | HighLightShape | Yes | Shape of the highlight. | | round | number | Yes | Corner radius for rounded shapes.| | options | HighLightOptions | Yes | Additional configuration of the highlighted area.| **Return value** | Type | Description | | --------- | ---------------------------- | | GuidePage | **GuidePage** instance.| **setBackgroundColor** public setBackgroundColor(backgroundColor: string): GuidePage; Sets the background color of the guide page. The default color is **#b2000000**. **Parameters** | Name | Type | Mandatory| Description | | --------------- | ------ | ---- | -------------------- | | backgroundColor | string | Yes | Background color of the guide page to set.| **Return value** | Type | Description | | --------- | ---------------------------- | | GuidePage | **GuidePage** instance.| **getBackgroundColor** public getBackgroundColor(): string; Obtains the background color of the guide page. The default color is **#b2000000**. **Return value** | Type | Description | | ------ | ------------------------ | | string | Background color obtained.| **setEnterAnimation** public setEnterAnimation(enterAnimation: AnimatorOptions | null): GuidePage; Sets the animation to play when the guide page enters the screen. Currently, only the opacity animation is supported. **Parameters** | Name | Type | Mandatory| Description | | -------------- |-----------------------------| ---- | ---------------------- | | enterAnimation | AnimatorOptions | null | Yes | Animation to set.| **Return value** | Type | Description | | --------- | ---------------------------- | | GuidePage | **GuidePage** instance.| **getEnterAnimation** public getEnterAnimation(): AnimatorOptions | null; Obtains the animation that plays when the guide page enters the screen. **Return value** | Type | Description | |-----------------------------| ------------------ | | AnimatorOptions | null | Animation obtained.| **setExitAnimation** public setExitAnimation(exitAnimation: AnimatorOptions | null): GuidePage; Sets the animation to play when the guide page exits the screen. Currently, only the opacity animation is supported. **Parameters** | Name | Type | Mandatory| Description | | ------------- |-----------------------------| ---- | ---------------------- | | exitAnimation | AnimatorOptions | null | Yes | Animation to set.| **Return value** | Type | Description | | --------- | ---------------------------- | | GuidePage | **GuidePage** instance.| **getExitAnimation** public getExitAnimation(): AnimatorOptions | null; Obtains the animation that plays when the guide page exits the screen. **Return value** | Type | Description | |-----------------------------| ------------------ | | AnimatorOptions | null | Animation obtained.| **setEverywhereCancelable** public setEverywhereCancelable(everywhereCancelable: boolean): GuidePage; Sets whether the guide page can be canceled by clicking anywhere on the screen. If **everywhereCancelable** is set to **true**, clicking anywhere will cancel the guide page and move to the next one or close the current page if there is no more pages. **Parameters** | Name | Type | Mandatory| Description | | -------------------- | ------- | ---- | -------------------------------------------- | | everywhereCancelable | boolean | Yes | Whether the guide page can be canceled by clicking anywhere on the screen.| **Return value** | Type | Description | | --------- | ---------------------------- | | GuidePage | **GuidePage** instance.| **isEverywhereCancelable** public isEverywhereCancelable(): boolean; Checks whether the guide page can be canceled by clicking anywhere on the screen. **Return value** | Type | Description | | ------- | -------------------------------------------- | | boolean | A boolean value indicating whether the guide page can be canceled by clicking anywhere on the screen| **isEmpty** public isEmpty(): boolean; Checks whether this guide page component is empty, that is, whether the number of guide pages is **0**. **Return value** | Type | Description | | ------- | ------------------------ | | boolean | A boolean value indicating whether the current guide page component is empty.| **getHighLights** public getHighLights(): HighLight[]; Obtains the properties of this highlight. **Return value** | Type | Description | | ----------- | -------------------------- | | HighLight[] | Highlight properties obtained.| **setHighLightIndicator** public setHighLightIndicator(indicator: Function | null): GuidePage; Sets an indicator for the guide page. The indicator layout must be a layout function of the @Builder annotation. **Parameters** | Name | Type | Mandatory| Description | | --------- |----------------------| ---- | ---------------------------- | | indicator | Function | null | Yes | Layout function of the indicator.| **Return value** | Type | Description | | --------- | ---------------------------- | | GuidePage | **GuidePage** instance.| **getHighLightIndicator** public getHighLightIndicator(): Function | null; Obtains the indicator of this guide page. The indicator layout must be a layout function of the @Builder annotation. **Return value** | Type | Description | |----------------------| ---------------------------- | | Function | null | Layout function of the indicator obtained.| **Controller** Controller of the guide page component. **show** public show(): void; Shows the guide page. **showPage** public showPage(position: number): void; Shows the specified guide page. **Parameters** | Name | Type | Mandatory| Description | | -------- | ------ | ---- | --------------- | | position | number | Yes | Index of the guide page to show, which starts from **0**.| **showPreviewPage** public showPreviewPage(): void; Show the previous guide page. **remove** public remove(): void; Removes this guide page. **isShowing** public isShowing(): boolean; Checks whether this guide page is being shown. **Return value** | Type | Description | | ------- | ------------------------ | | boolean | A boolean value indicating whether the guide page is being shown.| **isAnimationRunning** public isAnimationRunning(): boolean; Checks whether an animation is running on the guide page. **Return value** | Type | Description | | ------- | ------------------------------ | | boolean | A boolean value indicating whether an animation is running on the guide page.| **resetLabel** public resetLabel(): void; Resets the number of display times of this guide page to **0**. **resetLabel** public resetLabel(label: string): void; Resets the label of the guide page to the specified string. **Parameters** | Name| Type | Mandatory| Description | | ------ | ------ | ---- | ------------ | | label | string | Yes | Guide page label to set.| **HighLightShape** Enumerates the shapes of a highlight. | Type | Description | | --------------- | -------- | | CIRCLE | Circle. | | RECTANGLE | Rectangle. | | OVAL | Oval shape. | | ROUND_RECTANGLE | Rectangle with rounded corners.| **RectF** Defines a **RectF** object. **Constructor** constructor(rect: RectF); A constructor used to create a **RectF** object. constructor(left: number, top: number, right: number, bottom: number); Creates a **RectF** object based on the given coordinates. **Parameters** | Name| Type | Mandatory| Description | | ------ | ------ | ---- | ----------------------- | | left | number | Yes | X-coordinate of the left edge of the rectangle.| | top | number | Yes | Y-coordinate of the top edge of the rectangle.| | right | number | Yes | X-coordinate of the right edge of the rectangle.| | bottom | number | Yes | Y-coordinate of the bottom edge of the rectangle.| **getCenterX** public getCenterX(): number; Obtains the X-coordinate of the center of the rectangle. **Return value** | Type | Description | | ------ | ----------------------- | | number | X-coordinate obtained.| **getCenterY** public getCenterY(): number; Obtains the Y-coordinate of the center of the rectangle. **Return value** | Type | Description | | ------ | ----------------------- | | number | Y-coordinate obtained.| **getWidth** public getWidth(): number; Obtains the width of the rectangle. **Return value** | Type | Description | | ------ | -------------- | | number | Width of the rectangle obtained.| **getHeight** public getHeight(): number; Obtains the height of the rectangle. **Return value** | Type | Description | | ------ | -------------- | | number | Height of the rectangle obtained.| **HighLightOptionsBuilder** A class used to build the additional highlight configuration. **setOnClickListener** public setOnClickListener(listener: OnClickListener | null): HighLightOptionsBuilder; **Parameters** | Name | Type | Mandatory| Description | | -------- |------------------------------| ---- | -------------------- | | listener | OnClickListener | nulll | Yes | Listener for the highlight click events. | **OnClickListener** | API | Parameter| Description | | ------- | ---- | -------------------- | | onClick | NA | Callback to be invoked when the highlighted area is clicked.| **Return value** | Type | Description | | ----------------------- | ------------------------------ | | HighLightOptionsBuilder | **HighLightOptionsBuilder** instance.| **setOnHighLightDrewListener** public setOnHighLightDrewListener(listener: OnHighLightDrewListener | null): HighLightOptionsBuilder; **Parameters** | Name | Type | Mandatory| Description | | -------- |--------------------------------------| ---- | ------------------------ | | listener | OnHighLightDrewListener | nulll | Yes | Listener for the redrawing of a highlight.| **OnHighLightDrewListener** | API | Parameter | Description | | --------------- | ------------------------------------------------------- | ------------------------ | | onHighLightDrew | canvasContext2d: CanvasRenderingContext2D, rectF: RectF | Callback to be invoked when the highlight is redrawn.| **Return value** | Type | Description | | ----------------------- | ------------------------------ | | HighLightOptionsBuilder | **HighLightOptionsBuilder** instance.| **isFetchLocationEveryTime** public isFetchLocationEveryTime(isFetchLocation: boolean): HighLightOptionsBuilder; Sets whether to fetch the component location each time the guide page is displayed. **Parameters** | Name | Type | Mandatory| Description | | --------------- | ------- | ---- | ------------------------------------ | | isFetchLocation | boolean | Yes | Whether to fetch the component location each time the guide page is displayed.| **Return value** | Type | Description | | ----------------------- | ------------------------------ | | HighLightOptionsBuilder | **HighLightOptionsBuilder** instance.| **build** public build(): HighLightOptions ; Builds additional configuration of the highlight. **Return value** | Type | Description | | ---------------- | ---------------------- | | HighLightOptions | **HighLightOptions** instance.| **HighLightGuideComponent** Defines a guide page component. **Parameters** | Name | Type | Mandatory| Description | | ------------------ | ----------------------------- | ---- | ---------------------------- | | highLightContainer | @Builder | Yes | Container of the guide page component. | | currentHLIndicator | @Builder|null | Yes | Indicator of the guide page component. | | builder | HighLightGuideBuilder | Yes | A class used to configure and build highlight guide pages.| | onReady | (controller:Controller)=>void | Yes | Callback to be invoked when the guide page is ready. | **NOTE** - The component does not support the focus penetration event. - The component label is mandatory. - The ID of each component must be unique in the entire application. - The value of **count** (maximum number of times that a guide page can be shown) must be a positive integer. - The coordinates of **RectF** must be coordinates relative to those of its parent component. - The coordinates of the left and top edges of **RectF** must be less than those of the right and bottom edges. - Currently, only the opacity animation is supported. - The **padding** parameter is valid only for highlight components with IDs. - The **round** parameter is valid only when **shape** is **HighLightShape.ROUND_RECTANGLE**. - **alwaysShow** takes precedence over **showCounts**. - **everywhereCancleable** takes precedence over the click event configured in **HighLightOptions**. - **HighLightDrewListener** takes precedence over **HighLightShape**. ## Constraints This project has been verified in the following versions: - DevEco Studio: NEXT Beta1-5.0.3.806,SDK:API12 Release(5.0.0.66) - DevEco Studio: 4.1 Canary2(4.1.3.322), SDK: API11 (4.1.0.36) - DevEco Studio: 4.0 Release(4.0.3.413), SDK: API10 (4.0.10.3) ## Directory Structure ``` |---- ohos_highlightguide | |---- AppScrope # Project information | |---- entry # Sample code | |---- library # Guide page component | |---- src/main # Module code | |---- ets/highlightguide # Module code | |---- HighLightGuideComponent.ets # Components exposed externally | |---- core # Classes for the controller and general configuration of the highlight guide components | |---- interface # Listeners for handling events when the guide page is clicked, shown or removed, changed, and redrawn. | |---- model # Data models for building the components on the highlight guide page | |---- util # Utility used to process coordinates of the highlight guide page | |---- index.ets # Entry file | |---- *.json5 # Configuration file | |---- README.md # Readme | |---- README.OpenSource # Open source description | |---- CHANGELOG.md # Changelog ``` ## How to Contribute If you find any problem during the use, submit an [issue](https://gitee.com/openharmony-sig/ohos_highlightguide/issues) or a [PR](https://gitee.com/openharmony-sig/ohos_highlightguide/pulls) to us. ## License This project is licensed under [Apache-2.0 License](https://gitee.com/openharmony-sig/ohos_highlightguide/blob/master/LICENSE).