Create a custom reusable component
Problem
You want to save time by creating a custom component that can be reused across your Dynaboard application.
Solution
- Browse to the Custom Components tab in the Dynaboard editor
- In the top-most panel, click the + button
- Use the canvas to design your custom component
- Use the Properties panel to configure the inputs to your custom component, which you can access on your page using
{{ $props.propName }}
- When you’re done, switch back to the Pages panel and select a Page where you’d like to use your new component
- From the Command Bar browse to Custom and drag out your new component onto the canvas
Discussion
- You can change the layout style of your component and choose between Stack or Grid
- Stack mode is powered by CSS Flexbox and shares many of the same auto-layout properties. It is most useful for designing pixel-perfect, responsive layouts.
- Grid mode is powered by CSS Grid and gives you a simple yet powerful fixed grid framework. You may configure the number of columns, rows, and gutter sizing.
- The Properties of custom components will appear inline whenever you use that component, allowing you to pass your own values and functions into your components.
- Use default values in your properties to test what your components look like while you build them.
- You may nest containers like you would nest
<div />
's to achieve the intended behavior. You can nest a Stack in a Grid in a Stack or whatever you can imagine. - Components can have functions, just like pages. These functions are attached to the lifecycle of the component, so when you set a function to run on load within a component, it will run when that component is rendered via an Instance.
- If you’d like even greater control over how your custom component behaves, you can use a React component inside for more flexibility.
Known Limitations
- Components can be nested within one another, but cannot be themselves recursive (at the moment).