1 min read

RelatedTag

This component renders a related tag for a query. A related tag is a descriptive keyword related to the current query to fine-tune the search. For example, if you are searching for lego, a related tag could be city, refining the search with lego city.

Props

Name	Description	Type	Default
`highlightCurated`	Indicates if the curated related tag should be highlighted.	`boolean`	`false`
`relatedTag`	The related tag model data.	`RelatedTagModel`

Slots

Name	Description	Bindings (name - type - description)
`default`	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.

Dynamic classes

RelatedTag uses the following dynamic CSS classes so you can style it when is:

Selected: x-related-tag--is-selected.
Curated: x-related-tag--is-curated.

Events

This component emits the following events:

See it in action

Backend service required

The QuerySignals microservice must be implemented.

In this example related tag data is passed as a prop.

Here you can see how the RelatedTag component is rendered.

Play with default slot

In this example, an HTML span element is passed in the default slot.

See how the related tag can be rendered.

Play with events

In this example, the UserSelectedARelatedTag event is implemented, as illustrated by the “Tag” message returned.

See how the event is triggered when the related tag is clicked.