How to use KIO4 gradient in Kodular?

 

Welcome to learn web, today we are back with a completely new tutorial on Kodular Basic-to -Advanced app making.Today topic for our tutorial is that how to use Gradient effect in Kodular app making for any layout.

How to use gradient colors in kodular app?

For this you need to use a extension named "KIO4" gradient.So,before starting you need to get this extension before we start our tutorial.To get this click on link below:

My Drive Link

This is the google drive link for the KIO4 extension.

I think you might have got the extension.So, we start our tutorial on how to use gradient effect Kodular apps.

Step 1:Open your Project in which you want to use gradient Effect.Then click on the extensions button in the bottom of left sidebar and click on import extension.Now select the KIO4 gradient file and click on Import after some time your extension will be processed and imported to your project.

Illustration:

Once you have Imported the KIO4 extension you can see the extension as shown in the above image. 

Step 2:After importing just drag and drop the KIO4 gradient component in your screen.After importing you can see the following properties in the component properties section.

Now you can see that there are three properties being shown in component properties section.Here the first is corner radius,second is shape and the third is type.Now, we discuss about these properties:

1.Corner Radius:

Here you can change how much the radius of corners of the component chosen should be. If you increase the corner radius value this will increase the radius of corner.

2.Shape:

Here we can change what shape should we give to the selected component.This extension currently provide two types of shapes which are Rectangle and Oval.

For using rectangle you should set shape to 0.

For using Oval you should set shape to 1.

3.Type:

Here we are able to change the style of gradient effect for our component.We can use the linear,radial and sweep gradient style in this extension. Values for styles:

For using linear gradient you should set type to 0.

For using radial gradient you should set type to 1.

For using sweep gradient you should set type to 2.

Blocks of KIO4 Extension:

1. Main Block:

In the main block we get three options for attach block.These are used as following:

1.Layout:

The layout in which we are going to show the gradient effect attach the block of that component here. For ex. I used here horizontal arrangement 1.

2.List of Colors:

In this block we can choose which colors we should use for making gradient.We should use make a list block to make list of colors.

3.Orientation:

We get a option to set how we are going to set the orientation for gradient effect.The values for orientation are as:

1 For BL-TR (Bottom Left to Top Right)

2 For BOTTOM-TOP (Bottom to Top)

3 For BR-TL (Bottom Right to Top Left)

4 For LEFT-RIGHT (Left to Right)

5 For RIGHT-LEFT (Right to Left)

6 For TL-BR (Top Left to Bottom Right)

7 For TOP-BOTTOM (Top to Bottom)

8 For TR-BL (Top Right to Bottom Left)

And with value 0 you'll have TOP to BOTTOM.

So this was your tutorial for how to use gradient effect in Kodular components.We will be back tomorrow, till then.......

Happy Koding.......