カード

カードには、テキスト、アイコン、画像、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