Tag
Maeng Design의 Tag 컴포넌트는 분류 또는 마크업을 위해 사용합니다.
Size
small, medium, large 3가지의 size가 존재합니다.SmallMediumLarge
import React from 'react';
import { Tag } from 'maeng-design';
const App = () => (
<div>
<Tag size="small">Small</Tag>
<Tag size="medium">Medium</Tag>
<Tag size="large">Large</Tag>
</div>
);Color
Maeng Design의 프리셋 색상(133가지)외의 red, volcano, orange, gold, yellow, lime, green, cyan, blue, geekblue, purple, magenta, gray 13가지의 추가 색상으로 변경 가능합니다.MagentaMagenta6BlueBlue6
import React from 'react';
import { Tag } from 'maeng-design';
const App = () => (
<div>
<Tag color="magenta">Magenta</Tag>
<Tag color="magenta6">Magenta6</Tag>
<Tag color="blue">Blue</Tag>
<Tag color="blue6">Blue6</Tag>
</div>
);API
Tag 속성을 설정하여 다양한 Tag를 생성하고 컨트롤 할 수 있습니다.| Property | Description | Type | default |
|---|---|---|---|
| size | 태그의 크기를 지정할 수 있습니다. | small medium large | medium |
| color | 태그의 색상을 지정할 수 있습니다. | ColorName | - |
| onClick | click 이벤트를 처리하는 핸들러 설정 | (event) => void | - |