> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Lock.Swift のスタイル設定とカスタマイズのオプション

# Lock.swift: スタイルのカスタマイズオプション

以下に、Lock のスタイルと外観を設定するためのさまざまなオプションを示します。さらに、Lock の動作や機能を変更するためのオプションも、[Behavior Configuration Options](/ja/docs/libraries/lock-swift/lock-swift-configuration-options) ページで多数紹介しています。

<div id="customizing-locks-appearance">
  ## Lock の外観のカスタマイズ
</div>

スタイルのカスタマイズオプションは、`withStyle` を使用して Lock の初期化時に追加できます。

```swift lines theme={null}
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)
```

<div id="header-style-options">
  ## ヘッダースタイルのオプション
</div>

<div id="headerblur">
  ### headerBlur
</div>

使用するぼかし効果のスタイルです。`UIBlurEffectStyle` で定義された任意の値を指定できます。

```swift lines theme={null}
.withStyle {
  $0.headerBlur = .extraLight
}
```

<div id="headercolor">
  ### headerColor
</div>

ヘッダーの背景色に使用する色です。デフォルトでは色は設定されず、ぼかしのみが適用されます。

```swift lines theme={null}
.withStyle {
  $0.headerColor = UIColor? = nil
}
```

<div id="logo">
  ### logo
</div>

ヘッダーロゴ画像。推奨される最小解像度は、幅 200 ピクセル、高さ 200 ピクセルです。

```swift lines theme={null}
.withStyle {
  $0.logo = LazyImage(name: "company_logo")
}
```

<div id="headercloseicon">
  ### headerCloseIcon
</div>

ヘッダーの"close"アイコンは変更できます。

```swift lines theme={null}
.withStyle {
  $0.headerCloseIcon = LazyImage(name: "ic_close")
}
```

<div id="headerbackicon">
  ### headerBackIcon
</div>

ヘッダーの"back"アイコンは変更できます。

```swift lines theme={null}
.withStyle {
  $0.headerBackIcon = LazyImage(name: "ic_close")
}
```

<div id="title-style-options">
  ## タイトルのスタイル設定
</div>

<div id="hidetitle">
  ### hideTitle
</div>

ヘッダーのタイトルを非表示にし、ロゴのみを表示します。デフォルト値は false です。

```swift lines theme={null}
.withStyle {
  $0.hideTitle = false
}
```

<div id="title">
  ### タイトル
</div>

ヘッダーで使用されるタイトルのテキスト

```swift lines theme={null}
.withStyle {
  $0.title = "Company LLC"
}
```

<div id="titlecolor">
  ### titleColor
</div>

ヘッダーのタイトルに使用する色です。

```swift lines theme={null}
.withStyle {
  $0.titleColor = UIColor.black
}
```

<div id="button-and-component-style-options">
  ## ボタンとコンポーネントのスタイル オプション
</div>

<div id="buttontintcolor">
  ### buttonTintColor
</div>

プライマリボタンのティントカラーに使用する色です。

```swift lines theme={null}
.withStyle {
  $0.buttonTintColor = UIColor.white
}
```

<div id="disabledcolor">
  ### disabledColor
</div>

Lock で無効化されたコンポーネントに使用される色です。

```swift lines theme={null}
.withStyle {
  $0.disabledColor = UIColor(red: 0.8902, green: 0.898, blue: 0.9059, alpha: 1.0)
}
```

<div id="disabledtextcolor">
  ### disabledTextColor
</div>

Lock の無効なコンポーネントのテキスト色に使用される色です。

```swift lines theme={null}
.withStyle {
  $0.disabledTextColor = UIColor(red: 0.5725, green: 0.5804, blue: 0.5843, alpha: 1.0)
}
```

<div id="hidebuttontitle">
  ### hideButtonTitle
</div>

プライマリボタンのタイトルを非表示にし、アイコンのみを表示します。デフォルト値は false です。

```swift lines theme={null}
.withStyle {
  $0.hideButtonTitle = false
}
```

<div id="primarycolor">
  ### primaryColor
</div>

Lock のメインカラーとして使用する色です。

```swift lines theme={null}
.withStyle {
  $0.primaryColor = UIColor.orange
}
```

<div id="input-field-styles">
  ## 入力フィールドのスタイル
</div>

<div id="inputtextcolor">
  ### inputTextColor
</div>

入力フィールド内のテキストの色。

```swift lines theme={null}
.withStyle {
  $0.inputTextColor = UIColor.black
}
```

<div id="inputplaceholdertextcolor">
  ### inputPlaceholderTextColor
</div>

入力フィールドのプレースホルダーテキストの色。

