tdc-ui 是为腾讯设计云生态相关的站点提供的通用组件库，使用基于 Web Components 的 Lit 提供服务，方便各个业务接入统一的公共组件。

组件演示

如何使用

tdc-header

导航的外部容器

CSS Vars

:root {
  /* 内容区域的最大宽度 */
  --tdc-max-width: 1440px;
  /* 内容区域的左右内间距 */
  --tdc-inner-padding: 24px;
  /* 背景色 */
  --tdc-bg-color: #FFFFFF;
}

Props

| 属性名 | 类型 | 默认值 | 说明 | | ------ | ------ | ------- | ----------------------------------- | | theme | String | light | 导航主题，可选值为 light / dark |

Examples

<!-- 普通模式 -->
<tdc-header></tdc-header>

<!-- 暗黑模式 -->
<tdc-header theme="dark"></tdc-header>

tdc-nav

• 腾讯设计云生态相关的站点导航，必须使用
• 该组件会自动请求更新 CDN 上的链接配置信息

CSS Vars

:root {
  /* 字体主要颜色 */
  --tdc-text-color-primary: rgba(16, 28, 41, 1);
  /* 字体次要颜色 */
  --tdc-text-color-secondary: rgba(16, 28, 41, .6);
  /* 背景色 */
  --tdc-bg-color: #FFFFFF;
  /* 边框颜色 */
  --tdc-border-color: #DCDCDC;
  /* 分割线颜色 */
  --tdc-divider-color: rgba(16, 28, 41, .1);
  /* 触发按钮图形颜色 */
  --tdc-trigger-color: rgba(16, 28, 41, .6);
  /* 鼠标悬背景色 */
  --tdc-mouseover-color: #F3F3F3;
}

Props

| 属性名 | 类型 | 默认值 | 说明 | | ------ | ------ | ------- | ------------------------------------------------------------ | | src | String | 空 | 标识的图片地址 | | url | String | 空 | 标识的跳转地址 | | title | String | 空 | 标识的文字说明 | | theme | String | light | 导航主题，可选值为 light / dark | | source | String | 空 | source 为导航的数据源，可以选择的数据源为自动判断数据源（不传参）和 woa |

Examples

<!-- 使用 slot 自定义 LOGO -->
<tdc-nav>自定义LOGO</tdc-nav>

<!-- 使用 props 配置 LOGO -->
<tdc-nav 
  url="https://codesign.qq.com/" 
  src="https://cdc.cdn-go.cn/tdc/latest/images/codesign.svg" 
  title="CoDesign"
></tdc-nav>

<!-- 暗黑模式 -->
<tdc-nav theme="dark">自定义 LOGO</tdc-nav>

tdc-footer

• 底部版权信息年份为自动更新

CSS Vars

:root {
  /* 字体主要颜色 */
  --tdc-text-color-primary: rgba(16, 28, 41, 1);
  /* 字体次要颜色 */
  --tdc-text-color-secondary: rgba(16, 28, 41, .6);
  /* 底部主要背景色 */
  --tdc-footer-bd-color-primary: #E7E7E7;
  /* 底部次要背景色 */
  --tdc-footer-bd-color-secondary: #EEEEEE;
}

Props

| 属性名 | 类型 | 默认值 | 说明 | | ------ | ------ | ------- | ----------------------------------- | | theme | String | light | 导航主题，可选值为 light / dark | | menus | Array | [] | 底部导航的链接配置，配置内容可以参考示例 |

Example

<!-- 普通模式 -->
<tdc-footer></tdc-footer>

<!-- 暗黑模式 -->
<tdc-footer theme="dark"></tdc-footer>

<!-- 自定义版权信息 -->
<tdc-footer>
  <div slot="copyright">这里是自定义的版权信息</div>
</tdc-footer>

<!-- 自定义二级导航 -->
<tdc-footer>
  <div slot="content">这里是自定义的二级导航</div>
</tdc-footer>

<!-- 自定义底部二级导航 参入的数组需要做 JSON.stringify 处理 -->
<tdc-footer menus='[{"title":"腾讯设计云","children":[{"title":"设计体系","url":"#"},{"title":"智能设计","url":"#"},{"title":"版权素材","url":"#"},{"title":"设计协同","url":"#"},{"title":"任务协同","url":"#"}]}]'></tdc-footer>

如何安装

Vue

查看在线运行实例

安装依赖

# 安装最新版本的 tdc-ui
npm i tdc-ui@latest

在 Vue 文件中引入 tdc-ui

<template>
  <tdc-header>
    <tdc-nav>LOGO</tdc-nav>
  </tdc-header>
  
  <!-- 自定义内容 -->

  <tdc-footer></tdc-footer>
</template>

<script>
  import 'tdc-ui';
</script>

React

查看在线运行实例

安装依赖

# 安装最新版本的 tdc-ui
npm i tdc-ui@latest

在 JSX 文件中引入 tdc-ui

import 'tdc-ui';

function App() {
  return (
    <div className="app">
      <tdc-header>
        <tdc-nav>LOGO</tdc-nav>
      </tdc-header>
      
      <!-- 自定义内容 -->

      <tdc-footer></tdc-footer>
    </div>
  )
}

静态页面

查看在线运行实例

在 HTML 页面中直接引用 tdc-ui

<script src="https://cdc.cdn-go.cn/tdc/latest/tdc.umd.js"></script>

<tdc-header>
  <tdc-nav>LOGO</tdc-nav>
</tdc-header>

<!-- 自定义内容 -->

<tdc-footer></tdc-footer>

自行实现

如果因为业务的特殊性无法直接使用 tdc-ui 可以自行实现，需要保证引用数据源统一。

• https://cdc.cdn-go.cn/tdc/latest/menu.json
• https://cdc.cdn-go.cn/tdc/latest/menu.woa.json