@udn-digital-center/common-components

v0.3.4

Published

2 months ago

common components library for udn digital center

0High
0Medium
0Low

chrisudn

eero.chiao

udn-newmedia-components

common components library for udn digital center

📦 Install (Nothing here for now)

npm install @udn-digital-center/common-components

🔍 About Vite Config

/**
 * vite.config.js or vite.config.ts
 * 使用 Vite 以外的框架要注意是否有 pre-bundling 的問題，可參考下方的 reference
 */

export default defineConfig({
  // add following code
  // reference: https://vitejs.dev/config/dep-optimization-options.html#optimizedeps-include
  optimizeDeps: {
    include: ["vue-scrollto"],
  },
});

🦄 Usage

<script setup>
/**
 * 以Vite開設的專案架構為例，通常放在App.vue (根元件) 中
 * 元件按需引入，下方範例不會show出所有的元件
 */

import {
  NmdAuthor,
  NmdContainer,
  NmdFooter,
  NmdHamburger,
  NmdHeader,
  NmdHeaderShare,
  NmdMenu,
  NmdMenuItem,
  NmdMenuGroup,
  NmdPairGraphics,
  NmdProgressbar,
  NmdQuestionnaire,
  NmdQuote,
  NmdRoundButton,
  NmdSeries,
  NmdSeriesItem,
  NmdSingleGraphics,
  NmdShare,
  NmdToTop,
  NmdDigitalHeader,
  NmdSubTextHide,
} from "@udn-digital-center/common-components";
</script>

<template>
  <nmd-progressbar></nmd-progressbar>
  <nmd-menu>
    <nmd-menu-item to="https://vip.udn.com/">課綱3周年大調查</nmd-menu-item>
    <nmd-menu-item to="https://udn.com/">600+高中生的課綱心聲</nmd-menu-item>
    <nmd-menu-item to="https://udn.com/">課綱總體檢：亂象與展望</nmd-menu-item>
    <nmd-menu-item to="https://udn.com/">美國名校招生實錄</nmd-menu-item>
    <nmd-menu-group>
      <template #context>更多教育趨勢報導</template>
      <nmd-menu-item to="https://www.udngroup.com/">108課綱實況追蹤</nmd-menu-item>
      <nmd-menu-item to="https://www.udngroup.com/">家長相談室</nmd-menu-item>
      <nmd-menu-item to="https://www.udngroup.com/">聯合報系</nmd-menu-item>
    </nmd-menu-group>
    <nmd-menu-item to="https://www.udngroup.com/">聯合報系</nmd-menu-item>
  </nmd-menu>
  <nmd-header>
    <nmd-header-share
      :facebook="{
        href: 'facebook-url',
      }"
      :line="{
        href: 'line-url',
        target: '_blank',
      }"
      :twitter="{
        href: 'twitter-url',
      }"
      theme="dark"
      twitter-icon="x"
    ></nmd-header-share>
    <nmd-hamburger></nmd-hamburger>
  </nmd-header>

  <NmdDigitalHeader
  class="header-digital"
  :class="{ 'header-gap': isScrollTop }"
  custom-bg="#cb2529"
  subscribe-hover="#232323"
  urlQuery="?utm_source=landing_page"
  >
    訂閱<NmdSubTextHide>享</NmdSubTextHide>首年優惠
  </NmdDigitalHeader>

  <main>
    <section class="main">
      <nmd-container>
        <nmd-quote image="https://picsum.photos/120/110/">
          <template #quote>樹種了之後一定要陪伴，不能只是為了衝數量，只要樹種下去就要讓樹長大。</template>
          <template #title>─ 新南田董米創辦人 林哲安</template>
        </nmd-quote>
        <nmd-round-button type="left"></nmd-round-button>
        <nmd-round-button type="right"></nmd-round-button>
        <NmdSingleGraphics image="https://picsum.photos/1024/768/"
          >用音樂反映台灣社會的轉變。圖／凌時差</NmdSingleGraphics
        >
      </nmd-container>
      <NmdPairGraphics
        image-left="https://picsum.photos/1024/768/"
        image-right="https://picsum.photos/1024/768/"
        >用音樂反映台灣社會的轉變。圖／凌時差</NmdPairGraphics
      >
    </section>
    <div class="last">
      <nmd-container>
        <nmd-author max-width="120px">
          <template #製作人>某某某、某某某</template>
          <template #視覺設計>某某某</template>
          <template #網頁製作>某某某、某某某、某某某、某某某</template>
          <template #監製>某某某、某某某、某某某</template>
          <template #製作單位>某某某某某某中心 某某某某中心 某某某某中心</template>
          <template #上線日期>2022.03.21</template>
        </nmd-author>
        <nmd-share
          :facebook="{
            href: 'facebook-url',
          }"
          :line="{
            href: 'line-url',
            target: '_blank',
          }"
          :twitter="{
            href: 'twitter-url',
          }"
          twitter-icon="x"
        ></nmd-share>
      </nmd-container>
    </div>
  </main>
  <aside class="last">
    <nmd-container>
      <nmd-questionnaire></nmd-questionnaire>
      <nmd-series>
        <template #context>延伸閱讀</template>
        <nmd-series-item to="https://vip.udn.com/"
          >Just For Test #1
          <template #image>
            <img src="https://picsum.photos/180" alt="" />
          </template>
        </nmd-series-item>
        <nmd-series-item to="https://vip.udn.com/"
          >Just For Test #2
          <template #image>
            <img src="https://picsum.photos/180" alt="" />
          </template>
        </nmd-series-item>
        <nmd-series-item to="https://vip.udn.com/"
          >Just For Test #3
          <template #image>
            <img src="https://picsum.photos/180" alt="" />
          </template>
        </nmd-series-item>
      </nmd-series>
    </nmd-container>
  </aside>
  <nmd-to-top></nmd-to-top>
  <nmd-footer :year="2022"></nmd-footer>
