v2-Web-Desktop-App
Getting Started
WORKING WITH MONDAY HERO
Step-By-Step Tutorials
Reach Us
Components
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.
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:
Convert to Components
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.
A component creation example.
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.
A shortcut for component creation.
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:
iOS UIKit
Here is a button code example with System Components:
iOS
Android
1
//ProfilePageViewController.swift
2
import UIKit
3
4
class ProfilePageViewController: UIViewController {
5
6
// The button with an image and text
7
@IBOutlet private weak var followButton: UIButton!
8
9
override func viewDidLoad() {
10
super.viewDidLoad()
11
setupViews()
12
setupLayout()
13
}
14
}
15
16
extension ProfilePageViewController {
17
private func setupViews() {
18
19
// The button with an image and text
20
followButton.layer.cornerRadius = 6
21
followButton.layer.masksToBounds = true
22
followButton.backgroundColor = UIColor.cerulean
23
followButton.setTitle(NSLocalizedString("follow", comment: ""),for: .normal)
24
followButton.setTitleColor(UIColor.daisy, for: .normal)
25
followButton.titleLabel?.font = UIFont.textStyle7
26
followButton.contentHorizontalAlignment = .leading
27
followButton.contentEdgeInsets = UIEdgeInsets(top: 6, left: 9 , bottom: 6, right: 9)
28
29
}
30
31
private func setupLayout() {
32
//Constraints are defined in Storyboard file.
33
}
34
}
Copied!
1
Coming soon.
Copied!
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.
Reusable Components
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.PrimaryButton.Swift - iOS
SignupPage.Swift - iOS
Android
1
//PrimaryButton.swift
2
import UIKit
3
4
class PrimaryButton: UIButton {
5
6
// MARK: - Initializers
7
override init(frame: CGRect) {
8
super.init(frame: frame)
9
initialize()
10
}
11
12
required init?(coder aDecoder: NSCoder) {
13
super.init(coder: aDecoder)
14
initialize()
15
}
16
17
func initialize() {
18
applyDefaultStyle()
19
}
20
21
// MARK: - Styling
22
func applyDefaultStyle() {
23
self.layer.cornerRadius = 10
24
self.layer.masksToBounds = true
25
self.backgroundColor = UIColor.cerulean_64
26
self.setTitleColor(UIColor.daisy, for: .normal)
27
self.titleLabel?.font = UIFont.textStyle2
28
self.contentHorizontalAlignment = .leading
29
self.contentEdgeInsets = UIEdgeInsets(top: 12, left: 138 , bottom: 12, right: 138)
30
31
}
32
33
func set(title: String){
34
self.setTitle(title, for: .normal)
35
}
36
37
}
Copied!
1
import UIKit
2
3
class SignupPage: UIViewController {
4
5
@IBOutlet private weak var signupButton: PrimaryButton!
6
7
override func viewDidLoad() {
8
super.viewDidLoad()
9
setupViews()
10
setupLayout()
11
}
12
13
}
14
15
extension SignUpViewController {
16
private func setupViews() {
17
18
signupButton.set(title: NSLocalizedString("signup", comment: ""))
19
20
}
21
22
private func setupLayout() {
23
//Constraints are defined in Storyboard file.
24
}
25
26
}
27
Copied!
1
Coming soon.
Copied!
All the components are explained in details on the pages below:
Last modified 1mo ago
Copy link