diff --git a/components.json b/components.json index 03f893b4d..54389a833 100644 --- a/components.json +++ b/components.json @@ -70,6 +70,7 @@ "footer": "./packages/footer/index.js", "timeline": "./packages/timeline/index.js", "timeline-item": "./packages/timeline-item/index.js", + "link": "./packages/link/index.js", "divider": "./packages/divider/index.js", "image": "./packages/image/index.js" } diff --git a/examples/docs/en-US/link.md b/examples/docs/en-US/link.md new file mode 100644 index 000000000..66859fa89 --- /dev/null +++ b/examples/docs/en-US/link.md @@ -0,0 +1,77 @@ +## Link + +Text hyperlink + +### Basic + +Basic text link +:::demo + +```html +
+ default + primary + success + warning + danger + info +
+``` + +::: + +### Disabled + +Disabled state of link +:::demo + +```html +
+ default + primary + success + warning + danger + info +
+``` + +::: + +### Underline + +Underline of link +:::demo + +```html +
+ Without Underline + With Underline +
+``` + +::: + +### Icon + +Link with icon +:::demo + +```html +
+ Edit + Check +
+``` + +::: + +### Attributes + +| Attribute | Description | Type | Options | Default | +| --------- | ----------------------------------- | ------- | ------------------------------------------- | ------- | +| type | type | string | primary / success / warning / danger / info | default | +| underline | whether the component has underline | boolean | — | true | +| disabled | whether the component is disabled | boolean | — | false | +| href | same as native hyperlink's `href` | string | — | - | +| icon | class name of icon | string | — | - | diff --git a/examples/docs/es/link.md b/examples/docs/es/link.md new file mode 100644 index 000000000..66859fa89 --- /dev/null +++ b/examples/docs/es/link.md @@ -0,0 +1,77 @@ +## Link + +Text hyperlink + +### Basic + +Basic text link +:::demo + +```html +
+ default + primary + success + warning + danger + info +
+``` + +::: + +### Disabled + +Disabled state of link +:::demo + +```html +
+ default + primary + success + warning + danger + info +
+``` + +::: + +### Underline + +Underline of link +:::demo + +```html +
+ Without Underline + With Underline +
+``` + +::: + +### Icon + +Link with icon +:::demo + +```html +
+ Edit + Check +
+``` + +::: + +### Attributes + +| Attribute | Description | Type | Options | Default | +| --------- | ----------------------------------- | ------- | ------------------------------------------- | ------- | +| type | type | string | primary / success / warning / danger / info | default | +| underline | whether the component has underline | boolean | — | true | +| disabled | whether the component is disabled | boolean | — | false | +| href | same as native hyperlink's `href` | string | — | - | +| icon | class name of icon | string | — | - | diff --git a/examples/docs/fr-FR/link.md b/examples/docs/fr-FR/link.md new file mode 100644 index 000000000..66859fa89 --- /dev/null +++ b/examples/docs/fr-FR/link.md @@ -0,0 +1,77 @@ +## Link + +Text hyperlink + +### Basic + +Basic text link +:::demo + +```html +
+ default + primary + success + warning + danger + info +
+``` + +::: + +### Disabled + +Disabled state of link +:::demo + +```html +
+ default + primary + success + warning + danger + info +
+``` + +::: + +### Underline + +Underline of link +:::demo + +```html +
+ Without Underline + With Underline +
+``` + +::: + +### Icon + +Link with icon +:::demo + +```html +
+ Edit + Check +
+``` + +::: + +### Attributes + +| Attribute | Description | Type | Options | Default | +| --------- | ----------------------------------- | ------- | ------------------------------------------- | ------- | +| type | type | string | primary / success / warning / danger / info | default | +| underline | whether the component has underline | boolean | — | true | +| disabled | whether the component is disabled | boolean | — | false | +| href | same as native hyperlink's `href` | string | — | - | +| icon | class name of icon | string | — | - | diff --git a/examples/docs/zh-CN/link.md b/examples/docs/zh-CN/link.md new file mode 100644 index 000000000..a64a9beb4 --- /dev/null +++ b/examples/docs/zh-CN/link.md @@ -0,0 +1,66 @@ +## Link 文字链接 + +文字超链接 + +### 基础用法 +基础的文字链接用法。 +:::demo +```html +
+ 默认链接 + 主要链接 + 成功链接 + 警告链接 + 危险链接 + 信息链接 +
+``` +::: + +### 禁用状态 +文字链接不可用状态。 +:::demo +```html +
+ 默认链接 + 主要链接 + 成功链接 + 警告链接 + 危险链接 + 信息链接 +
+``` +::: + +### 下划线 +文字链接下划线。 +:::demo +```html +
+ 无下划线 + 有下划线 +
+``` +::: + +### 图标 + +带图标的文字链接可增强辨识度。 +:::demo +```html +
+ 编辑 + 查看 +
+``` +::: + +### Attributes + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- | +| type | 类型 | string | primary / success / warning / danger / info | default | +| underline | 是否下划线 | boolean | — | true | +| disabled | 是否禁用状态 | boolean | — | false | +| href | 原生 href 属性 | string | — | - | +| icon | 图标类名 | string | — | - | diff --git a/examples/nav.config.json b/examples/nav.config.json index 73bf59a62..11f0d60e6 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -70,6 +70,10 @@ { "path": "/button", "title": "Button 按钮" + }, + { + "path": "/link", + "title": "Link 文字链接" } ] }, @@ -336,6 +340,10 @@ { "path": "/button", "title": "Button" + }, + { + "path": "/link", + "title": "Link" } ] }, @@ -602,6 +610,10 @@ { "path": "/button", "title": "Button" + }, + { + "path": "/link", + "title": "Link" } ] }, @@ -868,6 +880,10 @@ { "path": "/button", "title": "Button" + }, + { + "path": "/link", + "title": "Link" } ] }, diff --git a/packages/link/index.js b/packages/link/index.js new file mode 100644 index 000000000..7caa97cd4 --- /dev/null +++ b/packages/link/index.js @@ -0,0 +1,8 @@ +import Link from './src/main'; + +/* istanbul ignore next */ +Link.install = function(Vue) { + Vue.component(Link.name, Link); +}; + +export default Link; diff --git a/packages/link/src/main.vue b/packages/link/src/main.vue new file mode 100644 index 000000000..c3d36ddd7 --- /dev/null +++ b/packages/link/src/main.vue @@ -0,0 +1,53 @@ + + + diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index 757030d2f..61b7a934e 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -863,6 +863,29 @@ $--timeline-node-size-normal: 12px !default; $--timeline-node-size-large: 14px !default; $--timeline-node-color: $--border-color-light !default; +/* Link +--------------------------*/ +/// fontSize||Font|1 +$--link-font-size: $--font-size-base !default; +/// fontWeight||Font|1 +$--link-font-weight: $--font-weight-primary !default; +/// color||Color|0 +$--link-default-font-color: $--color-text-regular !default; +/// color||Color|0 +$--link-default-active-color: $--color-primary !default; +/// color||Color|0 +$--link-disabled-font-color: $--color-text-placeholder !default; +/// color||Color|0 +$--link-primary-font-color: $--color-primary !default; +/// color||Color|0 +$--link-success-font-color: $--color-success !default; +/// color||Color|0 +$--link-warning-font-color: $--color-warning !default; +/// color||Color|0 +$--link-danger-font-color: $--color-danger !default; +/// color||Color|0 +$--link-info-font-color: $--color-info !default; + /* Break-point --------------------------*/ $--sm: 768px !default; diff --git a/packages/theme-chalk/src/index.scss b/packages/theme-chalk/src/index.scss index 0cd602b59..4e5488691 100644 --- a/packages/theme-chalk/src/index.scss +++ b/packages/theme-chalk/src/index.scss @@ -67,5 +67,6 @@ @import "./footer.scss"; @import "./timeline.scss"; @import "./timeline-item.scss"; +@import "./link.scss"; @import "./divider.scss"; @import "./image.scss"; diff --git a/packages/theme-chalk/src/link.scss b/packages/theme-chalk/src/link.scss new file mode 100644 index 000000000..0e1bfdd43 --- /dev/null +++ b/packages/theme-chalk/src/link.scss @@ -0,0 +1,76 @@ +@import "mixins/mixins"; +@import "common/var"; + +$typeMap: ( + primary: $--link-primary-font-color, + danger: $--link-danger-font-color, + success: $--link-success-font-color, + warning: $--link-warning-font-color, + info: $--link-info-font-color); + +@include b(link) { + display: inline-flex; + flex-direction: row; + align-items: center; + justify-content: center; + vertical-align: middle; + position: relative; + text-decoration: none; + outline: none; + cursor: pointer; + padding: 0; + font-size: $--link-font-size; + font-weight: $--link-font-weight; + + @include when(underline) { + &:hover:after { + content: ""; + position: absolute; + left: 0; + right: 0; + height: 0; + bottom: 0; + border-bottom: 1px solid $--link-default-active-color + } + } + + @include when(disabled) { + cursor: not-allowed; + } + + & [class*="el-icon-"] { + & + span { + margin-left: 5px; + } + } + + + &.el-link--default { + color: $--link-default-font-color; + &:hover { + color: $--link-default-active-color + } + &:after { + border-color: $--link-default-active-color + } + @include when(disabled) { + color: $--link-disabled-font-color + } + } + + @each $type, $primaryColor in $typeMap { + &.el-link--#{$type} { + color: $primaryColor; + &:hover { + color: mix($primaryColor, $--color-white, 80%) + } + &:after { + border-color: $primaryColor + } + @include when(disabled) { + color: mix($primaryColor, $--color-white, 50%) + } + } + } + +} diff --git a/src/index.js b/src/index.js index a388f369c..8337e209f 100644 --- a/src/index.js +++ b/src/index.js @@ -71,6 +71,7 @@ import Main from '../packages/main/index.js'; import Footer from '../packages/footer/index.js'; import Timeline from '../packages/timeline/index.js'; import TimelineItem from '../packages/timeline-item/index.js'; +import Link from '../packages/link/index.js'; import Divider from '../packages/divider/index.js'; import Image from '../packages/image/index.js'; import locale from 'element-ui/src/locale'; @@ -144,6 +145,7 @@ const components = [ Footer, Timeline, TimelineItem, + Link, Divider, Image, CollapseTransition @@ -256,6 +258,7 @@ export default { Footer, Timeline, TimelineItem, + Link, Divider, Image }; diff --git a/test/unit/specs/link.spec.js b/test/unit/specs/link.spec.js new file mode 100644 index 000000000..5eae9f0a9 --- /dev/null +++ b/test/unit/specs/link.spec.js @@ -0,0 +1,66 @@ +import { createTest, createVue, destroyVM, wait } from '../util'; +import Link from 'packages/link'; + +describe('Link', () => { + let vm; + afterEach(() => { + destroyVM(vm); + }); + + it('create', () => { + vm = createTest(Link, { + type: 'primary' + }, true); + let linkElm = vm.$el; + expect(linkElm.classList.contains('el-link--primary')).to.be.true; + }); + it('icon', () => { + vm = createTest(Link, { + icon: 'el-icon-search' + }, true); + let linkElm = vm.$el; + expect(linkElm.querySelector('.el-icon-search')).to.be.ok; + }); + it('href', () => { + vm = createTest(Link, { + href: 'https://element.eleme.io/' + }, true); + let linkElm = vm.$el; + expect(linkElm.getAttribute('href')).to.be.equal('https://element.eleme.io/'); + }); + it('target', () => { + vm = createVue(` + + default + + `); + let linkElm = vm.$el; + expect(linkElm.getAttribute('target')).to.be.equal('_blank'); + }); + it('disabled', () => { + vm = createTest(Link, { + disabled: true + }, true); + let linkElm = vm.$el; + expect(linkElm.classList.contains('is-disabled')).to.be.true; + }); + + it('click', async() => { + let result; + vm = createVue({ + template: ` + + `, + methods: { + handleClick(evt) { + result = evt; + } + } + }, true); + vm.$el.click(); + await wait(); + expect(result).to.exist; + }); + +}); + diff --git a/types/link.d.ts b/types/link.d.ts new file mode 100644 index 000000000..c7ed7dd1b --- /dev/null +++ b/types/link.d.ts @@ -0,0 +1,25 @@ +import { ElementUIComponent } from './component' + +/** Button type */ +export type LinkType = 'primary' | 'success' | 'warning' | 'danger' | 'info' + +/** Link Component */ +export declare class ElLink extends ElementUIComponent { + /** Link type */ + type: LinkType + + /** Disable the link */ + disabled: boolean + + /** Link underline */ + underline: boolean + + /** Link icon, accepts an icon name of Element icon component */ + icon: string + + /** Link href */ + href: string + + /** Link target */ + target: string +}