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

キーワードランキング表示用エレメント
使用例

指定可能な属性

• lang (String)
  表示言語を属性langで指定することが出来る。
  使用例

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

• head-text (String)
  ヘッダ部に表示するテキスト
  使用例

サンプル集

デザインのカスタマイズについて、いくつかのサンプルを以下に載せました。 - サンプル集

DOM構造とclass設定

• div.mf_finder_keywordranking (キーワードランキングが無い場合は空)
  • (スロット「head」で以下はカスタマイズ可能)
    • 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 で指定した関数の返すデータ

使用例