展開可能なアイテム
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
展開可能なアイテムは、追加のコンテンツをインラインで表示するカスタムチップです。
展開可能なアイテムチップ
展開可能なアイテムを使用すると、アプリは画面上のより小さなスペースに高密度コンテンツを配置できます。アプリをコンパクトに保ちながら、ユーザーが追加コンテンツにすばやくアクセスできるようにするには、このコンポーネントを使用します。
このコンポーネントを使用して、ユーザーが次のタスクを実行できるようにします。
- リストアイテム(チップ、カード)をさらに表示する
- テキストをさらに表示
構造
リストを展開
チップは中央揃えにする必要があります。
A. ラベル
ラベルのテキストはカスタマイズできます。デフォルトは [もっと見る] です。
B. コンテナ
ボタンにはコンテナの枠線を含める必要があります。
C. 展開アイコン
デフォルトのアイコンは下向きの山形アイコンで、カスタマイズや削除が可能です。アイコンは、LTR 言語ロケールの場合は右揃え、RTL 言語ロケールの場合は左揃えになります。
エキスパンド テキスト
チップは中央揃えにする必要があります。
A. ラベル
ラベルのテキストはカスタマイズできます。デフォルトは [展開] です。
B. コンテナ
このボタンには、枠線付きと枠線なしの 2 つのバリエーションがあります。
C. 展開アイコン
デフォルトのアイコンは下向きの山形アイコンで、カスタマイズや削除が可能です。アイコンは、LTR 言語ロケールの場合は右揃え、RTL 言語ロケールの場合は左揃えになります。
動作
リストを展開しています
チップをタップすると、展開してリストにその他のアイテムが表示されます。展開操作はアニメーションで、[Show more] テキストは非表示になり、他のアイテムは 1 つの滑らかな動きで表示します。折りたたまれた状態で表示されるアイテムの数はカスタマイズできます。推奨される項目数は 3 です。
エキスパンド テキスト
チップをタップすると、展開して他のテキストが表示されます。展開操作はアニメーションで、[More] テキストは非表示になり、他のアイテムは 1 つの滑らかな動きで表示します。折りたたまれた状態で表示されるテキストの行数はカスタマイズできます。推奨される行数は 8 行です。
タップ ターゲットは、ボタンだけでなくテキスト領域全体で構成されます。
チップのスタイル
リストを展開しています
アイコンのサイズ: 20 dp x 20 dp
アイコンの色: サーフェス上
高さ: 32 dp
幅: テキストや言語によって異なる
ストローク: 1 dp
ラベルのスタイル: キャプション 1
ラベルの色: サーフェス上
エキスパンド テキスト
アイコンのサイズ: 20 dp x 20 dp
アイコンの色: サーフェス上
高さ: 32 dp
幅: テキストや言語によって異なる
ストローク: 0 または 1 dp
塗りつぶし: なし
ラベルのスタイル: キャプション 1
ラベルの色: サーフェス上
パディング
展開可能なアイテム コンポーネントのリスト バリアントとテキスト バリアントの両方で、チップには次のパディング値が必要です。
- 上部のパディング: 8 dp
- 下パディング: 16 dp
使用方法
展開可能なアイテムの使用例:
このページのコンテンツやコードサンプルは、コンテンツ ライセンスに記載のライセンスに従います。Java および OpenJDK は Oracle および関連会社の商標または登録商標です。
最終更新日 2023-12-02 UTC。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"必要な情報がない"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"複雑すぎる / 手順が多すぎる"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"最新ではない"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻訳に関する問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"サンプル / コードに問題がある"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"その他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"わかりやすい"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"問題の解決に役立った"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"その他"
}]