Accessible accordion tabs components を作るための依存性ゼロの小さなスクリプト (compressed and gzipped 1.6 KB未満)です。
このコンポーネントは、小さな画面ではアコーディオンで、大きなビューポートではタブ表示に切り替わります。
デモ
動作はこちら。
インストール
ダウンロードまたは複製
最新バージョンまたは git clone https://github.com/matthiasott/a11y-accordion-tabs.git をダウンロードします。
npm
npm install a11y-accordion-tabs --save-dev
使用法
まず、https://github.com/matthiasott/a11y-accordion-tabs.js（またはminifiedバージョン）をドキュメントに含めます：
<script src="https://github.com/matthiasott/a11y-accordion-tabs.js" async></script>
自分でスタイルをゼロから書いたり、docsフォルダ内のCSSファイルを出発点として、ドキュメントにもそれを含めることが可能です。
<link rel="stylesheet" href="styles.css" />
Accordion Tabs コンポーネントの基本的な HTML 構造は次のとおりです。
デフォルトでは、スクリプトはクラス js-tabs を持つすべての要素を探し、それらを自動的にアコーディオン タブ コンポーネントに変えますが、次のように JavaScript でコンポーネントをインスタンス化することもできます:
var tabs = document.getElementById("myTabs");new AccordionTabs(tabs);
Options
a11y-accordion-tabs には、このコンポーネントをより柔軟にするいくつかのオプションが付いています。 すべてのオプションは、コンストラクターの第 2 引数の data- 属性または JS プロパティで設定できます:
new AccordionTabs(tabs, { breakpoint: 800, tabsAllowed: true, selectedTab: 2, startCollapsed: false});
| tabsAllowed | Boolean | true | tabsAllowed が false に設定されている場合、コンポーネントは常にアコーディオンのままです || breakpoint | Number | 640 | アディコンがタブコンポーネントに変わる最小幅を定義しています。 CSSもそれに合わせて調整してください。 ||| selectedTab | Number | 0 | init時に選択されるタブを設定します || startCollapsed | Boolean | false | 起動時にアコーディオンを折りたたむかどうかを定義します |
Compatibility
スクリプト内の関数は、IE10+を含むすべてのモダンブラウザでサポートされています。IE9 のサポートが必要な場合は、element.classList のポリフィルを使用するとよいでしょう。
Changelog
0.5.0
- 新しいオプション
startCollapsedが追加されました。 起動時にアコーディオンを折りたたむかどうかを定義する
0.4.1
- Fix CJS module export- Update dependencies to fix vulnerabilities
0.4.1
- Fix CJS module export- 更新された脆弱性。0
- Data 属性が W3C の命名規則に従うようになりました（大文字なし）- デモの HTML コードでデフォルトのアリア・ロールを改善- デモのコードでシェブロンの代わりにプラス / マイナス記号
0.4.0。3.2
- ドキュメントの更新
0.3.1
- サンプル HTML コードのクリーンアップ
0.3.0
- マルチインスタンスのサポートの追加
- 基本ドキュメント付き READMEの更新