1 min read
BaseSuggestion
Renders a button with a default slot. It receives a query, which should be the query of the module using this component, a suggestion, the XEvent that will be emitted on click with a given feature.
The default slot receives the suggestion and the matched query has props.
Props
Name | Description | Type | Default |
---|---|---|---|
query | The normalized query of the module using this component. | string | '' |
suggestion | The suggestion to render and use in the default slot. | Suggestion |
|
feature | The feature from which the events will be emitted. | QueryFeature |
|
suggestionSelectedEvents | The XEvent that will be emitted when selecting a suggestion. | Partial |
|
highlightCurated | Indicates if the curated suggestion should be highlighted. | boolean |
|
Slots
Name | Description | Bindings (name - type - description) |
---|---|---|
default | Button content | query String - The query that the suggestion belongs tosuggestion Suggestion - Suggestion datafilter Filter - Suggestion's filter |
Events
This component emits the following events:
UserAcceptedAQuery
(opens new window): the event is emitted after the user clicks the button. The event payload is the suggestion query data.UserSelectedASuggestion
(opens new window): the event is emitted after the user clicks the button. The event payload is the suggestion data.UserClickedAFilter
(opens new window): the event is emitted after the user clicks the button if the suggestion includes a filter. The event payload is the suggestion filter.- The component can emit more events on click using the
suggestionSelectedEvents
prop.
See it in action
This suggestion component expects a suggestion to render and pass to its default slot, a normalized query to compare with the suggestion's query and highlight its matching parts, and events to emit when the suggestion is selected.
If the suggestion contains a filter, it is displayed next to the suggestion.
Customise the content
You can make this component render any content you want by using the default
slot.