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.

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}.

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!