You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -6,37 +6,138 @@ description: In der Dokumentation der DHTMLX JavaScript Kanban-Bibliothek erfahr
6
6
7
7
# Anpassung
8
8
9
-
Neben der Konfiguration von Kanban können Sie auch das Aussehen und Verhalten individuell anpassen. Das Widget ermöglicht es Ihnen, eine eigene Vorlage für Karten festzulegen, das Kontextmenü für Karten, Spalten und Zeilen zu modifizieren, die Struktur und Funktionalität der Toolbar zu verändern sowie eigene CSS-Stile auf Kanban anzuwenden.
9
+
Das Erscheinungsbild und Verhalten von Kanban können Sie mit folgenden Eigenschaften anpassen:
10
+
11
+
-[`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) — Karten mit einer eigenen HTML-Vorlage rendern
12
+
-[`cardShape.menu`](api/config/js_kanban_cardshape_config.md), [`columnShape.menu`](api/config/js_kanban_columnshape_config.md), [`rowShape.menu`](api/config/js_kanban_rowshape_config.md) — das Kontextmenü für Karten, Spalten und Zeilen anpassen
-[`items`](api/config/toolbar_items_config.md) — Toolbar-Struktur neu anordnen und eigene Steuerelemente hinzufügen
16
+
- CSS-Variablen — visuelle Stile anpassen (siehe den Abschnitt [Stilisierung](guides/stylization.md))
10
17
11
18
## Eigene Karten {#custom-cards}
12
19
13
-
Um Karten mit einer eigenen Vorlage darzustellen, können Sie die [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md)-Eigenschaft verwenden. Dies ist eine Callback-Funktion, mit der Sie gewünschte Stile und Logik definieren und auf Kanban anwenden können. Siehe folgendes Beispiel:
20
+
Verwenden Sie die [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md)-Eigenschaft, um Karten mit einer eigenen HTML-Vorlage zu rendern. Der Callback gibt das Markup für jede Karte zurück.
21
+
22
+
Der Callback erhält ein Objekt mit folgenden Parametern:
23
+
24
+
-`cardFields` — Kartendaten
25
+
-`selected` — ob die Karte ausgewählt ist
26
+
-`dragging` — ob die Karte gerade verschoben wird
27
+
-`cardShape` — Kartenkonfiguration
28
+
29
+
Um in einer eigenen Kartenvorlage einen Kontextmenü-Auslöser einzubetten, umschließen Sie das Menüsymbol mit einem `<div>` mit dem Attribut `data-menu-id=${cardFields.id}` (dieselbe Struktur wie bei der eingebauten Karte). Das Widget bindet das Menü über dieses Attribut an den Container.
30
+
31
+
Das folgende Demo wendet eine eigene Kartenvorlage an:
Um das Kontextmenü für Karten, Spalten und Zeilen anzupassen, können Sie die entsprechenden Eigenschaften [`cardShape`](api/config/js_kanban_cardshape_config.md), [`columnShape`](api/config/js_kanban_columnshape_config.md) und [`rowShape`](api/config/js_kanban_rowshape_config.md) verwenden. Siehe folgendes Beispiel:
37
+
Konfigurieren Sie das Kontextmenü für Karten, Spalten und Zeilen über die Eigenschaften [`cardShape.menu`](api/config/js_kanban_cardshape_config.md), [`columnShape.menu`](api/config/js_kanban_columnshape_config.md) und [`rowShape.menu`](api/config/js_kanban_rowshape_config.md). Jeder Eintrag in `menu.items` kann eine eingebaute Aktions-ID verwenden, um eine Standardoperation auszuführen, oder einen eigenen `onClick`-Handler für beliebiges Verhalten definieren.
38
+
39
+
### `cardShape.menu`
40
+
41
+
Standardmäßig zeigt das Kartenmenü die Optionen **Duplizieren** und **Löschen**. Verfügbare eingebaute Aktions-IDs:
42
+
43
+
-`"duplicate-card"` — die Karte duplizieren
44
+
-`"delete-card"` — die Karte löschen
45
+
46
+
### `columnShape.menu`
47
+
48
+
-`"add-card"` — eine neue Karte zur Spalte hinzufügen
49
+
-`"set-edit"` — die Spalte umbenennen
50
+
-`"move-column:left"`, `"move-column:right"` — die Spalte nach links oder rechts verschieben
51
+
-`"delete-column"` — die Spalte löschen
52
+
53
+
### `rowShape.menu`
54
+
55
+
-`"set-edit"` — die Zeile umbenennen
56
+
-`"move-row:up"`, `"move-row:down"` — die Zeile nach oben oder unten verschieben
57
+
-`"delete-row"` — die Zeile löschen
58
+
59
+
Setzen Sie `menu.items` auf eine Funktion, um pro Karte, Spalte oder Zeile ein unterschiedliches Menü anzuzeigen. Geben Sie `null` oder `false` aus der Funktion zurück, um das Menü für ein bestimmtes Element auszublenden.
60
+
61
+
Das folgende Demo wendet ein eigenes Kontextmenü an:
Um eine CSS-Klasse bedingt anzuwenden, übergeben Sie eine Funktion an den `css`-Parameter von [`cardShape`](api/config/js_kanban_cardshape_config.md), [`columnShape`](api/config/js_kanban_columnshape_config.md) oder [`rowShape`](api/config/js_kanban_rowshape_config.md). Die Funktion gibt einen Klassennamen basierend auf den aktuellen Daten zurück:
105
+
106
+
-[`cardShape.css: (card) => string`](api/config/js_kanban_cardshape_config.md) — Klasse, die auf eine Karte angewendet wird
107
+
-[`columnShape.css: (column, cards) => string`](api/config/js_kanban_columnshape_config.md) — Klasse, die auf eine Spalte angewendet wird
108
+
-[`rowShape.css: (row, cards) => string`](api/config/js_kanban_rowshape_config.md) — Klasse, die auf eine Zeile angewendet wird
109
+
110
+
Der folgende Codeausschnitt hebt überfällige Karten und gering ausgelastete Spalten hervor:
Um die Struktur und Funktionalität der Toolbar anzupassen, können Sie die [`items`](api/config/toolbar_items_config.md)-Eigenschaft verwenden. In diesem Array können Sie die benötigten Steuerelemente definieren, sie in der gewünschten Reihenfolge anordnen und ihr Verhalten anpassen.
127
+
Verwenden Sie die [`items`](api/config/toolbar_items_config.md)-Eigenschaft, um die Toolbar-Struktur anzupassen. Das Array legt fest, welche Steuerelemente angezeigt werden, in welcher Reihenfolge und mit welchem Verhalten. Ein Eintrag kann sein:
26
128
27
-
Im folgenden Beispiel sehen Sie, wie Sie Folgendes anpassen können:
Sie können das Aussehen von Kanban anpassen, indem Sie die Werte der entsprechenden *CSS-Variablen* ändern. Weitere Informationen finden Sie im Abschnitt [**Stilisierung**](guides/stylization.md).
139
+
Ändern Sie die Werte der CSS-Variablen, um das Erscheinungsbild von Kanban anzupassen. Die vollständige Liste finden Sie im Abschnitt [Stilisierung](guides/stylization.md).
39
140
40
-
Im folgenden Beispiel sehen Sie, wie Sie eigene Stile auf Kanban anwenden können:
141
+
Das folgende Beispiel wendet eigene Stile auf Kanban an:
Copy file name to clipboardExpand all lines: i18n/de/docusaurus-plugin-content-docs/current/guides/initialization.md
+28-28Lines changed: 28 additions & 28 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,49 +6,51 @@ description: In der Dokumentation der DHTMLX JavaScript Kanban-Bibliothek erfahr
6
6
7
7
# Initialisierung
8
8
9
-
Diese Anleitung gibt Ihnen eine detaillierte Schritt-für-Schritt-Anleitung, wie Sie Kanban auf einer Seite erstellen, um Ihre Anwendung mit den Funktionen eines Kanban-Boards zu erweitern. Gehen Sie wie folgt vor, um eine einsatzbereite Komponente zu erhalten:
9
+
Erstellen Sie ein Kanban-Widget auf einer Seite in drei Schritten:
10
10
11
-
1.[Binden Sie die Kanban-Quelldateien in die Seite ein](#including-source-files).
12
-
2.[Erstellen Sie einen Container für Kanban](#creating-container).
13
-
3.[Initialisieren Sie Kanban mit einem Konstruktor](#initializing-kanban).
11
+
1.[Binden Sie die Quelldateien ein](#include-source-files).
12
+
2.[Erstellen Sie einen Container](#create-a-container).
13
+
3.[Initialisieren Sie Kanban](#initialize-kanban).
14
14
15
-
## Including source files
15
+
## Include source files
16
16
17
-
[Laden Sie das Paket herunter](https://dhtmlx.com/docs/products/dhtmlxKanban/download.shtml) und entpacken Sie es in einen Ordner Ihres Projekts.
17
+
[Laden Sie das Paket herunter](https://dhtmlx.com/docs/products/dhtmlxKanban/download.shtml) und entpacken Sie den Inhalt in einen Ordner Ihres Projekts.
18
18
19
-
Um Kanban zu erstellen, müssen Sie zwei Quelldateien in Ihre Seite einbinden:
19
+
Binden Sie die folgenden Quelldateien in Ihre Seite ein:
20
20
21
21
-*kanban.js*
22
22
-*kanban.css*
23
23
24
-
Stellen Sie sicher, dass Sie die korrekten relativen Pfade zu den Quelldateien angeben:
24
+
Geben Sie korrekte relative Pfade zu beiden Dateien an:
Fügen Sie einen Container für Kanban hinzu und geben Sie ihm eine ID, zum Beispiel *"root"*:
33
+
Fügen Sie einen Container für Kanban hinzu und weisen Sie ihm eine ID zu, zum Beispiel `root`:
34
34
35
35
~~~jsx title="index.html"
36
36
<div id="root"></div>
37
37
~~~
38
38
39
-
Wenn Sie das Widget zusammen mit der *Toolbar* erstellen möchten, müssen Sie dafür einen separaten Container hinzufügen:
39
+
Um das Widget mit einer Toolbar zu erstellen, fügen Sie einen separaten Container für die Toolbar hinzu:
40
40
41
41
~~~jsx {1} title="index.html"
42
42
<div id="toolbar"></div>// Container für die Toolbar
43
43
<div id="root"></div>// Container für Kanban
44
44
~~~
45
45
46
-
## Initializing Kanban
46
+
## Initialize Kanban
47
47
48
-
Initialisieren Sie Kanban mit dem **kanban.Kanban**-Konstruktor. Er nimmt zwei Parameter entgegen:
48
+
Initialisieren Sie Kanban mit dem `kanban.Kanban`-Konstruktor. Der Konstruktor nimmt zwei Parameter entgegen:
49
49
50
-
- einen HTML-Container (die ID des HTML-Containers)
51
-
- ein Objekt mit Konfigurationseigenschaften. [Siehe die vollständige Liste hier](#configuration-properties)
50
+
- einen CSS-Selektor für den HTML-Container (oder das Container-Element selbst)
51
+
- ein Konfigurationsobjekt (siehe die [vollständige Liste der Eigenschaften](#configuration-properties))
52
+
53
+
Der folgende Code-Ausschnitt erstellt eine Kanban-Instanz:
52
54
53
55
~~~jsx title="index.html"
54
56
// Kanban erstellen
@@ -57,35 +59,33 @@ new kanban.Kanban("#root", {
57
59
});
58
60
~~~
59
61
60
-
Wenn Sie das Widget zusammen mit der *Toolbar* erstellen möchten, müssen Sie diese separat mit dem **kanban.Toolbar**-Konstruktor initialisieren. Auch dieser nimmt zwei Parameter entgegen:
61
-
62
-
- einen HTML-Container (die ID des HTML-Containers)
63
-
- ein Objekt mit Konfigurationseigenschaften
62
+
Um das Widget mit einer Toolbar zu erstellen, initialisieren Sie die Toolbar separat mit dem `kanban.Toolbar`-Konstruktor. Die Toolbar-Steuerelemente wirken über den Parameter [`api`](api/config/toolbar_api_config.md) auf die Kanban-Instanz ein. Übergeben Sie `board.api`, um die Toolbar mit dem Board zu verknüpfen:
64
63
65
-
~~~jsx {6-8} title="index.html"
64
+
~~~jsx {7} title="index.html"
66
65
// Kanban erstellen
67
66
constboard=newkanban.Kanban("#root", {
68
67
// Konfigurationseigenschaften
69
68
});
70
69
71
70
newkanban.Toolbar("#toolbar", {
72
-
// Konfigurationseigenschaften
71
+
api:board.api, // erforderlich: verknüpft die Toolbar-Steuerelemente mit der Kanban-Instanz
72
+
// weitere Konfigurationseigenschaften
73
73
});
74
74
~~~
75
75
76
76
:::info
77
-
Um mehr über die Konfiguration der Toolbar von Kanban zu erfahren, lesen Sie den Abschnitt [**Konfiguration**](guides/configuration.md/#toolbar)
77
+
Weitere Informationen zur Konfiguration der Toolbar finden Sie im Abschnitt [Konfiguration](guides/configuration.md#toolbar).
78
78
:::
79
79
80
80
### Configuration properties
81
81
82
-
:::note
83
-
Die vollständige Liste der Eigenschaften zur Konfiguration von **Kanban** finden Sie [**hier**](api/overview/properties_overview.md). <br/>
84
-
Die vollständige Liste der Eigenschaften zur Konfiguration der **Toolbar von Kanban** finden Sie [**hier**](api/overview/toolbar_properties_overview.md).
85
-
:::
82
+
Die vollständige Konfigurationsreferenz:
83
+
84
+
-[Übersicht der Kanban-Eigenschaften](api/overview/properties_overview.md) — alle Kanban-Konfigurationseigenschaften
85
+
-[Übersicht der Toolbar-Eigenschaften](api/overview/toolbar_properties_overview.md) — alle Toolbar-Konfigurationseigenschaften
86
86
87
87
## Beispiel
88
88
89
-
In diesem Beispiel sehen Sie, wie **Kanban** mit Anfangsdaten initialisiert wird:
89
+
Der folgende Ausschnitt initialisiert Kanban mit Beispieldaten:
Copy file name to clipboardExpand all lines: i18n/de/docusaurus-plugin-content-docs/current/guides/integration.md
+12-4Lines changed: 12 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,12 +6,20 @@ description: Informationen zur Integration finden Sie in der Dokumentation der D
6
6
7
7
# Integration mit DHTMLX-Widgets
8
8
9
-
Sie können DHTMLX Kanban mit anderen DHTMLX-Widgets integrieren (zum Beispiel mit [Gantt](https://docs.dhtmlx.com/gantt/), [Scheduler](https://docs.dhtmlx.com/scheduler/), [To Do List](https://docs.dhtmlx.com/todolist/)). Sehen Sie sich die folgenden Beispiele an.
9
+
Sie können DHTMLX Kanban mit anderen DHTMLX-Widgets integrieren, darunter:
10
10
11
-
## Integration mit DHTMLX Gantt und Scheduler
11
+
-[Gantt](https://docs.dhtmlx.com/gantt/)
12
+
-[Scheduler](https://docs.dhtmlx.com/scheduler/)
13
+
-[To Do List](https://docs.dhtmlx.com/todolist/)
14
+
15
+
## Gantt und Scheduler {#gantt-and-scheduler}
16
+
17
+
Die folgende Demo bettet ein Kanban-Board neben Gantt- und Scheduler-Ansichten ein:
0 commit comments