@udn-digital-center/common-components v0.2.0

udn-newmedia-components

common components library for udn digital center

📦 Install (Nothing here for now)

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

🦄 Usage (coming soon?)

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

import "@udn-digital-center/common-components/dist/style.css";
</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: '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>
    <nmd-hamburger></nmd-hamburger>
  </nmd-header>
  <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: '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>
      </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></nmd-footer>
</template>