Staffroller
Site
https://staffroller.qranoko.jp
About
Staffroller(スタッフローラー)は Web サイトにスタッフロールを追加する簡単な JavaScript (+CSS) ライブラリです。
- トリガーをクリックするとスタッフロールが表示
- 閉じる場合は右上の × ボタンもしくは
esc
キーを押す
How To Use
- JSON ファイルに表示したい項目を書き込み設置(URL と Image は任意)
staffroller.min.css
を読み込む- 表示させるトリガー(ボタンなど)に
data-staffroller-show="オプションで設定したid"
を付与 staffroller.min.js
を読み込む- オプション
dataFile
に JSON ファイルへのパスを書いて StaffRoller を呼び出し
Example <!-- 2. Import CSS File --> <!-- 3. Setting Trigger --> View Staff <!-- 4. Import JavaScript File --> <!-- 5. Init JavaScript -->
Install
CDN
npm
$ yarn add staffroller
Option
JavaScript
Option | Default | Note |
---|---|---|
id |
staff |
モーダルを特定する ID |
title |
STAFF |
スタッフロールのタイトル |
data |
null |
表示する役割と名前を渡す配列 |
dataFile |
null |
表示する項目を書いた JSON ファイルへのパス |
nameSpace |
staffroller |
属性名の設定 |
CSS
色やサイズなどは、SCSS 変数またはCSSで上書きできます。
License
- MIT