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>