System Components
What is a System Component?
System components are predefined elements available in Dart, and Monday Hero enables you to create instances of these components directly from your designs. You can convert any image, text, or view into system components within your design.
When an instance of a system component is created, code is automatically generated to match the styles and overrides specified in the selected design.
When creating a new instance of a component, you must decide whether it's a Material or Cupertino component. This choice depends on the selection of components used within the app—Material or Cupertino. Material components adhere to Google's Material Design guidelines, which offer a design language commonly associated with Android apps. Conversely, Cupertino components emulate the visual style of iOS apps, aligning closely with Apple’s design principles. With Monday Hero, you can create both Material and Cupertino components. For examples and a more detailed explanation, click here.
Here is a list of all system components:
For all the supported components list, click here.
How to Create System Component
Start by highlighting the elements and converting them into components. Here is how to create a component instance:
Select and highlight the layers: Select the layers you want to convert into a component.
Right-click and choose the component from the menu: Select the class of your component. Available options include Buttons, TextViews, SearchBars, StatusBars, Lists, Grids, and more.
OR click the components button and select a component from the screen: Once you select the tag component instance, you'll see the available options on the screen. Choose one of them to continue.
Set properties: For each layer, select the necessary properties such as title, image, or background image. These options will appear in a list.
Finish: Click 'Finish' to complete the creation process. Once the component is created successfully, you'll be able to see its code on the screen. Additionally, the component type will appear in the left layer list, highlighted on the screen, and the corresponding code on the right will be updated.
Congrats! It's done. You can also create your own component library for reusing components.
Last updated
