Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

体验新版 GitCode，发现更多精彩内容 >>

提交 7dd7ca48 编写于 作者: O oasis-cloud
浏览文件
操作

feat: badge 增加在线调试能力

上级 6ff7e0a4
隐藏空白更改
内联 并排
Showing with 284 addition and 108 deletion
src/packages/badge/doc.en-US.md
浏览文件 @ 7dd7ca48
......@@ -14,88 +14,176 @@ import { Badge } from '@nutui/nutui-react';
### 基本用法
:::demo
```tsx
<Badge value={8}>
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge value={76}>
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge value="NEW">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge dot>
<Avatar icon="my" shape="square"></Avatar>
</Badge>
import React from "react";
import { Badge, Avatar } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Badge value={8}>
<Avatar icon="my" shape="square" />
</Badge>
<Badge value={76}>
<Avatar icon="my" shape="square" />
</Badge>
<Badge value="NEW">
<Avatar icon="my" shape="square" />
</Badge>
<Badge dot>
<Avatar icon="my" shape="square" />
</Badge>
</>
)
}
export default App;
```
:::
### 最大值
:::demo
```tsx
<Badge value={200} max={9}>
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge value={200} max={20}>
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge value={200} max={99}>>
<Avatar icon="my" shape="square"></Avatar>
</Badge>
import React from "react";
import { Badge, Avatar } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Badge value={200} max={9}>
<Avatar icon="my" shape="square" />
</Badge>
<Badge value={200} max={20}>
<Avatar icon="my" shape="square" />
</Badge>
<Badge value={200} max={99}>
<Avatar icon="my" shape="square" />
</Badge>
</>
)
}
export default App;
```
:::
### 自定义颜色
:::demo
```tsx
<Badge value={8} color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge value={76} color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge value="NEW" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge dot color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
import React from "react";
import { Badge, Avatar } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Badge value={8}
color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
<Avatar icon="my" shape="square" />
</Badge>
<Badge value={76}
color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
<Avatar icon="my" shape="square" />
</Badge>
<Badge value="NEW"
color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
<Avatar icon="my" shape="square" />
</Badge>
<Badge dot
color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
<Avatar icon="my" shape="square" />
</Badge>
</>
)
}
export default App;
```
:::
### 自定义徽标内容
:::demo
```tsx
<Badge icon="checklist">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge icon="link">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge icon="download">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
import React from "react";
import { Badge, Avatar } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Badge icon="checklist">
<Avatar icon="my" shape="square" />
</Badge>
<Badge icon="link">
<Avatar icon="my" shape="square" />
</Badge>
<Badge icon="download">
<Avatar icon="my" shape="square" />
</Badge>
</>
)
}
export default App;
```
:::
### 自定义位置
:::demo
```tsx
<Badge value={8} top="5" right="5">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge value={76} top="10" right="10">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge value="NEW">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
import React from "react";
import { Badge, Avatar } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Badge value={8} top="5" right="5">
<Avatar icon="my" shape="square" />
</Badge>
<Badge value={76} top="10" right="10">
<Avatar icon="my" shape="square" />
</Badge>
<Badge value="NEW">
<Avatar icon="my" shape="square" />
</Badge>
</>
)
}
export default App;
```
:::
### 独立展示
:::demo
```tsx
<Badge value={8}> </Badge>
<Badge value={76}> </Badge>
<Badge value="NEW"> </Badge>
import React from "react";
import { Badge } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Badge value={8}> </Badge>
<Badge value={76}> </Badge>
<Badge value="NEW"> </Badge>
</>
)
}
export default App;
```
:::
## API
### Props
......
src/packages/badge/doc.md
浏览文件 @ 7dd7ca48
......@@ -14,88 +14,176 @@ import { Badge } from '@nutui/nutui-react';
### 基本用法
:::demo
```tsx
<Badge value={8}>
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge value={76}>
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge value="NEW">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge dot>
<Avatar icon="my" shape="square"></Avatar>
</Badge>
import React from "react";
import { Badge, Avatar } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Badge value={8}>
<Avatar icon="my" shape="square" />
</Badge>
<Badge value={76}>
<Avatar icon="my" shape="square" />
</Badge>
<Badge value="NEW">
<Avatar icon="my" shape="square" />
</Badge>
<Badge dot>
<Avatar icon="my" shape="square" />
</Badge>
</>
)
}
export default App;
```
:::
### 最大值
:::demo
```tsx
<Badge value={200} max={9}>
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge value={200} max={20}>
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge value={200} max={99}>>
<Avatar icon="my" shape="square"></Avatar>
</Badge>
import React from "react";
import { Badge, Avatar } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Badge value={200} max={9}>
<Avatar icon="my" shape="square" />
</Badge>
<Badge value={200} max={20}>
<Avatar icon="my" shape="square" />
</Badge>
<Badge value={200} max={99}>
<Avatar icon="my" shape="square" />
</Badge>
</>
)
}
export default App;
```
:::
### 自定义颜色
:::demo
```tsx
<Badge value={8} color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge value={76} color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge value="NEW" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge dot color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
import React from "react";
import { Badge, Avatar } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Badge value={8}
color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
<Avatar icon="my" shape="square" />
</Badge>
<Badge value={76}
color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
<Avatar icon="my" shape="square" />
</Badge>
<Badge value="NEW"
color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
<Avatar icon="my" shape="square" />
</Badge>
<Badge dot
color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
<Avatar icon="my" shape="square" />
</Badge>
</>
)
}
export default App;
```
:::
### 自定义徽标内容
:::demo
```tsx
<Badge icon="checklist">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge icon="link">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge icon="download">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
import React from "react";
import { Badge, Avatar } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Badge icon="checklist">
<Avatar icon="my" shape="square" />
</Badge>
<Badge icon="link">
<Avatar icon="my" shape="square" />
</Badge>
<Badge icon="download">
<Avatar icon="my" shape="square" />
</Badge>
</>
)
}
export default App;
```
:::
### 自定义位置
:::demo
```tsx
<Badge value={8} top="5" right="5">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge value={76} top="10" right="10">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
<Badge value="NEW">
<Avatar icon="my" shape="square"></Avatar>
</Badge>
import React from "react";
import { Badge, Avatar } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Badge value={8} top="5" right="5">
<Avatar icon="my" shape="square" />
</Badge>
<Badge value={76} top="10" right="10">
<Avatar icon="my" shape="square" />
</Badge>
<Badge value="NEW">
<Avatar icon="my" shape="square" />
</Badge>
</>
)
}
export default App;
```
:::
### 独立展示
:::demo
```tsx
<Badge value={8}> </Badge>
<Badge value={76}> </Badge>
<Badge value="NEW"> </Badge>
import React from "react";
import { Badge } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Badge value={8}> </Badge>
<Badge value={76}> </Badge>
<Badge value="NEW"> </Badge>
</>
)
}
export default App;
```
:::
## API
### Props
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或