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
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
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!