サブヘッダーは、リスト表示またはグリッド表示でコンテンツのセクションを識別するリストタイルです。通常、フィルタや並べ替えにより生成されたコンテンツのサブセクションに使用されます。
サブヘッダーの下のコンテンツがスクロールされると、そのサブヘッダーは次のサブヘッダーによって画面外に押し出されるまで、画面上部に固定されたままになります。
構造
![](https://developers.google.cn/cars/design/automotive-os/components/images/subheader-anatomy-1.png?authuser=002&hl=ja)
2. テキストラベル
仕様
グリッド内のサブヘッダー
![](https://developers.google.cn/cars/design/automotive-os/components/images/subheader-spec-1.png?authuser=002&hl=ja)
リストのサブヘッダー
![](https://developers.google.cn/cars/design/automotive-os/components/images/subheader-spec-2.png?authuser=002&hl=ja)
スタイル
タイポグラフィ
書体のスタイル | 書体 | 重量 | サイズ(dp) |
---|---|---|---|
本文 3 M | Roboto | 中 | 24 |
色
要素 | 色(日中モード) | カラー(夜間モード) |
---|---|---|
メインのタイプ | White | 白人 @ 88% |
サブヘッダーの背景 | Black | Black |
サイズ調整
要素 | サイズ(dp) |
---|---|
小見出しの高さ | 76 |
例
![](https://developers.google.cn/cars/design/automotive-os/components/images/subheader-mock-1.png?authuser=002&hl=ja)
![](https://developers.google.cn/cars/design/automotive-os/components/images/subheader-mock-2.png?authuser=002&hl=ja)
![](https://developers.google.cn/cars/design/automotive-os/components/images/subheader-mock-3.png?authuser=002&hl=ja)
![](https://developers.google.cn/cars/design/automotive-os/components/images/subheader-mock-4.png?authuser=002&hl=ja)