<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の属性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と同様

MF3.0 カスタムエレメントマニュアル ver. 1.0.3

リファレンスマニュアル内検索

< マニュアルトップに戻る