@hh/ui-components

HH UI Components - 通用 React 组件库

安装

npm install @hh/ui-components

使用

import { Carousel } from '@hh/ui-components'
import '@hh/ui-components/dist/style.css'

const images = [
  { id: 1, src: '/image1.jpg', alt: '图片1' },
  { id: 2, src: '/image2.jpg', alt: '图片2' },
]

function App() {
  return <Carousel images={images} autoplay />
}

组件列表

Carousel 轮播图

通用的、可配置的轮播图组件。

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | images | Array<{id, src, alt}> | [] | 必填。图片列表 | | height | string \| number | '400px' | 轮播图高度 | | showNavigation | boolean | true | 是否显示左右导航箭头 | | autoplay | boolean \| object | false | 自动播放配置 | | showPreview | boolean | false | 是否显示左右预览图 | | lightbox | boolean | false | 是否支持点击放大 | | galleryMode | boolean | false | 放大时使用画廊模式 | | pagination | boolean | false | 是否显示分页指示器 | | renderPrevButton | (props) => ReactNode | - | 自定义上一张按钮 | | renderNextButton | (props) => ReactNode | - | 自定义下一张按钮 |

开发

npm install
npm run build
npm run dev  # 监听模式

发布

npm login
npm publish --access public