You've successfully subscribed to developer.school
Great! Next, complete checkout for full access to developer.school
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info is updated.
Billing info update failed.

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.

Paul Halliday
Paul Halliday

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

Paul Halliday

👋 Want to see more content? Head over to the YouTube channel: https://youtube.com/c/paulhalliday!