Tab Component

Tab Componentとは？

bootcampでは下記のようにタブが複数種類あります。

• page_tab
  
• tab_nav
  

※tab_navはまだコンポーネント化されてません。

page_tabの使い方

page_tabはcomponent化されています。page_tabに関係するcomponentは二つあります。 実際に使う場合は後述するhelper経由で使ってください。

page_tab_component

これ。

使い方。

= render PageTabComponent.new(name: '全て', link: '/reports', active: true, enable: true, count: 3, badge: 12)

• name: タブの文字
  
• link: リンク先URL
• active: そのタブがアクティブかどうか
  
  
• enable: そのタブが有効かどうか（false時はリンクも無効になる）
  
• count: nameの横の数字
  
• badge: バッジの数字
  

page_tabs_component

これ。

active_tab = 'ダッシュボード'
tabs = [
  { name: 'ダッシュボード', link: '/' },
  { name: '自分の日報', link: '/current_user/reports', count: 10 },
  { name: '自分の提出物', link: '/current_user/products', count: 3 },
  { name: 'Watch中', link: '/current_user/watches' },
  { name: 'ブックマーク', link: current_user_bookmarks_path, count: 10 }
]
render PageTabsComponent.new(tabs:, active_tab:)

• tabs: page_tab_component向けの引数の配列
• active_tab: アクティブにするタブのname

使い方

タブはいろんなviewファイルに出てくるので上記のComopnentをそのまま使うと面倒臭いです。 使いやすいようにいくつかのプリセットを使えるhelperを用意したのでそれを使ってください。

= dashboard_page_tabs(active_tab: '自分の日報')

= company_page_tabs(@company, active_tab: '企業情報')

他にも色々ありますが、新しいタブのグループが増えた時のhelperを用意して使うようにしてください。