Components Stats

Stats

A component that displays the total number of results found and the processing time in milliseconds.

🕹 try out live

Usage

Basic usage:

<ais-stats></ais-stats>

Custom text:

<ais-stats>
  <template slot-scope="{ hitsPerPage, nbPages, nbHits, page, processingTimeMS, query }">
    There are {{ nbHits }} matching your query: <b>{{ query }}</b>
    - <small>{{ processingTimeMS }}ms</small>
  </template>
</ais-stats>

Props

Name	Type	Default	Description	Required
class-names	Object	{}	Override class names	no

Slots

Name	Scope	Description
default	{ hitsPerPage: Number, nbPages: Number, nbHits: Number, page: Number, processingTimeMS: Number, query: String }	Slot to override the DOM output

CSS Classes

ClassName	Description
ais-stats	Container class
ais-stats-text	Message container