From 90c0985d715f3b179c8032c166f8fe090f954c84 Mon Sep 17 00:00:00 2001 From: joylee Date: Wed, 17 Jan 2024 15:00:14 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=A0=87=E7=AD=BE=20=E7=AC=AC?= =?UTF-8?q?=E4=BA=8C=E8=BD=AEUI=E9=AA=8C=E6=94=B6=E9=97=AE=E9=A2=98?= =?UTF-8?q?=E3=80=91=E9=BB=98=E8=AE=A4=E6=A0=87=E7=AD=BE=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E4=BF=AE=E6=94=B9=20=EF=BC=8C=20=E6=B7=BB=E5=8A=A0=E6=8F=8F?= =?UTF-8?q?=E8=BE=B9=E7=8A=B6=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/tag/demos/basic-tag.md | 31 ++++++++++++++++----- src/components/tag/demos/categories.md | 2 +- src/components/tag/demos/state.md | 30 --------------------- src/components/tag/index.js | 8 +++--- src/components/tag/index.less | 37 +++++++++++++++++++++----- src/components/tag/index.md | 23 ++++++++-------- 6 files changed, 71 insertions(+), 60 deletions(-) delete mode 100644 src/components/tag/demos/state.md diff --git a/src/components/tag/demos/basic-tag.md b/src/components/tag/demos/basic-tag.md index ed5a78375..9cc26f9ce 100644 --- a/src/components/tag/demos/basic-tag.md +++ b/src/components/tag/demos/basic-tag.md @@ -17,13 +17,32 @@ class TagDemo extends Component { render() { return ( - Tag Demo - 超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag - { - window.open('http://www.baidu.com') - }}>Link Tag +
+ 默认标签 + { + window.open('http://www.baidu.com') + }}>超链接标签 + 描边标签 - disabled Link + 超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag +
+
+
预设状态标签
+ 成功 + 失败 + 未开始 + 已完成 + 进行中 +
+
+
预设状态标签 + 图标
+ 成功 + 失败 + 未开始 + 已完成 + 进行中 +
+ ); } diff --git a/src/components/tag/demos/categories.md b/src/components/tag/demos/categories.md index 4a68e8f22..73c207a09 100644 --- a/src/components/tag/demos/categories.md +++ b/src/components/tag/demos/categories.md @@ -47,7 +47,7 @@ class TagDemo extends Component { return ( {tags.map(({ checked, disabled, text }, index) => ( - this.handleClick(index)}> + this.handleClick(index)}> {text} ))} diff --git a/src/components/tag/demos/state.md b/src/components/tag/demos/state.md deleted file mode 100644 index d9575ea0c..000000000 --- a/src/components/tag/demos/state.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -order: 4 -title: 状态标签 -desc: 用带颜色的标签来区分不同的状态展现 ---- - -```jsx - - /** - * title: 状态标签 - * desc: 用带颜色的标签来区分不同的状态展现 - */ -import React, { Component } from 'react'; -import { Tag } from 'cloud-react'; - -class TagDemo extends Component { - render() { - return ( - - 成功 - 失败 - 进行中 - 未开始 - 已完成 - - ); - } -} -export default TagDemo; -``` diff --git a/src/components/tag/index.js b/src/components/tag/index.js index 3324f49cf..60e3ddb18 100644 --- a/src/components/tag/index.js +++ b/src/components/tag/index.js @@ -34,7 +34,7 @@ export default class Tag extends Component { typeEnum.PRIMARY, typeEnum.LINK, ]), - size: PropTypes.oneOf([ sizeEnum.SMALL, sizeEnum.NORMAL ]), + size: PropTypes.oneOf([sizeEnum.SMALL, sizeEnum.NORMAL]), color: PropTypes.string, rounded: PropTypes.bool, closable: PropTypes.bool, @@ -51,7 +51,7 @@ export default class Tag extends Component { color: '', rounded: false, closable: false, - checkable: true, + checkable: false, checked: false, disabled: false, onClick: noop, @@ -117,9 +117,7 @@ export default class Tag extends Component { }; renderContent() { - const { - closable, disabled, icon, maxWidth, style, ...others - } = this.props; + const { closable, disabled, icon, maxWidth, style, ...others } = this.props; const props = omit(others, [ 'type', diff --git a/src/components/tag/index.less b/src/components/tag/index.less index 6f283aa10..0065ccfab 100644 --- a/src/components/tag/index.less +++ b/src/components/tag/index.less @@ -6,6 +6,7 @@ color: @gray-6; background: @gray-3; border: 1px solid @gray-3; + cursor: not-allowed !important; &:hover { color: @gray-6; @@ -60,7 +61,7 @@ padding: 2px 8px; margin-right: 8px; cursor: default; - background: @gray-1; + background: @gray-3; border: 1px solid @gray-4; border-radius: 3px; .text-overflow-ellipsis; @@ -97,7 +98,9 @@ .tag-icon { position: absolute; left: 8px; + top: 5px; font-size: 12px; + line-height: 12px; } } @@ -110,6 +113,11 @@ right: 8px; } } + &.icon { + .tag-icon { + top: 7px; + } + } } &.small { @@ -128,6 +136,7 @@ .tag-icon { left: 4px; + top: 3px; } } @@ -138,7 +147,7 @@ &.checkable { cursor: pointer; - + background-color: @gray-1; &:hover { color: @blue-4; border-color: @blue-4; @@ -191,7 +200,9 @@ } } &.default { - .disabled(); + .tag-icon { + color: @gray-6; + } } &.danger, &.red { @@ -233,23 +244,35 @@ } &.link { - .theme-style(#E8E8E8, @blue-4); + cursor: pointer; + .theme-style(@gray-3, @gray-9); &:hover { cursor: pointer; - border-color: #E8E8E8; + border-color: #e8e8e8; + color: @blue-4; } &.disabled { color: @gray-6; background: @gray-3; - border: 1px solid #E8E8E8; + border: 1px solid #e8e8e8; &:hover { cursor: not-allowed; color: @gray-6; - border: 1px solid #E8E8E8; + border: 1px solid #e8e8e8; } } } + &.stroke { + color: @gray-9; + background-color: @gray-1; + &.disabled { + .color-disabled(@blue-3, @blue-1); + } + .tag-close-icon { + .close-style(@blue-3, @blue-5, @blue-6); + } + } } diff --git a/src/components/tag/index.md b/src/components/tag/index.md index 4e6593b31..dc910a270 100644 --- a/src/components/tag/index.md +++ b/src/components/tag/index.md @@ -9,36 +9,37 @@ group: path: /common --- -### 何时使用 +## 何时使用 1. 用于标记事物的属性和维度； 2. 进行分类。 -### API +## API | 属性 | 说明 | 类型 | 默认值 | | -------- | ------------------------------------------------------ | -------- | ------ | -| type | 标签状态,可选状态值：success、warning、default、danger、link | string | - | -| size | 标签大小,可选状态值：normal、small、large | string | normal | +| type | 标签状态,可选值：success、warning、default、danger、link、 stroke （描边） | string | - | +| size | 标签大小,可选值：normal、small、large | string | normal | | rounded | 圆形标签 | bool | false | | maxWidth | 标签最大宽度，超过则显示省略号及Tooltip | number | 200 | | color | 标签颜色,可选状态值：green、orange、red、blue、yellow、gray | string | - | | icon | 图标类型，在tag内内置icon可直接传入icon类型 | string | - | | closable | 标记标签是否可以被删除 | boolean | false | -| size | 标签大小,可选状态值：normal、small | string | normal | | checkable | 是否可以被选中，仅适用默认类型 | boolean | true | | disabled | 标签不可用 | boolean | false | | onClick | 点击标签的回调 | function | - | | onClose | 标记标签被删除后被触发 | function | - | - ### 代码演示 + ## 代码演示 +### 基础使用 - - - +### 大小 + - +### 可删除 + - +### 可选择 +