固定式
用於呈現更深入的內容,與主頁面整合而不用另外開啟頁面,不使用時仍會存在於畫面中不會自動消失。
![](http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3dDZKN1lHNG1TekU/components_bottomsheets_usage1.png)
固定式的下表將在地圖操作時持續顯示詳細資訊
模組式
通常為選單或是對話框的替代方案,在表啟動時會從畫面下方滑入,畫面其他部分將蓋上一層灰,來提高下表的辨識度。使用者在使用完畢後關閉,讓被覆蓋在下方的內容可以再度被使用。
主要功能有以下三個:
- 以列表或網格的形式呈現按鈕選單或對話框
![](http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3NWNQcUo1TnhhaWs/components_bottomsheets_modal1.png)
列表
![](http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3UzA3RDctV2k0YUk/components_bottomsheets_modal2.png)
網格
- 呈現一個上下文選單
![](http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3Zm9IR1dxb0E5Ync/components_bottomsheets_modal15.png)
從選單中跳出一個二級選單
- 呈現詳細內容
![](http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3bmFYUkhqVXJpY3c/components_bottomsheets_modal7.png)
同於固定式,模組式一樣可以拿來呈現由其他應用而來的內容
深層連結
模組式選單可以放置深層連結,來與其他應用交互作用。
深層鏈結不可以退到比起始點還要上一層的頁面,只有停在起始點,或是進入下一層時才可以退回。如有必須要退至上一層頁面,則再開啟一起始點是上一層的深層連結。
![](http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3b1BpT0dRd0tFaUE/components_bottomsheets_modal_do.png)
在深層連結的起點,不可退回上一層,只可關閉
![](http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3UTB0bG8tYWxVRG8/components_bottomsheets_modal_dont.png)
進入下一層,可退回
操作方式
模組式開啟後可用以下三種方式關閉:
- 向下拖移
![](http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3a3Z2UGZJMkRWamM/components_bottomsheets_behavior1.png)
- 點擊列表外的範圍
![](http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3cGt6TlA0ZzNLdDg/components_bottomsheets_behavior2.png)
- 點擊關閉按鍵
![](http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3cTdiQWp2TkI0NEE/components_bottomsheets_behavior3.png)
畫面規範
![](http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B7WCemMG6e0VTGwzWTdzNGdyZXM/components_bottomsheets_specs4.png)
標題
字型字體:Roboto Regular 16sp
顏色:黑
不透明度:54%
灰色覆蓋
字型字體:Roboto Regular 16sp
顏色:黑
不透明度:87%
背景
顏色:白
灰色覆蓋
顏色:黑
不透明度:20%
模組式在開啟時,預設是依照內容數量決定高度,最高到達高寬比為16:9。
![](http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3VVJVdF9wRG5Iem8/components_bottomsheets_specs9.png)
最大高度:寬 = 16:9
如選項實際高度大於起始限制的最大高度,則一樣起始為限制的最大高度,而使用者可以藉由滾動讓選單填滿畫面。
![](http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3Ym9QLTlfbUR4ekk/components_bottomsheets_modal11.png)
選項多於一頁
選單內容可分為三種:
- 圖文列表
![](http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3dXNVNEpIZzZQdUU/components_bottomsheets_specs1.png)
左右間距:16 dp
上下間距:8 dp
選項高:48 dp
選項圖示寬高:24 dp
選項圖示上下間距:垂直置中
文字與選項圖示間距:32 dp
- 帶有標題的上下圖文列表
![](http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3Q3NrbGhWQXJxSGs/components_bottomsheets_specs3.png)
上列表標題高:56 dp
上列表的下間距:7 dp
上下表分隔線高:1 dp
其他與圖文列表相同
*網格列表
![](http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3a2JBazEtX3R2Ulk/components_bottomsheets_specs7.png)
左右間距:24 dp
網格列上下間距:除最底邊24 dp,其餘16 dp
網格圖示寬高:48 dp
網格圖示上下間距:垂直置中
網格圖示左右間距:除左右圖示靠向邊界,中間圖示平均分佈
文字高度:16dp
文字間距:中央對齊各圖示