Lock.swift: Style Customization Options
There are numerous options to configure Lock's style and appearance listed below. In addition, there are also quite a few options available to alter Lock's behavior and functionality in the Behavior Configuration Options page.
Customizing Lock's appearance
Style customization options can be added to your Lock initialization using withStyle.
Lock
.classic()
.withStyle {
$0.title = "Company LLC"
$0.logo = LazyImage(name: "company_logo")
$0.primaryColor = UIColor(red: 0.6784, green: 0.5412, blue: 0.7333, alpha: 1.0)
}
.present(from: self)feedbackSection.helpful
Header Style Options
headerBlur
Blur effect style used. It can be any value defined in UIBlurEffectStyle.
.withStyle {
$0.headerBlur = .extraLight
}feedbackSection.helpful
headerColor
Color used as the header background color. By default it has no color, just a blur.
.withStyle {
$0.headerColor = UIColor? = nil
}feedbackSection.helpful
logo
Header logo image. The minimum recommended resolution is 200 pixels (width) by 200 pixels (height).
.withStyle {
$0.logo = LazyImage(name: "company_logo")
}feedbackSection.helpful
headerCloseIcon
The "close" icon in the header can be altered.
.withStyle {
$0.headerCloseIcon = LazyImage(name: "ic_close")
}feedbackSection.helpful
headerBackIcon
The "back" icon in the header can be altered.
.withStyle {
$0.headerBackIcon = LazyImage(name: "ic_close")
}feedbackSection.helpful
Title Style Options
hideTitle
Hide header title and show only the logo. By default this option is false.
.withStyle {
$0.hideTitle = false
}feedbackSection.helpful
title
Title text used in the header
.withStyle {
$0.title = "Company LLC"
}feedbackSection.helpful
titleColor
Color used as the header title color.
.withStyle {
$0.titleColor = UIColor.black
}feedbackSection.helpful
Button and Component Style Options
buttonTintColor
Color used as the primary button tint color.
.withStyle {
$0.buttonTintColor = UIColor.white
}feedbackSection.helpful
disabledColor
Color used as the Lock disabled component color.
.withStyle {
$0.disabledColor = UIColor(red: 0.8902, green: 0.898, blue: 0.9059, alpha: 1.0)
}feedbackSection.helpful
disabledTextColor
Color used as the Lock disabled component text color.
.withStyle {
$0.disabledTextColor = UIColor(red: 0.5725, green: 0.5804, blue: 0.5843, alpha: 1.0)
}feedbackSection.helpful
hideButtonTitle
Hide primary button title and show only the icon. By default this option is false.
.withStyle {
$0.hideButtonTitle = false
}feedbackSection.helpful
primaryColor
Color used as the Lock primary color.
.withStyle {
$0.primaryColor = UIColor.orange
}feedbackSection.helpful
Input Field Styles
inputTextColor
The color of input field text.
.withStyle {
$0.inputTextColor = UIColor.black
}feedbackSection.helpful
inputPlaceholderTextColor
The color of the placeholder text in input fields.
.withStyle {
$0.inputPlaceholderTextColor = UIColor(red: 0.780, green: 0.780, blue: 0.804, alpha: 1.00)
}feedbackSection.helpful
inputBorderColor
The color of the border of input fields.
.withStyle {
$0.inputBorderColor = UIColor(red: 0.780, green: 0.780, blue: 0.804, alpha: 1.00)
}feedbackSection.helpful
inputBorderColorError
The color of the border of input fields which have invalid values.
.withStyle {
$0.inputBorderColorError = UIColor.red
}feedbackSection.helpful
inputBackgroundColor
The color of the background of input fields.
.withStyle {
$0.inputBackgroundColor = UIColor.white
}feedbackSection.helpful
inputIconBackgroundColor
The color of the background of input field icons.
.withStyle {
$0.inputIconBackgroundColor = UIColor(red: 0.9333, green: 0.9333, blue: 0.9333, alpha: 1.0)
}feedbackSection.helpful
inputIconColor
The color of the input field icons.
.withStyle {
$0.inputIconColor = UIColor(red: 0.5725, green: 0.5804, blue: 0.5843, alpha: 1.0)
}feedbackSection.helpful
Status Bar Styles
UIStatusBarAnimation
The Lock Controller Status Bar update animation.
.withStyle {
$0.UIStatusBarAnimation = .none
}feedbackSection.helpful
statusBarHidden
The Lock Controller Status Bar's visibility.
.withStyle {
$0.statusBarHidden = false
}feedbackSection.helpful
UIStatusBarStyle
The Lock Controller Status Bar style.
.withStyle {
$0.UIStatusBarStyle = .default
}feedbackSection.helpful
UISearchBarStyle
The Lock Passwordless Search Bar style.
.withStyle {
$0.UISearchBarStyle = .default
}feedbackSection.helpful
Other Style Options
textColor
The color for the text in the body.
.withStyle {
$0.textColor = UIColor.black
}feedbackSection.helpful
backgroundColor
Color used as the Lock background color.
.withStyle {
$0.backgroundColor = UIColor.white
}feedbackSection.helpful
backgroundImage
Image used as the Lock background
.withStyle {
$0.backgroundImage = LazyImage(name: "company_logo")
}feedbackSection.helpful
oauth2
Any non-db OAuth2 connection can have styles customized by mapping a connection name with an AuthStyle
.withStyle {
$0.oauth2["slack"] = AuthStyle(
name: "Slack",
color: UIColor(red: 0.4118, green: 0.8078, blue: 0.6588, alpha: 1.0),
withImage: LazyImage(name: "ic_slack")
)
}feedbackSection.helpful
seperatorTextColor
Social separator label color.
.withStyle {
$0.seperatorTextColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.54)
}feedbackSection.helpful
secondaryButtonColor
The color of secondary buttons.
.withStyle {
$0.secondaryButtonColor = UIColor.black
}feedbackSection.helpful
tabTextColor
The color of the text on the database login tab.
.withStyle {
$0.tabTextColor = UIColor(red: 0.3608, green: 0.4, blue: 0.4353, alpha: 0.6)
}feedbackSection.helpful
tabTintColor
The color of the tinting on the database login tab.
.withStyle {
$0.tabTintColor = UIColor(red: 0.3608, green: 0.4, blue: 0.4353, alpha: 0.6)
}feedbackSection.helpful