Components-iOS
Create components like buttons, text fields, lists, grids, and much more...
Monday Hero automatically understands the images, texts, and views in the design. However, for a fully working app, components like buttons, text fields are vital. Create components on Monday Hero to get a fully working app.
You can either watch the video below or continue to read to learn how to create components.
Monday Hero recognizes every element as images, texts, and views in the design like seen below, and, it's important to convert these elements into components like below:
It's easy to create components. Here is a gif that shows how to create a button. All component flows are similar to each other.
You can also create a component by following this text:
You can select the layers and right-click to open the component menu.
Select the class of your component. Now it can be Button, TextView, SearchBar, StatusBar, and Lists or grid.
Click and drag to select layers that you want to convert to a component.
Name your component, in the gif, it's called followButton.
For every layer, select the fields that needed to defined like title, image, or background image. The options will be shown on the list.
Click Finish to complete the flow.
Or, you can create it faster by selecting layers and using right-click shortcut.
On Monday Hero, there are 2 types of components that can be used: System components and Custom components.
1. System Components
System components are the components that already exist in the UIKit in iOS and Monday Hero lets you create instances of the system components. You can convert any image/text/view into system components on your design.
When an instance of a system component is created, the code automatically will be generated with the styles and overrides in the selected design.
UIKit components are shown below:
Here is a button code example with System Components:
All the components are explained separately in the pages below:
2. Custom Components
Custom components are similar to system components, custom components also extend from system components however the only difference is they're reusable. For instance, login and signup pages generally consist of similar text fields and buttons. An example is shown below, buttons and text fields are grouped in 3 different components, so the code for each group of the component can be created once and be used multiple times.
For this example, login and signup buttons are called PrimaryButton
. The component code is separately created, so it can be reused. The component code is also called in the page code. Here is the code autogenerated for it.
All the components are explained in details on the pages below:
Last updated