<mf-keyword-ranking-toggle></mf-keyword-ranking-toggle>

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

指定可能な属性

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

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

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

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

DOM構造とclass設定

• div.mf_toggle_wrap.mf_finder_keywordranking_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_keywordranking (キーワードランキングが無い場合は空)
        • header.mf_finder_keywordranking_head
          • 属性head-textの値(空の場合は )
        • ol.mf_finder_keywordranking_items
          • li.mf_finder_keywordranking_item
            • a.mf_finder_relatedkeywords_item_link
              • span
                • [キーワード]

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

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

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

スロット名 head

参照可能なプロパティ

• self : このカスタムエレメントのインスタンス
• customProp : 属性:custom-prop-func で指定した関数の返すデータ
  mf-keyword-rankingのスロットheadと同様