arrow-left arrow-right brightness-2 chevron-left chevron-right facebook-box facebook loader magnify menu-down rss-box star twitter-box youtube-box twitter white-balance-sunny window-close
Create Reusable Fuse Components with ux:Class
1 min read

Create Reusable Fuse Components with ux:Class

When creating applications, having customisable user interface components is vitally important. Using Fuse, we can encapsulate pieces of our UX and reuse them within our application the same way we'd use any other UX element.
Create Reusable Fuse Components with ux:Class

When creating applications, having customisable user interface components is vitally important. Using Fuse, we can encapsulate pieces of our UX and reuse them within our application the same way we'd use any other UX element.

Let's say we're building an awesome CircleLayout and we want to create a custom Circle component that we can pass an Image URL to.

fuse-components

We could extract our Circle to a new file inside of Components/ImageCircle.ux. To use our component throughout the application, we'll need to add a ux:Class to the top most element, I'll add ux:Class="ImageCircle".

To accept custom inputs (such as a different URL) we can then add a new ux:Property="ImageUrl" which allows us to add a property to our component when initialising it. We'll be looking to add a string which will be accessible by the read-only {ReadProperty ImageUrl}.

fuse-components-2

Once we've done that, adding <ImageCircle /> to our MainView.ux then gives us our previous result. To make this more interesting, we can add a CircleLayout to take advantage of our modular component!

fuse-components-3