Ak-tag-group NPM

TagGroup

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

Example tag group

Try it out

Interact with a live demo of the ak-tag-group component with code examples.

Installation

npm install ak-tag ak-tag-group # ak-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 'ak-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);