<mf-related-keywords-toggle></mf-related-keywords-toggle>

トグル付き関連キーワード表示用エレメント

指定可能な属性

• body-class-toggle (String)
  bodyタグに付け外しするクラス名

• init-on (Boolean)
  初期状態をトグルオンにする

• ajax-url (String)
  ajax検索用URL

• head-text (String)
  ヘッダ部に表示するテキスト
  mf-related-keywords-toggleの属性head-textと同様

DOM構造とclass設定

• div.mf_toggle_wrap.mf_finder_relatedkeywords_toggle
  .mf_toggle_on トグルオンの状態のときに設定される
  • div.mf_toggle_button_wrap

    • a.mf_toggle_button トグルボタン

      ここをクリックすると状態のオン/オフがトグルされ、属性body-class-toggle がbodyタグに付け外しされる。

  • div.mf_toggle_content_wrap
    • div.mf_toggle_content
      • div.mf_finder_relatedkeywords
        • header.mf_finder_relatedkeywords_head
          • 属性head-textの値(空の場合は )
        • ul.mf_finder_relatedkeywords_items
          • li.mf_finder_relatedkeywords_item
            • a.mf_finder_relatedkeywords_item_link
              • span
                • [キーワード]

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

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

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

スロット名 head

参照可能なプロパティ

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

mf-related-keywordsのスロットheadと同様