@ appulsauce/ svelte- 网格
Svelte 5 的可拖放和可调整网格布局组件 .
安装
npm install @appulsauce/svelte-grid
快速启动
<script lang="ts">
import Grid, { GridItem, type GridController } from '@appulsauce/svelte-grid';
let items = $state([
{ id: '1', x: 0, y: 0, w: 2, h: 2 },
{ id: '2', x: 2, y: 0, w: 3, h: 1 }
]);
let gridController: GridController;
function addItem() {
const position = gridController.getFirstAvailablePosition(2, 2);
if (position) {
items = [...items, { id: crypto.randomUUID(), ...position, w: 2, h: 2 }];
}
}
const itemSize = { height: 50 };
</script>
<button onclick={addItem}>Add Item</button>
<Grid {itemSize} cols={10} collision="push" bind:controller={gridController}>
{#each items as item (item.id)}
<GridItem id={item.id} bind:x={item.x} bind:y={item.y} bind:w={item.w} bind:h={item.h}>
{#snippet children()}
<div class="item">{item.id}</div>
{/snippet}
</GridItem>
{/each}
</Grid>
特征
- 可拖放的可缩放( R) - 用鼠标或触摸移动并调整网格项目大小
- 碰撞检测 - 三种模式:
none, (中文(简体) ),push, (中文(简体) ),compress - 双向绑定 - 直接将物品位置固定在州内
- 自定义处理 - 使用片段进行自定义移动/修改手柄
- 网格控制器 - 程序控制与
getFirstAvailablePosition()财务报告和审定财务报表compress() - 类型脚本 - 包括全套支助
文档
欲了解完整的文件和实例,请访问 文件站点 或运行本地文件 :
# Clone the repository
git clone https://github.com/KaiErikNiermann/svelte-grid-extended.git
cd svelte-grid-extended
# Install dependencies
pnpm install
pnpm docs:install
# Run docs site
pnpm docs:dev
API 概览
网格道具
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
cols | number | 0 | 列数 (0 = 无限) |
rows | number | 0 | 行数 (0 = 无限) |
itemSize | { width?, height? } | {} | 固定单元格大小( 像素) |
gap | number | 10 | 项目间的差距 |
collision | 'none' | 'push' | 'compress' | 'none' | 碰撞行为 |
readOnly | boolean | false | 禁用所有交互 |
网格项目道具
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
x | number | 所需经费 | X 在网格单位中的位置 |
y | number | 所需经费 | Y 在网格单位中的位置 |
w | number | 1 | 网格单位宽度 |
h | number | 1 | 网格单位高度 |
movable | boolean | true | 可以被拖动 |
resizable | boolean | true | 可调整大小 |
所需资源
- 丝绒 5.0.0+
许可证
麻省理工学院