Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
fec3c705
N
nutui-react
项目概览
京东前端
/
nutui-react
通知
0
Star
2
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui-react
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
fec3c705
编写于
8月 03, 2022
作者:
O
oasis-cloud
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: tag 增加在线调试能力
上级
7dd7ca48
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
199 addition
and
25 deletion
+199
-25
src/packages/tag/doc.en-US.md
src/packages/tag/doc.en-US.md
+100
-13
src/packages/tag/doc.md
src/packages/tag/doc.md
+99
-12
未找到文件。
src/packages/tag/doc.en-US.md
浏览文件 @
fec3c705
# Tag
# Tag
### introduce
...
...
@@ -14,45 +14,133 @@ import { Tag } from '@nutui/nutui-react';
### Basic usage
:::demo
```
tsx
<
Tag
type
=
"primary"
>
Label
</
Tag
>
<
Tag
type
=
"success"
>
Label
</
Tag
>
<
Tag
type
=
"danger"
>
Label
</
Tag
>
<
Tag
type
=
"warning"
>
Label
</
Tag
>
import
React
from
"
react
"
;
import
{
Tag
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Tag
type
=
"primary"
>
Label
</
Tag
>
<
Tag
type
=
"success"
>
Label
</
Tag
>
<
Tag
type
=
"danger"
>
Label
</
Tag
>
<
Tag
type
=
"warning"
>
Label
</
Tag
>
</>
)
}
export
default
App
;
```
:::
### Hollow style
:::demo
```
tsx
<
Tag
plain
>
Label
</
Tag
>
import
React
from
"
react
"
;
import
{
Tag
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Tag
plain
>
Label
</
Tag
>
</>
)
}
export
default
App
;
```
:::
### Rounded style
:::demo
```
tsx
<
Tag
round
type
=
"primary"
>
Label
</
Tag
>
import
React
from
"
react
"
;
import
{
Tag
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Tag
round
type
=
"primary"
>
Label
</
Tag
>
</>
)
}
export
default
App
;
```
:::
### Label style
:::demo
```
tsx
<
Tag
mark
type
=
"primary"
>
Label
</
Tag
>
import
React
from
"
react
"
;
import
{
Tag
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Tag
mark
type
=
"primary"
>
Label
</
Tag
>
</>
)
}
export
default
App
;
```
:::
### Can close label
:::demo
```
tsx
<
Tag
isShow
=
{
isShow
}
closeable
onClick
=
{
close
}
type
=
"primary"
>
Label
</
Tag
>
import
React
from
"
react
"
;
import
{
Tag
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
isShow
,
setIsShow
]
=
useState
(
true
)
const
close
=
()
=>
{
setIsShow
(
false
)
}
return
(
<>
<
Tag
isShow
=
{
isShow
}
closeable
onClick
=
{
close
}
type
=
"primary"
>
Label
</
Tag
>
</>
)
}
export
default
App
;
```
:::
### Custom color
:::demo
```
tsx
<
Tag
color
=
"#FA685D"
>
Label
</
Tag
>
<
Tag
color
=
"#E9E9E9"
text
-
color
=
"#999999"
>
Label
</
Tag
>
<
Tag
color
=
"#FA2400"
plain
>
Label
</
Tag
>
import
React
from
"
react
"
;
import
{
Tag
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Tag
color
=
"#FA685D"
>
Label
</
Tag
>
<
Tag
color
=
"#E9E9E9"
text
-
color
=
"#999999"
>
Label
</
Tag
>
<
Tag
color
=
"#FA2400"
plain
>
Label
</
Tag
>
</>
)
}
export
default
App
;
```
:::
## API
### Props
...
...
@@ -67,7 +155,6 @@ import { Tag } from '@nutui/nutui-react';
| mark | Whether it is a tag style | Boolean |
`false`
|
| closeable | Whether it can be closed label | Boolean |
`false`
|
### Event
| Event name | illustrate | Callback parameter |
...
...
src/packages/tag/doc.md
浏览文件 @
fec3c705
...
...
@@ -14,45 +14,133 @@ import { Tag } from '@nutui/nutui-react';
### 基础用法
:::demo
```
tsx
<
Tag
type
=
"primary"
>
标签
</
Tag
>
<
Tag
type
=
"success"
>
标签
</
Tag
>
<
Tag
type
=
"danger"
>
标签
</
Tag
>
<
Tag
type
=
"warning"
>
标签
</
Tag
>
import
React
from
"
react
"
;
import
{
Tag
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Tag
type
=
"primary"
>
标签
</
Tag
>
<
Tag
type
=
"success"
>
标签
</
Tag
>
<
Tag
type
=
"danger"
>
标签
</
Tag
>
<
Tag
type
=
"warning"
>
标签
</
Tag
>
</>
)
}
export
default
App
;
```
:::
### 空心样式
:::demo
```
tsx
<
Tag
plain
>
标签
</
Tag
>
import
React
from
"
react
"
;
import
{
Tag
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Tag
plain
>
标签
</
Tag
>
</>
)
}
export
default
App
;
```
:::
### 圆角样式
:::demo
```
tsx
<
Tag
round
type
=
"primary"
>
标签
</
Tag
>
import
React
from
"
react
"
;
import
{
Tag
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Tag
round
type
=
"primary"
>
标签
</
Tag
>
</>
)
}
export
default
App
;
```
:::
### 标记样式
:::demo
```
tsx
<
Tag
mark
type
=
"primary"
>
标签
</
Tag
>
import
React
from
"
react
"
;
import
{
Tag
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Tag
mark
type
=
"primary"
>
标签
</
Tag
>
</>
)
}
export
default
App
;
```
:::
### 可关闭标签
:::demo
```
tsx
<
Tag
isShow
=
{
isShow
}
closeable
onClick
=
{
close
}
type
=
"primary"
>
标签
</
Tag
>
import
React
from
"
react
"
;
import
{
Tag
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
isShow
,
setIsShow
]
=
useState
(
true
)
const
close
=
()
=>
{
setIsShow
(
false
)
}
return
(
<>
<
Tag
isShow
=
{
isShow
}
closeable
onClick
=
{
close
}
type
=
"primary"
>
标签
</
Tag
>
</>
)
}
export
default
App
;
```
:::
### 自定义颜色
:::demo
```
tsx
<
Tag
color
=
"#FA685D"
>
标签
</
Tag
>
<
Tag
color
=
"#E9E9E9"
text
-
color
=
"#999999"
>
标签
</
Tag
>
<
Tag
color
=
"#FA2400"
plain
>
标签
</
Tag
>
import
React
from
"
react
"
;
import
{
Tag
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
return
(
<>
<
Tag
color
=
"#FA685D"
>
标签
</
Tag
>
<
Tag
color
=
"#E9E9E9"
text
-
color
=
"#999999"
>
标签
</
Tag
>
<
Tag
color
=
"#FA2400"
plain
>
标签
</
Tag
>
</>
)
}
export
default
App
;
```
:::
## API
### Props
...
...
@@ -67,7 +155,6 @@ import { Tag } from '@nutui/nutui-react';
| mark | 是否为标记样式 | Boolean |
`false`
|
| closeable | 是否为可关闭标签 | Boolean |
`false`
|
### Event
| 事件名称 | 说明 | 回调参数 |
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录