無定製化狀態時

使用自定義元素mf-related-keywords

代碼

html

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

渲染結果

設置顯示語言

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

代碼

html

  <mf-related-keywords lang="zh-tw"></mf-related-keywords>

渲染結果

用CSS自定義標題

代碼

添加CSS

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

html

  <mf-related-keywords class="head-bycss"></mf-related-keywords>

渲染結果

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

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

代碼

添加CSS

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

html

  <mf-related-keywords class="my-head-text" head-text="有關關鍵詞"</mf-related-keywords>

渲染結果

自定義標題的內容

用插槽 head自定義模板。

代碼

添加CSS

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

html

  <mf-related-keywords class="my-head-slot">
    <template slot="head">
      <!-- 給header前面加icon -->
      <header class="my-dd-head">
        <img src="//c.marsflag.com/mf/img/mf_pwdb.gif">相關關鍵詞
      </header>
    </template>
  </mf-related-keywords>

渲染結果