Skip to content

Commit

Permalink
feat(Tag): update Tag style, add simple ui (ecomfe#98)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Atlas-lili
Atlas-lili committed Mar 10, 2022
1 parent 53ead3b commit f428f06
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 13 deletions.
11 changes: 9 additions & 2 deletions demo/cases/Tag.vue
View file
Expand Up @@ -26,18 +26,24 @@
</veui-form>
</section>
<h2>风格</h2>
<div class="options-desc">可选的风格 <span class="bg-gray-show">ui</span> 属性值： <span class="bg-gray-show">borderless</span></div>
<div class="options-desc">可选的风格 <span class="bg-gray-show">ui</span> 属性值： <span class="bg-gray-show">borderless / simple</span></div>
<section>
<veui-form>
<veui-field label="有边框[不传ui]" ui="long">
<veui-tag>
标签
</veui-tag>
<veui-tag ui="simple">
标签
</veui-tag>
</veui-field>
<veui-field label="无边框[ui=borderless]" ui="long">
<veui-tag ui="borderless">
标签
</veui-tag>
<veui-tag ui="borderless simple">
标签
</veui-tag>
</veui-field>
</veui-form>
</section>
Expand Down Expand Up @@ -84,8 +90,9 @@
</veui-field>
<veui-field label="选择型标签" ui="long">
<veui-tag
v-for="item in sizes"
v-for="(item, index) in sizes"
:key="`${item.value}_04`"
:ui="`${item.value} ${index % 2 ? 'simple' : ''}`"
selectable
>
标签
Expand Down
3 changes: 3 additions & 0 deletions src/components/Tag.js
View file
Expand Up @@ -7,6 +7,9 @@ ui.defaults(
remove: 'times'
},
ui: {
simple: {
boolean: true
},
borderless: {
boolean: true
},
Expand Down
65 changes: 55 additions & 10 deletions src/components/tag.less
View file
Expand Up @@ -20,7 +20,7 @@
@font-size: ~"veui-tag-font-size-@{size}";

height: @@height;
border-radius: @veui-border-radius-l;
border-radius: @veui-border-radius-s;
font-size: @@font-size;
&[ui~="ellipse"] {
border-radius: @@height;
Expand All @@ -46,20 +46,37 @@
.make-metrics(l);
}

&[ui~="borderless"]:not(.focus-visible) {
&[ui~="borderless"]:not([data-focus-visible-added]) {
border-color: transparent;
}

&-remove {
&[ui~="simple"] {
background-color: @veui-tag-background-color-simple;
}

&-remove.@{veui-prefix}-button {
margin-left: @veui-tag-content-spacing;
padding: 0 @veui-tag-content-spacing * .5;
font-size: inherit;

&:hover {
color: @veui-tag-font-color-remove-hover;
}

&:active {
color: @veui-tag-font-color-remove-active;
}

&[data-focus-visible-added] {
color: @veui-tag-font-color-remove-focus;
}

.@{veui-prefix}-icon {
.veui-icon-size(@veui-tag-icon-size-aux);
}
}

&.focus-visible {
&[data-focus-visible-added] {
.veui-focus-ring(@veui-tag-border-color-focus, @veui-tag-shadow-focus);
}

Expand All @@ -86,7 +103,7 @@
border-color: @veui-tag-border-color-selected;
background-color: @veui-tag-background-color-selected;

&.focus-visible {
&[data-focus-visible-added] {
.veui-focus-ring(
@veui-tag-border-color-selected-focus,
@veui-tag-shadow-selected-focus
Expand All @@ -104,14 +121,42 @@
background-color: @veui-tag-background-color-disabled;
}
&.@{veui-prefix}-tag-selectable {
&[ui~="simple"] {
&:hover:not(.@{veui-prefix}-disabled) {
color: @veui-tag-font-color-simple-hover;
background-color: @veui-tag-background-color-simple;
border-color: @veui-tag-border-color-simple-hover;
}
&:active:not(.@{veui-prefix}-disabled) {
background: #DBE4FF;
}
&[data-focus-visible-added]:not(.@{veui-prefix}-tag-selected) {
color: @veui-tag-font-color-simple-hover;
}
&.@{veui-prefix}-tag-selected:not([data-focus-visible-added]) {
color: @veui-tag-font-color-simple-hover;
background-color: @veui-tag-background-color-simple-selected;
border-color: @veui-tag-border-color-simple-hover;
}
&[ui~="borderless"]:not([data-focus-visible-added]) {
border-color: transparent;
}
}
&:hover:not(.@{veui-prefix}-disabled) {
color: @veui-tag-font-color-hover;
background-color: @veui-tag-background-color-hover;
}
&:active:not(.@{veui-prefix}-disabled) {
background-color: @veui-color-gray-5;
}
&.@{veui-prefix}-tag-selected {
&:hover:not(.@{veui-prefix}-disabled) {
color: @veui-tag-font-color-selected;
background-color: @veui-tag-background-color-selected;
color: @veui-tag-font-color-selected;
background-color: @veui-tag-background-color-selected-hover;
}
&:active:not(.@{veui-prefix}-disabled) {
color: @veui-tag-font-color-selected;
background-color: @veui-tag-background-color-selected-active;
}
}
}
Expand Down Expand Up @@ -143,7 +188,7 @@
border-color: @veui-tag-border-color-selected;
background-color: @@selected-bg-color-name;

&.focus-visible {
&[data-focus-visible-added] {
.veui-focus-ring(
@veui-tag-border-color-selected-focus,
@veui-tag-shadow-selected-focus
Expand All @@ -160,8 +205,8 @@
color: @veui-tag-font-color-reversed;
}

&.focus-visible,
&.@{veui-prefix}-tag.focus-visible {
&[data-focus-visible-added],
&.@{veui-prefix}-tag[data-focus-visible-added] {
.veui-focus-ring(@veui-tag-border-color-focus, @veui-tag-shadow-focus);
}
}
Expand Down
13 changes: 12 additions & 1 deletion src/variables/components/tag.less
View file
Expand Up @@ -7,7 +7,7 @@
@veui-tag-height-l: @veui-height-unit * 8;

@veui-tag-padding: @veui-padding-unit * 2;
@veui-tag-content-spacing: @veui-padding-unit * 2;
@veui-tag-content-spacing: @veui-padding-unit;
@veui-tag-list-spacing: @veui-padding-unit * 1;

@veui-tag-font-size-xs: @veui-font-size-s;
Expand All @@ -22,17 +22,24 @@
/* Colors */
@veui-tag-font-color: @veui-font-color-normal;
@veui-tag-font-color-hover: @veui-font-color-strong;
@veui-tag-font-color-simple-hover: @veui-font-color-highlighted;
@veui-tag-font-color-disabled: @veui-font-color-disabled;
@veui-tag-background-color: @veui-color-gray-3;
@veui-tag-background-color-simple: @veui-background-color-normal;
@veui-tag-background-color-simple-active: @veui-color-info-2;
@veui-tag-background-color-hover: @veui-color-gray-4;
@veui-tag-background-color-disabled: @veui-background-color-disabled;
@veui-tag-border-color: @veui-color-gray-5;
@veui-tag-border-color-simple-hover: @veui-border-color-focus;
@veui-tag-border-color-focus: @veui-border-color-focus;
@veui-tag-border-color-disabled: @veui-border-color-disabled;
@veui-tag-shadow-focus: @veui-shadow-focus;

@veui-tag-font-color-selected: @veui-color-gray-1;
@veui-tag-background-color-selected: @veui-color-brand-6;
@veui-tag-background-color-simple-selected: @veui-background-color-normal-focus;
@veui-tag-background-color-selected-hover: @veui-color-info-5;
@veui-tag-background-color-selected-active: @veui-color-info-7;
@veui-tag-background-color-selected-disabled: @veui-color-brand-2;
@veui-tag-border-color-selected: transparent;
@veui-tag-border-color-selected-focus: @veui-border-color-focus;
Expand Down Expand Up @@ -66,6 +73,10 @@
@veui-tag-border-color-error: @veui-color-error-4;
@veui-tag-border-color-error-disabled: @veui-color-error-2;

@veui-tag-font-color-remove-hover: @veui-font-color-aux;
@veui-tag-font-color-remove-focus: @veui-font-color-aux;
@veui-tag-font-color-remove-active: @veui-font-color-normal;

// Reversed tags, same as selected contextual tags
// Fixed font color, no border (transparent)
@veui-tag-font-color-reversed: @veui-color-gray-1;
Expand Down

0 comments on commit f428f06

Please sign in to comment.