Concepts
Setup Wireframes
Understanding Wireframes
Wireframes are templates that define how Velt components should render in your app:
- Act as global templates. Changes apply everywhere the component is used.
- Allow full customization of layout and styling.
- Wireframes themselves don’t render in the DOM.
Adding any children to a wireframe template removes its default styling. This gives you full control over the layout.
Step-by-Step Setup
1
Add the root Wireframe Container
2
Add Component Wireframes
Copy the wireframe template of the component you want to customize. You can find the wireframe templates in the component’s UI Customization documentation.
3
Customize the Template
You can customize using the options like:
- Layout: Customize the layout of the component
- Styling: Apply custom CSS and themes
- Template Variables: Add dynamic content to your templates
- Conditional Templates: Add conditional rendering logic
- Custom Actions: Add custom interactivity
Example:
4
Add the Feature Components
- After defining templates, use the actual feature components in your app as normal.
- The wireframe components are not meant to be rendered directly in your application. They merely serve as template definitions.
Was this page helpful?