1 | # LSK – Tag
|
2 |
|
3 | > React component Tag and TagGroup
|
4 |
|
5 | [![LSK logo](https://badgen.net/badge/icon/MADE%20BY%20LSK?icon=zeit&label&color=red&labelColor=red)](https://github.com/lskjs)
|
6 | [![NPM version](https://badgen.net/npm/v/@lskjs/tag)](https://www.npmjs.com/package/@lskjs/tag)
|
7 | [![Package size](https://badgen.net/bundlephobia/minzip/@lskjs/tag)](https://bundlephobia.com/result?p=@lskjs/tag)
|
8 | [![License LSK](https://badgen.net/npm/license/@lskjs/tag)](https://github.com/lskjs/lskjs/blob/master/LICENSE)
|
9 | [![Chat on Telegram](https://img.shields.io/badge/Chat%20on-Telegram-brightblue.svg)](https://t.me/lskjs)
|
10 |
|
11 | ## about
|
12 | -->
|
13 | ![](/blog/images/tag.png)
|
14 |
|
15 |
|
16 | ## Installation and usage
|
17 |
|
18 | The easiest way to use is to install it from npm and build it into your app with Webpack.
|
19 |
|
20 | ```bash
|
21 | npm install @lskjs/tag
|
22 | ```
|
23 |
|
24 | Then use it in your app:
|
25 |
|
26 | ```jsx
|
27 | import Tag from '@lskjs/tag';
|
28 |
|
29 | const App = (
|
30 | <Tag variant="primary">Primary button</Tag>
|
31 | );
|
32 | ```
|
33 |
|
34 | _For more examples and usage, please refer_
|
35 |
|
36 | - [Tutorial](https://github.com/lskjs/ux/blob/master/blog/tutorial.md#2-%D0%BA%D0%B0%D0%BA-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D1%83-lskjsbutton-%D0%BD%D0%B0-cra-%D0%BB%D0%B5%D0%BD%D0%B4%D0%B8%D0%BD%D0%B3)
|
37 |
|
38 | - [Storybook](https://lskjs.github.io/ux/?path=/story/tag)
|
39 |
|
40 | ## Examples
|
41 |
|
42 | ```jsx
|
43 | import Tag from '@lskjs/Tag/Tag';
|
44 | import TagGroup from '@lskjs/Tag/TagGroup';
|
45 | <Tag />
|
46 | </Story>
|
47 | ))
|
48 | .add('<TagGroup />', () => (
|
49 | <Story>
|
50 |
|
51 |
|
52 | export default () => (
|
53 | <>
|
54 | <Tag />
|
55 | <TagGroup>
|
56 | <Tag variant="primary">Primary Tag</Tag>
|
57 | <Tag variant="outline-secondary">Secondary Tag</Tag>
|
58 | <Tag as="input" type="submit" value="Submit Tag" />
|
59 | <Tag size="lg">Large Tag</Tag>
|
60 | <Tag block>Block Tag</Tag>
|
61 | <Tag active>Active Tag</Tag>
|
62 | <Tag disabled>Disabled Tag</Tag>
|
63 | <Tag type="primary" shape="circle" icon={<SearchOutlined />} />
|
64 | </TagGroup>
|
65 | <TagGroup
|
66 | options={[1, 2, 3, 4].map(value => ({ value, title: value }))}
|
67 | values={[1, 2]}
|
68 | nullValue="Не выбраны теги"
|
69 | closable
|
70 | onClose={item => console.log('onClose', item)}
|
71 | onClick={item => console.log('onClick', item)}
|
72 | />
|
73 | </>
|
74 | )
|
75 | ```
|
76 |
|
77 | See the [more examples](https://lskjs.github.io/ux/?path=/story/tag) in Storybook.
|
78 |
|
79 |
|
80 | # More info
|
81 |
|
82 | ## Links
|
83 | - [Docs](https://lskjs.github.io/ux/styleguide/tag)
|
84 | - [Storybook](https://lskjs.github.io/ux/?path=/story/tag)
|
85 | - [Changelog](./CHANGELOG.md)
|
86 | - Please read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.
|
87 |
|
88 | ## Contact
|
89 | - [Email](mailto:hi@isuvorov.com)
|
90 | - [Telegram chat](https://t.me/lskjs)
|
91 |
|
92 | ## Contributors ✨
|
93 |
|
94 |
|
95 |
|
96 |
|
97 | <table>
|
98 | <tr>
|
99 | <td align="center"><a href="https://isuvorov.com.com"><img src="https://avatars2.githubusercontent.com/u/1056977?v=4" width="100px;" alt=""/><br /><sub><b>Igor Suvorov</b></sub></a><br /><a href="#question-isuvorov" title="Answering Questions">💬</a> <a href="isuvorov/lib-starter-kit/isuvorov/lib-starter-kit/commits?author=isuvorov" title="Code">💻</a> <a href="#design-isuvorov" title="Design">🎨</a> <a href="isuvorov/lib-starter-kit/isuvorov/lib-starter-kit/commits?author=isuvorov" title="Documentation">📖</a> <a href="#example-isuvorov" title="Examples">💡</a> <a href="#ideas-isuvorov" title="Ideas, Planning, & Feedback">🤔</a> <a href="isuvorov/lib-starter-kit/isuvorov/lib-starter-kit/pulls?q=is%3Apr+reviewed-by%3Aisuvorov" title="Reviewed Pull Requests">👀</a> <a href="isuvorov/lib-starter-kit/isuvorov/lib-starter-kit/commits?author=isuvorov" title="Tests">⚠️</a> <a href="#a11y-isuvorov" title="Accessibility">️️️️♿️</a></td>
|
100 | </tr>
|
101 | </table>
|
102 |
|
103 |
|
104 |
|
105 |
|
106 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
|
107 |
|
108 |
|
109 | ## License
|
110 |
|
111 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details
|
112 |
|
113 |
|
114 | ## Inspired by
|
115 | - https://ant.design/components/tag/
|
116 |
|
117 |
|
118 | ## Contributing
|
119 |
|
120 | 1. Fork it (<https://github.com/yourname/yourproject/fork>)
|
121 | 2. Create your feature branch (`git checkout -b feature/fooBar`)
|
122 | 3. Commit your changes (`git commit -am 'Add some fooBar'`)
|
123 | 4. Push to the branch (`git push origin feature/fooBar`)
|
124 | 5. Create a new Pull Request
|
125 |
|
126 |
|