import React from 'react'; import {render} from 'react-dom'; import TagsInput from '@jetbrains/ring-ui/components/tags-input/tags-input'; function dataSource() { return new Promise(resolve => setTimeout(resolve, 200)). then( () => Promise.resolve( [...Array(20)]. map((it, index) => ({key: `test${index}`, label: `test${index}`})) ) ); } render(, document.getElementById('demo'));
import React from 'react'; import {render} from 'react-dom'; import TagsInput from '@jetbrains/ring-ui/components/tags-input/tags-input'; import { CheckmarkIcon, ExceptionIcon, FrownIcon } from '@jetbrains/ring-ui/components/icon'; const tags = [ {key: 'test1', label: 'test1', rgTagIcon: CheckmarkIcon}, {key: 'test2', label: 'test2'} ]; function dataSource(query) { return [ {key: 'test3', label: 'test3', rgTagIcon: ExceptionIcon, rgTagTitle: 'I am the tag title'}, {key: 'test4', label: 'test4', rgTagIcon: FrownIcon} ]; } render(, document.getElementById('demo'));
import React from 'react'; import {render} from 'react-dom'; import TagsInput from '@jetbrains/ring-ui/components/tags-input/tags-input'; render( []} />, document.getElementById('demo'));
import React from 'react'; import {render} from 'react-dom'; import TagsInput from '@jetbrains/ring-ui/components/tags-input/tags-input'; const tags = [ {key: 'test1', label: 'Label'}, {key: 'test2', label: 'Very long label'} ]; function dataSource(query) { return [ {key: 'test3', label: 'Very very long label'}, {key: 'test4', label: 'Very very very long label'} ]; } render(, document.getElementById('demo'));