反应-胡萝卜
纯可扩展回放旋转木马,由 脑壳 (手艺家们)
目录
为什么?
有一些伟大的旋转木马(如浮出水面)没有真正的反应执行. 这个库为您提供旋转木马,它不仅仅是一些jQuery解决方案的包装,可以用作受控或不受控制的元素(类似于 投入),并具有数以吨计的有用特征.
安装
基础
npm i @brainhubeu/react-carousel
字体
npm i @types/brainhubeu__react-carousel -D
光盘N
如果你不使用 Webpack 这样的捆绑器, 你可以把这些脚本添加到您的 HTML 文件, body 节:
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin type="text/javascript" src="https://unpkg.com/@brainhubeu/[email protected]/lib/react-carousel.js"></script>
确保使用以 -cdn。 。 。 .
然后,可以使用下列全局变量:
BrainhubeuReactCarouselBrainhubeuReactCarouselDotsBrainhubeuReactCarouselItemBrainhubeuReactCarouselWrapper
安全部门改革
使用时 @brainhubeu/react-carousel 与SSR(服务员侧渲染),我们建议 下一个.js 作为 @brainhubeu/react-carousel 目前服务器方面不起作用,所以它必须被渲染到客户端(也许我们将来会提供服务器方面的工作).
import dynamic from 'next/dynamic';
const { default: Carousel, Dots } = dynamic(
() => require('@brainhubeu/react-carousel'),
{ ssr: false },
);
使用量
默认情况下,该组件除了儿童外不需要任何东西来做简单的旋转木马. 记住,样式不必每次使用旋转木马时都要被导入,你可以在捆绑的入口处做一次.
import React from 'react';
import Carousel from '@brainhubeu/react-carousel';
import '@brainhubeu/react-carousel/lib/style.css';
const MyCarousel = () => (
<Carousel plugins={['arrows']}>
<img src={imageOne} />
<img src={imageTwo} />
<img src={imageThree} />
</Carousel>
);
export default MyCarousel;
显示点或缩略图
有单独的"点"组件可以用来完全控制导航点或添加缩略图.
import Carousel, { Dots } from '@brainhubeu/react-carousel';
import '@brainhubeu/react-carousel/lib/style.css'; import { useState } from 'react';
const MyCarouselWithDots = () => {
const [value, setValue] = useState(0);
const onChange = value => {
setValue(value);
}
return (
<div>
<Carousel
value={value}
onChange={onChange}
>
<img className="img-example" src={someImage} />
...
<img className="img-example" src={anotherImage} />
</Carousel>
<Dots
value={this.state.value}
onChange={this.onChange}
thumbnails={[
(<img key={1} className="img-example-small" src={abstractImage} />),
...
(<img key={12} className="img-example-small" src={transportImage} />),
]}
/>
</div>
);
};
export default MyCarouselWithDots;
道具
您可以访问可点击的演示,其中包含许多实例和一个 活代码编辑器 通过点击一个 profile 名称.
木马道具
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
| 价值 | 数目 | undefined | 当前幻灯片的索引( 0, 取决于元素顺序) |
| 变化 | 函数 | undefined | 当当前幻灯片即将更改时( 如点击箭头或刷取) , 汉德勒 触发 |
| 幻灯片 | 阵列 | undefined | 通过幻灯片的替代方式。 此道具预计一系列 JSX |
| 项目窗口 | 数目 | undefined | 确定旋转木马中每张幻灯片的自定义宽度 |
| 页:1 | 数目 | 0 | 在项目间铺设 |
| 动画播放 | 数目 | 500 | 确定以毫秒为单位的过渡期 |
| 可拖动 | 布尔 | true | 能够用鼠标光标拖曳到下一张幻灯片 |
| 断点 | 对象 | undefined | 所有道具都可以设定为不同屏幕分辨率的不同值 |
插件
通过应用在旋转木马内部运出的插件或创建和应用自己的插件,可以扩展反应-木马默认行为
点道具
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
| 价值 | 数目 | 幻灯片中的幻灯片位置 | 当前 Carousel 价值 |
| 变化 | 函数 | undefined | onChange 调用(工作方式与 onChange 内 Carousel (单位:千美元) |
| 编号 | 数目 | 幻灯片数量 | 您想要控制的旋转木马中的幻灯片数 |
| 缩略图 | 反应元素阵列 | undefined | 一组缩略图要显示 。 如果不提供, 将显示默认点 |
| 转 | 布尔 | false | 显示点是否从右到左方向 |
建立地方发展机制,即在当地管理文件/文件:
git clone https://github.com/brainhubeu/react-carouselcd react-carouselyarnyarn start-demo- http://localhost:8000 (英语)
测试
每个测试命令应从根目录运行.
单位测试
yarn test:unit:coverage
E2E测试
yarn test:e2e
工作流程
标签
见 文档中的标签分节
决定日志
许可证
反应-木马是版权 2018-2020 脑壳它是自由软件,可按下列规定重新分配: 许可证。 。 。 .
关于
反应-木马由Brainhub开发团队维护. 它由Brainhub资助,Brainhub的名称和标志是Brainhub Sp.z.o.o的商标. 您可以检查我们队友支持/开发的其他开源项目 这里。 。 。 .
我们喜欢开源JavaScript软件! 参见我们的其他项目或雇用我们用 JavaScript 构建您的下一个网页,桌面和移动应用程序.