@atlaskit/tag-group

TagGroup

This component displays an arbitrary number of @atlaskit/tags in a grouped manner. The group manages spacing and animation direction and allows for some alignment options.

Try it out

Interact with a live demo of the @atlaskit/tag-group component with code examples.

Installation

npm install @atlaskit/tag-group ak-tag # @atlaskit/tag-group has a peer dependency on ak-tag

Using the component

This is a React component and can be used in the following way:

import Tag from 'ak-tag';
import TagGroup from '@atlaskit/tag-group';

ReactDOM.render((
  <TagGroup>
    <Tag text="Cupcake" />
    <Tag text="Ice cream" />
    <Tag text="Chocolate" />
  </TagGroup>
), container);

TagGroup

Kind: global class

• Properties

  • tagGroup.alignment : alignment

new TagGroup()

Create instances of the component programmatically, or using markup.

JS Example

import TagGroup from 'ak-tag-group';
import Tag from 'ak-tag';

ReactDOM.render(
  <TagGroup>
    <Tag text="Cupcake" href="http://www.cupcakeipsum.com/" />
  </TagGroup>, container);

tagGroup.alignment : alignment

(Optional) A group alignment.

Defaults to an empty string (which means it uses the text direction to determine the alignment (same as start)).

This setting also controls the animation direction on tag removal, e.g. start alignment means that the tags list moves to the text-start on removal end alignment means it moves to the text-end (all based on the text direction, e.g. start alignment in LTR means the tags move to the right, start alignment in RTL means the tags move to the left).

Kind: instance property of TagGroup Default: start JS Example

import TagGroup from 'ak-tag-group';
import Tag from 'ak-tag';
ReactDOM.render(
  <TagGroup alignment="end">
    <Tag text="Cupcake" />
    <Tag text="Chocolate" />
  </TagGroup>, container);

Support and feedback

We're here to help!

Let us know what you think of our components and docs, your feedback is really important for us.

Community support

Ask a question in our forum.

Check if someone has already asked the same question before.

Create a support ticket

Are you in trouble? Let us know!