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:

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>