NextQuery

Renders a next query item which receives the suggestion that will be rendered as a prop. It exposes a default slot to change the next query content. If the slot is not overridden, it will render the suggestion query by default.

Props

Name	Description	Type	Default
suggestion	The suggestion to render and use in the default slot.	NextQueryModel
highlightCurated	Indicates if the curated next query should be highlighted.	boolean	false

Slots

Name	Description	Bindings (name - type - description)
default	Next Query content	shouldHighlightCurated boolean - True if the curated NQ should be highlighted v-bind Object - BaseSuggestion default slot scope: suggestion Suggestion - Suggestion data query string - The query that the suggestion belongs to filter Filter \

Dynamic Classes

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

• Curated: x-next-query--is-curated.

Events

A list of events that the component will emit:

• UserSelectedANextQuery (opens new window): the event is emitted after the user clicks the button. The event payload is the next query data.

Examples

This components expects just a suggestion as a prop to be rendered. It has a slot to override the content. By default, it renders the suggestion query of the next query. It also has an optional prop, highlightCurated, to indicate if the curated Next Queries should be differentiated with a CSS class.

Basic Usage

Using default slot:

Overriding default slot.

The default slot allows you to replace the content of the suggestion button.