@algolia/ui-components-horizontal-slider-js - Npm

Trang chủ » Hslider.js » @algolia/ui-components-horizontal-slider-js - Npm

Có thể bạn quan tâm

@algolia/ui-components-horizontal-slider-js

Horizontal slider UI component for JavaScript.

Installation

yarn add @algolia/ui-components-horizontal-slider-js # or npm install @algolia/ui-components-horizontal-slider-js

Usage

To get started, you need a container for your slider to go in. If you don’t have one already, you can insert one into your markup:

<div id="horizontal-slider"></div>

Then, you can call the horizontalSlider function and provide the container. It can be a CSS selector or an Element.

Standalone

import { horizontalSlider } from '@algolia/ui-components-horizontal-slider-js'; import '@algolia/ui-components-horizontal-slider-theme'; const items = [ { objectID: '1', name: 'Item 1' }, { objectID: '2', name: 'Item 2' }, ]; horizontalSlider({ container: '#horizontal-slider', items, itemComponent({ item }) { return item.name; }, });

With Algolia Recommend

See usage for Recommend.

Props

container

string | HTMLElement

The container for the component. You can either pass a CSS selector or an Element. If there are several containers matching the selector, it picks up the first one.

When undefined, the function returns a JSX element for you to inject wherever you want.

items

RecordWithObjectID | required type RecordWithObjectID<TItem> = TItem & { objectID: string; };

The items to display in the component.

itemComponent

({ item }) => JSX.Element | required

The item component to display.

translations

HorizontalSliderTranslations type HorizontalSliderTranslations = Partial<{ sliderLabel: string; previousButtonLabel: string; previousButtonTitle: string; nextButtonLabel: string; nextButtonTitle: string; }>;

The translations for the component.

classNames

HorizontalSliderClassnames type HorizontalSliderClassnames = Partial<{ item: string; list: string; navigation: string; navigationNext: string; navigationPrevious: string; root: string; }>;

The class names for the component.

environment

typeof window | defaults to window

The environment in which your application is running.

This is useful if you’re using the slider in a different context than window.

Từ khóa » Hslider.js