@ fluidkit/ core (英语)
流体图 液体模糊的玻璃,形态,
指示、拖放、起起和布局,在保持速度的可中断弹簧和苹果弹簧上
和过渡名,CSS也。 每个特性对任意元素都有作用; 你不导入的不是
在你的捆绑。 使用 React, Vue 或 Svelte 安装 @fluidkit/react, (中文(简体) ),
@fluidkit/vue 或者说
@fluidkit/svelte 换句话说,每个人都有这些东西.
npm install @fluidkit/core
导入样式表一次:玻璃,以及CSS的弹簧和过渡.
import "@fluidkit/core/style.css";
<button class="lb lb-interactive">Follow</button>
import { createDrag, createLayout, createLift, installPress, springs, transitions } from "@fluidkit/core";
// Glass that lights up, swells and stretches under the finger
installPress();
// A sheet with snap points, let go at the finger's speed
createDrag({ element: sheet, axis: "y", snaps: () => [0, innerHeight / 2, innerHeight - 88] });
// A long press lifts the photo and opens its menu
createLift({ element: photo, menu });
// Rows put in, taken out or reordered move to their new places
createLayout({ root: list, spring: springs.snappy(), enter: transitions.blurReplace() });
<div popover class="fk-transition fk-blur-replace fk-bouncy">…</div>
| 特性 | 文档 |
|---|---|
| 液体模糊:玻璃、压力、熔化组 | 模糊, (中文(简体) ), 滚动边缘 |
| 墨菲:一个元素入到另一个元素后 | 变形 |
| 指标:任何盘旋、按住或选定的元素上方有一个元素 | 指标 |
| 拖放:橡皮带边缘,闪烁-觉察到的坐标点 | 拖动 |
| 升起: iOS 上下文菜单 | 电梯 |
| 布局: 元素移动到新位置 | 版式 |
| 运动:泉水和过渡,按名称排列,CSS也使用 | 动议 |
| 地下的泉水、测量和DOM合同 | 核心项目 |
没有建台阶? @fluidkit/core/auto 导入时安装按:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fluidkit/core@2/dist/style.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@fluidkit/core@2/dist/auto.js/+esm"></script>
许可证
麻省理工学院米哈伊尔·莫吉利尼科夫. 见 自由主义。 。 。 .