RelatedTags
RelatedTags
This component renders a set of RelatedTag components by default to
select from after a query is performed to fine-tune search. For example, if you are searching for
lego, different related tags could be city, friends, or harry potter, refining the search
with lego city, lego friends, or lego harry potter.
Props
| Name | Description | Type | Default |
|---|---|---|---|
animation | Animation component that will be used to animate the suggestion. | Vue | 'ul' |
maxItemsToRender | Number of related tags to be rendered. | number | |
highlightCurated | Flag to indicate if the curated tags should be displayed different. | boolean | false |
Slots
| Name | Description | Bindings (name - type - description) |
|---|---|---|
related-tag | Custom content that replaces the RelatedTag component. | relatedTag RelatedTag - Related tag data.highlightCurated boolean - True if the curated RTs should be displayed. |
related-tag-content | Custom content that replaces the RelatedTag default content. | relatedTag RelatedTag - Related tag data.isSelected boolean - Related tag status.shouldHighlightCurated boolean - True if the curated RTs should be displayed. |
See it in action
Backend microservice required
To use this component, the QuerySignals microservice must be implemented.
This example shows how related tags can be rendered without any additional effects.
Search for a fashion term like "sandal" or "lipstick".
Play with props
In this example, the number of related tags rendered has been limited to 3. A fade and slide effect has been added so that the related tags appear with a delay, then slide upwards and fade.
Search for a fashion term and see the related tags with the animation effect.
Play with related-tag slot
In this example, the RelatedTag component is passed in the
related-tag slot (although any other component could potentially be passed).
Search for a fashion term and see how the related tags can be rendered.
Play with related-tag-content slot
To continue the previous example, the RelatedTag component is
passed in the related-tag-content slot, but in addition, an HTML span tag for the text are also
passed.
Search for a fashion term and see how the related tags are rendered.
Extending the component
Components can be combined and communicate with each other. The RelatedTags component can
communicate with the SearchInput as follows:
Search for a fashion term and see how the related tags can be rendered.
Customizing the related tags with classes
The itemClass prop can be used to add classes to the related tags.