ナビゲーション v1.1.0

タブ

コンテンツをパネルに整理するためのアクセシブルなタブインターフェース。 完全なキーボードナビゲーション付きで複数の視覚スタイルを利用できます。

アンダーライン

下部ボーダーインジケーター付きのクリーンなアンダーラインタブ

オプション

名前 型 デフォルト 説明
tabs * Array 必須 Array of tab hashes with :id, :label, and optional :content
default_tab Integer 0 Index of the initially selected tab
class String "" Additional CSS classes for the container

ピル

丸みを帯びた背景のピル型タブボタン

オプション

名前 型 デフォルト 説明
tabs * Array 必須 Array of tab hashes with :id, :label, and optional :content
default_tab Integer 0 Index of the initially selected tab
class String "" Additional CSS classes for the container

ボックス

ボーダー付きコンテナのカードスタイルタブ

オプション

名前 型 デフォルト 説明
tabs * Array 必須 Array of tab hashes with :id, :label, and optional :content
default_tab Integer 0 Index of the initially selected tab
class String "" Additional CSS classes for the container

変更履歴 v1.1.0

- v1.1.0: Added multiple style variants (underline, pills, boxed)
- v1.0.0: Initial release with horizontal tabs
- Full keyboard accessibility (arrow keys, home/end)
- Stimulus controller for state management

フルアクセスを取得

このコンポーネントと他のすべてのソースコードをアンロックしましょう。一回のお支払いで永久アクセス。

今すぐアクセスを取得