</template>

🐴 Individual Component (Commonly Used)

NmdProgressbar

進度條元件，永遠顯示於視窗頂部

🦠Props : none 🧩Slots : none ⛺Usage :

<nmd-progressbar></nmd-progressbar>

NmdHeader

Header 元件，下滑時會隱藏，回滾時才會出現

🦠Props :

| name | type | effect | default | required | | --------- | ------ | ------------------------------------------- | ------------- | -------- | | theme | string | 設定 header 的背景色 ( "light" or "dark" ) | "light" | no | | customBg | string | 設定向頂部滾動時 header 的背景色 (填寫色碼) | 和 theme 相同 | no | | utmString | string | 設定左側 logo 和訂閱按鈕的 UTM 代碼 | "" (空字串) | no |

🧩Slots : 這些 slots 在 header 內會靠右對齊

NmdHeaderShare
NmdHamburger

⛺Usage :

<nmd-header theme="dark" custom-bg="#C76158" utm-string="chun_rabbit">
  <nmd-header-share></nmd-header-share>
  <nmd-hamburger></nmd-hamburger>
</nmd-header>

NmdHeaderShare

頂部社群分享元件，提供 facebook、line、x 三個社群的連結

🦠Props :

| name | type | effect | default | required | | ----------- | ---------- | -------------------------------------------- | ---------- | -------- | | facebook | LinkObject | 設定 facebook 的 LinkObject | 參考 usage | no | | line | LinkObject | 設定 facebook 的 LinkObject | 參考 usage | no | | twitter | LinkObject | 設定 facebook 的 LinkObject | 參考 usage | no | | theme | string | 設定 share icon 的顏色 ( "light" or "dark" ) | "light" | no | | twitterIcon | string | 設定 twitter icon 的樣式 ("x" or "bird") | "x" | no |

note：about LinkObject

interface LinkObject {
  href: string;
  target?: "_self" | "_blank";
}

🧩Slots : none ⛺Usage :

<nmd-header-share
  :facebook="{
    href: 'https://www.facebook.com/sharer/sharer.php?kid_directed_site=0&sdk=joey&u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&display=popup&ref=plugin&src=share_button',
  }"
  :line="{
    href: 'https://social-plugins.line.me/lineit/share?url=https%3A%2F%2Fline.me%2Fen',
    target: '_blank',
  }"
  :twitter="{
    href: 'https://twitter.com/intent/tweet?text=Hello%20world',
  }"
  theme="dark"
  twitter-icon="x"
