反应可刷卡

无头反应可刷卡旋转木马组件,类似于Tinder,没有 运行时间依赖。 拖放,或按程序刷卡 左,右, 上下两相. 可在屏幕外丢弃卡片或将卡片发到堆栈后端 永远循环。 由网络动画 API 所建,用于平滑的,有动力的认知 动画和中枢加权自转,在指下感觉自然.

安装

npm install @daformat/react-swipeable-cards

yarn add @daformat/react-swipeable-cards

pnpm add @daformat/react-swipeable-cards

bun add @daformat/react-swipeable-cards

deno add npm:@daformat/react-swipeable-cards

演示

https://hello-mat.com/design-engineering/组件/可刷卡

快开始

import { SwipeableCards } from "@daformat/react-swipeable-cards";

const cards = [
  { id: "1", card: <div className="card">Card 1</div> },
  { id: "2", card: <div className="card">Card 2</div> },
  { id: "3", card: <div className="card">Card 3</div> },
];

export function App() {
  return (
    <SwipeableCards.Root
      cards={cards}
      emptyView={<div>No more cards</div>}
      onSwipe={(direction, cardId) => {
        console.log(`Swiped ${cardId} ${direction}`);
      }}
    >
      <SwipeableCards.Cards />
      <SwipeableCards.SwipeLeftButton>👎</SwipeableCards.SwipeLeftButton>
      <SwipeableCards.SwipeRightButton>👍</SwipeableCards.SwipeRightButton>
    </SwipeableCards.Root>
  );
}

构成部分是 无头: 盒子里没有东西是样式的。 你决定 如何看牌,你决定如何铺出堆栈(典型的是CSS) 组件所暴露的自定义属性,参见 CSS 自定义属性) (中文(简体) ).

样式示例

考虑到以下jsx:

// full source: https://github.com/daformat/hello-mat/blob/master/pages/design-engineering/component/swipeable-cards.tsx

<SwipeableCards.Root
  cards={[...cards /* omitted for brevity */]}
  className={styles.cards_root}
  data-style={"stacked-offset" /* "stacked-rotation" | "minimal" */}
  swipeStyle={"sendToBack"}
  sendToBackMargin={16}
  loop
>
  <SwipeableCards.Cards
    visibleStackLength={4}
    style={{ aspectRatio: "650 / 400" }}
  />
</SwipeableCards.Root>

我用这个来形容 演示

/* full source: https://github.com/daformat/hello-mat/blob/master/components/SwipeableCards/SwipeableCards.module.scss */

.cards_root {
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);

  [data-swipeable-cards-cards] {
    display: grid;
    grid-template-columns: 1fr;
    place-content: center;
    position: relative;
    touch-action: none;
    z-index: 1;

    [data-swipeable-cards-card-wrapper] {
      align-content: center;
      align-self: center;
      grid-area: 1 / 1;
      opacity: calc(
        1 - clamp(0, var(--stack-index0) - var(--visible-stack-length), 1)
      );
      touch-action: none;
      transform-origin: center 0;
      transition: all 0.2s var(--ease-out-cubic);
      transition-property: opacity, scale, padding-top, margin-top;
      width: 100%;
      will-change: opacity, scale, padding-top, margin-top, transform;
    }
  }

  &:is([data-style="stacked-offset"], [data-style="stacked-rotation"]) {
    [data-swipeable-cards-cards] {
      [data-swipeable-cards-card-wrapper] {
        scale: calc(
          100% - min(var(--stack-index0), var(--visible-stack-length)) * 10%
        );
      }
    }
  }

  &[data-style="stacked-offset"] {
    [data-swipeable-cards-cards] {
      [data-swipeable-cards-card-wrapper] {
        // Pick whatever vertical step you want between stacked cards.
        --card-top-distance: clamp(16px, 1vw, 32px);
        --p: calc(
          var(--card-top-distance) *
            max(var(--visible-stack-length) - var(--stack-index0), 0)
        );
        --m: calc(
          var(--card-top-distance) *
            (
              var(--visible-stack-length) - max(
                  var(--visible-stack-length) - var(--stack-index0),
                  0
                )
            )
        );
        margin-top: calc(var(--m) * -1);
        padding-top: calc(var(--p));
      }
    }
  }
}

构成部分结构

/* Provides context to all swipeable card components */
<SwipeableCards.Root cards={cards} emptyView={...}>
  {/* The stack container */}
  <SwipeableCards.Cards>
    {/* Optional: bring your own renderer; otherwise the default renders one CardWrapper per card */}
    {(stack) =>
      stack.map((card) => (
        <SwipeableCards.CardWrapper key={card.id} card={card} />
      ))
    }
  </SwipeableCards.Cards>
  {/* Optional programmatic swipe buttons */}
  <SwipeableCards.SwipeLeftButton />
  <SwipeableCards.SwipeRightButton />
  <SwipeableCards.SwipeUpButton />
  <SwipeableCards.SwipeDownButton />
