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)Was this helpful?
Header Style Options
headerBlur
Blur effect style used. It can be any value defined in UIBlurEffectStyle.
.withStyle {
$0.headerBlur = .extraLight
}Was this helpful?
headerColor
Color used as the header background color. By default it has no color, just a blur.
.withStyle {
$0.headerColor = UIColor? = nil
}Was this helpful?
logo
Header logo image. The minimum recommended resolution is 200 pixels (width) by 200 pixels (height).
.withStyle {
$0.logo = LazyImage(name: "company_logo")
}Was this helpful?
headerCloseIcon
The "close" icon in the header can be altered.
.withStyle {
$0.headerCloseIcon = LazyImage(name: "ic_close")
}Was this helpful?
headerBackIcon
The "back" icon in the header can be altered.
.withStyle {
$0.headerBackIcon = LazyImage(name: "ic_close")
}Was this helpful?
Title Style Options
hideTitle
Hide header title and show only the logo. By default this option is false.
.withStyle {
$0.hideTitle = false
}Was this helpful?
title
Title text used in the header
.withStyle {
$0.title = "Company LLC"
}Was this helpful?
titleColor
Color used as the header title color.
.withStyle {
$0.titleColor = UIColor.black
}Was this helpful?
Button and Component Style Options
buttonTintColor
Color used as the primary button tint color.
.withStyle {
$0.buttonTintColor = UIColor.white
}Was this 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)
}Was this 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)
}Was this helpful?
hideButtonTitle
Hide primary button title and show only the icon. By default this option is false.
.withStyle {
$0.hideButtonTitle = false
}Was this helpful?
primaryColor
Color used as the Lock primary color.
.withStyle {
$0.primaryColor = UIColor.orange
}Was this helpful?
Input Field Styles
inputTextColor
The color of input field text.
.withStyle {
$0.inputTextColor = UIColor.black
}Was this 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)
}Was this 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)
}Was this helpful?
inputBorderColorError
The color of the border of input fields which have invalid values.
.withStyle {
$0.inputBorderColorError = UIColor.red
}Was this helpful?
inputBackgroundColor
The color of the background of input fields.
.withStyle {
$0.inputBackgroundColor = UIColor.white
}Was this 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)
}Was this 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)
}Was this helpful?
Status Bar Styles
UIStatusBarAnimation
The Lock Controller Status Bar update animation.
.withStyle {
$0.UIStatusBarAnimation = .none
}Was this helpful?
statusBarHidden
The Lock Controller Status Bar's visibility.
.withStyle {
$0.statusBarHidden = false
}Was this helpful?
UIStatusBarStyle
The Lock Controller Status Bar style.
.withStyle {
$0.UIStatusBarStyle = .default
}Was this helpful?
UISearchBarStyle
The Lock Passwordless Search Bar style.
.withStyle {
$0.UISearchBarStyle = .default
}Was this helpful?
Other Style Options
textColor
The color for the text in the body.
.withStyle {
$0.textColor = UIColor.black
}Was this helpful?
backgroundColor
Color used as the Lock background color.
.withStyle {
$0.backgroundColor = UIColor.white
}Was this helpful?
backgroundImage
Image used as the Lock background
.withStyle {
$0.backgroundImage = LazyImage(name: "company_logo")
}Was this 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")
)
}Was this helpful?
seperatorTextColor
Social separator label color.
.withStyle {
$0.seperatorTextColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.54)
}Was this helpful?
secondaryButtonColor
The color of secondary buttons.
.withStyle {
$0.secondaryButtonColor = UIColor.black
}Was this 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)
}Was this 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)
}Was this helpful?