Watch the walkthrough
Create a reusable project card, define component inputs and actions, and reuse it in a responsive project overview. Save and test component events and state.
Watch tutorial (12:17)
Build reusable page components and use them across your application.
Recorded with an earlier Twidget interface. Names, control locations and available options may differ; use the linked documentation for current guidance.
Watch tutorial (3:02)Browse all video tutorials
Page components are reusable building blocks within the Twidget platform that enhance development efficiency by allowing users to create, manage, and implement consistent UI elements across multiple pages. They serve to encapsulate functionality and design into a single entity, which can be reused and modified independently from other components.
Key Concepts
Reusability: By creating a page component, users can utilize the same visual and functional elements in different contexts without the need to recreate them every time. This reduces redundancy and aids in maintaining a cohesive design language throughout the application.
Component Modification: Changes made to a page component will reflect anywhere the component is used across the platform, streamlining updates and ensuring consistency.
Dynamic Variables: Users can define variables within page components that allow for dynamic content modification. This enables flexibility in how components interact with various data inputs, tailoring the user experience.
Main Components & Workflow
Component Creation: Users can create a new page component by defining its name, description, and type. This process includes selecting elements like images and text to comprise the component's UI.
Integration into Pages: Once created, page components can be added to other pages by accessing a sidebar that lists all available components, allowing for quick assembly of page layouts.
Automatic Updates: Any modification made to a page component requires the component to be published for changes to propagate across all instances where it is used. This ensures that all pages using the component benefit from any bugs fixes or design updates, maintaining uniformity.
Variable Management: Users can incorporate variables into page components, enabling dynamic behavior. When a component is placed on a page, the values of these variables can be customized, allowing for tailored interactions while preserving the component's base structure and functionality.
Summary
Page components in Twidget simplify the process of designing and managing application interfaces by offering a modular approach to UI element creation. Their reusable nature, combined with the ability to incorporate dynamic variables, empowers developers to streamline their workflow and enhance the maintainability of their applications.
