Skip to content

E
Element
Commit 5ecf4c28 authored by iamkun's avatar iamkun Committed by hetech
Browse files
Options

Link: add link component (#15052)

parent 0c9452f7
Hide whitespace changes
Inline Side-by-side
Showing with 569 additions and 0 deletions
components.json
View file @ 5ecf4c28
......@@ -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"
}
examples/docs/en-US/link.md 0 → 100644
View file @ 5ecf4c28
## Link
Text hyperlink
### Basic
Basic text link
:::demo
```html
<div>
<el-link href="https://element.eleme.io" target="_blank">default</el-link>
<el-link type="primary">primary</el-link>
<el-link type="success">success</el-link>
<el-link type="warning">warning</el-link>
<el-link type="danger">danger</el-link>
<el-link type="info">info</el-link>
</div>
```
:::
### Disabled
Disabled state of link
:::demo
```html
<div>
<el-link disabled>default</el-link>
<el-link type="primary" disabled>primary</el-link>
<el-link type="success" disabled>success</el-link>
<el-link type="warning" disabled>warning</el-link>
<el-link type="danger" disabled>danger</el-link>
<el-link type="info" disabled>info</el-link>
</div>
```
:::
### Underline
Underline of link
:::demo
```html
<div>
<el-link :underline="false">Without Underline</el-link>
<el-link>With Underline</el-link>
</div>
```
:::
### Icon
Link with icon
:::demo
```html
<div>
<el-link icon="el-icon-edit">Edit</el-link>
<el-link>Check<i class="el-icon-view el-icon--right"></i> </el-link>
</div>
```
:::
### 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 | — | - |
examples/docs/es/link.md 0 → 100644
View file @ 5ecf4c28
## Link
Text hyperlink
### Basic
Basic text link
:::demo
```html
<div>
<el-link href="https://element.eleme.io" target="_blank">default</el-link>
<el-link type="primary">primary</el-link>
<el-link type="success">success</el-link>
<el-link type="warning">warning</el-link>
<el-link type="danger">danger</el-link>
<el-link type="info">info</el-link>
</div>
```
:::
### Disabled
Disabled state of link
:::demo
```html
<div>
<el-link disabled>default</el-link>
<el-link type="primary" disabled>primary</el-link>
<el-link type="success" disabled>success</el-link>
<el-link type="warning" disabled>warning</el-link>
<el-link type="danger" disabled>danger</el-link>
<el-link type="info" disabled>info</el-link>
</div>
```
:::
### Underline
Underline of link
:::demo
```html
<div>
<el-link :underline="false">Without Underline</el-link>
<el-link>With Underline</el-link>
</div>
```
:::
### Icon
Link with icon
:::demo
```html
<div>
<el-link icon="el-icon-edit">Edit</el-link>
<el-link>Check<i class="el-icon-view el-icon--right"></i> </el-link>
</div>
```
:::
### 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 | — | - |
examples/docs/fr-FR/link.md 0 → 100644
View file @ 5ecf4c28
## Link
Text hyperlink
### Basic
Basic text link
:::demo
```html
<div>
<el-link href="https://element.eleme.io" target="_blank">default</el-link>
<el-link type="primary">primary</el-link>
<el-link type="success">success</el-link>
<el-link type="warning">warning</el-link>
<el-link type="danger">danger</el-link>
<el-link type="info">info</el-link>
</div>
```
:::
### Disabled
Disabled state of link
:::demo
```html
<div>
<el-link disabled>default</el-link>
<el-link type="primary" disabled>primary</el-link>
<el-link type="success" disabled>success</el-link>
<el-link type="warning" disabled>warning</el-link>
<el-link type="danger" disabled>danger</el-link>
<el-link type="info" disabled>info</el-link>
</div>
```
:::
### Underline
Underline of link
:::demo
```html
<div>
<el-link :underline="false">Without Underline</el-link>
<el-link>With Underline</el-link>
</div>
```
:::
### Icon
Link with icon
:::demo
```html
<div>
<el-link icon="el-icon-edit">Edit</el-link>
<el-link>Check<i class="el-icon-view el-icon--right"></i> </el-link>
</div>
```
:::
### 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 | — | - |
examples/docs/zh-CN/link.md 0 → 100644
View file @ 5ecf4c28
## Link 文字链接
文字超链接
### 基础用法
基础的文字链接用法。
:::demo
```html
<div>
<el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
<el-link type="primary">主要链接</el-link>
<el-link type="success">成功链接</el-link>
<el-link type="warning">警告链接</el-link>
<el-link type="danger">危险链接</el-link>
<el-link type="info">信息链接</el-link>
</div>
```
:::
### 禁用状态
文字链接不可用状态。
:::demo
```html
<div>
<el-link disabled>默认链接</el-link>
<el-link type="primary" disabled>主要链接</el-link>
<el-link type="success" disabled>成功链接</el-link>
<el-link type="warning" disabled>警告链接</el-link>
<el-link type="danger" disabled>危险链接</el-link>
<el-link type="info" disabled>信息链接</el-link>
</div>
```
:::
### 下划线
文字链接下划线。
:::demo
```html
<div>
<el-link :underline="false">无下划线</el-link>
<el-link>有下划线</el-link>
</div>
```
:::
### 图标
带图标的文字链接可增强辨识度。
:::demo
```html
<div>
<el-link icon="el-icon-edit">编辑</el-link>
<el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>
</div>
```
:::
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |
| type | 类型 | string | primary / success / warning / danger / info | default |
| underline | 是否下划线 | boolean | — | true |
| disabled | 是否禁用状态 | boolean | — | false |
| href | 原生 href 属性 | string | — | - |
| icon | 图标类名 | string | — | - |
examples/nav.config.json
View file @ 5ecf4c28
......@@ -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"
}
]
},
......
packages/link/index.js 0 → 100644
View file @ 5ecf4c28
import Link from './src/main';
/* istanbul ignore next */
Link.install = function(Vue) {
Vue.component(Link.name, Link);
};
export default Link;
packages/link/src/main.vue 0 → 100644
View file @ 5ecf4c28
<template>
<a
:class="[
'el-link',
type ? `el-link--${type}` : '',
disabled && 'is-disabled',
underline && !disabled && 'is-underline'
]"
:href="href"
v-bind="$attrs"
@click="handleClick"
>
<el-icon :class="icon" v-if="icon"></el-icon>
<span v-if="$slots.default" class="el-link--inner">
<slot></slot>
</span>
<template v-if="$slots.icon"><slot v-if="$slots.icon" name="icon"></slot></template>
</a>
</template>
<script>
export default {
name: 'ElLink',
props: {
type: {
type: String,
default: 'default'
},
underline: {
type: Boolean,
default: true
},
disabled: Boolean,
href: String,
icon: String
},
methods: {
handleClick(event) {
if (!this.disabled) {
if (!this.href) {
this.$emit('click', event);
}
}
}
}
};
</script>
packages/theme-chalk/src/common/var.scss
View file @ 5ecf4c28
......@@ -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;
......
packages/theme-chalk/src/index.scss
View file @ 5ecf4c28
......@@ -67,5 +67,6 @@
@import "./footer.scss";
@import "./timeline.scss";
@import "./timeline-item.scss";
@import "./link.scss";
@import "./divider.scss";
@import "./image.scss";
packages/theme-chalk/src/link.scss 0 → 100644
View file @ 5ecf4c28
@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%)
}
}
}
}
src/index.js
View file @ 5ecf4c28
......@@ -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
};
test/unit/specs/link.spec.js 0 → 100644
View file @ 5ecf4c28
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(`
<el-link href="https://element.eleme.io" target="_blank">
default
</el-link>
`);
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: `
<el-link @click="handleClick"></el-link>
`,
methods: {
handleClick(evt) {
result = evt;
}
}
}, true);
vm.$el.click();
await wait();
expect(result).to.exist;
});
});
types/link.d.ts 0 → 100644
View file @ 5ecf4c28
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
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment