Custom Components
Turn repeating UI into reusable components
2 min read
If the same UI appears in multiple places, you can turn it into a Custom Component and reuse it. Once created, you can use it across multiple Pages, and when you edit the original, the change is reflected everywhere at once.
Creating a component
There are two ways.
- Run Add Component from the add menu to create an empty component, then design it.
- While designing on a Page, select the part you want to reuse and press Create Component in the Inspector; it instantly becomes a Custom Component right there.
Reuse and Override
A created component appears in the Component Library, and you use it by dragging and dropping it onto a Page. A component reused this way is called an Instance.
Most of an Instance's detailed properties can be Overridden. In other words, the shared design follows the original, but each instance can specify a few things differently, such as text or color.
You can change the design of the original component at any time from the Page list. When you change the original, the change is reflected immediately in every Instance already added, while the values Overridden on each Instance are preserved as-is.
Template Component
Layerz provides built-in Templates ready to use. From Import Component… in the add menu, you can pick a registered Template, turn it into a Custom Component right away, and modify it however you like.
Turn repeating UI you want to keep consistent into Custom Components. If you make a List's cell design into a component, you can manage it cleanly together with data binding.