Overview

The Page Size component is used to modify the number of search results displayed on each page.

Selector

The selector for this component is <hawksearch-page-size>.

Data Model

The following data model is exposed to the Handlebars template:

{
  options: Array<PaginationOption>
}

For more information, see Pagination.

Event Binding Attributes

Attribute Name	Attribute Value

Attribute Name	Attribute Value
hawksearch-page-size	`number`

When a select element with this attribute changes in value, the search will be updated to use that value as the new page size.

When the page size changes, the first page will automatically be selected.

Default Template

<div class="page-size">
    <select hawksearch-page-size>
        {{#each options}}
            {{#if selected}}
                <option value="{{pageSize}}" selected>{{title}}</option>
            {{else}}
                <option value="{{pageSize}}">{{title}}</option>
            {{/if}}
        {{/each}}
    </select>
</div>

Hawksearch Handlebars UI

Page Size Component

Analytics

Overview

Selector

Data Model

Event Binding Attributes

Default Template

Related content