無定製化狀態

使用自定義元素mf-keyword-ranking

代碼

html

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

渲染結果

設置顯示語言

將屬性lang設置到自定義元素的上層元素或自定義元素本身(也可以在body標籤設置)。

代碼

html

  <mf-keyword-ranking lang="zh-tw"></mf-keyword-ranking>

渲染結果

用CSS自定義標題

代碼

添加CSS

  <style>
  /* 為方便理解設置變化部分背景色為粉紅，實際代碼中不需要 */
  .head-bycss .mf_finder_keywordranking_head {
    background-color: pink;
  }
  /* 將標題內容從默認值(Keyword Ranking)更改為“相關詞排名” */
  .head-bycss .mf_finder_keywordranking_head:before {
    content: "相關詞排名";
  }
  </style>

html

  <mf-keyword-ranking class="head-bycss"></mf-keyword-ranking>

渲染結果

用屬性“head-text”指定標題文本

代碼

添加CSS

  <style>
  /* 為方便理解設置變化部分背景色為粉紅，實際代碼中不需要 */
  .my-head-text .mf_finder_keywordranking_head {
    background-color: pink;
  }
  /* 設置content為空 */
  .my-head-text .mf_finder_keywordranking_head:before {
    content: "";
  }
  </style>

html

  <mf-keyword-ranking class="my-head-text" head-text="熱門關鍵詞"></mf-keyword-ranking>

渲染結果

自定義標題的內容

代碼

添加CSS

  <style>
  /* 為方便理解設置變化部分背景色為粉紅，實際代碼中不需要 */
  .my-head-slot .my-dd-head {
    background-color: pink;
  }
  </style>

html

  <mf-keyword-ranking class="my-head-slot">
    <template slot="head">
      <!-- 給標題前面加一個icon -->
      <header class="my-dd-head">
        <img src="//c.marsflag.com/mf/img/mf_pwdb.gif">關鍵詞排名
      </header>
    </template>
  </mf-keyword-ranking>

渲染結果