This component displays an arbitrary number of ak-tag
s
in a grouped manner.
The group manages spacing and animation direction and allows for some alignment options.
Interact with a live demo of the ak-tag-group component with code examples.
npm install ak-tag ak-tag-group # ak-tag-group has a peer dependency on ak-tag
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);
Kind: global class
-
Properties
-
tagGroup.alignment :
alignment
-
tagGroup.alignment :
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);
(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);
Let us know what you think of our components and docs, your feedback is really important for us.
Ask a question in our forum.
Check if someone has already asked the same question before.
Are you in trouble? Let us know!