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

React 的水平滑动器 UI 组件 .

安装

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

使用量

独立

import { HorizontalSlider } from '@algolia/ui-components-horizontal-slider-react';

import '@algolia/ui-components-horizontal-slider-theme';

const items = [
  { objectID: '1', name: 'Item 1' },
  { objectID: '2', name: 'Item 2' },
];

function Item({ item }) {
  return (
    <pre>
      <code>{item.name}</code>
    </pre>
  );
}

function App() {
  // ...

  return <HorizontalSlider itemComponent={Item} items={items} />;
}

阿尔戈利亚建议

见使用情况 建议。 。 。 .

道具

items

RecordWithObjectID | 所需经费

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

组件中要显示的项目 .

itemComponent

({ item }) => JSX.Element | 所需经费

要显示的项目组件 .

translations

HorizontalSliderTranslations

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

组件的翻译.

classNames

HorizontalSliderClassnames

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

组件的类名 .