Skip to content

Commit

Permalink
docs: tag 文档和 demo 同步 (#1275)
Browse files Browse the repository at this point in the history 
* docs: tag 文档和 demo 同步

* docs: tag 文档和 demo 同步
  • Loading branch information
@oasis-cloud
oasis-cloud authored Aug 2, 2023
1 parent dcafce5 commit c9b36fb
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 283 deletions.
73 changes: 12 additions & 61 deletions src/packages/tag/doc.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ const App = () => {
return (
<>
<Tag type="primary">Label</Tag>
<Tag type="success">Label</Tag>
<Tag type="info">Label</Tag>
<Tag type="success">Label</Tag>
<Tag type="danger">Label</Tag>
<Tag type="warning">Label</Tag>
</>
Expand All @@ -37,18 +37,28 @@ export default App;

:::

### Hollow style
### style

:::demo

```tsx
import React from "react";
import { CircleClose } from '@nutui/icons-react';
import { Tag } from '@nutui/nutui-react';

const App = () => {
return (
<>
<Tag plain>Label</Tag>
<Tag round type='primary'>Label</Tag>
<Tag mark type='primary'>Label</Tag>
<Tag closeable
onClose={() => alert('Tag closed')}
type='primary'>Label</Tag>
<Tag closeable
closeIcon={<CircleClose width={12} height={12} />}
onClose={() => alert('Tag closed')}
type='primary'>Label</Tag>
</>
)
}
Expand All @@ -57,65 +67,6 @@ export default App;

:::

### Rounded style

:::demo

```tsx
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
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
import React from "react";
import { Tag } from '@nutui/nutui-react';

const App = () => {
return (
<>
<Tag closeable onClose={()=>alert('Tag closed')} type="primary">标签</Tag>
</>
)
}
export default App;
```

:::

### Custom color

Expand Down
126 changes: 15 additions & 111 deletions src/packages/tag/doc.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ const App = () => {
return (
<>
<Tag type="primary">标签</Tag>
<Tag type="success">标签</Tag>
<Tag type="info">标签</Tag>
<Tag type="success">标签</Tag>
<Tag type="danger">标签</Tag>
<Tag type="warning">标签</Tag>
</>
Expand All @@ -37,82 +37,32 @@ export default App;

:::

### 空心样式
### 样式风格

:::demo

```tsx
import React from "react";
import { Tag } from '@nutui/nutui-react';
import React from 'react'
import { CircleClose } from '@nutui/icons-react'
import { Tag } from '@nutui/nutui-react'

const App = () => {
return (
<>
<Tag plain>标签</Tag>
<Tag round type='primary'>标签</Tag>
<Tag mark type='primary'>标签</Tag>
<Tag closeable
onClose={() => alert('Tag closed')}
type='primary'>标签</Tag>
<Tag closeable
closeIcon={<CircleClose width={12} height={12} />}
onClose={() => alert('Tag closed')}
type='primary'>标签</Tag>
</>
)
}
export default App;
```

:::

### 圆角样式

:::demo

```tsx
import React from "react";
import { Tag } from '@nutui/nutui-react';

const App = () => {
return (
<>
<Tag round type="primary">标签</Tag>
</>
)
}
export default App;
```

:::

### 标记样式

:::demo

```tsx
import React from "react";
import { Tag } from '@nutui/nutui-react';

const App = () => {
return (
<>
<Tag mark type="primary">标签</Tag>
</>
)
}
export default App;
```

:::

### 可关闭标签

:::demo

```tsx
import React from "react";
import { Tag } from '@nutui/nutui-react';

const App = () => {
return (
<>
<Tag closeable onClose={()=>alert('Tag closed')} type="primary">标签</Tag>
</>
)
}
export default App;
export default App
```

:::
Expand All @@ -139,52 +89,6 @@ export default App;

:::

### 点击事件

:::demo

```tsx
import React from "react";
import { Tag } from '@nutui/nutui-react';

const App = () => {
return (
<>
<Tag type='primary' onClick={()=>alert('Tag clicked')}>标签</Tag>
</>
)
}
export default App;
```

:::

### 展示控制

:::demo

```tsx
import React, {useState} from "react";
import { Tag,Button } from '@nutui/nutui-react';

const App = () => {
const [isShow,setIsShow] = useState(true) // 是否展示Tag组件
return (
<>
{
isShow? (
<Tag type='primary' onClick={()=>alert('Tag clicked')}>标签</Tag>
):null
}
<Button type='default' size="small" onClick={()=>{setIsShow(false)}} >点击删除Tag</Button>
</>
)

}
export default App;
```

:::

## Tag

Expand Down
Loading

0 comments on commit c9b36fb

Please sign in to comment.