Hover 是只當滑鼠移到 Button 按鈕上面的時候,按鈕所出現的「反應」,這個反應主要是想要提醒使用者,現在在哪一個按鈕上面,可以準備按了;或是滑鼠並不在正確的按鈕上面,提醒使用者應該要前往其他按鈕。
Hover 狀態是一個很好用的 UI 使用者介面的技巧,而在 FileMaker 很簡單就可以做到這樣的 CSS 效果。
我們用一個 Button Bar 的例子來簡單說明一下,如何利用好用的 Hover 功能。
步驟
新增一組 Barton Bar,預設為 3 個 Segment
各個 Segment (Button) 依序命名為 One, Two ,Three
記得要幫每一個 Button 設定一個 Script,先簡單設定成 Set Variable [ ]
FileMaker 預設在 Button 尚未賦予動作 (Script) 之前,Hover 狀態並不會出現,我們目的是為了示範,簡單設置成 Set Variable 就好,不需真的對變數命名。
One, Two, Three 都一樣簡單賦予動作 Set Variable [ ]
Command + I 叫出 Inspector
選擇 Button Bar: Segment,表示我們開始對每個 Button 做調整
選擇 Hover 狀態,這次主要針對 Hover 狀態做調整
Fill Color 維持黑色不變
- Line 線條僅顯示「左側線條」
- Line 線條「寬度」調成 8
- Line 線條「顏色」調成灰色
進入 Browse Mode 瀏覽效果
可以看到滑鼠移到各個 Button 的效果,除了文字顏色的變化之外(這是 Button Bar 預設的),我們可以看到滑鼠移動到的 Button 左方出現「粗」灰色線條,整體效果非常明顯。
Button Bar 還有更多的設定可以調整,包括:
- Button Bar: Dividers
- Button Bar: Icon
此外,還包括狀態:
- Active
- Inactive
- Pressed
- Infocus
以上這樣調整 Hover 的作法大家應該能體會到怎麼操作 Button Bar 的部分效果,其他的可以再摸索,嘗試找到自己習慣的模式。