diff --git a/example/app.json b/example/app.json index a511b78a0..a2fde1bf6 100644 --- 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 index 24d51f301..1a3b40ae8 100644 --- 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 index 853c40863..14fb8fad2 100644 --- 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 new file mode 100644 index 000000000..c89261acc --- /dev/null +++ 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 new file mode 100644 index 000000000..3bf92f312 --- /dev/null +++ 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 new file mode 100644 index 000000000..b79c5124b --- /dev/null +++ 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 new file mode 100644 index 000000000..f60601722 --- /dev/null +++ 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 new file mode 100644 index 000000000..7350c9ace --- /dev/null +++ b/src/link/_example/content/index.wxml @@ -0,0 +1,4 @@ + + + + diff --git a/src/link/_example/content/index.wxss b/src/link/_example/content/index.wxss new file mode 100644 index 000000000..965eec29d --- /dev/null +++ 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 new file mode 100644 index 000000000..373f2de36 --- /dev/null +++ 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 new file mode 100644 index 000000000..e69de29bb diff --git a/src/link/_example/link.ts b/src/link/_example/link.ts new file mode 100644 index 000000000..560d44d43 --- /dev/null +++ b/src/link/_example/link.ts @@ -0,0 +1 @@ +Page({}); diff --git a/src/link/_example/link.wxml b/src/link/_example/link.wxml new file mode 100644 index 000000000..6ff3b746f --- /dev/null +++ b/src/link/_example/link.wxml @@ -0,0 +1,25 @@ + + Link 链接 + 文字超链接用于跳转一个新页面，如当前项目跳转，友情链接等。 + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/link/_example/prefix/index.js b/src/link/_example/prefix/index.js new file mode 100644 index 000000000..b79c5124b --- /dev/null +++ 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 new file mode 100644 index 000000000..f60601722 --- /dev/null +++ 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 new file mode 100644 index 000000000..90c4005e2 --- /dev/null +++ b/src/link/_example/prefix/index.wxml @@ -0,0 +1,4 @@ + + + + diff --git a/src/link/_example/prefix/index.wxss b/src/link/_example/prefix/index.wxss new file mode 100644 index 000000000..965eec29d --- /dev/null +++ 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 new file mode 100644 index 000000000..b79c5124b --- /dev/null +++ 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 new file mode 100644 index 000000000..f60601722 --- /dev/null +++ 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 new file mode 100644 index 000000000..8baaff3d5 --- /dev/null +++ b/src/link/_example/size/index.wxml @@ -0,0 +1,5 @@ + + + + + diff --git a/src/link/_example/size/index.wxss b/src/link/_example/size/index.wxss new file mode 100644 index 000000000..965eec29d --- /dev/null +++ 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 new file mode 100644 index 000000000..b79c5124b --- /dev/null +++ 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 new file mode 100644 index 000000000..f60601722 --- /dev/null +++ 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 new file mode 100644 index 000000000..728b31051 --- /dev/null +++ b/src/link/_example/status/index.wxml @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/link/_example/status/index.wxss b/src/link/_example/status/index.wxss new file mode 100644 index 000000000..671099dfe --- /dev/null +++ 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 new file mode 100644 index 000000000..b79c5124b --- /dev/null +++ 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 new file mode 100644 index 000000000..f60601722 --- /dev/null +++ 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 new file mode 100644 index 000000000..2d44f14db --- /dev/null +++ b/src/link/_example/suffix/index.wxml @@ -0,0 +1,4 @@ + + + + diff --git a/src/link/_example/suffix/index.wxss b/src/link/_example/suffix/index.wxss new file mode 100644 index 000000000..965eec29d --- /dev/null +++ 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 new file mode 100644 index 000000000..b79c5124b --- /dev/null +++ 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 new file mode 100644 index 000000000..f60601722 --- /dev/null +++ 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 new file mode 100644 index 000000000..755c0c4d6 --- /dev/null +++ b/src/link/_example/theme/index.wxml @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/link/_example/theme/index.wxss b/src/link/_example/theme/index.wxss new file mode 100644 index 000000000..671099dfe --- /dev/null +++ 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 new file mode 100644 index 000000000..b79c5124b --- /dev/null +++ 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 new file mode 100644 index 000000000..f60601722 --- /dev/null +++ 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 new file mode 100644 index 000000000..11f0312ea --- /dev/null +++ b/src/link/_example/underline/index.wxml @@ -0,0 +1,4 @@ + + + + diff --git a/src/link/_example/underline/index.wxss b/src/link/_example/underline/index.wxss new file mode 100644 index 000000000..965eec29d --- /dev/null +++ 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 new file mode 100644 index 000000000..049940c16 --- /dev/null +++ b/src/link/link.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-icon": "../icon/icon" + } +} diff --git a/src/link/link.less b/src/link/link.less new file mode 100644 index 000000000..bac539ab7 --- /dev/null +++ b/src/link/link.less @@ -0,0 +1,113 @@ +@import '../common/style/index.less'; + +// 状态色 - 默认色 + +@link-normal-default-color: var(--td-link-normal-default-color, @font-gray-1); // default 主题默认态颜色 +@link-active-default-color: var(--td-link-active-default-color, @brand-color-active); // default 主题激活态颜色 +@link-disabled-default-color: var(--td-link-disabled-default-color, @text-color-disabled); // default 主题禁用态颜色 + +// 状态色 - 主色 +@link-normal-primary-color: var(--td-link-normal-primary-color, @brand-color); // primary 主题默认态颜色 +@link-active-primary-color: var(--td-link-active-primary-color, @brand-color-active); // primary 主题激活态颜色 +@link-disabled-primary-color: var(--td-link-disabled-primary-color, @brand-color-disabled); // primary 主题禁用态颜色 + +// 状态色 - 成功 +@link-normal-success-color: var(--td-link-normal-success-color, @success-color); // success 主题默认态颜色 +@link-active-success-color: var(--td-link-active-success-color, @success-color-active); // success 主题激活态颜色 +@link-disabled-success-color: var(--td-link-disabled-success-color, @success-color-disabled); // success 主题禁用态颜色 + +// 状态色 - 警告 +@link-normal-warning-color: var(--td-link-normal-warning-color, @warning-color); // warning 主题默认态颜色 +@link-active-warning-color: var(--td-link-active-warning-color, @warning-color-active); // warning 主题激活态颜色 +@link-disabled-warning-color: var(--td-link-disabled-warning-color, @warning-color-disabled); // warning 主题禁用态颜色 + +// 状态色 - 危险 +@link-normal-danger-color: var(--td-link-normal-danger-color, @error-color); // danger 主题默认态颜色 +@link-active-danger-color: var(--td-link-active-danger-color, @error-color-active); // danger 主题激活态颜色 +@link-disabled-danger-color: var(--td-link-disabled-danger-color, @error-color-disabled); // danger 主题禁用态颜色 + +// 字号 +@link-content-small-font-size: 24rpx; +@link-content-small-line-height: 40rpx; +@link-icon-small-font-size: 28rpx; + +@link-content-medium-font-size: 28rpx; +@link-content-medium-line-height: 44rpx; +@link-icon-medium-font-size: 32rpx; + +@link-content-large-font-size: 32rpx; +@link-content-large-line-height: 48rpx; +@link-icon-large-font-size: 36rpx; + +@themes: primary, success, warning, default, danger; + +@link: ~'@{prefix}-link'; + +.link-size(@size) { + @contentFontSize: 'link-content-@{size}-font-size'; + @contentLineHeight: 'link-content-@{size}-line-height'; + @iconSize: 'link-icon-@{size}-font-size'; + + .@{link}--@{size} { + .@{link}__content { + font-size: @@contentFontSize; + line-height: @@contentLineHeight; + } + .@{link}__prefix-icon, + .@{link}__suffix-icon { + font-size: @@iconSize; + } + } +} + +.link-status(@status) { + .for(@themes, @i: 1) when(@i =< length(@themes)) { + @theme: extract(@themes, @i); + @color: 'link-@{status}-@{theme}-color'; + + .@{link}--@{status}-@{theme} { + color: @@color; + + &.@{link}--underline::after { + border-color: @@color; + } + } + + .for(@themes, (@i + 1)); + } + .for(@themes); +} + +.link-size(small); +.link-size(medium); +.link-size(large); + +.link-status(normal); +.link-status(active); +.link-status(disabled); + +.@{link} { + position: relative; + display: flex; + align-items: center; + box-sizing: content-box; + + &--underline::after { + content: ''; + position: absolute; + left: 0; + right: 0; + height: 0; + bottom: 0; + opacity: 1; + border-bottom: 1px solid rgb(205, 11, 231); + } + + &__prefix-icon + &__content:not(:empty) { + padding-left: 8rpx; + } + + &__content:not(:empty) + &__suffix-icon { + padding-left: 8rpx; + } +} diff --git a/src/link/link.ts b/src/link/link.ts new file mode 100644 index 000000000..eb84bd8a1 --- /dev/null +++ b/src/link/link.ts @@ -0,0 +1,74 @@ +import { SuperComponent, wxComponent } from '../common/src/index'; +import config from '../common/config'; +import props from './props'; +import { setIcon } from '../common/utils'; + +const { prefix } = config; +const name = `${prefix}-link`; + +@wxComponent() +export default class Link extends SuperComponent { + externalClasses = []; + + properties = props; + + data = { + prefix, + classPrefix: name, + }; + + observers = { + 'theme, status, size, underline, navigatorProps'() { + this.setClass(); + }, + + prefixIcon(prefixIcon) { + const obj = setIcon('prefixIcon', prefixIcon, ''); + this.setData({ + ...obj, + }); + }, + + suffixIcon(suffixIcon) { + const obj = setIcon('suffixIcon', suffixIcon, ''); + this.setData({ + ...obj, + }); + }, + }; + + lifetimes = { + attached() { + this.setClass(); + }, + }; + + methods = { + setClass() { + const { theme, status, size, underline, navigatorProps } = this.properties; + const classList = [name, `${name}--${status}-${theme}`, `${name}--${size}`]; + if (underline) { + classList.push(`${name}--underline`); + } + if ((navigatorProps && !navigatorProps.url) || status === 'disabled') { + classList.push(`${name}--disabled`); + } + + this.setData({ + className: classList.join(' '), + }); + }, + + onSuccess(e) { + this.triggerEvent('success', e); + }, + + onFail(e) { + this.triggerEvent('fail', e); + }, + + onComplete(e) { + this.triggerEvent('complete', e); + }, + }; +} diff --git a/src/link/link.wxml b/src/link/link.wxml new file mode 100644 index 000000000..77ae41baf --- /dev/null +++ b/src/link/link.wxml @@ -0,0 +1,43 @@ + + + + + + +