カード

カードには、テキスト、アイコン、画像、Gemini の回答、アクションなど、さまざまな情報を表示できます。

原則

一貫性がある: カードは、関連する情報とアクションを 1 つのわかりやすい単位にグループ化します。

明確: コンテンツを明確かつ整理された方法で提示し、スキャンしやすさを高めます。

汎用性: カードは、短いテキストの抜粋から複数の要素を含む複雑な要約まで、さまざまなコンテンツを表示するように適応できます。

モジュール式: Jetpack Compose Glimmer for Glasses インターフェースのさまざまな部分でモジュール式で再利用できるように設計されています。

使用状況とプレースメント

カードには、テキスト、アイコン、画像、アクション、Gemini の回答など、さまざまな情報を入れることができます。

Jetpack Compose Glimmer カード テンプレートは、さまざまなバリエーションがあり、メガネのデザイン原則に沿って最適化されているため、コンテンツに使用します。

解剖学

カードは、事前設定されたスロット テンプレートで構築されます。

1. ヘッダー: カードの上部セクション。画像を配置するように設計されています。

2. タイトルとサブタイトル: これらのテキスト フィールドには、カードのメインラベルとセカンダリ ラベルを指定します。

3. 先頭のアイコン: カードのコンテンツ領域の先頭に表示されるオプションのアイコン。

4. Trailing Icon（末尾のアイコン）: カードのコンテンツ領域の末尾に表示されるオプションのアイコン。

5. アクション: ボタンなどの主要なインタラクティブ要素のスロット。これにより、ユーザーはカードから直接アクションを実行できます。このスロットは、Card コンポーザブルの別のオーバーロードで使用できます。

6. メイン コンテンツ: カードの本体部分。メインのテキストやその他のコンテンツを配置します。

フォーカス

特定のインタラクティブ要素（アクションのボタンなど）を配置することを主な目的とするカードでは、フォーカスはカード コンテナではなく、その要素に直接移動する必要があります。カードは、リスト内のエントリなど、ナビゲーション可能な単一のアイテムを表す場合にフォーカス可能になります。これにより、より直接的でアクセスしやすいユーザー エクスペリエンスが実現します。

リストアイテムとしてフォーカスされているカード。

カード内のボタンが、操作可能な要素としてフォーカスされます。

カスタマイズ

プロパティ	カスタマイズ	デフォルト
シェイプ	はい	中
パディング	はい	24 dp、24 dp
枠線	はい	2 dp、#606460
テキスト	はい	Body Small
先頭のアイコン	はい	56 dp
末尾のアイコン	はい	56 dp