サイドバー
セクション、ネストされた項目、アイコン、バッジ、レスポンシブ対応を備えた折りたたみ可能なアプリケーションサイドバー。 フルスタイルは表示されたままアイコンのみのレールに折りたたまれます。 フローティングスタイルは背景を暗くしたオーバーレイとしてスライドインします。
フル
トグルでアイコンのみのレールに折りたたまれる標準サイドバー。
_sidebar.html.erb
███
███████ ██████████ █ ████ █████ █████████
██████
███ ██████ ██████████████████████████ ██████ █ █████ ████████ █████ ███ ██ █████████ █
█
██████ ███████
██████ █
█ ██████ ████████████ █████ ██████ █████ ████ ███████ ████ ██
█ ██████ ████████████ █████ ███████ █████ █████████████ ██████ █████ ██
sidebar_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████ ███████████ ████████ ████████ ████████ ██████████ █████████████ ███████████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ █████ ██
█████ █ █████ ████████ ████████ █████ ██
██████ █ █████ ███████ ████████ ██████ ██
████████ █ █████ ████████ ████████ █████ █
█
sidebar_full_component.html.erb
████ █████████████████████████
███████████████████████████████
█████████████████████████████████ █████████ ███
███████████████████████████████████
████ ███████████████████████████ ██████████ █████████████ ████
███ █████ ████ ██
████ ██████████ ██████████████████ ████
██ █████████ ██████████ ███
sidebar_full_component.rb
█ ██████████████████████ ████
█████ ████████████████████ █ ███████████████████
████████████ ██████████ ██████████████████
█████ █ █
█████ █████ ██████████ ████ ███████████ ██████████ █ ██ ███ ███████████████████████████ ██████████████████████ ███████████████████████ ████████████████ █████ ████████ █████ █ ███ ███████ █ █ ███ ███████████ ███████████ █ █ ████ ███████ ███ █ █ ██████████ █ █ █████████ █ █ ███ █████ █ █ ███ ████ ██████████████
██████ █████ ██████████ ████ ███████████ ██████████ █ ██ ███ ███████████████████████████ ██████████████████████ ███████████████████████ ████████████████ ██████ ███████ █ █ ███ ████████ █████████ █ █ ████ ██████ ████████ █ █ █████████████ ███ █ █ ████ █ █ █ █ ███ █████████████
█████████ █████ ██████████ ████ ███████████ ██████████ █ ██ ███ ███████████████████████████ ██████████████████████ ███████████████████████ ████████████████ ██████████ ████████████████ ███████████ ████ ███████ █████ █ ███████ ███████████████ ████████ ████ ██████████ █████ █ ███████ ███████████████ █████ █████ █ ██████████ █████ █ ████████ █████████ ██████████ █████████ ██████████ █████ █ ████████ ███████████ ███████████ ██████████ ███████ █████ █ ██████████████████████████████████████████████████ █████ █ ██████████████████████████████████████ ████████████ █████ █ █████████████████████████████████ █████████████████ ████████ ████████████████████ ██████████████████████ ███████████████████████ ████████████████ ██████ ████ █ █ ████ █ █ █ █ ███ █████████████
██████ █████ ██████████ ████ ███████████ ██████████ █ ██ ███ ███████████████████████████ ██████████████████████ ███████████████████████ ████████████████ █████ ███████ █ █ ██████████ █ █ ████ █████ █ █ ███ █████ █ █ ████████ █████ █ █ █████████ █ █ ███ ███████ ███ █ █ ███ █████ █ █ ███████ █████ █ █ █████████ █ █ ███ ██████ █ █ ████ ██████ █ █ ██████████████████
sidebar_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████ ███████████ ████████ ████████ ████████ ██████████ █████████████ ███████████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ █████ ██
█████ █ █████ ████████ ████████ █████ ██
██████ █ █████ ███████ ████████ ██████ ██
████████ █ █████ ████████ ████████ █████ █
█
フローティング
背景を暗くして左からスライドインするオーバーレイサイドバー。
_sidebar.html.erb
███
███████ ██████████ █ ████████ █████ █████████
██████
███ ███████ ██████ ██████ ████████ ██ ████ ███████ ██
███████ █████████████████████████████████ ████████████████████████████████████████
████ ████
█████████
███ ████████ ███████ ██
sidebar_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████ ███████████ ████████ ████████ ████████ ██████████ █████████████ ███████████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ █████ ██
█████ █ █████ ████████ ████████ █████ ██
██████ █ █████ ███████ ████████ ██████ ██
████████ █ █████ ████████ ████████ █████ █
█
sidebar_floating_component.html.erb
████ █████████████████████████
███████████████████████████████████
███████████████████████████████
███████████████████████████████████████████████████████████
███ ████████ ██
████ ██████████████████████████████
██████████████████████████████████
████████████ ███████ ████ ███████████ ██████████████████ ████████████ █████████ █████████████████████
██████
sidebar_floating_component.rb
█ ██████████████████████ ████
█████ ████████████████████████ █ ███████████████████
████████████ ██████████ ██████████████████
█████ █ █
█████ █████ ██████████ ████ ███████████ ██████████ █ ██ ███ ███████████████████████████ ██████████████████████ ███████████████████████ ████████████████ █████ ████████ █████ █ ███ ███████ █ █ ███ ███████████ ███████████ █ █ ████ ███████ ███ █ █ ██████████ █ █ █████████ █ █ ███ █████ █ █ ███ ████ ██████████████
██████ █████ ██████████ ████ ███████████ ██████████ █ ██ ███ ███████████████████████████ ██████████████████████ ███████████████████████ ████████████████ ██████ ███████ █ █ ███ ████████ █████████ █ █ ████ ██████ ████████ █ █ █████████████ ███ █ █ ████ █ █ █ █ ███ █████████████
█████████ █████ ██████████ ████ ███████████ ██████████ █ ██ ███ ███████████████████████████ ██████████████████████ ███████████████████████ ████████████████ ██████████ ████████████████ ███████████ ████ ███████ █████ █ ███████ ███████████████ ████████ ████ ██████████ █████ █ ███████ ███████████████ █████ █████ █ ██████████ █████ █ ████████ █████████ ██████████ █████████ ██████████ █████ █ ████████ ███████████ ███████████ ██████████ ███████ █████ █ ██████████████████████████████████████████████████ █████ █ ██████████████████████████████████████ ████████████ █████ █ █████████████████████████████████ █████████████████ ████████ ████████████████████ ██████████████████████ ███████████████████████ ████████████████ ██████ ████ █ █ ████ █ █ █ █ ███ █████████████
██████ █████ ██████████ ████ ███████████ ██████████ █ ██ ███ ███████████████████████████ ██████████████████████ ███████████████████████ ████████████████ █████ ███████ █ █ ██████████ █ █ ████ █████ █ █ ███ █████ █ █ ████████ █████ █ █ █████████ █ █ ███ ███████ ███ █ █ ███ █████ █ █ ███████ █████ █ █ █████████ █ █ ███ ██████ █ █ ████ ██████ █ █ ██████████████████
sidebar_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████ ███████████ ████████ ████████ ████████ ██████████ █████████████ ███████████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ █████ ██
█████ █ █████ ████████ ████████ █████ ██
██████ █ █████ ███████ ████████ ██████ ██
████████ █ █████ ████████ ████████ █████ █
█
変更履歴
- v1.0.0: Initial release with full and floating styles