Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yahoo/ember-gridstack
Ember components to build drag-and-drop multi-column grids powered by gridstack.js
https://github.com/yahoo/ember-gridstack
ember ember-addon emberjs grid gridstack
Last synced: 5 days ago
JSON representation
Ember components to build drag-and-drop multi-column grids powered by gridstack.js
- Host: GitHub
- URL: https://github.com/yahoo/ember-gridstack
- Owner: yahoo
- License: other
- Created: 2017-01-13T16:33:57.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-09-10T18:18:23.000Z (4 months ago)
- Last Synced: 2024-12-13T20:11:43.934Z (12 days ago)
- Topics: ember, ember-addon, emberjs, grid, gridstack
- Language: JavaScript
- Homepage: https://yahoo.github.io/ember-gridstack/
- Size: 5.45 MB
- Stars: 38
- Watchers: 21
- Forks: 29
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-gridstack [![Pipeline Status][status-image]][status-url] [![Latest NPM release][npm-badge]][npm-badge-url] [![Ember Observer Score][ember-observer-badge]][ember-observer-badge-url]
Ember components to build drag-and-drop multi-column grids powered by [gridstack.js](https://gridstackjs.com/)
## Compatibility
- Ember.js v4.4 or above
- Ember CLI v4.4 or above
- Node.js v14 or above
## Installation
```
ember install ember-gridstack
```
## Migrating to v3
View the full [v3.0.0 release notes](./CHANGELOG.md#300) for updates and breaking changes.
## Basic Usage
```hbs
Widget #1
Widget #2
```
## Components
### ``
Used to construct a grid-stack layout
#### Options
`` can take an `options` object attribute to configure the grid. All gridstack grid options are valid and take the form `gs-{option}`. However, when using `` the `gs-{option}` is omitted.
**Example:**
```hbs
...
```
The full list of options can be found here: https://github.com/gridstack/gridstack.js/tree/v4.2.7/doc#grid-options
#### Actions
All gridstack events can be handled as Ember actions. They take the form `on{Eventname}`.
**Example:**
```hbs
```
The full list of events can found here: https://github.com/gridstack/gridstack.js/tree/v4.2.7/doc#events
#### Block Form
The `` component uses the block form to yield `` components. In addition, `` yields a reference to itself in the case inner components need the reference or would like to listen to events triggered on the grid element.
**Example:**
```hbs
Widget #1
```
### ``
Used to construct a grid item inside a `` component
#### Options
`` can take an `options` object attribute to configure the grid item. All gridstack item options are valid and take the form `gs-{option}`. However, when using `` the `gs` is omitted.
**Example:**
```hbs
...
```
The full list of options can be found here: https://github.com/gridstack/gridstack.js/tree/v4.2.7/doc#item-options
#### Block Form
The `` component uses the block form to yield the content of the item. In addition, `` yields a reference to itself in the case inner components need the reference or would like to listen to events triggered on the grid.
**Example:**
```hbs
```
```js
//custom-component.js
export default class CustomComponent extends Component {
didInsertElement() {
super.didInsertElement(...arguments);
this.parentContainer.element.addEventListener('resizestop', () => {
//handle resize
});
}
}
```
## Touch Support
For touch support do the following
### ember-grid-stack < 2.x
By default, the [bower dependencies for Gridstack](https://github.com/troolee/gridstack.js#requirements)
will be installed automatically.
[status-image]: https://cd.screwdriver.cd/pipelines/7366/badge
[status-url]: https://cd.screwdriver.cd/pipelines/7366
[npm-badge]: https://img.shields.io/npm/v/ember-gridstack.svg
[npm-badge-url]: https://www.npmjs.com/package/ember-gridstack
[ember-observer-badge]: https://emberobserver.com/badges/ember-gridstack.svg
[ember-observer-badge-url]: https://emberobserver.com/addons/ember-gridstack