import React from 'react';
import {render} from 'react-dom';
import TagsInput from '@jetbrains/ring-ui/components/tags-input/tags-input';
function dataSource() {
return Promise.resolve(
[...Array(20)].
map((it, index) => ({key: `test${index}`, label: `test${index}`}))
);
}
render(, document.getElementById('demo'));
Add a tag
tags = {{tagsArray}}
$dirty = {{form.$dirty}}
import angular from 'angular';
import registerComponents from '@jetbrains/ring-ui/components/react-ng/react-ng';
import TagsInput from '@jetbrains/ring-ui/components/tags-input/tags-input';
registerComponents({TagsInput});
angular.module('test-tags-app', ['Ring.react-ng']).
controller('testCtrl', function ($scope, $timeout) {
$scope.tagsArray = [{key: 'test1', label: 'test1'}];
$scope.suggestionsSource = function () {
return $timeout(function () {
return [
{key: 'test3', label: 'test3'},
{key: 'test4', label: 'test4'},
{key: 'test5', label: 'test5'},
{key: 'test6', label: 'test6'},
{key: 'test7', label: 'test7'}
];
}, 400);
};
$scope.addTag = function () {
$scope.tagsArray.push({
key: Math.random().toFixed(3),
label: Math.random().toFixed(3)
})
};
});
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'));