Components-iOS

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
//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. 
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
//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​

Getting Started - Previous

Prepare Design To Get Best Results

Views

Last modified 1mo ago

Copy link

Outline

1. System Components

2. Custom Components