Next

i18n/de/docusaurus-plugin-content-docs/current/.sync

@@ -0,0 +1 @@
+f55b2fb6832c9d6955cfb66b8e5734aa93ffa3d3

i18n/de/docusaurus-plugin-content-docs/current/api/methods/js_kanban_parse_method.md

@@ -46,4 +46,4 @@ board.parse({
 
 **Änderungsprotokoll:** Seit Version v1.1 müssen Sie die Startdaten nicht mehr im Konstruktor zurücksetzen, bevor Sie neue Daten parsen.
 
-**Verwandte Artikel:** [Arbeiten mit Daten](guides/working_with_data.md#loading-data-from-local-source)
+**Verwandte Artikel:** [Arbeiten mit Daten](guides/working_with_data.md#load-data-from-a-local-source)

i18n/de/docusaurus-plugin-content-docs/current/guides/customization.md

@@ -6,37 +6,138 @@ description: In der Dokumentation der DHTMLX JavaScript Kanban-Bibliothek erfahr
 
 # Anpassung
 
-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.
+Das Erscheinungsbild und Verhalten von Kanban können Sie mit folgenden Eigenschaften anpassen:
+
+- [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) — Karten mit einer eigenen HTML-Vorlage rendern
+- [`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
+- [`columnShape.headerTemplate`](api/config/js_kanban_columnshape_config.md), [`columnShape.collapsedTemplate`](api/config/js_kanban_columnshape_config.md) — Spaltenheader-Vorlagen ersetzen
+- [`cardShape.css`](api/config/js_kanban_cardshape_config.md), [`columnShape.css`](api/config/js_kanban_columnshape_config.md), [`rowShape.css`](api/config/js_kanban_rowshape_config.md) — CSS-Klassen bedingt anwenden
+- [`items`](api/config/toolbar_items_config.md) — Toolbar-Struktur neu anordnen und eigene Steuerelemente hinzufügen
+- CSS-Variablen — visuelle Stile anpassen (siehe den Abschnitt [Stilisierung](guides/stylization.md))
 
 ## Eigene Karten {#custom-cards}
 
-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:
+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.
+
+Der Callback erhält ein Objekt mit folgenden Parametern:
+
+- `cardFields` — Kartendaten
+- `selected` — ob die Karte ausgewählt ist
+- `dragging` — ob die Karte gerade verschoben wird
+- `cardShape` — Kartenkonfiguration
+
+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.
+
+Das folgende Demo wendet eine eigene Kartenvorlage an:
 
 <iframe src="https://snippet.dhtmlx.com/8rhdq81d?mode=js&tag=kanban" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
 
 ## Eigenes Kontextmenü
 
-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:
+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.
+
+### `cardShape.menu`
+
+Standardmäßig zeigt das Kartenmenü die Optionen **Duplizieren** und **Löschen**. Verfügbare eingebaute Aktions-IDs:
+
+- `"duplicate-card"` — die Karte duplizieren
+- `"delete-card"` — die Karte löschen
+
+### `columnShape.menu`
+
+- `"add-card"` — eine neue Karte zur Spalte hinzufügen
+- `"set-edit"` — die Spalte umbenennen
+- `"move-column:left"`, `"move-column:right"` — die Spalte nach links oder rechts verschieben
+- `"delete-column"` — die Spalte löschen
+
+### `rowShape.menu`
+
+- `"set-edit"` — die Zeile umbenennen
+- `"move-row:up"`, `"move-row:down"` — die Zeile nach oben oder unten verschieben
+- `"delete-row"` — die Zeile löschen
+
+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.
+
+Das folgende Demo wendet ein eigenes Kontextmenü an:
 
 <iframe src="https://snippet.dhtmlx.com/8eo65gr5?mode=js&tag=kanban" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
 
+## Eigene Spaltenheader
+
+Die [`columnShape`](api/config/js_kanban_columnshape_config.md)-Eigenschaft stellt Vorlagen und Verhalten für Spaltenheader bereit:
+
+- [`columnShape.headerTemplate`](api/config/js_kanban_columnshape_config.md) — HTML-Vorlage des Spaltenheaders im ausgeklappten Zustand
+- [`columnShape.collapsedTemplate`](api/config/js_kanban_columnshape_config.md) — HTML-Vorlage des Spaltenheaders im eingeklappten Zustand
+- [`columnShape.fixedHeaders`](api/config/js_kanban_columnshape_config.md) — Spaltenheader beim vertikalen Scrollen einfrieren (Standard: `true`)
+
+Der folgende Codeausschnitt setzt eine eigene Headervorlage mit einem Einklapp-Symbol, einem Label mit Kartenanzahl und einem Menüauslöser:
+
+~~~jsx {5-21}
+new kanban.Kanban("#root", {
+    columns,
+    cards,
+    columnShape: {
+        headerTemplate: kanban.template(({ column, columnState }) => {
+            return `<div class="wx-collapse-icon" data-action="collapse">
+                        <i class="${column.collapsed ? "wxi-angle-right" : "wxi-angle-left"}"></i>
+                    </div>
+                    ${!column.collapsed
+                        ? `<div class="wx-label" data-action="rename">
+                                ${column.label} (${columnState.cardsCount})
+                            </div>
+                            <div class="wx-menu" data-menu-id="${column.id}">
+                                <i class="wxi-dots-h"></i>
+                            </div>`
+                        : ""}`;
+        }),
+        collapsedTemplate: kanban.template(({ column }) => `<div class="wx-collapsed-label">${column.label}</div>`)
+    }
+});
+~~~
+
+:::tip
+Damit `fixedHeaders` wirksam wird, legen Sie eine feste Höhe am Kanban-Container fest, sodass das Board vertikal scrollt.
+:::
+
+## Bedingte CSS-Klassen {#conditional-css-classes}
+
+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:
+
+- [`cardShape.css: (card) => string`](api/config/js_kanban_cardshape_config.md) — Klasse, die auf eine Karte angewendet wird
+- [`columnShape.css: (column, cards) => string`](api/config/js_kanban_columnshape_config.md) — Klasse, die auf eine Spalte angewendet wird
+- [`rowShape.css: (row, cards) => string`](api/config/js_kanban_rowshape_config.md) — Klasse, die auf eine Zeile angewendet wird
+
+Der folgende Codeausschnitt hebt überfällige Karten und gering ausgelastete Spalten hervor:
+
+~~~jsx {5,8}
+new kanban.Kanban("#root", {
+    columns,
+    cards,
+    cardShape: {
+        css: (card) => card.end_date < new Date() ? "overdue" : ""
+    },
+    columnShape: {
+        css: (column, cards) => cards.length < 5 ? "low-load" : ""
+    }
+});
+~~~
+
 ## Eigene Toolbar {#custom-toolbar}
 
-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.
+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:
 
-Im folgenden Beispiel sehen Sie, wie Sie Folgendes anpassen können:
+- ein eingebautes Steuerelement: `"search"`, `"sort"`, `"undo"`, `"redo"`, `"addColumn"`, `"addRow"`, `"spacer"`
+- ein Objekt, das die Suchleiste oder das Sortier-Steuerelement mit eigenen Optionen überschreibt
+- ein eigenes Steuerelement als Zeichenketten-Bezeichner oder als Funktion
 
-- die Reihenfolge der Steuerelemente
-- eine Suchleiste und deren Verhalten
-- ein Sortier-Steuerelement und dessen Verhalten
-- ein eigenes Steuerelement und dessen Verhalten
+Das folgende Demo passt die Reihenfolge der Steuerelemente, die Suchleiste, das Sortier-Steuerelement und ein eigenes Steuerelement an:
 
 <iframe src="https://snippet.dhtmlx.com/s5r5h4ju?mode=js&tag=kanban" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
 
 ## Eigene Stile
 
-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).
+Ä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).
 
-Im folgenden Beispiel sehen Sie, wie Sie eigene Stile auf Kanban anwenden können:
+Das folgende Beispiel wendet eigene Stile auf Kanban an:
 
-<iframe src="https://snippet.dhtmlx.com/oj18xwb5?mode=html&tag=kanban" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
+<iframe src="https://snippet.dhtmlx.com/oj18xwb5?mode=html&tag=kanban" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>

i18n/de/docusaurus-plugin-content-docs/current/guides/initialization.md

@@ -6,49 +6,51 @@ description: In der Dokumentation der DHTMLX JavaScript Kanban-Bibliothek erfahr
 
 # Initialisierung
 
-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:
+Erstellen Sie ein Kanban-Widget auf einer Seite in drei Schritten:
 
-1. [Binden Sie die Kanban-Quelldateien in die Seite ein](#including-source-files).
-2. [Erstellen Sie einen Container für Kanban](#creating-container).
-3. [Initialisieren Sie Kanban mit einem Konstruktor](#initializing-kanban).
+1. [Binden Sie die Quelldateien ein](#include-source-files).
+2. [Erstellen Sie einen Container](#create-a-container).
+3. [Initialisieren Sie Kanban](#initialize-kanban).
 
-## Including source files
+## Include source files
 
-[Laden Sie das Paket herunter](https://dhtmlx.com/docs/products/dhtmlxKanban/download.shtml) und entpacken Sie es in einen Ordner Ihres Projekts.
+[Laden Sie das Paket herunter](https://dhtmlx.com/docs/products/dhtmlxKanban/download.shtml) und entpacken Sie den Inhalt in einen Ordner Ihres Projekts.
 
-Um Kanban zu erstellen, müssen Sie zwei Quelldateien in Ihre Seite einbinden:
+Binden Sie die folgenden Quelldateien in Ihre Seite ein:
 
 - *kanban.js*
 - *kanban.css*
 
-Stellen Sie sicher, dass Sie die korrekten relativen Pfade zu den Quelldateien angeben:
+Geben Sie korrekte relative Pfade zu beiden Dateien an:
 
 ~~~html title="index.html"
 <script type="text/javascript" src="./dist/kanban.js"></script>  
 <link rel="stylesheet" href="./dist/kanban.css">
 ~~~
 
-## Creating container
+## Create a container
 
-Fügen Sie einen Container für Kanban hinzu und geben Sie ihm eine ID, zum Beispiel *"root"*:
+Fügen Sie einen Container für Kanban hinzu und weisen Sie ihm eine ID zu, zum Beispiel `root`:
 
 ~~~jsx title="index.html"
 <div id="root"></div>
 ~~~
 
-Wenn Sie das Widget zusammen mit der *Toolbar* erstellen möchten, müssen Sie dafür einen separaten Container hinzufügen:
+Um das Widget mit einer Toolbar zu erstellen, fügen Sie einen separaten Container für die Toolbar hinzu:
 
 ~~~jsx {1} title="index.html"
 <div id="toolbar"></div> // Container für die Toolbar
 <div id="root"></div> // Container für Kanban
 ~~~
 
-## Initializing Kanban
+## Initialize Kanban
 
-Initialisieren Sie Kanban mit dem **kanban.Kanban**-Konstruktor. Er nimmt zwei Parameter entgegen:
+Initialisieren Sie Kanban mit dem `kanban.Kanban`-Konstruktor. Der Konstruktor nimmt zwei Parameter entgegen:
 
-- einen HTML-Container (die ID des HTML-Containers)
-- ein Objekt mit Konfigurationseigenschaften. [Siehe die vollständige Liste hier](#configuration-properties)
+- einen CSS-Selektor für den HTML-Container (oder das Container-Element selbst)
+- ein Konfigurationsobjekt (siehe die [vollständige Liste der Eigenschaften](#configuration-properties))
+
+Der folgende Code-Ausschnitt erstellt eine Kanban-Instanz:
 
 ~~~jsx title="index.html"
 // Kanban erstellen
@@ -57,35 +59,33 @@ new kanban.Kanban("#root", {
 });
 ~~~
 
-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:
-
-- einen HTML-Container (die ID des HTML-Containers)
-- ein Objekt mit Konfigurationseigenschaften
+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:
 
-~~~jsx {6-8} title="index.html"
+~~~jsx {7} title="index.html"
 // Kanban erstellen
 const board = new kanban.Kanban("#root", {
     // Konfigurationseigenschaften
 });
 
 new kanban.Toolbar("#toolbar", {
-    // Konfigurationseigenschaften
+    api: board.api, // erforderlich: verknüpft die Toolbar-Steuerelemente mit der Kanban-Instanz
+    // weitere Konfigurationseigenschaften
 });
 ~~~
 
 :::info
-Um mehr über die Konfiguration der Toolbar von Kanban zu erfahren, lesen Sie den Abschnitt [**Konfiguration**](guides/configuration.md/#toolbar)
+Weitere Informationen zur Konfiguration der Toolbar finden Sie im Abschnitt [Konfiguration](guides/configuration.md#toolbar).
 :::
 
 ### Configuration properties
 
-:::note
-Die vollständige Liste der Eigenschaften zur Konfiguration von **Kanban** finden Sie [**hier**](api/overview/properties_overview.md). <br/>
-Die vollständige Liste der Eigenschaften zur Konfiguration der **Toolbar von Kanban** finden Sie [**hier**](api/overview/toolbar_properties_overview.md).
-:::
+Die vollständige Konfigurationsreferenz:
+
+- [Übersicht der Kanban-Eigenschaften](api/overview/properties_overview.md) — alle Kanban-Konfigurationseigenschaften
+- [Übersicht der Toolbar-Eigenschaften](api/overview/toolbar_properties_overview.md) — alle Toolbar-Konfigurationseigenschaften
 
 ## Beispiel
 
-In diesem Beispiel sehen Sie, wie **Kanban** mit Anfangsdaten initialisiert wird:
+Der folgende Ausschnitt initialisiert Kanban mit Beispieldaten:
 
-<iframe src="https://snippet.dhtmlx.com/gb50vyip?mode=js&tag=kanban" frameborder="0" class="snippet_iframe" width="100%" height="500"></iframe>
+<iframe src="https://snippet.dhtmlx.com/gb50vyip?mode=js&tag=kanban" frameborder="0" class="snippet_iframe" width="100%" height="500"></iframe>

i18n/de/docusaurus-plugin-content-docs/current/guides/integration.md

@@ -6,12 +6,20 @@ description: Informationen zur Integration finden Sie in der Dokumentation der D
 
 # Integration mit DHTMLX-Widgets
 
-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.
+Sie können DHTMLX Kanban mit anderen DHTMLX-Widgets integrieren, darunter:
 
-## Integration mit DHTMLX Gantt und Scheduler
+- [Gantt](https://docs.dhtmlx.com/gantt/)
+- [Scheduler](https://docs.dhtmlx.com/scheduler/)
+- [To Do List](https://docs.dhtmlx.com/todolist/)
+
+## Gantt und Scheduler {#gantt-and-scheduler}
+
+Die folgende Demo bettet ein Kanban-Board neben Gantt- und Scheduler-Ansichten ein:
 
 <iframe src="https://snippet.dhtmlx.com/i7j5668s?mode=result&tag=kanban" frameborder="0" class="snippet_iframe" width="100%" height="700"></iframe>
 
-## Integration mit DHTMLX To Do List
+## To Do List
+
+Die folgende Demo bettet ein Kanban-Board neben einer To Do List ein:
 
-<iframe src="https://snippet.dhtmlx.com/id05kedo?mode=result&tag=kanban" frameborder="0" class="snippet_iframe" width="100%" height="750"></iframe>
+<iframe src="https://snippet.dhtmlx.com/id05kedo?mode=result&tag=kanban" frameborder="0" class="snippet_iframe" width="100%" height="750"></iframe>