css3buttons_rails_helpers gem 是幫助你將網站套上精美的 github style button 。

https://github.com/thetron/css3buttons_rails_helpers

 

注意 3.0.x 只能使用 0.9.5 版, 3.1 之後就沒有問題可以使用最新版本,因此要記得在 3.0.x 時使用

gem 'css3buttons', '0.9.5'

裝好之後需要跑 generator ,所以請下

$rails g css3buttons

然後將 layouts 裡面的 stylesheet_link_tag 換成

<%= css3buttons_stylesheets %>

 

這個 helper 是將 CSS3 GitHub Buttons 這個網站提供的 css and html 將他包裝成 rails 的 helper 。

http://nicolasgallagher.com/lab/css3-github-buttons/

 

其實用法很簡單,如果沒有用 rails helper gem ,那就是自己將需要變成 button 的 html tag 加上 class。

加上 class="button" 就會變成按鈕,加上 class="button pill" 就會變成圓角按鈕,加上 class="button primary" 按鈕內的文字就會粗體顯示。

有 button 的 class 配合各種 icon 圖案,例如 class="button icon add" ,就可以完成精美的按鈕。

 

如果使用 rails helper gem ,那麼就可以很直覺的使用定義好的 helper 來套上漂亮的按鈕。

規則很簡單,就是將原本的 link_to method 改成 button_link_to ,然後把你要的效果(大小、重要、顏色、圖案)向前疊加,來看範例吧。

原本是

<%= link_to("Search", search_path) %>

改成 helper 寫法是

<%= big_search_button_link_to("Search", search_path) %>

大按鈕+搜尋圖案,看起來就非常的直覺!

 

如果需要變色也可以,例如原本是

<%= link_to("Delete", delete_path) %>

改成 helper 寫法是

<%= danger_remove_button_link_to("Delete", delete_path) %>

危險紅色+移除按鈕,非常完美!

 

如果你想用 Button Group 也沒問題,寫法是

<%= button_group do %>
  <%= button_link_to "Show", @post %>
  <%= button_link_to "Edit", edit_post_path(@post) %>
  <%= negative_trash_button_link_to "Delete", @post, :confirm => "Are you sure? %>
<% end %>

這樣就會出現連在一起的按鈕群組啦!

arrow
arrow
    全站熱搜

    笨笨小蟹 發表在 痞客邦 留言(0) 人氣()