<mf-toggle-wrap></mf-toggle-wrap>

トグル表示用の汎用ラッパーエレメント

指定可能な属性

• body-class-toggle (String)
  bodyタグのclassListに付け外しするクラス名
  クラスの付け外しに応じたCSSを記述することで表示切り替えが可能になる。

• init-on (Boolean)
  初期状態をトグルオンにする
  すなわち属性body-class-toggleで指定したクラス名がbodyタグのclassListに起動時に設定される。

DOM構造とclass設定

• div.mf_toggle_wrap
  .mf_toggle_on トグルオンの状態のときに設定される
  • div.mf_toggle_button_wrap
    • a.mf_toggle_button トグルボタン
      : ここをクリックすると状態のオン/オフがトグルされ、属性body-class-toggleのクラス名がbodyタグのclassListに付け外しされる。
      • スロットtoggle_buttonでカスタマイズ可能
  • div.mf_toggle_content_wrap
    • div.mf_toggle_content
      • 無名スロットでトグル表示するためのコンテンツを埋め込む

DOMカスタマイズ用スロット

スロットについては以下の説明を参照

• Vue.jsの名前付きスロット
• Vue.jsのスコープ付きスロット

スロット名 toggle_button

参照可能なプロパティ

• self : このカスタムエレメントのインスタンス
• customProp 属性:custom-prop-func で指定した関数の返すデータ

無名スロット

参照可能なプロパティ

• self : このカスタムエレメントのインスタンス
• customProp : 属性:custom-prop-func で指定した関数の返すデータ