1 min read
PartialQueryButton
PartialQueryButton
A button that when pressed emits the XEventsTypes.UserAcceptedAQuery and SearchXEvents.UserClickedPartialQuery events, expressing the user intention to set the partial query.
Props
Name | Description | Type | Default |
---|---|---|---|
query | The query property. | string |
|
Slots
Name | Description | Bindings (name - type - description) |
---|---|---|
default |
Events
This component emits 2 different events:
UserAcceptedAQuery
(opens new window): the event is emitted after the user clicks the partial query. The event payload is the partial query data.UserClickedPartialQuery
(opens new window): the event is emitted after the user clicks the partial query. The event payload is the partial query data.
Examples
Basic example
A button that when pressed emits the XEventsTypes.UserAcceptedAQuery
and
SearchXEvents.UserClickedPartialQuery
events, expressing the user intention to set the partial
query.
The component sets the current query as the new query and emits the UserAcceptedAQuery
and
UserClickedPartialQuery
events when is clicked.
<template>
<PartialQueryButton :query="query" />
</template>
Customizing its contents
<template>
<PartialQueryButton>
<template #default="{ query }">
<span class="x-partial-query-button__text">
Set the Partial query as the new query: {{ query }}!
</span>
</template>
</PartialQueryButton>
</template>
<script>
import { PartialQueryButton } from '@empathyco/x-components/search';
export default {
components: {
PartialQueryButton
}
};
</script>