feat(Link): new component (#1236)

* feat(Link): new component * style(Link): update className * fix(link): optimize wxml Co-authored-by: leejimqiu <[email protected]>
Tencent · Dec 20, 2022 · 2587f28 · 2587f28
1 parent eb03fae
commit 2587f28
Show file tree

Hide file tree

Showing 43 changed files with 637 additions and 2 deletions.
diff --git a/example/app.json b/example/app.json
@@ -58,7 +58,8 @@
     "pages/notice-bar/notice-bar",
     "pages/image-viewer/image-viewer",
     "pages/result/result",
-    "pages/result/result-page"
+    "pages/result/result-page",
+    "pages/link/link"
   ],
   "subpackages": [
     {
@@ -132,7 +133,8 @@
     "t-navbar": "tdesign-miniprogram/navbar/navbar",
     "t-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker",
     "t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet",
-    "t-image-viewer": "tdesign-miniprogram/image-viewer/image-viewer"
+    "t-image-viewer": "tdesign-miniprogram/image-viewer/image-viewer",
+    "t-link": "tdesign-miniprogram/link/link"
   },
   "window": {
     "backgroundTextStyle": "light",

diff --git a/example/pages/home/data/base.ts b/example/pages/home/data/base.ts
@@ -26,6 +26,10 @@ const base = {
       name: 'Icon',
       label: '图标',
     },
+    {
+      name: 'Link',
+      label: '链接',
+    },
     // {
     //   name: 'Layout',
     //   label: '布局',

diff --git a/site/site.config.mjs b/site/site.config.mjs
@@ -73,6 +73,13 @@ export default {
           path: '/miniprogram/components/icon',
           component: () => import('@/icon/README.md'),
         },
+        {
+          title: 'Link 链接',
+          name: 'link',
+          meta: { docType: 'base' },
+          path: '/miniprogram/components/link',
+          component: () => import('@/link/README.md'),
+        },
       ],
     },
     {

diff --git a/src/link/README.en-US.md b/src/link/README.en-US.md
@@ -0,0 +1,23 @@
+:: BASE_DOC ::
+
+## API
+### Link Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+content | String / Slot | - | \- | N
+navigator-props | Object | - | \- | N
+prefix-icon | String / Object / Slot | - | \- | N
+size | String | medium | options：small/medium/large。Typescript：`SizeEnum` | N
+status | String | normal | options：normal/active/disabled | N
+suffix-icon | String / Object / Slot | - | \- | N
+theme | String | default | options：default/primary/danger/warning/success | N
+underline | Boolean | - | \- | N
+
+### Link Events
+
+name | params | description
+-- | -- | --
+complete | \- | \-
+fail | \- | \-
+success | \- | \-
diff --git a/src/link/README.md b/src/link/README.md
@@ -0,0 +1,64 @@
+---
+title: Link 链接
+description: 文字超链接用于跳转一个新页面，如当前项目跳转，友情链接等。
+spline: navigation
+isComponent: true
+---
+
+## 代码演示
+
+### 组件类型
+
+基础文字链接
+
+{{ content }}
+
+下划线文字链接
+
+{{ underline }}
+
+前置图标文字链接
+
+{{ prefix }}
+
+后置图标文字链接
+
+{{ suffix }}
+
+### 组件状态
+
+不同主题
+
+{{ theme }}
+
+禁用状态
+
+{{ status }}
+
+### 组件样式
+
+链接尺寸
+
+{{ size }}
+
+## API
+### Link Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+content | String / Slot | - | 链接内容 | N
+navigator-props | Object | - | 与 navigator 原生组件属性保持一致，具体使用参考：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html。 | N
+prefix-icon | String / Object / Slot | - | 前置图标 | N
+size | String | medium | 尺寸。可选项：small/medium/large。TS 类型：`SizeEnum` | N
+status | String | normal | 组件状态。可选项：normal/active/disabled | N
+suffix-icon | String / Object / Slot | - | 前置图标 | N
+theme | String | default | 组件风格，依次为默认色、品牌色、危险色、警告色、成功色。可选项：default/primary/danger/warning/success | N
+underline | Boolean | - 是否显示链接下划线 | N
+
+### Link Events
+
+名称 | 参数 | 描述
+-- | -- | --
+complete | \- | 页面链接执行完成后触发（失败或成功均会触发）
+fail | \- | 页面链接跳转失败后触发
+success | \- | 页面链接跳转成功后触发
diff --git a/src/link/_example/content/index.js b/src/link/_example/content/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/link/_example/content/index.json b/src/link/_example/content/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-link": "tdesign-miniprogram/link/link"
+  }
+}
diff --git a/src/link/_example/content/index.wxml b/src/link/_example/content/index.wxml
@@ -0,0 +1,4 @@
+<view class="link-example">
+  <t-link size="small" theme="primary" content="跳转链接" />
+  <t-link size="small" status="active" content="跳转链接" />
+</view>
diff --git a/src/link/_example/content/index.wxss b/src/link/_example/content/index.wxss
@@ -0,0 +1,7 @@
+.link-example {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  height: 96rpx;
+  background-color: #fff;
+}
diff --git a/src/link/_example/link.json b/src/link/_example/link.json
@@ -0,0 +1,13 @@
+{
+  "navigationBarTitleText": "Link",
+  "navigationBarBackgroundColor": "#fff",
+  "usingComponents": {
+    "content": "./content",
+    "underline": "./underline",
+    "prefix": "./prefix",
+    "suffix": "./suffix",
+    "theme": "./theme",
+    "status": "./status",
+    "size": "./size"
+  }
+}
diff --git a/src/link/_example/link.less b/src/link/_example/link.less
diff --git a/src/link/_example/link.ts b/src/link/_example/link.ts
@@ -0,0 +1 @@
+Page({});
diff --git a/src/link/_example/link.wxml b/src/link/_example/link.wxml
@@ -0,0 +1,25 @@
+<view class="demo">
+  <view class="demo-title">Link 链接</view>
+  <view class="demo-desc">文字超链接用于跳转一个新页面，如当前项目跳转，友情链接等。</view>
+  <t-demo title="01 组件类型" desc="基础文字链接">
+    <content />
+  </t-demo>
+  <t-demo desc="下划线文字链接">
+    <underline />
+  </t-demo>
+  <t-demo desc="前置图标文字链接">
+    <prefix />
+  </t-demo>
+  <t-demo desc="后置图标文字链接">
+    <suffix />
+  </t-demo>
+  <t-demo title="02 组件状态" desc="不同主题">
+    <theme />
+  </t-demo>
+  <t-demo desc="禁用状态">
+    <status />
+  </t-demo>
+  <t-demo title="03 组件样式" desc="链接尺寸">
+    <size />
+  </t-demo>
+</view>
diff --git a/src/link/_example/prefix/index.js b/src/link/_example/prefix/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/link/_example/prefix/index.json b/src/link/_example/prefix/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-link": "tdesign-miniprogram/link/link"
+  }
+}
diff --git a/src/link/_example/prefix/index.wxml b/src/link/_example/prefix/index.wxml
@@ -0,0 +1,4 @@
+<view class="link-example">
+  <t-link size="small" theme="primary" content="跳转链接" prefixIcon="link" />
+  <t-link size="small" content="跳转链接" prefixIcon="link" />
+</view>
diff --git a/src/link/_example/prefix/index.wxss b/src/link/_example/prefix/index.wxss
@@ -0,0 +1,7 @@
+.link-example {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  height: 96rpx;
+  background-color: #fff;
+}
diff --git a/src/link/_example/size/index.js b/src/link/_example/size/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/link/_example/size/index.json b/src/link/_example/size/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-link": "tdesign-miniprogram/link/link"
+  }
+}
diff --git a/src/link/_example/size/index.wxml b/src/link/_example/size/index.wxml
@@ -0,0 +1,5 @@
+<view class="link-example">
+  <t-link size="small" theme="primary" content="S号链接" suffixIcon="jump" disabled />
+  <t-link theme="primary" content="M号链接" suffixIcon="jump" disabled />
+  <t-link size="large" theme="primary" content="L号链接" suffixIcon="jump" disabled />
+</view>
diff --git a/src/link/_example/size/index.wxss b/src/link/_example/size/index.wxss
@@ -0,0 +1,7 @@
+.link-example {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  height: 96rpx;
+  background-color: #fff;
+}
diff --git a/src/link/_example/status/index.js b/src/link/_example/status/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/link/_example/status/index.json b/src/link/_example/status/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-link": "tdesign-miniprogram/link/link"
+  }
+}
diff --git a/src/link/_example/status/index.wxml b/src/link/_example/status/index.wxml
@@ -0,0 +1,9 @@
+<view class="link-example">
+  <t-link size="small" theme="primary" content="跳转链接" suffixIcon="jump" status="disabled" />
+  <t-link size="small" content="跳转链接" suffixIcon="jump" status="disabled" />
+  <t-link size="small" theme="danger" content="跳转链接" suffixIcon="jump" status="disabled" />
+</view>
+<view class="link-example">
+  <t-link size="small" theme="warning" content="跳转链接" suffixIcon="jump" status="disabled" />
+  <t-link size="small" theme="success" content="跳转链接" suffixIcon="jump" status="disabled" />
+</view>
diff --git a/src/link/_example/status/index.wxss b/src/link/_example/status/index.wxss
@@ -0,0 +1,11 @@
+.link-example {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  height: 96rpx;
+  background-color: #fff;
+}
+
+.link-example:not(:last-child) {
+  margin-bottom: 32rpx;
+}
diff --git a/src/link/_example/suffix/index.js b/src/link/_example/suffix/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/link/_example/suffix/index.json b/src/link/_example/suffix/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-link": "tdesign-miniprogram/link/link"
+  }
+}
diff --git a/src/link/_example/suffix/index.wxml b/src/link/_example/suffix/index.wxml
@@ -0,0 +1,4 @@
+<view class="link-example">
+  <t-link size="small" theme="primary" content="跳转链接" suffixIcon="jump" />
+  <t-link size="small" content="跳转链接" suffixIcon="jump" />
+</view>
diff --git a/src/link/_example/suffix/index.wxss b/src/link/_example/suffix/index.wxss
@@ -0,0 +1,7 @@
+.link-example {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  height: 96rpx;
+  background-color: #fff;
+}
diff --git a/src/link/_example/theme/index.js b/src/link/_example/theme/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/link/_example/theme/index.json b/src/link/_example/theme/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-link": "tdesign-miniprogram/link/link"
+  }
+}
diff --git a/src/link/_example/theme/index.wxml b/src/link/_example/theme/index.wxml
@@ -0,0 +1,9 @@
+<view class="link-example">
+  <t-link size="small" theme="primary" content="跳转链接" suffixIcon="jump" />
+  <t-link size="small" content="跳转链接" suffixIcon="jump" />
+  <t-link size="small" theme="danger" content="跳转链接" suffixIcon="jump" />
+</view>
+<view class="link-example">
+  <t-link size="small" theme="warning" content="跳转链接" suffixIcon="jump" />
+  <t-link size="small" theme="success" content="跳转链接" suffixIcon="jump" />
+</view>
diff --git a/src/link/_example/theme/index.wxss b/src/link/_example/theme/index.wxss
@@ -0,0 +1,11 @@
+.link-example {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  height: 96rpx;
+  background-color: #fff;
+}
+
+.link-example:not(:last-child) {
+  margin-bottom: 32rpx;
+}
diff --git a/src/link/_example/underline/index.js b/src/link/_example/underline/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/link/_example/underline/index.json b/src/link/_example/underline/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-link": "tdesign-miniprogram/link/link"
+  }
+}
diff --git a/src/link/_example/underline/index.wxml b/src/link/_example/underline/index.wxml
@@ -0,0 +1,4 @@
+<view class="link-example">
+  <t-link size="small" theme="primary" content="跳转链接" underline />
+  <t-link size="small" content="跳转链接" underline />
+</view>
diff --git a/src/link/_example/underline/index.wxss b/src/link/_example/underline/index.wxss
@@ -0,0 +1,7 @@
+.link-example {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  height: 96rpx;
+  background-color: #fff;
+}
diff --git a/src/link/link.json b/src/link/link.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "../icon/icon"
+  }
+}