<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
でカスタマイズ可能
- スロット
- a.mf_toggle_button トグルボタン
ここをクリックすると状態のオン/オフがトグルされ、属性
- div.mf_toggle_content_wrap
- div.mf_toggle_content
- 無名スロットでトグル表示するためのコンテンツを埋め込む
- div.mf_toggle_content
- div.mf_toggle_button_wrap
DOMカスタマイズ用スロット
スロットについては以下の説明を参照
スロット名
toggle_button
参照可能なプロパティ
- self : このカスタムエレメントのインスタンス
- customProp :
属性
:custom-prop-func
で指定した関数の返すデータ
無名スロット
参照可能なプロパティ
- self : このカスタムエレメントのインスタンス
- customProp :
属性
:custom-prop-func
で指定した関数の返すデータ