Documentation Index
Fetch the complete documentation index at: https://auth0-feat-ionic-capacitor-quickstart-modernization.mintlify.app/llms.txt
Use this file to discover all available pages before exploring further.
以下に記載されているように、Lockのスタイルと外観を設定するオプションは数多くあります。また、動作設定オプションページには、Lockの動作や機能を変更するオプションも多数用意されています。
Lockの外観をカスタマイズする
withStyleを使用して、Lockの初期設定にスタイルカスタマイズのオプションを追加できます。
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)
ヘッダーのスタイルオプション
ぼかし効果スタイルが使用されます。UIBlurEffectStyleで定義されている任意の値を使用できます。
.withStyle {
$0.headerBlur = .extraLight
}
.withStyle {
$0.headerColor = UIColor? = nil
}
.withStyle {
$0.logo = LazyImage(name: "company_logo")
}
.withStyle {
$0.headerCloseIcon = LazyImage(name: "ic_close")
}
.withStyle {
$0.headerBackIcon = LazyImage(name: "ic_close")
}
タイトルのスタイルオプション
hideTitle
ヘッダータイトルを非表示にして、ロゴのみを表示します。デフォルトでは、このオプションはfalseです。
.withStyle {
$0.hideTitle = false
}
title
ヘッダーに使用されるタイトルテキスト。
.withStyle {
$0.title = "Company LLC"
}
titleColor
ヘッダータイトルに使用される色。
.withStyle {
$0.titleColor = UIColor.black
}
ボタンとコンポーネントのスタイルオプション
プライマリボタンの色合いとして使用される色。
.withStyle {
$0.buttonTintColor = UIColor.white
}
disabledColor
Lockが無効のコンポーネントの色として使用される色。
.withStyle {
$0.disabledColor = UIColor(red: 0.8902, green: 0.898, blue: 0.9059, alpha: 1.0)
}
disabledTextColor
Lockが無効のコンポーネントテキストの色として使用される色。
.withStyle {
$0.disabledTextColor = UIColor(red: 0.5725, green: 0.5804, blue: 0.5843, alpha: 1.0)
}
.withStyle {
$0.hideButtonTitle = false
}
primaryColor
Lockの原色として使用される色。
.withStyle {
$0.primaryColor = UIColor.orange
}
入力フィールドのスタイル
inputTextColor
入力フィールドのテキストの色。
.withStyle {
$0.inputTextColor = UIColor.black
}
inputPlaceholderTextColor
入力フィールドのプレースホルダーテキストの色。
.withStyle {
$0.inputPlaceholderTextColor = UIColor(red: 0.780, green: 0.780, blue: 0.804, alpha: 1.00)
}
.withStyle {
$0.inputBorderColor = UIColor(red: 0.780, green: 0.780, blue: 0.804, alpha: 1.00)
}
.withStyle {
$0.inputBorderColorError = UIColor.red
}
.withStyle {
$0.inputBackgroundColor = UIColor.white
}
.withStyle {
$0.inputIconBackgroundColor = UIColor(red: 0.9333, green: 0.9333, blue: 0.9333, alpha: 1.0)
}
.withStyle {
$0.inputIconColor = UIColor(red: 0.5725, green: 0.5804, blue: 0.5843, alpha: 1.0)
}
ステータスバーのスタイル
UIStatusBarAnimation
Lock Controllerのステータスバーの更新アニメーション。
.withStyle {
$0.UIStatusBarAnimation = .none
}
statusBarHidden
Lockコントローラーのステータスバーの表示/非表示。
.withStyle {
$0.statusBarHidden = false
}
UIStatusBarStyle
Lockコントローラーのステータスバーのスタイル。
.withStyle {
$0.UIStatusBarStyle = .default
}
UISearchBarStyle
Lockパスワードレス検索バーのスタイル。
.withStyle {
$0.UISearchBarStyle = .default
}
その他のスタイルオプション
textColor
本文のテキストの色。
.withStyle {
$0.textColor = UIColor.black
}
backgroundColor
Lockの背景色として使用される色。
.withStyle {
$0.backgroundColor = UIColor.white
}
backgroundImage
Lockの背景として使用される画像。
.withStyle {
$0.backgroundImage = LazyImage(name: "company_logo")
}
oauth2
非dbのOAuth2接続は、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")
)
}
seperatorTextColor
ソーシャルセパレーターのラベルの色。
.withStyle {
$0.seperatorTextColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.54)
}
.withStyle {
$0.secondaryButtonColor = UIColor.black
}
tabTextColor
データベースのログインタブ上のテキストの色。
.withStyle {
$0.tabTextColor = UIColor(red: 0.3608, green: 0.4, blue: 0.4353, alpha: 0.6)
}
tabTintColor
データベースのログインタブ上の着色。
.withStyle {
$0.tabTintColor = UIColor(red: 0.3608, green: 0.4, blue: 0.4353, alpha: 0.6)
}
