@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);

* Please note that there are dependencies in this module that are governed by the Atlassian Design Guidelines license which will be automatically included on install of this library. Each dependency has a license file that indicates whether the Atlassian Design Guidelines license applies.

We're here to help!

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

Are you in trouble? Read through our contribution guidelines and raise an issue to us.