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