></nmd-header-share>

NmdHamburger

控制漢堡選單展開的按鈕

🦠Props :

| name | type | effect | default | required | | ----- | ------ | ------------------------------------------------ | ------- | -------- | | theme | string | 設定 hamburger icon 的顏色 ( "light" or "dark" ) | "light" | no |

🧩Slots : none ⛺Usage :

<nmd-hamburger theme="dark"></nmd-hamburger>

NmdMenu

展開後的漢堡選單元件

🦠Props : none 🧩Slots : 這些 slots 在 NmdMenu 中會由上至下排列

NmdMenuItem
NmdMenuGroup

⛺Usage :

<nmd-menu>
  <nmd-menu-item to="https://vip.udn.com/">聯合報數位板</nmd-menu-item>
  <nmd-menu-item to="https://udn.com/">聯合新聞網</nmd-menu-item>
  <nmd-menu-group>
    <template #context>更多聯合報數位</template>
    <nmd-menu-item to="https://vip.udn.com/vip/cate/122044/"
      >聯合開Pod</nmd-menu-item
    >
    <nmd-menu-item to="https://vip.udn.com/vip/newspaper/"
      >聯合報報紙新聞</nmd-menu-item
    >
    <nmd-menu-item to="https://vip.udn.com/vip/newsroom/"
      >開放編輯室</nmd-menu-item
    >
  </nmd-menu-group>
  <nmd-menu-item to="https://www.udngroup.com/">聯合報系</nmd-menu-item>
</nmd-menu>

NmdMenuGroup

漢堡選單的選項群組

🦠Props : none 🧩Slots : 這些 slots 在 NmdMenuGroup 中會由上至下排列

<template #context>group name you want</template> 每個 NmdMenuGroup 必要且唯一，一律置頂
NmdMenuItem

⛺Usage :

<nmd-menu-group>
  <template #context>更多聯合報數位</template>
  <nmd-menu-item to="https://vip.udn.com/vip/cate/122044/"
    >聯合開Pod</nmd-menu-item
  >
  <nmd-menu-item to="https://vip.udn.com/vip/newspaper/"
    >聯合報報紙新聞</nmd-menu-item
  >
  <nmd-menu-item to="https://vip.udn.com/vip/newsroom/"
    >開放編輯室</nmd-menu-item
  >
</nmd-menu-group>

NmdMenuItem

漢堡選單的選項

🦠Props :

| name | type | effect | default | required | | --------- | ------- | ------------------------------------------------------- | ------- | -------- | | to | string | 設定 NmdMenuItem 的 url | - | yes | | isCurrent | boolean | 若為 true，則代表 NmdMenuItem=當前頁面，link url 會失效 | false | no |

🧩Slots :

填入所需的 text 在 NmdMenuItem 中會被包裹至內部

⛺Usage :

<nmd-menu>
  <nmd-menu-item to="https://vip.udn.com/">聯合報數位板</nmd-menu-item>
  <nmd-menu-item to="https://udn.com/">聯合新聞網</nmd-menu-item>
  <nmd-menu-item to="https://www.udngroup.com/">聯合報系</nmd-menu-item>
</nmd-menu>

<nmd-menu-group>
  <template #context>更多聯合報數位</template>
  <nmd-menu-item to="https://vip.udn.com/vip/cate/122044/"
    >聯合開Pod</nmd-menu-item
  >
  <nmd-menu-item to="https://vip.udn.com/vip/newspaper/"
    >聯合報報紙新聞</nmd-menu-item
  >
  <nmd-menu-item to="https://vip.udn.com/vip/newsroom/"
    >開放編輯室</nmd-menu-item
  >
</nmd-menu-group>

NmdNavigation

可快速前往不同段落的懸浮選單元件

🦠Props :

| name | type | effect | default | required | | -------- | ------ | --------------------------------------------------------- | ------- | -------- | | duration | number | 設定 NmdNavigationItem 在 click 之後捲動至目標的時間 (ms) | 0 | no |

🧩Slots : 這些 slots 在 NmdNavigation 中會由上至下排列

NmdNavigationItem

⛺Usage :