```swift lines theme={null}
.withStyle {
  $0.inputPlaceholderTextColor = UIColor(red: 0.780, green: 0.780, blue: 0.804, alpha: 1.00)
}
```

<div id="inputbordercolor">
  ### inputBorderColor
</div>

入力フィールドの枠線の色。

```swift lines theme={null}
.withStyle {
  $0.inputBorderColor = UIColor(red: 0.780, green: 0.780, blue: 0.804, alpha: 1.00)
}
```

<div id="inputbordercolorerror">
  ### inputBorderColorError
</div>

無効な値が入力された入力フィールドの枠線の色。

```swift lines theme={null}
.withStyle {
  $0.inputBorderColorError = UIColor.red
}
```

<div id="inputbackgroundcolor">
  ### inputBackgroundColor
</div>

入力フィールドの背景の色。

```swift lines theme={null}
.withStyle {
  $0.inputBackgroundColor = UIColor.white
}
```

<div id="inputiconbackgroundcolor">
  ### inputIconBackgroundColor
</div>

入力フィールドアイコンの背景色。

```swift lines theme={null}
.withStyle {
  $0.inputIconBackgroundColor = UIColor(red: 0.9333, green: 0.9333, blue: 0.9333, alpha: 1.0)
}
```

<div id="inputiconcolor">
  ### inputIconColor
</div>

入力フィールドのアイコンの色です。

```swift lines theme={null}
.withStyle {
  $0.inputIconColor = UIColor(red: 0.5725, green: 0.5804, blue: 0.5843, alpha: 1.0)
}
```

<div id="status-bar-styles">
  ## ステータスバーのスタイル
</div>

<div id="uistatusbaranimation">
  ### UIStatusBarAnimation
</div>

Lock Controller のステータスバー更新アニメーション。

```swift lines theme={null}
.withStyle {
  $0.UIStatusBarAnimation = .none
}
```

<div id="statusbarhidden">
  ### statusBarHidden
</div>

Lock Controller のステータスバーの表示/非表示。

```swift lines theme={null}
.withStyle {
  $0.statusBarHidden = false
}
```

<div id="uistatusbarstyle">
  ### UIStatusBarStyle
</div>

Lock Controller のステータスバーの表示スタイル。

```swift lines theme={null}
.withStyle {
  $0.UIStatusBarStyle = .default
}
```

<div id="uisearchbarstyle">
  ### UISearchBarStyle
</div>

Lock <Tooltip tip="パスワードを第1要素として使用しない認証方式。" cta="用語集を表示" href="/ja/docs/glossary?term=Passwordless">パスワードレス</Tooltip> 検索バーのスタイル。

```swift lines theme={null}
.withStyle {
  $0.UISearchBarStyle = .default
}
```

<div id="other-style-options">
  ## その他のスタイル オプション
</div>

<div id="textcolor">
  ### textColor
</div>

本文のテキスト色。

```swift lines theme={null}
.withStyle {
  $0.textColor = UIColor.black
}
```

<div id="backgroundcolor">
  ### backgroundColor
</div>

Lock の背景色に使用する色です。

```swift lines theme={null}
.withStyle {
  $0.backgroundColor = UIColor.white
}
```

<div id="backgroundimage">
  ### backgroundImage
</div>

Lock の背景画像

```swift lines theme={null}
.withStyle {
  $0.backgroundImage = LazyImage(name: "company_logo")
}
```

<div id="oauth2">
  ### oauth2
</div>

接続名を `AuthStyle` にマッピングすることで、データベース接続以外の任意の OAuth2 接続のスタイルをカスタマイズできます

```swift lines theme={null}
.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")
  )
}
```

<div id="seperatortextcolor">
  ### seperatorTextColor
</div>

ソーシャルログインの区切りラベルの色。

```swift lines theme={null}
.withStyle {
  $0.seperatorTextColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.54)
}
```

<div id="secondarybuttoncolor">
  ### secondaryButtonColor
</div>

セカンダリ ボタンの色です。

```swift lines theme={null}
.withStyle {
  $0.secondaryButtonColor = UIColor.black
}
```

<div id="tabtextcolor">
  ### tabTextColor
</div>

データベースログインタブのテキストの色。

```swift lines theme={null}
.withStyle {
  $0.tabTextColor = UIColor(red: 0.3608, green: 0.4, blue: 0.4353, alpha: 0.6)
}
```

<div id="tabtintcolor">
  ### tabTintColor
</div>

データベースログインタブの色合いに使用する色。

```swift lines theme={null}
.withStyle {
  $0.tabTintColor = UIColor(red: 0.3608, green: 0.4, blue: 0.4353, alpha: 0.6)
}
```