2019-05-15 | 开源项目 | UNLOCK

基于omi的omim-tag组件

mdc-tag

omim线上体验地址:omim

github地址: mac-tag

个人blog地址: blog

demo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import '../../src/tag/index.tsx'
import { render, h } from 'omi'

function clickHandler() {
console.log(1)
}
render(
<div>
<h3>基础用法</h3>

<m-tag onClick={clickHandler}>default</m-tag>

<m-tag onClick={clickHandler} type='primary'>primary</m-tag>

<m-tag onClick={clickHandler} type='danger'>danger</m-tag>

<m-tag onClick={clickHandler} type='warn'>warn</m-tag>

<m-tag onClick={clickHandler} type='success'>success</m-tag>

<h3>带图标</h3>

<m-tag onClick={clickHandler} icon={{
path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',
color: '#0052d9',
scale: 1.3
}}>default</m-tag>

<m-tag onClick={clickHandler} type='primary' icon={{
path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',
color: '#0052d9',
scale: 1.3
}}>primary</m-tag>

<m-tag onClick={clickHandler} type='danger' icon={{
path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',
color: '#0052d9',
scale: 1.3
}}>danger</m-tag>

<m-tag onClick={clickHandler} type='warn' icon={{
path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',
color: '#0052d9',
scale: 1.3
}}>warn</m-tag>

<m-tag onClick={clickHandler} type='success' icon={{
path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',
color: '#0052d9',
scale: 1.3
}}>success</m-tag>

<h3>不同尺寸</h3>

<m-tag onClick={clickHandler}>default</m-tag>

<m-tag onClick={clickHandler} type='danger' size='medium'>medium</m-tag>

<m-tag onClick={clickHandler} type='warn' size='small'>small</m-tag>

<m-tag onClick={clickHandler} type='success' size='mini'>mini</m-tag>


</div>
, 'body')

源码如下:

index.d.ts文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { WeElement } from 'omi';
import '../icon';
interface Props {
type: string;
active: boolean;
size: string;
icon: object;
}
interface Data {
}
export default class Tag extends WeElement<Props, Data> {
static css: any;
static propTypes: {
type: StringConstructor;
active: BooleanConstructor;
size: StringConstructor;
icon: ObjectConstructor;
};
render(props: any): JSX.Element;
}
export {};

index.tsx文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import { tag, WeElement, h, extractClass } from 'omi'
import * as css from './index.scss'
import '../icon'

interface Props {
type: string,
active: boolean,
size: string,
icon: object
}

interface Data {

}

@tag('m-tag')
export default class Tag extends WeElement<Props, Data>{
static css = css

static propTypes = {
type: String,
active: Boolean,
size: String,
icon: Object
}

render(props) {
return (
<div {...extractClass(props,
'mdc-tag',
props.type ? 'mdc-tag--'+`${props.type}` : '',
props.size ? 'mdc-tag--' + `${props.size}` : ''
)}>
<span><slot></slot></span>
{(props.icon) && <m-icon class='m-icon' {...props.icon}></m-icon>}
</div>
)
}
}

index.scss文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
@import '../theme';

.m-icon {
margin-left: 0.6em;
text-align: center;
display: inline-block;
}

.mdc-tag {
margin: 5px 5px 0 0;
background-color: #fff;
color: #000;
padding: 0 10px;
height: 32px;
font-size: 12px;
box-sizing: border-box;
border: 1px solid rgba(64, 158, 255, 0.2);
white-space: nowrap;
font-family: Roboto, sans-serif;
font-size: 12px;
line-height: 2.25rem;
font-weight: 500;
letter-spacing: 0.08929em;
text-decoration: none;
text-transform: uppercase;
padding: 0 10px;
display: inline-flex;
position: relative;
align-items: center;
justify-content: center;
box-sizing: border-box;
line-height: inherit;
user-select: none;
overflow: hidden;
vertical-align: middle;
}

.mdc-tag--active {
background-color: #ccc;
}

.mdc-tag--success {
background-color: rgba(103, 194, 58, 0.1);
border-color: rgba(103, 194, 58, 0.2);
color: #09bb07 !important;
}
.mdc-tag--primary {
background-color: rgba(64, 158, 255, 0.1);
border-color: rgba(64, 158, 255, 0.2);
color: #0052d9 !important;
}
.mdc-tag--warn {
background-color: rgba(230, 162, 60, 0.1);
border-color: rgba(230, 162, 60, 0.2);
color: #e6a23c !important;
}
.mdc-tag--danger {
background-color: rgba(245, 108, 108, 0.1);
border-color: rgba(245, 108, 108, 0.2);
color: #e64340 !important;
}

.mdc-tag--mediun {
height: 28px;
line-height: 26px;
}

.mdc-tag--small {
height: 24px;
padding: 0 8px;
line-height: 22px;
}

.mdc-tag--mini {
height: 20px;
padding: 0 5px;
line-height: 19px;
}

评论加载中

上一页 下一页