Linear gradient custom widget

Show and Tell
,
1

Here is a very simple custom widget that might help people who must conform to graphic design standards.

I created it because at some point, I needed to create a gradient in the base layout of an app. The issue is that currently, Tulip offers no easy way to do that.

The closest thing I could do originally was to create the gradient as a picture, upload it and put is as an image in the base layout. This has several disadvantages:

  • you need to create the image
  • you are forced to deal with the image’s original ratio
  • you cannot easily change the gradient to try different variants
  • the image is static: you cannot change it dynamically

This linear gradient custom widget allows you to define regularly-positioned color stops and a gradient angle. I opted for simplicity but it would be possible to extend it with custom color stop positions, radial gradients etc. Anything CSS (the underlying technology) allows.

customWidget-Linear gradient.json (2.4 KB)

2 Likes