# j-Kanban

> Σημαντικό: Κάθε στοιχείο χρειάζεται το δικό του ID {String}, ανατρέξτε στο παράδειγμα.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: el
Content-SHA256: a60e74a0945d0a4843146a67701bca0edf36e00c00937ad22a892b40d8de3c67
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__ΕΠΙΤΡΟΦΗ__:

- `parent {String}` ένα δοχείο με σταθερή ύψος, μπορεί να `window`Η υποτιθέμενη αξία: `parent` Το στοιχείο.
- `margin {Number}` μια κορυφαία / κάτω περιθώριο μαζί (προεπιλεγμένη: `0`)
- `padding {Number}` ένα πατίνι μεταξύ των πάνελ (προεπιλεγμένο: `10`)
- `style {Number}` ένα στυλ, `1` (προεπιλεγμένο): τα κουτιά θα έχουν πλήρη ύψος, τα κουτάλια `2` θα έχουν `max-height `
- `move {String}` Ο δρόμος προς τη μέθοδο `function(group, target)`εκτελείται εάν ο χρήστης μεταφέρει ένα στοιχείο σε άλλη ομάδα
- `remove {String}` ένα μονοπάτι προς τη μέθοδο `function(group)`, εκτελείται εάν ο χρήστης αφαιρεί ένα στοιχείο σε ομάδα
- `dblclick {String}` Ο δρόμος προς τη μέθοδο `function(group)`εκτελείται εάν ο χρήστης κάνει διπλό κλικ

__Μέθοδοι__:

- Το `component.remove(id)` μπορεί να αφαιρέσει ένα στοιχείο στην ομάδα
- Το `component.findgroup(id)` επιστρέφει μια ομάδα

__Αξιοσημείωτο__: Κάθε στοιχείο χρειάζεται το δικό του ID {String}, ανατρέξτε στο παράδειγμα.

Χρησιμοποιήστε το με `<ui-component name="kanban">`Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση `DEF.fallback` (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, MIT άδεια.

```html example.html
<style>
	.caption { line-height: 50px; border-bottom: 1px solid #E0E0E0; padding: 0 10px; font-weight: bold; }
	.ui-dark .caption { border-bottom-color: #404040; }
</style>

<ui-component name="kanban" path="items" config="parent:window;move:onmoveitem;margin:50">

	<!-- Group header rendering -->
	<script type="text/html">
		<div class="caption">{{ name }}</div>
	</script>

	<!-- Item rendering -->
	<script type="text/html">
		<div>{{ name }}</div>
	</script>
</ui-component>

<script>

	var items = [];
	items.push({ id: '1', name: 'In progress', items: [{ id: '11', name: 'Better life Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea culpa voluptatem asperiores aspernatur doloremque cupiditate error, qui sit est quas.' }] });
	items.push({ id: '2', name: 'Pending', items: [{ id: '21', name: 'Improve j-ChunkyScroll' }] });
	items.push({ id: '3', name: 'Done', items: [{ id: '31', name: 'Fix scrollbars j-DataGrid' }, { id: '32', name: 'Improve performace' }] });

	function onmoveitem(group, target) {
		console.log('MOVEMENT:', group, target);
	}

</script>
```