<nmd-navigation :duration="300">
  <nmd-navigation-item href="#p1">文章段落一</nmd-navigation-item>
  <nmd-navigation-item href="#p2">文章段落二</nmd-navigation-item>
  <nmd-navigation-item href="#p3">文章段落三</nmd-navigation-item>
  <nmd-navigation-item href="#p4">文章段落四</nmd-navigation-item>
</nmd-navigation>

NmdNavigationItem

懸浮選單中的選項

🦠Props :

| name | type | effect | default | required | | ---- | ---- | --------------------------------- | ------- | -------- | | href | Hash | 設定 NmdNavigationItem 的目標位置 | - | yes |

note：about Hash
```
type Hash = `#${string}`;
```

🧩Slots :

填入所需的 text 在 NmdNavigationItem 中會被包裹至內部

⛺Usage :

<nmd-navigation :duration="300">
  <nmd-navigation-item href="#p1">文章段落一</nmd-navigation-item>
  <nmd-navigation-item href="#p2">文章段落二</nmd-navigation-item>
  <nmd-navigation-item href="#p3">文章段落三</nmd-navigation-item>
  <nmd-navigation-item href="#p4">文章段落四</nmd-navigation-item>
</nmd-navigation>

NmdAuthor

製作人員名單

🦠Props : none 🧩Slots : 這些 slots 在 NmdAuthor 中會由上至下排列

<template #上線日期>yyyy.mm.dd (or any date type you want)</template> NmdAuthor 中必要且唯一，一律置底
<template #slot-name>slot-content</template> slot-name 為標題，置於左側；slot-content 為內容，置於右側

⛺Usage :

<nmd-author>
  <template #製作人>某某某、某某某</template>
  <template #視覺設計>某某某</template>
  <template #網頁製作>某某某、某某某、某某某、某某某</template>
  <template #監製>某某某、某某某、某某某</template>
  <template #製作單位
    >某某某某某某中心 某某某某中心 某某某某中心</template
  >
  <template #上線日期>2022.03.21</template>
</nmd-author>

NmdShare

底部社群分享

🦠Props :

| name | type | effect | default | required | | ----------- | ---------- | ---------------------------------------- | ---------- | -------- | | facebook | LinkObject | 設定 facebook 的 LinkObject | 參考 usage | no | | line | LinkObject | 設定 facebook 的 LinkObject | 參考 usage | no | | twitter | LinkObject | 設定 facebook 的 LinkObject | 參考 usage | no | | twitterIcon | string | 設定 twitter icon 的樣式 ("x" or "bird") | "x" | no |

note：about LinkObject

interface LinkObject {
  href: string;
  target?: "_self" | "_blank";
}

🧩Slots : none ⛺Usage :

<nmd-share
  :facebook="{
    href: 'https://www.facebook.com/sharer/sharer.php?kid_directed_site=0&sdk=joey&u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&display=popup&ref=plugin&src=share_button',
  }"
  :line="{
    href: 'https://social-plugins.line.me/lineit/share?url=https%3A%2F%2Fline.me%2Fen',
    target: '_blank',
  }"
  :twitter="{
    href: 'https://twitter.com/intent/tweet?text=Hello%20world',
  }"
  twitter-icon="x"
></nmd-share>

NmdQuestionnaire

閱讀體驗問卷按鈕

🦠Props : none 🧩Slots : none ⛺Usage :

<nmd-questionnaire></nmd-questionnaire>

NmdSeries

延伸閱讀元件 (框架)

🦠Props : none 🧩Slots : 這些 slots 在 NmdSeries 中會由上至下排列

NmdSeriesItem
<template #context>延伸閱讀</template> NmdSeries 中必要且唯一，一律置頂

⛺Usage :

<nmd-series>
  <template #context>延伸閱讀</template>
  <nmd-series-item to="https://vip.udn.com/"
    >Just For Test #1
    <template #image>
      <img src="https://picsum.photos/180" alt="" />
    </template>
  </nmd-series-item>
  <nmd-series-item to="https://vip.udn.com/"
    >Just For Test #2
    <template #image>
      <img src="https://picsum.photos/180" alt="" />
    </template>
  </nmd-series-item>
  <nmd-series-item to="https://vip.udn.com/"
    >Just For Test #3
    <template #image>
      <img src="https://picsum.photos/180" alt="" />
    </template>
  </nmd-series-item>
</nmd-series>

NmdSeriesItem

延伸閱讀元件 (包裹在框架中的延伸閱讀項目)

🦠Props :

| name | type | effect | default | required | | ---- | ------ | ------------------------- | ------- | -------- | | to | string | 設定 NmdSeriesItem 的 url | - | yes |

🧩Slots :

填入所需的 text NmdSeriesItem 的標題，必要且唯一
<template #image><img src="https://picsum.photos/180" alt="" /></template> NmdSeriesItem 的圖片，必要且唯一

⛺Usage :

<nmd-series>
  <template #context>延伸閱讀</template>
  <nmd-series-item to="https://vip.udn.com/"
    >Just For Test #1
    <template #image>
      <img src="https://picsum.photos/180" alt="" />
    </template>
  </nmd-series-item>
  <nmd-series-item to="https://vip.udn.com/"
    >Just For Test #2
    <template #image>
      <img src="https://picsum.photos/180" alt="" />
    </template>
  </nmd-series-item>
  <nmd-series-item to="https://vip.udn.com/"
    >Just For Test #3
    <template #image>
      <img src="https://picsum.photos/180" alt="" />
    </template>
  </nmd-series-item>
</nmd-series>

NmdToTop

🦠Props :

| name | type | effect | default | required | | -------- | ------ | ---------------------------------------------------- | ------- | -------- | | duration | number | 設定 NmdToTop 在 click 之後捲動至畫面頂部的時間 (ms) | 0 | no |

🧩Slots : none

⛺Usage :

<nmd-to-top></nmd-to-top>

NmdFooter

footer 元件

🦠Props :

| name | type | effect | default | required | | ---- | ------ | --------------------------- | ------- | -------- | | year | number | 設定 NmdFooter 上顯示的年份 | - | yes |

🧩Slots : none

⛺Usage :

<nmd-footer :year="2022"></nmd-footer>

🐴 Individual Component (Rarely Used)

NmdHero

基礎的 HeroSection 版型，僅接受"標題"和"下滑看更多"兩個元件

🦠Props : none 🧩Slots :

NmdHeroTitle
NmdHeroMore

⛺Usage :

<nmd-hero>
  <nmd-hero-title position="bottom">
    <nmd-title-h title="用音樂挺平權 蔡依林捐百萬"></nmd-title-h>
  </nmd-hero-title>
  <nmd-hero-more></nmd-hero-more>
</nmd-hero>

NmdHeroTitle

HeroSection 的標題容器，僅接受四種 NmdTitle 元件

🦠Props :

| name | type | effect | default | required | | -------- | ------ | --------------------------------------------------------------------------- | ------- | -------- | | position | string | 設定 NmdHeroTitle 在 NmdHero 中的位置 ("left"、"center"、"right"、"bottom") | "left" | no |

🧩Slots :

NmdTitleA
NmdTitleB
NmdTitleC
NmdTitleH

⛺Usage :

<nmd-hero-title position="bottom">
  <nmd-title-h title="用音樂挺平權 蔡依林捐百萬"></nmd-title-h>
</nmd-hero-title>

NmdTitleX (X = A | B | C | H)

標題元件，後綴為樣式差異

🦠Props :

| name | type | effect | default | required | | ----- | ------ | ---------------- | ------- | ---------------------------- | | title | string | 設定主標題的文字 | - | yes | | sub | string | 設定副標題的文字 | - | yes (no while use NmdTitleH) |

🧩Slots : none ⛺Usage :

<nmd-title-h title="用音樂挺平權 蔡依林捐百萬"></nmd-title-h>

NmdHeroMore

顯示在 HeroSection 中的"下滑看更多"元件

🦠Props : none 🧩Slots : none ⛺Usage :

<nmd-hero-more></nmd-hero-more>

NmdContainer

可做為 wrapper 使用，包裹在其他元件外面，預先做好了基礎的樣式及 RWD 設定

🦠Props : none 🧩Slots : 任意的元件或元素 ⛺Usage :

<nmd-container>
  ...any component or element
</nmd-container>

NmdDetails

小辭典元件，主要用在文章段落中，幫助特定單詞增加可以展開與收合的說明文字

🦠Props : none 🧩Slots :

填入所需的 text NmdDetails 的單詞，會標上醒目色以及展開與收合的按鈕
<template #details>write some additional details here</template> NmdDetails 的說明文字，預設收合狀態，不會顯示

⛺Usage :

<p>
  2011年聯合報系啟動「願景工程」，對準聯合國<nmd-details
    >永續發展目標<template #details
      >永續發展目標（英語：Sustainable Development
      Goals，簡稱SDGs）是聯合國的一系列目標，這些目標於2015年底替換千年發展目標。這些目標將從2016年一直持續到2030年。這一系列目標共有169項細項目標。</template
    ></nmd-details
  >，不只報導問題，更提出解方，促成台灣正向改變。為擴大參與，願景工程於2021年公共化轉型成基金會。但聯合報系關懷台灣社會的初衷不曾改變，繼續推出陽光行動，以陽光般的熱力，永續、監督、關懷台灣社會。
</p>

NmdQuote

引述元件，用於突顯特定句子，另可搭配圖片以及發言者

🦠Props :

| name | type | effect | default | required | | ----- | ------ | ----------------------------------- | ------- | -------- | | image | string | 設定用於 NmdQuote 的圖片/發言者頭像 | - | no |

🧩Slots :

<template #quote>write some quote text here</template> 需要凸顯的句子，雖然不是強制必填，但這句話乃是使用 NmdQuote 的主軸
<template #title>fill title and name here</template> 標註是誰講了這段話，非必要

⛺Usage :

<nmd-quote image="https://picsum.photos/120/110/">
  <template #quote
    >樹種了之後一定要陪伴，不能只是為了衝數量，只要樹種下去就要讓樹長大。</template
  >
  <template #title>─ 新南田董米創辦人 林哲安</template>
</nmd-quote>

NmdSingleGraphics

單圖元件，包含搭配圖片的文字

🦠Props :

| name | type | effect | default | required | | ----- | ------ | --------------------------------- | ------- | -------- | | image | string | 設定 NmdSingleGraphics 的圖片路徑 | - | yes |

🧩Slots :

填入所需的 text 搭配 NmdSingleGraphics 的文字，非必要

⛺Usage :

<NmdSingleGraphics image="https://picsum.photos/1024/768/"
  >用音樂反映台灣社會的轉變。圖／凌時差</NmdSingleGraphics
>

NmdPairGraphics

雙圖元件，包含搭配圖片的文字

🦠Props :

| name | type | effect | default | required | | ----------- | ------ | -------------------------------------- | ------- | -------- | | image-left | string | 設定 NmdPairGraphics 的圖片路徑 (左圖) | - | yes | | image-right | string | 設定 NmdPairGraphics 的圖片路徑 (右圖) | - | yes |

🧩Slots :

填入所需的 text 搭配 NmdPairGraphics 的文字，非必要

⛺Usage :

<NmdPairGraphics
  image-left="https://picsum.photos/1024/768/"
  image-right="https://picsum.photos/1024/768/"
  >用音樂反映台灣社會的轉變。圖／凌時差</NmdPairGraphics
>

NmdRoundButton

圓形按鈕元件，有 8 種樣式可選

🦠Props :

| name | type | effect | default | required | | ---- | ------ | --------------------------------------------------------------------------------------------------------- | ------- | -------- | | type | string | 設定 NmdRoundButton 中 logo 的樣式 ("left"、"right"、"play"、"stop"、"sound"、"mute"、"play-1"、"stop-1") | "left" | no |

🧩Slots : none ⛺Usage :

<NmdRoundButton type="right"></NmdRoundButton>

NmdDigitalHeader

數位版 Header 元件，背景透明，下滾時顯示指定背景色

🦠Props :

| name | type | effect | default | required | | -------------- | ------ | ------------------------------------------------- | ------- | -------- | | customBg | string | 設定向下滾動時 Header 背景色 (填寫色碼) | #cb2529 | no | | urlQuery | string | 設定 UND Logo 和訂閱按鈕的 Query string (需加上?) | - | no | | subscribeHover | string | 設定右側訂閱按鈕 Hover 效果(填寫色碼) | #cb2529 | no | | textTheme | string | 設定聯合報數位版文字主題色 ("red" 或 "white") | white | no |

🧩Slots : NmdSubTextHide 元件可寫入手機需隱藏的文字

NmdSubTextHide

⛺Usage :

  <NmdDigitalHeader
  custom-bg="#cb2529"
  subscribe-hover="#232323"
  urlQuery="?utm_source=landing_page"
  >
    訂閱<NmdSubTextHide>享</NmdSubTextHide>首年優惠
  </NmdDigitalHeader>

NmdService

數位版各項服務區塊，可單獨或搭配 NmdServiceList 元件使用

🦠Props :

| name | type | effect | default | required | | ---------- | ------ | -------------------- | ------------------------------------ | -------- | | title | string | 設定區塊主標題文字 | 新聞不只是閱讀，而是你的專屬資料庫！ | no | | titleColor | string | 設定主標題的文字顏色 | - | no |

🧩Slots : 可以渲染數位版相關連結資料

NmdServiceList

⛺Usage :

  <NmdService title="新聞不只是閱讀，而是你的專屬資料庫！" title-color="#cb2529">
    <NmdServiceList />
  </NmdService>

NmdServiceList

渲染 Service 列表

🦠Props :

| name | type | effect | default | required | | ------------ | ------ | ---------------- | ------- | -------- | | service-data | array | 設定列表整體資料 | Array | no | | url-query | string | 設定連結查詢字串 | - | no |

⛺Usage :

  <NmdService title="新聞不只是閱讀，而是你的專屬資料庫！" title-color="#cb2529">
    <NmdServiceList :service-data="[]"  url-query="?utm_source=landing_page"/>
  </NmdService>

NmdDigitalFooter

DigitalFooter 元件

🦠Props : none

🧩Slots : none

⛺Usage :

<NmdDigitalFooter />

NmdFullReadMore

閱讀更多(圖片&文字)，滿寬版本或透過參數滿屏

🦠Props :

| name | type | effect | default | required | | ---------- | --------------------- | -------------------- | ------- | -------- | | title | string | 設定標題文字 | - | yes | | content | string | 設定內容文字 | - | no | | href | string | 設定連結路徑 | - | yes | | imgSrc | string | 設定主要背景圖片路徑 | - | yes | | padSrc | string | 設定平板背景圖片路徑 | - | no | | pcSrc | string | 設定電腦背景圖片路徑 | - | no | | vertical | top / center / bottom | 設定整體內容垂直位置 | center | no | | horizontal | start / center / end | 設定整體內容水平位置 | center | no | | fullHeight | boolean | 設定區塊是否滿屏 | false | no |

⛺Usage :

  <NmdFullReadMore
    title="標題文字"
    content="內容描述"
    href="https://vip.udn.com/vip/index"
    img-src="https://picsum.photos/620/420/"
    pad-src="https://picsum.photos/1280/768/"
    pc-src="https://picsum.photos/2560/1080/"
    vertical="center"
    horizontal="start"
    fullHeight
  />

NmdLoading

網頁載入動畫

🦠Props : none ⛺Usage :

  <NmdLoading />

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

udn-newmedia-components

📦 Install (Nothing here for now)

🔍 About Vite Config

🦄 Usage

🐴 Individual Component (Commonly Used)

NmdProgressbar

NmdHeader

NmdHeaderShare

NmdHamburger

NmdMenu

NmdMenuGroup

NmdMenuItem

NmdNavigation

NmdNavigationItem

NmdAuthor

NmdShare

NmdQuestionnaire

NmdSeries

NmdSeriesItem

NmdToTop

NmdFooter

🐴 Individual Component (Rarely Used)

NmdHero

NmdHeroTitle

NmdTitleX (X = A | B | C | H)

NmdHeroMore

NmdContainer

NmdDetails

NmdQuote

NmdSingleGraphics

NmdPairGraphics

NmdRoundButton

NmdDigitalHeader

NmdService

NmdServiceList

NmdDigitalFooter

NmdFullReadMore

NmdLoading