Drop

利用按鈕切換來顯示或隱藏額外介面,可以是下拉選單或是更多客製化內容。使用類別名稱為 .drop 並以此做為子元件前綴詞。Drop 內主要由控制元件 .drop_switch 與內容容器 .drop_body 組成。控制元件可使用 Button 或其他組件;內容容器則沒有任何樣式,單純作為置放客製化內容的容器以及定位使用。若想要以純 CSS 控制切換,可直接於 .drop 加上 .:hover 即可。

Content
<div class="drop :hover"> <button class="btn drop_switch"></button> <div class="drop_body"></div> </div>

內容容器位置

可以透過以下不同類別名稱來決定內容容器顯示的位置在哪,預設為下方靠左。將類別名稱設定在 .drop 上。

類別名稱
左方靠上 .@left
左方靠下 .@left-bottom
上方靠左 .@top
上方靠右 .@top-right
右方靠上 .@right
右方靠下 .@right-bottom
下方靠右 .@down-right
Content
Content

Content
Content

Content
Content

Content
<div class="drop @right"></div>