增加tag组件
parent
8be5a50115
commit
3780ef9f6b
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
- @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件
|
||||
|
||||
### 开发进度 && 计划 (39/55)
|
||||
### 开发进度 && 计划 (40/55)
|
||||
|
||||
- [x] `wc-card` 卡片组件
|
||||
- [x] `wc-space` 间隔组件
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
- [x] `wc-steps` 步骤条组件
|
||||
- [x] `wc-timeline` 时间线组件
|
||||
- [ ] `wc-layout` 布局组件
|
||||
- [ ] `wc-tag` 标签组件
|
||||
- [x] `wc-tag` 标签组件
|
||||
- [ ] `wc-tooltip` 文字提示组件
|
||||
- [x] `wc-popconfirm` 气泡确认框组件
|
||||
- [ ] `wc-chatbubble` 聊天气泡组件
|
||||
|
|
|
|||
|
|
@ -23,3 +23,4 @@ import './tabs/index.js'
|
|||
import './timeline/index.js'
|
||||
import './result/index.js'
|
||||
import './progress/index.js'
|
||||
import './tag/index.js'
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
* @date 2023/04/28 16:14:10
|
||||
*/
|
||||
|
||||
import { css, html, Component, styleMap, svg } from '@bd/core'
|
||||
import { css, html, Component, styleMap } from '@bd/core'
|
||||
|
||||
class Progress extends Component {
|
||||
static props = {
|
||||
|
|
@ -57,12 +57,6 @@ class Progress extends Component {
|
|||
default: false,
|
||||
attribute: true
|
||||
},
|
||||
|
||||
format: {
|
||||
type: Function,
|
||||
default: null,
|
||||
attribute: false
|
||||
},
|
||||
'back-color': {
|
||||
type: String,
|
||||
default: '#ebeef5',
|
||||
|
|
@ -89,13 +83,14 @@ class Progress extends Component {
|
|||
:host([type='line']) {
|
||||
width: 100%;
|
||||
.progress-text {
|
||||
width: auto;
|
||||
width: 40px;
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.progress-bar {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.bar-outer,
|
||||
|
|
@ -271,7 +266,7 @@ class Progress extends Component {
|
|||
}
|
||||
|
||||
return html`
|
||||
<div class="progress-bar" style=${`width:${this.width}px`}>
|
||||
<div class="progress-bar">
|
||||
<div
|
||||
class="bar-outer"
|
||||
:style=${styleMap({
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
* @date 2023/04/28 16:14:10
|
||||
*/
|
||||
|
||||
import { css, html, Component, styleMap } from '@bd/core'
|
||||
import { css, html, Component } from '@bd/core'
|
||||
import '../icon/index.js'
|
||||
|
||||
class Result extends Component {
|
||||
|
|
@ -97,9 +97,6 @@ class Result extends Component {
|
|||
}
|
||||
return this.type
|
||||
}
|
||||
mounted() {
|
||||
console.log(this.subTitle)
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
|
|
|
|||
|
|
@ -0,0 +1,216 @@
|
|||
/**
|
||||
* {标签}
|
||||
* @author chensbox<chensbox@foxmail.com>
|
||||
* @date 2023/04/28 16:14:10
|
||||
*/
|
||||
|
||||
import { css, html, Component, styleMap } from '@bd/core'
|
||||
import '../icon/index.js'
|
||||
|
||||
const ANIMATION = {
|
||||
duration: 100,
|
||||
custom: [{ transform: 'scaleX(0)' }, { transform: 'scaleX(1)' }]
|
||||
}
|
||||
|
||||
class Tag extends Component {
|
||||
static props = {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
color: '',
|
||||
size: {
|
||||
type: String,
|
||||
default: 'xl'
|
||||
},
|
||||
effect: {
|
||||
type: String,
|
||||
default: 'light' // dark / light / plain
|
||||
}
|
||||
}
|
||||
|
||||
static styles = [
|
||||
css`
|
||||
:host {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.close-btn {
|
||||
padding: 4px;
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
&:hover {
|
||||
background: pink;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
`,
|
||||
//尺寸
|
||||
css`
|
||||
@use 'sass:map';
|
||||
$sizes: (
|
||||
s: (
|
||||
h: 20px,
|
||||
p: 0 5px,
|
||||
s: 0.7
|
||||
),
|
||||
m: (
|
||||
h: 24px,
|
||||
p: 0 8px,
|
||||
s: 0.8
|
||||
),
|
||||
l: (
|
||||
h: 28px,
|
||||
p: 0 10px,
|
||||
s: 0.8
|
||||
),
|
||||
xl: (
|
||||
h: 32px,
|
||||
p: 0 10px,
|
||||
s: 1
|
||||
)
|
||||
);
|
||||
|
||||
@loop $s, $v in $sizes {
|
||||
:host([size='#{$s}']) {
|
||||
height: map.get($v, 'h');
|
||||
.tag {
|
||||
padding: map.get($v, 'p');
|
||||
line-height: calc(map.get($v, 'h') - 2px);
|
||||
}
|
||||
.close-btn {
|
||||
--size: 10px;
|
||||
transform: scale(map.get($v, 's'));
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
// 配色
|
||||
css`
|
||||
$colors: (
|
||||
default: 'plain',
|
||||
info: 'grey',
|
||||
success: 'green',
|
||||
warning: 'orange',
|
||||
danger: 'red'
|
||||
);
|
||||
|
||||
@loop $t, $c in $colors {
|
||||
:host([type='#{$t}']) {
|
||||
&:host([effect='light']) {
|
||||
.tag {
|
||||
background-color: var(--color-#{$c}-a);
|
||||
border: 1px solid transparent;
|
||||
@if $t == 'default' {
|
||||
color: var(--color-blue-3);
|
||||
} @else {
|
||||
color: var(--color-#{$c}-3);
|
||||
}
|
||||
}
|
||||
.close-btn:hover {
|
||||
color: #fff;
|
||||
@if $t == 'default' {
|
||||
background-color: var(--color-blue-2);
|
||||
} @else {
|
||||
background-color: var(--color-#{$c}-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:host([effect='dark']) {
|
||||
.tag {
|
||||
@if $t == 'default' {
|
||||
background-color: var(--color-blue-3);
|
||||
border: 1px solid var(--color-blue-3);
|
||||
} @else {
|
||||
background-color: var(--color-#{$c}-3);
|
||||
border: 1px solid var(--color-#{$c}-3);
|
||||
}
|
||||
color: #fff;
|
||||
}
|
||||
.close-btn:hover {
|
||||
@if $t == 'default' {
|
||||
background-color: var(--color-blue-1);
|
||||
} @else {
|
||||
background-color: var(--color-#{$c}-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:host([effect='plain']) {
|
||||
.tag {
|
||||
@if $t == 'default' {
|
||||
color: var(--color-blue-3);
|
||||
} @else {
|
||||
color: var(--color-#{$c}-3);
|
||||
}
|
||||
background-color: #fff;
|
||||
border: 1px solid var(--color-#{$c}-a);
|
||||
}
|
||||
.close-btn:hover {
|
||||
color: #fff;
|
||||
@if $t == 'default' {
|
||||
background-color: var(--color-blue-1);
|
||||
} @else {
|
||||
background-color: var(--color-#{$c}-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:host([hit]) .tag {
|
||||
@if $t == 'default' {
|
||||
border: 1px solid var(--color-blue-3);
|
||||
} @else {
|
||||
border: 1px solid var(--color-#{$c}-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
]
|
||||
|
||||
handleClose() {
|
||||
this.$refs.tag.$animate(true).then(() => this.$emit('close'))
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<span
|
||||
class="tag"
|
||||
#animation=${ANIMATION}
|
||||
ref="tag"
|
||||
style=${styleMap({ 'background-color': this.color })}
|
||||
>
|
||||
<slot></slot>
|
||||
${this.closable
|
||||
? html`<div class="close-btn" @click=${this.handleClose}>
|
||||
<wc-icon name="close"></wc-icon>
|
||||
</div>`
|
||||
: ''}
|
||||
</span>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
Tag.reg('tag')
|
||||
Loading…
Reference in New Issue