vue3-ts-grid-layout
v1.0.0
Published
Vue 3 Responsive & Dynamic Grid / Dashboard layout with drag, drop and resizable actions.
Downloads
11
Maintainers
changkuiReadme
关于 vue3-ts-grid-layout
vue3-ts-grid-layout VUE 3 响应式网格布局基于 JBaysolution 的 vue-grid-layout 的原始工具。
这个新的和重构的组件具有更多功能、类型安全的 Emits、Props 和严格的 linting 规则设置。
为测试目的而开发的适当应用程序。
文档网站包含 13 个示例。将在向组件添加新功能时更新。
Donate
Features:
- Prop in GridLayout for distributing GridItem's equally.
- GridLayout now has slot for GridItem.
- Prop for displaying grid lines in GridLayout.
- Prop for setting edit mode in GridLayout. Shortcuts the isDraggable and isResizable props.
- Prop for adding border radius in GridLayout. Adds a 8px radius to each GridItem.
- Prop in GridLayout for shifting GridItems horizontally when dragging instead of vertical.
- Separated out style variables, so it is easier to restyle the component.
- Added tab navigation support.
- Close button in GridItem for removing the GridItem from the GridLayout.
- Added more events to GridLayout and GridItem.
- Support for resize Bottom, Bottom Right and Right in GridIem.
- Draggable widgets
- Resizable widgets
- Static widgets
- Bounds checking for dragging and resizing
- Widgets may be added or removed without rebuilding grid
- Layout can be serialized and restored
- Automatic RTL support
- Responsive using predefined layout's for different breakpoints.
- GridItem automatically resizes when content change(Useful when displaying charts).
Testing:
- Unit tests Using Vitest
- Unit test console Using Vitest UI
- e2e tests Using nightwatchjs
Changelog
项目中使用
Auditing the package
npm audit --registry=https://registry.npmjs.org/