[FileMaker] 微調 Button Bar 的 Hover 狀態

Hover 是只當滑鼠移到 Button 按鈕上面的時候,按鈕所出現的「反應」,這個反應主要是想要提醒使用者,現在在哪一個按鈕上面,可以準備按了;或是滑鼠並不在正確的按鈕上面,提醒使用者應該要前往其他按鈕。

Hover 狀態是一個很好用的 UI 使用者介面的技巧,而在 FileMaker 很簡單就可以做到這樣的 CSS 效果。

我們用一個 Button Bar 的例子來簡單說明一下,如何利用好用的 Hover 功能。

步驟

新增一組 Barton Bar,預設為 3 個 Segment

各個 Segment (Button) 依序命名為 One, Two ,Three

螢幕快照 2018-01-20 下午11.42.21.png

記得要幫每一個 Button 設定一個 Script,先簡單設定成 Set Variable [ ]

FileMaker 預設在 Button 尚未賦予動作 (Script) 之前,Hover 狀態並不會出現,我們目的是為了示範,簡單設置成 Set Variable 就好,不需真的對變數命名。

One, Two, Three 都一樣簡單賦予動作 Set Variable [ ]

螢幕快照 2018-01-20 下午11.44.46.png

Command + I 叫出 Inspector

選擇 Button Bar: Segment,表示我們開始對每個 Button 做調整

螢幕快照 2018-01-20 下午11.52.03.png

選擇 Hover 狀態,這次主要針對 Hover 狀態做調整

螢幕快照 2018-01-20 下午11.55.16.png

Fill Color 維持黑色不變

  • Line 線條僅顯示「左側線條」
  • Line 線條「寬度」調成 8
  • Line 線條「顏色」調成灰色

螢幕快照 2018-01-20 下午11.57.08.png

進入 Browse Mode 瀏覽效果

可以看到滑鼠移到各個 Button 的效果,除了文字顏色的變化之外(這是 Button Bar 預設的),我們可以看到滑鼠移動到的 Button 左方出現「粗」灰色線條,整體效果非常明顯。

Button Bar 還有更多的設定可以調整,包括:

  • Button Bar: Dividers
  • Button Bar: Icon

此外,還包括狀態:

  • Active
  • Inactive
  • Pressed
  • Infocus

以上這樣調整 Hover 的作法大家應該能體會到怎麼操作 Button Bar 的部分效果,其他的可以再摸索,嘗試找到自己習慣的模式。

螢幕快照 2018-01-21 上午12.00.51.png

螢幕快照 2018-01-21 上午12.01.03.png

螢幕快照 2018-01-21 上午12.01.15.png

 

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s