From b4cb993d640386ec60e54f8a5178a85649394e71 Mon Sep 17 00:00:00 2001 From: - R U T H - Date: Thu, 9 Nov 2023 23:55:47 -0800 Subject: [PATCH 1/6] Create 23-chainingActions.md --- actions/23-chainingActions.md | 39 +++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 actions/23-chainingActions.md diff --git a/actions/23-chainingActions.md b/actions/23-chainingActions.md new file mode 100644 index 0000000..bcbce62 --- /dev/null +++ b/actions/23-chainingActions.md @@ -0,0 +1,39 @@ +# Action: chainingActions + +Ensemble provides a powerful feature that enables developers to execute actions sequentially or in parallel, providing flexibility in designing workflows. This capability is particularly useful when dealing with asynchronous tasks, such as making API calls. + +**Chaining Actions Sequentially** + +To chain actions sequentially, developers can utilize JavaScript ES5 and YAML to define a sequence of actions. Here's a basic example: + +```yaml +actions: + - name: Action1 + script: | + // JavaScript ES5 code for Action 1 + console.log("Executing Action 1"); + - name: Action2 + script: | + // JavaScript ES5 code for Action 2 + console.log("Executing Action 2"); + - name: Action3 + script: | + // JavaScript ES5 code for Action 3 + console.log("Executing Action 3"); +``` + +**Parallel Execution of Non-Blocking Actions** +When dealing with non-blocking tasks, like making API calls, developers can leverage the ability to execute actions in parallel. Here's a YAML and JavaScript ES5 example: +```yaml +actions: + - name: ParallelActions + parallel: + - name: APIAction1 + script: | + // JavaScript ES5 code for non-blocking API call 1 + console.log("Executing API Action 1"); + - name: APIAction2 + script: | + // JavaScript ES5 code for non-blocking API call 2 + console.log("Executing API Action 2"); +``` From 1d849030f53bdd8c4637948c53336c5f4fe9612c Mon Sep 17 00:00:00 2001 From: - R U T H - Date: Mon, 13 Nov 2023 10:19:37 -0800 Subject: [PATCH 2/6] New files Slight edits to page-structure: fixing links, making it more digestable Created 4 new files in the Tips and Tricks section, that go over questions from the builders support channel in discord. 1. Customizable card component 2. Dynamic color modification in JS 3. Configuring BottomNavBar icons 4. Specifying library icons --- build/user-interface/1-page-structure.md | 14 ++++---- tips-and-tricks/custom-card-component.md | 30 ++++++++++++++++ tips-and-tricks/dynamic-color-modification.md | 25 ++++++++++++++ tips-and-tricks/icons-in-bottomNavBar.md | 34 +++++++++++++++++++ tips-and-tricks/specifying-icons.md | 22 ++++++++++++ 5 files changed, 118 insertions(+), 7 deletions(-) create mode 100644 tips-and-tricks/custom-card-component.md create mode 100644 tips-and-tricks/dynamic-color-modification.md create mode 100644 tips-and-tricks/icons-in-bottomNavBar.md create mode 100644 tips-and-tricks/specifying-icons.md diff --git a/build/user-interface/1-page-structure.md b/build/user-interface/1-page-structure.md index 3f4031a..5941d11 100644 --- a/build/user-interface/1-page-structure.md +++ b/build/user-interface/1-page-structure.md @@ -1,6 +1,6 @@ # Ensemble Page Structure -An Ensemble app comprises a series of pages and assets. Each page starts with a [View](#menu), followed by an optional [header](#header), an optional [menu](#menu), and a single widget for the body. There can be one of two things on ensemble page either a [View](#view) or group of multiple views together as [ViewGroup](#viewGroup). +An Ensemble app comprises a series of pages and assets. Each page starts with a [View](#view), followed by an optional [header](#header), an optional [menu](#menu), and a single widget for the body. There can be one of two things on ensemble page either a [View](#view) or group of multiple views together as [ViewGroup](#view-group). List of things you will find reference and details here. @@ -20,7 +20,7 @@ The ViewGroup widget allows you to group multiple Views together and organize th ### Example -let us take an example with a `Bottom Navigation Bar` menu type. +Let's look at an example with a `Bottom Navigation Bar` menu type.
@@ -47,7 +47,7 @@ ViewGroup:
-where each page denotes an individual `view`. Complete example can be found [here](https://studio.ensembleui.com/app/3vEZBIhDyYnIQo6BLN2O/screen/Wewvp6ZUyb0PBwkTAltQ?propertyPanelEnabled=true&instantPreviewDisabled=false) +Check it out in [studio](https://studio.ensembleui.com/app/3vEZBIhDyYnIQo6BLN2O/screen/Wewvp6ZUyb0PBwkTAltQ?propertyPanelEnabled=true&instantPreviewDisabled=false) ##### Output @@ -55,7 +55,7 @@ where each page denotes an individual `view`. Complete example can be found [her ## View -The View widget defines the overall structure of a page, encompassing properties like header, body and more, to create a cohesive layout and presentation within your application. View requires only body while other components like [header](#header) and [menu](#menu) are optional. +The View widget defines the overall structure of a page, including properties like header, body and more, to create a cohesive layout and presentation within your application. View requires only body while other components like [header](#header) and [menu](#menu) are optional. #### Properties @@ -83,7 +83,7 @@ The View widget defines the overall structure of a page, encompassing properties | Property | Type | Description | | :-------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------- | | source | string | The Image URL to fill the background | -| fit | string | How to fit the image within our width/height or our parent (if dimension is not specified) . [see options](#fit-options-for-stylesbackgroundimage) | +| fit | string | How to fit the image within our width/height or our parent (if dimension is not specified) . [see options](#fit-options-for-stylesbackgroundImage) | | alignment | string | Alignment of the background image | #### Fit options for styles.backgroundImage @@ -391,7 +391,7 @@ API provides a convenient way to interact with external services or data sources | onError | Action | The action to handle errors | | inputs | Array | The input values | -You can find many great example [here](/build/make-it-interactive/actions-and-events/1-invokeAPI) +You can find many great example [here](/actions/1-invokeAPI) ## Global @@ -496,4 +496,4 @@ menu: ![Alt text](image-4.png) -You can check the complete App [here](https://studio.ensembleui.com/app/gVHb1fcLAjm373WtCK4l/screen/WEov9pB3G4nmuFLl0qx3?propertyPanelEnabled=true&instantPreviewDisabled=false&editorV2Enabled=true) +You can check the complete App [here](https://studio.ensembleui.com/app/iM58Wgr7bgzTxEi7rV40/screen/cYMnCfhOya8Vq1QG6aCC?propertyPanelEnabled=true&instantPreviewDisabled=false) diff --git a/tips-and-tricks/custom-card-component.md b/tips-and-tricks/custom-card-component.md new file mode 100644 index 0000000..3fa36ab --- /dev/null +++ b/tips-and-tricks/custom-card-component.md @@ -0,0 +1,30 @@ +# Customizable Card Component + +**Objective** + +To construct a card component with individualized backgroundGradient or backgroundImage for each instance. + +To achieve this, consider the following steps: + +1. Define View Structure: + Begin by setting up the View component to establish a flexible layout that accommodates multiple card instances. + +2. Create Test Widget: + Develop the Test component to serve as the card. Ensure it has the necessary structure to receive customizable inputs. + +3. Pass Colors as Input: + Within the instantiation of the Test component in the View, employ the inputs attribute to provide an array of colors: + ```yaml + - Test: + inputs: + colors: [0xFFFF0000, 0xFFFF00FF] + ``` + +4. Apply BackgroundGradient Styles: + Inside the Test component's implementation, utilize the passed colors to define the backgroundGradient styles for the relevant container, e.g., a Row: + ```yaml + Row: + styles: + backgroundGradient: + colors: ${colors} + ``` \ No newline at end of file diff --git a/tips-and-tricks/dynamic-color-modification.md b/tips-and-tricks/dynamic-color-modification.md new file mode 100644 index 0000000..6daf9c3 --- /dev/null +++ b/tips-and-tricks/dynamic-color-modification.md @@ -0,0 +1,25 @@ +# Dynamic Color Modification in JavaScript + +**Objective** + +To dynamically change the color of a Text widget based on a JavaScript variable. The goal is to customize the color property of the Text widget's style. + +To achieve this, consider the following steps: + +1. Access Text Widget: + Obtain a reference to the Text widget that you want to modify. In the provided example, it can be accessed using the identifier (id). + ```yaml + - Text: + text: Hi there! + styles: + textStyle: + fontSize: 24 + color: blue + id: helloUser + ``` + +2. Modify Color Property: + Directly modify the color property of the Text widget's style using the assigned identifier. + ```javascript + helloUser.color = 'red'; + ``` diff --git a/tips-and-tricks/icons-in-bottomNavBar.md b/tips-and-tricks/icons-in-bottomNavBar.md new file mode 100644 index 0000000..6d020f3 --- /dev/null +++ b/tips-and-tricks/icons-in-bottomNavBar.md @@ -0,0 +1,34 @@ +# Configuring BottomNavBar Icons + +**Objective** +To add a heart icon to a BottomNavBar item, ensuring correct rendering. If using a default icon, no additional library specification is needed; however, for non-default icons like Font Awesome, it's crucial to specify the library. + +To achieve this, consider the following steps: + +1. Default Icons: + If using default icons (e.g., "home," "search," "shopping_cart"), no library specification is required. Simply provide the icon name. + ```yaml + BottomNavBar: + styles: + backgroundColor: 0xFF1F2128 + items: + - label: Home + icon: search + page: Home + ``` + +2. fontAwesome Icons: + For non-default icons, particularly those from Font Awesome, ensure to specify the library using the iconLibrary attribute. + ```yaml + BottomNavBar: + styles: + backgroundColor: 0xFF1F2128 + items: + - label: Favourite + icon: heart + page: Home + iconLibrary: fontAwesome + ``` + +3. Active Icons: + If an active state icon is needed (e.g., a different icon when the item is selected), use the activeIcon attribute. \ No newline at end of file diff --git a/tips-and-tricks/specifying-icons.md b/tips-and-tricks/specifying-icons.md new file mode 100644 index 0000000..8318d08 --- /dev/null +++ b/tips-and-tricks/specifying-icons.md @@ -0,0 +1,22 @@ +# Specify library icons for start and end + +**Objective** +To specify library icons for startingIcon and endingIcon on a Button + +To achieve this, consider the following steps: + +1. To specify library icons in shorthand notation for startingIcon and endingIcon on a Button, you can use the following syntax: + ```yaml + Button: + startingIcon: wifi + endingIcon: addressBook fontAwesome + ``` +2. Icons can be represented with a more verbose syntax on a Button using the following structure: + ```yaml + Button: + endingIcon: + name: addressBook + library: fontAwesome + size: 50 + color: red + ``` \ No newline at end of file From bdd512b26017182d57a7c48fef2c64298179e954 Mon Sep 17 00:00:00 2001 From: - R U T H - Date: Mon, 13 Nov 2023 10:19:55 -0800 Subject: [PATCH 3/6] Update 2-widgets.md fixed link --- build/user-interface/2-widgets.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/user-interface/2-widgets.md b/build/user-interface/2-widgets.md index e1b9120..8a03652 100644 --- a/build/user-interface/2-widgets.md +++ b/build/user-interface/2-widgets.md @@ -57,4 +57,4 @@ Ensemble widgets enable you to build both simple and complex applications. Here | Widget | Documentation | Kitchen sink example | | ------------------ | ----------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | Progress indicator | [Link](/widget-reference/progressindicator) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/c2c248f2-a289-40d3-acd5-65a1a7f3c5a2) | -| Toast message | [Link](/build/make-it-interactive/actions-and-events/6-showToast) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/9a576805-019a-4bd3-953f-3c623fbfb905) | +| Toast message | [Link](/actions/6-showToast) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/9a576805-019a-4bd3-953f-3c623fbfb905) | From 81ae1510ed135c99dad5edf950b93a4552a8423a Mon Sep 17 00:00:00 2001 From: - R U T H - Date: Mon, 13 Nov 2023 17:49:15 -0800 Subject: [PATCH 4/6] newFiles.updated got rid of chainingActions, rename page to screen on 'icons-in-bottomNavBar' --- actions/23-chainingActions.md | 39 ------------------------ tips-and-tricks/icons-in-bottomNavBar.md | 6 ++-- 2 files changed, 3 insertions(+), 42 deletions(-) delete mode 100644 actions/23-chainingActions.md diff --git a/actions/23-chainingActions.md b/actions/23-chainingActions.md deleted file mode 100644 index bcbce62..0000000 --- a/actions/23-chainingActions.md +++ /dev/null @@ -1,39 +0,0 @@ -# Action: chainingActions - -Ensemble provides a powerful feature that enables developers to execute actions sequentially or in parallel, providing flexibility in designing workflows. This capability is particularly useful when dealing with asynchronous tasks, such as making API calls. - -**Chaining Actions Sequentially** - -To chain actions sequentially, developers can utilize JavaScript ES5 and YAML to define a sequence of actions. Here's a basic example: - -```yaml -actions: - - name: Action1 - script: | - // JavaScript ES5 code for Action 1 - console.log("Executing Action 1"); - - name: Action2 - script: | - // JavaScript ES5 code for Action 2 - console.log("Executing Action 2"); - - name: Action3 - script: | - // JavaScript ES5 code for Action 3 - console.log("Executing Action 3"); -``` - -**Parallel Execution of Non-Blocking Actions** -When dealing with non-blocking tasks, like making API calls, developers can leverage the ability to execute actions in parallel. Here's a YAML and JavaScript ES5 example: -```yaml -actions: - - name: ParallelActions - parallel: - - name: APIAction1 - script: | - // JavaScript ES5 code for non-blocking API call 1 - console.log("Executing API Action 1"); - - name: APIAction2 - script: | - // JavaScript ES5 code for non-blocking API call 2 - console.log("Executing API Action 2"); -``` diff --git a/tips-and-tricks/icons-in-bottomNavBar.md b/tips-and-tricks/icons-in-bottomNavBar.md index 6d020f3..1ad5825 100644 --- a/tips-and-tricks/icons-in-bottomNavBar.md +++ b/tips-and-tricks/icons-in-bottomNavBar.md @@ -14,7 +14,7 @@ To achieve this, consider the following steps: items: - label: Home icon: search - page: Home + screen: Home ``` 2. fontAwesome Icons: @@ -26,9 +26,9 @@ To achieve this, consider the following steps: items: - label: Favourite icon: heart - page: Home + screen: Home iconLibrary: fontAwesome ``` - + 3. Active Icons: If an active state icon is needed (e.g., a different icon when the item is selected), use the activeIcon attribute. \ No newline at end of file From f35e993228a10dc34534484d3c8f17e240af412f Mon Sep 17 00:00:00 2001 From: - R U T H - Date: Sun, 10 Dec 2023 20:30:07 -0800 Subject: [PATCH 5/6] Edits/Additions Fixed link for animations, edit the tips and tricks directory, --- .../{3-animations.md => 5-animations.md} | 0 .../calling-api-response-to-fill-an-array.md | 15 +++++++++++++++ tips-and-tricks/directory.md | 4 ++++ 3 files changed, 19 insertions(+) rename build/user-interface/{3-animations.md => 5-animations.md} (100%) create mode 100644 tips-and-tricks/calling-api-response-to-fill-an-array.md diff --git a/build/user-interface/3-animations.md b/build/user-interface/5-animations.md similarity index 100% rename from build/user-interface/3-animations.md rename to build/user-interface/5-animations.md diff --git a/tips-and-tricks/calling-api-response-to-fill-an-array.md b/tips-and-tricks/calling-api-response-to-fill-an-array.md new file mode 100644 index 0000000..06a8845 --- /dev/null +++ b/tips-and-tricks/calling-api-response-to-fill-an-array.md @@ -0,0 +1,15 @@ +# Calling an API and Using It's Response to Fill an Array + +**Objective** +To retrieve the API response, modify an array containing user details through a designated function each time the API is called, and subsequently update this array whenever the API is invoked using a code block triggered by the onTap event on an Icon. Finally, to visualize these user details by generating icons from the updated array using an item template. + +To achieve this, consider the following steps: + +1. Storage Handling: + Store the user details array as a variable in ensemble.storage. +2. Binding with Item Template: + Bind your item template to the stored array. This ensures that any manipulation of the array automatically triggers changes in the associated widget. +3. Array Update Mechanism: + After modifying the array values, make sure to set the array again. This step is crucial for triggering the binding mechanism and updating the widget accordingly. + +By following this approach, you can integrate API responses, array manipulation, and visual representation using Ensemble, creating a dynamic and responsive user interface. \ No newline at end of file diff --git a/tips-and-tricks/directory.md b/tips-and-tricks/directory.md index ea3b21f..2bd50ac 100644 --- a/tips-and-tricks/directory.md +++ b/tips-and-tricks/directory.md @@ -12,3 +12,7 @@ Welcome to our Tips and Tricks page! Here, you'll find a collection of expert in - [How to get ListView/GridView to take up all available height](/tips-and-tricks/list-gridview-stretch-to-available-height) - [How to modify the BottomNavBar with custom styling and widgets](/tips-and-tricks/how-to-modify-bottom-navbar) - [Using navigate Screen with BottomNavBar](/tips-and-tricks/navigateScreen-with-bottomNavBar) +- [Calling an API to fill and array](/tips-and-tricks/calling-api-response-to-fill-an-array) +- [Dynamic color modification](/tips-and-tricks/dymanic-color-modification) +- [Custom card component](/tips-and-tricks/custom-card-component) +- [Icons in bottomNavBar](/tips-and-tricks/icons-in-bottomNavBar) \ No newline at end of file From 1666309202e0199fe7537b543fbe5288c2f72f2f Mon Sep 17 00:00:00 2001 From: - R U T H - Date: Sun, 10 Dec 2023 22:07:45 -0800 Subject: [PATCH 6/6] Edits and New Files Update the directory with new files from the November Monthly Update - inovke haptic - HTML maxLines - Lottie Animations --- tips-and-tricks/directory.md | 27 ++++++++++--------- tips-and-tricks/html-widget.md | 31 ++++++++++++++++++++++ tips-and-tricks/invoke-haptic.md | 37 ++++++++++++++++++++++++++ tips-and-tricks/lottie-animations.md | 39 ++++++++++++++++++++++++++++ 4 files changed, 122 insertions(+), 12 deletions(-) create mode 100644 tips-and-tricks/html-widget.md create mode 100644 tips-and-tricks/invoke-haptic.md create mode 100644 tips-and-tricks/lottie-animations.md diff --git a/tips-and-tricks/directory.md b/tips-and-tricks/directory.md index 2bd50ac..80bb291 100644 --- a/tips-and-tricks/directory.md +++ b/tips-and-tricks/directory.md @@ -4,15 +4,18 @@ Welcome to our Tips and Tricks page! Here, you'll find a collection of expert in ## Index -- [Custom BottomNavBar item styling](/tips-and-tricks/custom-navbar-items) -- [Generalized Color All Button across an App ](/tips-and-tricks/general_primary_color-theme) -- [Making Progress Bars](/tips-and-tricks/progress-bars) -- [Background Color issue in EnsembleUI Preview](/tips-and-tricks/background-color-ensemble-preview) -- [Inputs to ChartJs](/tips-and-tricks/inputs-chartjs) -- [How to get ListView/GridView to take up all available height](/tips-and-tricks/list-gridview-stretch-to-available-height) -- [How to modify the BottomNavBar with custom styling and widgets](/tips-and-tricks/how-to-modify-bottom-navbar) -- [Using navigate Screen with BottomNavBar](/tips-and-tricks/navigateScreen-with-bottomNavBar) -- [Calling an API to fill and array](/tips-and-tricks/calling-api-response-to-fill-an-array) -- [Dynamic color modification](/tips-and-tricks/dymanic-color-modification) -- [Custom card component](/tips-and-tricks/custom-card-component) -- [Icons in bottomNavBar](/tips-and-tricks/icons-in-bottomNavBar) \ No newline at end of file +- [Custom BottomNavBar item styling](/ensemble_docs/tips-and-tricks/custom-navbar-items) +- [Generalized Color All Button across an App ](/ensemble_docs/tips-and-tricks/general_primary_color-theme) +- [Making Progress Bars](/ensemble_docs/tips-and-tricks/progress-bars) +- [Background Color issue in EnsembleUI Preview](/ensemble_docs/tips-and-tricks/background-color-ensemble-preview) +- [Inputs to ChartJs](/ensemble_docs/tips-and-tricks/inputs-chartjs) +- [How to get ListView/GridView to take up all available height](/ensemble_docs/tips-and-tricks/list-gridview-stretch-to-available-height) +- [How to modify the BottomNavBar with custom styling and widgets](/ensemble_docs/tips-and-tricks/how-to-modify-bottom-navbar) +- [Using navigate Screen with BottomNavBar](/ensemble_docs/tips-and-tricks/navigateScreen-with-bottomNavBar) +- [Calling an API to fill and array](/ensemble_docs/tips-and-tricks/calling-api-response-to-fill-an-array) +- [Dynamic color modification](/ensemble_docs/tips-and-tricks/dymanic-color-modification) +- [Custom card component](/ensemble_docs/tips-and-tricks/custom-card-component) +- [Icons in bottomNavBar](/ensemble_docs/tips-and-tricks/icons-in-bottomNavBar) +- [InvokeHaptic](/ensemble_docs/tips-and-tricks/invoke-haptic.md) +- [Lottie Animations](/ensemble_docs/tips-and-tricks/lottie-animations.md) +- [HTML Widget](/ensemble_docs/tips-and-tricks/html-widget.md) \ No newline at end of file diff --git a/tips-and-tricks/html-widget.md b/tips-and-tricks/html-widget.md new file mode 100644 index 0000000..2e4ba3f --- /dev/null +++ b/tips-and-tricks/html-widget.md @@ -0,0 +1,31 @@ +# HTML Widget with maxLines Support and Enhanced Styling + +The HTML widget allows you to apply CSS-like styles to specific elements within the HTML content. Customize text color, font size, and font weight effortlessly using both CSS tags and the box wrapper, providing increased styling flexibility. + +The
with an id of "hello" and the

with an id of "tag2" are styled with various properties such as border, borderRadius, padding, color, fontWeight, backgroundColor, maxLines, and textOverflow. + +- Html: + id: myHtml + cssStyles: + - selector: "#hello" + properties: + border: 10px solid red + borderRadius: 10px + padding: 20px + - selector: "#tag2" + properties: + color: white + fontWeight: "900" + backgroundColor: red + maxLines: 2 + textOverflow: ellipsis + text: | +

+

Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing,” Before & After magazine answered a curious reader, “Its ‘words’ loosely approximate the frequency with which letters occur in English, which is why at a glance it looks pretty real.”

+ + As Cicero would put it, “Um, not so fast.” + + The placeholder text, beginning with the line “Lorem ipsum dolor sit amet, consectetur adipiscing elit”, looks like Latin because in its youth, centuries ago, it was Latin. + + Richard McClintock, a Latin scholar from Hampden-Sydney College, is credited with discovering the source behind the ubiquitous filler text. In seeing a sample of lorem ipsum, his interest was piqued by consectetur—a genuine, albeit rare, Latin word. Consulting a Latin dictionary led McClintock to a passage from De Finibus Bonorum et Malorum (“On the Extremes of Good and Evil”), a first-century B.C. text from the Roman philosopher Cicero. +
\ No newline at end of file diff --git a/tips-and-tricks/invoke-haptic.md b/tips-and-tricks/invoke-haptic.md new file mode 100644 index 0000000..1d90cbd --- /dev/null +++ b/tips-and-tricks/invoke-haptic.md @@ -0,0 +1,37 @@ +# Invoke Haptics + +We can use the invokeHaptic action to provide haptic feedback in your app. This feature enhances the user experience by providing tactile responses for different interactions. + +The invokeHaptic action is utilized to trigger haptic feedback, and it supports various types such as heavyImpact, mediumImpact, lightImpact, and vibrate. +Buttons are used to demonstrate different haptic types, and the last button showcases using JavaScript code to invoke the lightImpact haptic. + +Please note that haptics will only work on native apps. + +invokeHaptic action is utilized to trigger haptic feedback, and it supports various types. +- Button: + label: Heavy Impact + onTap: + invokeHaptic: + type: heavyImpact + +Additionally "Vibrate" button demonstrates chaining actions by using the onComplete property to execute additional JavaScript code after the haptic feedback is played. +- Button: + label: Vibrate (Using onComplete action to chain) + onTap: + invokeHaptic: + type: vibrate + onComplete: + executeCode: + body: | + //@code + console.log("Vibrate Haptic played") + +Furthermore, the onTapHaptic property is used for the "Selection Click" button, demonstrating an alternative way to trigger haptic feedback. +- Button: + label: Selection Click (Using onTapHaptic property) + onTapHaptic: selectionClick + onTap: + executeCode: + body: | + //@code + console.log("Button Pressed") diff --git a/tips-and-tricks/lottie-animations.md b/tips-and-tricks/lottie-animations.md new file mode 100644 index 0000000..e274e23 --- /dev/null +++ b/tips-and-tricks/lottie-animations.md @@ -0,0 +1,39 @@ +# Custom Lottie Animations with Events and Controls + +With features like onStart, onPause, onComplete, and control buttons, you can create interactive animations tailored to your application. + +The Lottie animations have events such as onForward, onReverse, onPause, and onComplete. Control buttons are provided to trigger these events dynamically. +- Lottie: + id: MyLottie + autoPlay: false + repeat: false + onForward: | + //@code + console.log("Forward"); + onReverse: | + //@code + console.log("Reverse"); + onPause: | + //@code + console.log("Pause"); + onComplete: | + //@code + console.log("Completed"); + source: https://assets6.lottiefiles.com/private_files/lf30_rnpgzd17.json + styles: + width: 400 + height: 200 + +- Button: + styles: + outline: true + borderColor: 0xffed5742 + borderRadius: 20 + backgroundColor: 0xffaad6de + labelStyle: + color: 0xffed5742 + label: Forward + onTap: | + //@code + console.log("Forward"); + MyLottie.forward(); \ No newline at end of file