Tags List

Displays a list of tags.

Tags List

Example

<div id="demo"></div>

import React, {createElement} from 'react';
import {render} from 'react-dom';
import TagsList from '@jetbrains/ring-ui/components/tags-list/tags-list';

var props = {
  className: 'test-additional-class',
  tags: [
    {key: 'test1', label: 'test1'},
    {key: 'test2', label: 'test2'}
  ]
};

render(
<TagsList
  className={props.className}
  tags={props.tags}
/>,
document.getElementById('demo')
)

Tags List with icons

Example

<div id="demo"></div>

import React, {createElement} from 'react';
import {render} from 'react-dom';
import TagsList from '@jetbrains/ring-ui/components/tags-list/tags-list';
import {CheckmarkIcon} from '@jetbrains/ring-ui/components/icon';

var props = {
  tags: [
    {key: 'test1', label: 'test1', rgTagIcon: CheckmarkIcon},
    {key: 'test2', label: 'test2'}
  ]
};

render(
<TagsList
  tags={props.tags}
/>,
document.getElementById('demo')
)

Disabled Tags List

Example

<div id="demo"></div>

import React, {createElement} from 'react';
import {render} from 'react-dom';
import TagsList from '@jetbrains/ring-ui/components/tags-list/tags-list';

var props = {
  disabled: true,
  tags: [
    {key: 'test1', label: 'test1'},
    {key: 'test2', label: 'test2'}
  ]
};

render(
<TagsList
  disabled={props.disabled}
  tags={props.tags}
/>
,
document.getElementById('demo')
);