Jetpack Compose Glimmer のタイトルチップ

対応する XR デバイス

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

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

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

Jetpack Compose Glimmer の TitleChip コンポーネントは、非インタラクティブ コンポーネントで、Card や VerticalList などの関連コンテンツの簡単なコンテキストやラベルを提供します。

タイトルチップは、短いタイトル、カテゴリ名、ステータス インジケーターなどの簡潔な情報に使用します。通常、タイトルチップは、説明するコンテンツの上に配置して、明確な構造的関係を確立する必要があります。

基本的な例: 短いタイトルチップを作成する

次のコードは、基本的なタイトルチップを作成します。

@Composable
fun BasicTitleChipSample() {
    TitleChip { Text("Messages") }
}
TitleChipSample.kt

基本的な例: アイコン付きのタイトルチップを作成する

次のコードは、アイコン付きのタイトルチップを作成します。

@Composable
fun TitleChipWithIconSample() {
    TitleChip {
        Icon(FavoriteIcon, contentDescription = "Favorite")
        Text("Favorites")
    }
}
TitleChipSample.kt

例: カード付きのタイトルチップを作成する

タイトルチップを別のコンポーネントで使用するには、コンポーザブル内の他のコンポーネントの上にタイトルチップ TitleChipDefaults.associatedContentSpacingを配置します。次のコードは、カード付きのタイトルチップを作成します。

@Composable
fun TitleChipWithCardSample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }

        Spacer(Modifier.height(TitleChipDefaults.associatedContentSpacing))

        Card(
            title = { Text("Title") },
            subtitle = { Text("Subtitle") },
            leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        ) {
            Text("Card Content")
        }
    }
}
TitleChipSample.kt

コードに関する主なポイント

• タイトルチップは水平方向に中央揃えになります。これは、カードの上に配置されたタイトルチップの通常の配置です。
• Spacer の高さは固定されており、2 つのコンポーネント間に適切な垂直方向の 間隔が設けられています。これは TitleChipDefaults.associatedContentSpacing を使用して定義されます。
• 省略可能な leadingIcon を使用して、テキスト コンテンツの前に視覚的なコンテキストを追加します。
• タイトルチップのテキストには、自動的に caption スタイルが使用されます。
• タイトルチップはインタラクティブではありません。クリック可能なラベルが必要な場合は、 Button または別のインタラクティブ コンポーネントを使用します。