カード

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

原則

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

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

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

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

使い方と配置

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

コンテンツには、Jetpack Compose Glimmer カード テンプレートを使用します。多くのバリエーションがあり、グラスのデザイン原則に沿って最適化されています。

カードで複数のアクションを表示するには、ボタン グループを使用します。

解剖学

カードは、事前設定されたスロット テンプレートを使用して作成されます。

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

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

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

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

5. アクション: ボタンなどの主要なインタラクティブ要素のスロット。これにより、ユーザーはカードから直接アクションを実行できます。カードにアクションがある場合は、1 つのアクションのみを含める必要があります。

6. メイン コンテンツ: カードのコアとなる本文で、メインのテキストやその他のコンテンツを配置します。

フォーカス

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

リストアイテムとしてフォーカスがあるカード。

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

カスタマイズ

プロパティ	カスタマイズ	デフォルト
形状	はい	メディア
パディング	はい	24 dp、24 dp
縁	○	2 dp、#606460
テキスト	○	ボディ スモール
先頭のアイコン	○	56 dp
末尾のアイコン	○	56 dp