Components

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.

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:

//ProfilePageViewController.swift
import UIKit
​
class ProfilePageViewController: UIViewController {
​
  // The button with an image and text
	@IBOutlet private weak var followButton: UIButton!
  
	override func viewDidLoad() {
		super.viewDidLoad()
		setupViews()
		setupLayout()
	}
}
​
extension ProfilePageViewController {
	private func setupViews() {
		
		// The button with an image and text
		followButton.layer.cornerRadius = 6
		followButton.layer.masksToBounds =  true 
		followButton.backgroundColor = UIColor.cerulean
		followButton.setTitle(NSLocalizedString("follow", comment: ""),for: .normal)
		followButton.setTitleColor(UIColor.daisy, for: .normal)
		followButton.titleLabel?.font = UIFont.textStyle7
		followButton.contentHorizontalAlignment = .leading 
		followButton.contentEdgeInsets = UIEdgeInsets(top: 6, left: 9 , bottom: 6, right: 9)
	
	}
​
	private func setupLayout() { 
		//Constraints are defined in Storyboard file.
	}
}

Coming soon.

All the components are explained separately in the pages below:

• ​Buttons​

• ​Text Fields​

• ​Text Areas ​

• ​Status Bar​

• ​Search Bar​

• ​Lists​

• ​Grids​

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.

//PrimaryButton.swift
import UIKit
​
class PrimaryButton: UIButton {
​
	// MARK: - Initializers
	override init(frame: CGRect) {
		super.init(frame: frame)
		initialize()
	}
​
	required init?(coder aDecoder: NSCoder) {
		super.init(coder: aDecoder)
		initialize()
	}
​
	func initialize() {
		applyDefaultStyle()
	}
​
	// MARK: - Styling
	func applyDefaultStyle() {
		self.layer.cornerRadius = 10
		self.layer.masksToBounds =  true
		self.backgroundColor = UIColor.cerulean_64
		self.setTitleColor(UIColor.daisy, for: .normal)
		self.titleLabel?.font = UIFont.textStyle2
		self.contentHorizontalAlignment = .leading 
		self.contentEdgeInsets = UIEdgeInsets(top: 12, left: 138 , bottom: 12, right: 138)
​
	}
​
	func set(title: String){
		self.setTitle(title, for: .normal)
	}
​
}

import UIKit
​
class SignupPage: UIViewController {
​
	@IBOutlet private weak var signupButton: PrimaryButton!
​
	override func viewDidLoad() {
		super.viewDidLoad()
		setupViews()
		setupLayout()
	}
​
}
​
extension SignUpViewController {
	private func setupViews() {
​
		signupButton.set(title: NSLocalizedString("signup", comment: ""))
​
	}
​
	private func setupLayout() {
		//Constraints are defined in Storyboard file.
	}
​
}
​

Coming soon.

All the components are explained in details on the pages below:

• ​Views​

• ​Texts​

• ​Images​

• ​Buttons​

• ​Text Fields​

• ​Text Areas ​

• ​Search Bar​