Jetpack Compose Glimmer のボタン

対応する XR デバイス

このガイダンスは、次のようなタイプの XR デバイス向けのエクスペリエンスを構築する際に役立ちます。

XR デバイスのタイプについて →

[]

XR デバイスのタイプについて →

Jetpack Compose Glimmer では、Button はディスプレイ グラスの入力に 最適化されたインタラクティブなコンポーネントで、状態を通じて明確な視覚的フィードバックを提供し、ユーザーのアクションをガイドします。

ボタンは、Jetpack Compose Glimmer サーフェス システム上に構築されており、ボーダーや奥行きなどの物理プロパティを 自動的に処理します。

標準ボタンには、テキストラベルと任意のアイコンが含まれます。プライマリ アクションまたはセカンダリ アクションに使用できます。アイコンボタンや切り替えボタンなどの特殊なボタンもあります。これらは、 Jetpack Compose Glimmer で個別のコンポーネントとして定義されます。

デフォルト

大

解剖学

ボタンは、コンテナとラベルで構成され、先頭と末尾にアイコンを配置できます。

サイズ

Jetpack Compose Glimmer ボタンは、2 つのサイズ バリアントをサポートしています。これらは、最小の高さと内部パディングに影響します。

州

Jetpack Compose Glimmer のボタンは、状態を伝えるために外観が変化します。

• 有効: インタラクティブ ボタンのデフォルトの状態。
• フォーカス: フォーカスすると、ボタンに GlimmerTheme.depthEffectLevels.level1とフォーカスされたボーダーのハイライトが適用されます。
• 押下: 有効にすると、半透明の白いオーバーレイが サーフェスに適用されます。
• 無効: ボタンは入力に応答せず、外観 が調整されます。

ボタンのデフォルト

標準ボタンには次のデフォルトが適用されます。

• デフォルトでは、ボタンは GlimmerTheme.typography.bodySmall を使用します。ボタン内のテキストは簡潔で、アクションを明確に説明していることを確認してください。
• ボタンのデフォルトのシェイプは GlimmerTheme.shapes.large です。この一貫した丸みにより、ユーザーはディスプレイ グラス インターフェース全体でボタンを識別できます。

例: テキスト付きボタン

次のコードは、テキスト付きの標準ボタンを作成します。

@Composable
fun ButtonSample() {
    Button(onClick = {}) { Text("Send") }
}
ButtonSamples.kt

例: 先頭と末尾にアイコンが付いたボタン

テキストの先頭（leadingIcon を使用）または末尾（trailingIcon を使用）にアイコンを追加して、追加のコンテキストを提供することもできます。

次のコードは、先頭にアイコンが付いたボタンを作成します。

@Composable
fun ButtonWithLeadingIconSample() {
    Button(onClick = {}, leadingIcon = { Icon(FavoriteIcon, "Localized description") }) {
        Text("Send")
    }
}
ButtonSamples.kt