</SwipeableCards.Root>

构成部分

SwipeableCards.Root

最外道的包装 提供上下文, 设置拖曳状态, 并听 改为 pointermove 编号 : pointerup 在文档上。 显示 a <div>。 。 。 .

这个 loop 道克是受歧视的结合的一部分: loop 实值 false (或 省略了) 你 必须 通过 emptyView; 当 loop 实值 true 你们 绝对不能 通过 emptyView。 。 。 .

根上的数据属性集

SwipeableCards.Cards

堆货箱 设置您卡片样式使用的 CSS 自定义属性 计算堆叠卡的z-index,缩放,不透明等. 显示 a <div> 外加内脏 <div data-empty> 当堆栈是 空( 空视图总是渲染出, 这样您就可以在外/ 外切换 - 自由的) (英语).

卡片容器上的数据属性集

SwipeableCards.CardWrapper

单张牌的包装纸 拥有该卡的指针交互—— 只有顶卡回复 pointerdown显示 a <div> 包含 无论是 card.card 或者,如果你通过了 children,你自己的内容.

每个包装上的数据属性集

SwipeableCards.SwipeLeftButton 编号 : SwipeRightButton 编号 : SwipeUpButton 编号 : SwipeDownButton

程序刷新按钮。 单击一个会触发当前顶部的擦拭 以随机键、速度和旋转为方向的卡片,所以 重复点击感觉自然。 当堆栈为空时自动取消操作或 刷卡工作已经开始。 显示 a <button>。 。 。 .

钩子

SwipeableCards.useSwipeableCardsContext()

返回完整的内部环境。 必须在里面使用 SwipeableCards.Root。 。 。 .

const {
  loop,
  emptyView,
  cards,
  stack,
  setStack,
  discardedCardId,
  setDiscardedCardId,
  dragStateRef,
  animationRef,
  commitSwipe,
  swipeStyle,
  getCardElement,
  sendToBackMargin,
  rootRef,
  swipeDirections,
  swipeDirectionsRef,
} = SwipeableCards.useSwipeableCardsContext();

SwipeableCards.useSwipeableCardsStack()

仅返回当前状态的便捷钩 stack (记取. 使用这个 在只关心堆栈的组件中,以避免重接 不相关的上下文变化.

const stack = SwipeableCards.useSwipeableCardsStack();

SwipeableCards.useProgrammaticSwipe()

将内置方向按钮赋予权力. 用它来制造自己的刷子 触发器。 如果周围的树不包括一个 SwipeableCards.Cards 触发时装入容器.

const { trigger, swipeStyle, swipeDirections } =
  SwipeableCards.useProgrammaticSwipe();

示例: "超像" 向上刷

function SuperLikeButton() {
  const { trigger } = SwipeableCards.useProgrammaticSwipe();
  return (
    <button
      type="button"
      onClick={() =>
        trigger((state, rect) => {
          state.velocityX = 0;
          state.velocityY = -(rect.height / 442) * 4;
          state.pivotX = 0;
          state.pivotY = -0.4;
          state.startY = 0;
          state.lastY = -1;
        })
      }
    >
      ⭐
    </button>
  );
}

CSS 自定义属性

组件设置这些 CSS 自定义属性,以便您能够完全驱动 视觉堆栈外观来自您的 CSS, 不含道具钻取值 进入每张卡片.

打开 SwipeableCards.Cards

每个 SwipeableCards.CardWrapper

示例样式

[data-swipeable-cards-card-wrapper] {
  position: absolute;
  inset: 0;
  transform-origin: center top;
  transition:
    scale 0.3s,
    translate 0.3s;
  scale: calc(1 - var(--stack-index0) * 0.05);
  translate: 0 calc(var(--stack-index0) * clamp(16px, 1vw, 32px));
  z-index: var(--stack-length);
  pointer-events: none;
}

[data-swipeable-cards-top-card="true"] {
  pointer-events: auto;
  cursor: grab;
}

[data-swipeable-cards-top-card="true"]:active {
  cursor: grabbing;
}

导出类型

import type {
  CardWithId,
  SwipeDirection,
  AllowedSwipeDirection,
  SwipeStyle,
  GetCardElement,
  StackRenderer,
  DraggingState,
  BaseSwipeableCardsProps,
  NotLoopingSwipeableProps,
  LoopingSwipeableProps,
  SwipeableCardsProps,
  SwipeableCardsCardsProps,
  SwipeableCardsCardWrapperProps,
} from "@daformat/react-swipeable-cards";