searchcraft-popover-button

Renders a button which, when clicked, turns on popover visibility.

Import

React

import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";

Vue

import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";

Usage

JS

index.html

<searchcraft-popover-button>
  Open popover
</searchcraft-popover-button>

index.js

const popoverButton = document.querySelector('searchcraft-popover-button');

popoverButton.template = ({ isPopoverVisible }, { html }) => html`
  <span>Click me</span>
`;

React

<SearchcraftPopoverButton
  template={({ isPopoverVisible }, { html }) => html`
    <span>Click me</span>
  `}
>
  Open popover
</SearchcraftPopoverButton>

Vue

<SearchcraftPopoverButton
  :template={({ isPopoverVisible }, { html }) => html`
    <span>Click me</span>
  `}
>
  Open popover
</SearchcraftPopoverButton>

Properties

Property	Attribute	Description	Type	Default
searchcraftId	searchcraft-id	The id of the Searchcraft instance that this component should use.	string | undefined	undefined
template	—	A callback function responsible for rendering the button contents.	((data: { isPopoverVisible: boolean; }, utils: { html: TemplateHtml; }) => string) | undefined	undefined
type	type	The type of popover button to render.	"skeuomorphic" | undefined	undefined