Component Layouts

There are two main methods for rendering an input box and search results in your application: An inline layout and a popover layout. In this section, we’ll go over how to implement both of these layouts in each framework.

Inline Layout

A inline layout means that the input element, search results, and filter panels will render inline with the rest of the elements on your web page. The component library provides several main components to help you with this.

JS

index.html

<div>
  <searchcraft-theme></searchcraft-theme>
  <div>
    <searchcraft-input-form></searchcraft-input-form>
  </div>
  <div>
    <searchcraft-results-info></searchcraft-results-info>
  </div>
  <div>
    <searchcraft-search-results></searchcraft-search-results>
  </div>
  <div>
    <searchcraft-search-results-per-page></searchcraft-search-results-per-page>
    <searchcraft-pagination></searchcraft-pagination>
  </div>
</div>

React

Component.tsx

import {
  SearchcraftTheme,
  SearchcraftInputForm,
  SearchcraftResultsInfo,
  SearchcraftSearchResults,
  SearchcraftSearchResultsPerPage,
  SearchcraftPagination
} from '@searchcraft/react-sdk';

export const MySearchPage = () => (
  <>
    <SearchcraftTheme />
    <div>
      <SearchcraftInputForm autoSearch />
    </div>
    <div>
      <SearchcraftResultsInfo />
    </div>
    <div>
      <SearchcraftSearchResults template={myTemplate} />
    </div>
    <div>
      <SearchcraftSearchResultsPerPage increment={20} />
      <SearchcraftPagination />
    </div>
  </>
  );

Vue

Component.vue

<template>
  <div>
    <SearchcraftTheme />
    <div>
      <SearchcraftInputForm />
    </div>
    <div>
      <SearchcraftResultsInfo />
    </div>
      <div>
      <SearchcraftSearchResults
        v-bind="{
          template: searchResultTemplate
        }"
      />
    </div>
    <div>
      <SearchcraftSearchResultsPerPage />
      <SearchcraftPagination />
    </div>
  </div>
</template>
<script setup>
  import {
    SearchcraftTheme,
    SearchcraftInputForm,
    SearchcraftResultsInfo,
    SearchcraftSearchResults,
    SearchcraftSearchResultsPerPage,
    SearchcraftPagination
  } from '@searchcraft/vue-sdk';
</script>

Popover Layout

A Popover Search layout means that the search input form and search results will render in a modal view above the rest of your page content, independent from your existing page layout.

JS

index.html

<div>
  <searchcraft-theme></searchcraft-theme>
  <div>
    <searchcraft-popover-form
      type='inline'
      hotkey='k'
      hotkey-modifier='ctrl'
    ></searchcraft-popover-form>
    <p>
      Here's some content that shows up underneath the popover. The
      popover should render above this content when it is active.
    </p>
  </div>
</div>

React

Component.tsx

import {
  SearchcraftTheme,
  SearchcraftPopoverForm,
} from '@searchcraft/react-sdk';

const Component = () => (
  <>
    <SearchcraftTheme />
    <div className='searchcraft-popover-form-with-content'>
      <SearchcraftPopoverForm
        hotkey='k'
        hotkeyModifier='ctrl'
        popoverResultMappings={popoverResultMappings}
        type='inline'
      />
      <p style={{ marginBottom: 100 }}>
        Here's some content that shows up underneath the popover. The popover
        should render above this content when it is active.
      </p>
    </div>
  </>
);

Vue

Component.vue

<template>
  <div class="searchcraft-popover-form-with-content">
    <SearchcraftTheme />
    <SearchcraftPopoverForm
      hotkey="k"
      hotkeyModifier="ctrl"
      :popoverResultMappings="popoverResultMappings"
      type="inline"
    />
    <p>
      Here's some content that shows up underneath the popover. The popover
      should render above this content when it is active.
    </p>
  </div>
</template>
<script setup>
  import {
    SearchcraftTheme,
    SearchcraftPopoverForm
  } from '@searchcraft/vue-sdk';
</script>