花花木马
用拖动支持 React 增强本地- 滚动- 第一台旋转木马 .
安装
npm install @blossom-carousel/react
反应
import { BlossomCarousel } from "@blossom-carousel/react";
import "@blossom-carousel/react/style.css";
function App() {
return <BlossomCarousel>{/* slides */}</BlossomCarousel>;
}
下一个.js
添加导入到您的页面或组件 :
import { BlossomCarousel } from "@blossom-carousel/react";
import "@blossom-carousel/react/style.css";
export default function Page() {
return <BlossomCarousel>{/* slides */}</BlossomCarousel>;
}
使用量
<BlossomCarousel>
{Array.from({ length: 12 }, (_, i) => (
<div key={i}>Slide {i + 1}</div>
))}
</BlossomCarousel>
作为
定义自动机根的 HTML 元素.
<BlossomCarousel as="ul">
{Array.from({ length: 12 }, (_, i) => (
<li key={i}>Slide {i + 1}</li>
))}
</BlossomCarousel>
显示为
<ul>
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
...
</ul>
导航控制
在旋转木马外放置上一个、下一个和点控制器 <BlossomPrev>, (中文(简体) ), <BlossomNext>,以及 <BlossomDots>把它们和旋转木马联系起来 id 打开 <BlossomCarousel>匹配时 for 每个控件上的道具并用 data-blossom-slide。 。 。 .
<BlossomCarousel id="my-carousel">
{Array.from({ length: 12 }, (_, i) => (
<div key={i} data-blossom-slide>
Slide {i + 1}
</div>
))}
</BlossomCarousel>
<BlossomPrev for="my-carousel" />
<BlossomDots for="my-carousel" />
<BlossomNext for="my-carousel" />
前一頁/下按钮
<BlossomPrev> 财务报告和审定财务报表 <BlossomNext> 已意识到已配置的卷轴,并将在坐标点之间导航。 当没有配置卷轴后, 它们会按比例滑动旋转木马 .
传递孩子替换默认按钮图标 .
<BlossomPrev for="my-carousel">
<span>Previous</span>
</BlossomPrev>
点
<BlossomDots> 使每张幻灯片有一个按键标记 data-blossom-slide。 。 。 .
默认样式可以在组件或任何祖先上带有 CSS 自定义属性:
/* defaults */
--blossom-dot-size: 0.625rem;
--blossom-dot-radius: 50%;
--blossom-dot-color: currentColor;
--blossom-dot-opacity: 0.35;
--blossom-dot-hover-opacity: 0.6;
--blossom-dot-active-opacity: 1;
要带来自己的点, 通过一个渲染函数和渲染 <BlossomDot> 内在的 这将将点配置为 <button> 有导航线.
现在您可以随意样式点并附加任何需要的按钮属性.
<BlossomDots for="my-carousel">
{({ index, active }) => (
<BlossomDot
className="my-dot"
data-active={active}
aria-label={`Photo ${index + 1}`}
>
{index + 1}
</BlossomDot>
)}
</BlossomDots>
滚动行为
默认情况下,每个导航控制会顺利地滚动. 设定 behavior 向 "instant" 或者说 "auto" 来改变这一点。 打开 <BlossomDots> 它适用于每一个点; a <BlossomDot> 它可以自己覆盖它.
<BlossomPrev for="my-carousel" behavior="instant" />
<BlossomDots for="my-carousel" behavior="instant" />
<BlossomNext for="my-carousel" behavior="instant" />
道具作为 data-blossom-behavior 属性。 设定自己的属性优先于道具.
正在聆听命令
听着 command 旋转木马上的事件,以了解何时启动导航控制或何时启动 方法 称为:
- 上一个
--blossom-prev(中文(简体) ) - 下一个(
--blossom-next(中文(简体) ) - 点数( n)
--blossom-goto-{index}) (中文(简体) ).
这些事件不是通过拖放或自由滚动来发射的. 读取 event.command (或 event.detail.command 使用 Invoker 命令多填充).
onCommand 财务报告和审定财务报表 onOverscroll 需求 @blossom-carousel/react 1.8.0 或晚点。 更早的版本把它们传给了DOM,在那里React忽略了它们.
<BlossomCarousel onCommand={handleCommand}>
{Array.from({ length: 12 }, (_, i) => (
<div key={i} data-blossom-slide>
Slide {i + 1}
</div>
))}
</BlossomCarousel>
function handleCommand(event) {
const command = event?.command || event?.detail?.command;
}
方法
传出 a ref 改为 <BlossomCarousel> 从自己的代码导航。 裁判收到 BlossomCarouselHandle数字 :
prev(options?)滚动到上一个坐标点或页面.next(options?)滚动到下一个坐标点或页面.goTo(index, options?)以零键向幻灯片滚动index,以data-blossom-slide。 。 。 .element是旋转木马的根部元素.
options.behavior 接受 "smooth" (违约), "instant" 或者说 "auto"。这些方法使用本地滚动,因此它们也用于拖放引擎未加载的触摸设备.
import { useRef } from "react";
import { BlossomCarousel, type BlossomCarouselHandle } from "@blossom-carousel/react";
function Gallery() {
const carousel = useRef<BlossomCarouselHandle>(null);
return (
<>
<BlossomCarousel ref={carousel}>
{Array.from({ length: 12 }, (_, i) => (
<div key={i} data-blossom-slide>
Slide {i + 1}
</div>
))}
</BlossomCarousel>
<button onClick={() => carousel.current?.goTo(0, { behavior: "instant" })}>
Back to start
</button>
</>
);
}
过度滚动 API
进入Blossom的拖动引擎的过度扭曲行为来创造出自己的风格.
<BlossomCarousel
onOverscroll={(event) => {
event.preventDefault();
const overScroll = event.detail.left;
Array.from(event.currentTarget.children).forEach((slide) => {
slide.style.transform = `scale(${1 - overScroll * 0.1})`;
});
}}
>
{Array.from({ length: 12 }, (_, i) => (
<div key={i}>Slide {i + 1}</div>
))}
</BlossomCarousel>
实例
探索以复杂程度分类的现成至复制木马图案.