diff --git a/i18n/de/docusaurus-plugin-content-docs/current/.sync b/i18n/de/docusaurus-plugin-content-docs/current/.sync new file mode 100644 index 0000000..0337ab7 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/.sync @@ -0,0 +1 @@ +f55b2fb6832c9d6955cfb66b8e5734aa93ffa3d3 diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/methods/js_kanban_parse_method.md b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/js_kanban_parse_method.md index 9fd3c2e..b5514ec 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/methods/js_kanban_parse_method.md +++ b/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) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/configuration.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/configuration.md index 272e0df..fc81d9f 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/configuration.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/configuration.md @@ -6,74 +6,43 @@ description: In der Dokumentation der DHTMLX JavaScript Kanban-Bibliothek erfahr # Konfiguration -Das Aussehen und die Funktionalität von *Kanban* können Sie über die entsprechende API konfigurieren. Die verfügbaren Parameter ermöglichen es Ihnen: - -- das Erscheinungsbild der Karten über die [`cardShape`](api/config/js_kanban_cardshape_config.md) Eigenschaft zu konfigurieren -- die Editor-Felder über die [`editorShape`](api/config/js_kanban_editorshape_config.md) Eigenschaft zu konfigurieren -- das Verhalten des Editors über die [`editor`](api/config/js_kanban_editor_config.md) Eigenschaft zu konfigurieren -- Rendering und Scrollen über die Eigenschaften [`renderType`](api/config/js_kanban_rendertype_config.md) und [`scrollType`](api/config/js_kanban_scrolltype_config.md) zu konfigurieren -- die Kanban-Historie über die [`history`](api/config/js_kanban_history_config.md) Eigenschaft zu konfigurieren -- das Erscheinungsbild der Karten über die [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) Eigenschaft anzupassen - - *Details finden Sie im Abschnitt [**Customization**](guides/customization.md)!* -- die gewünschte Sprache über die [`locale`](api/config/js_kanban_locale_config.md) Eigenschaft anzuwenden - - *Details finden Sie im Abschnitt [**Localization**](guides/localization.md)!* -- Daten für Karten, Spalten, Zeilen und Verknüpfungen über die entsprechenden Eigenschaften [`cards`](api/config/js_kanban_cards_config.md), [`columns`](api/config/js_kanban_columns_config.md), [`rows`](api/config/js_kanban_rows_config.md) und [`links`](api/config/js_kanban_links_config.md) zu laden - - *Details finden Sie im Abschnitt [**Working with data**](guides/working_with_data.md)!* +Das Aussehen und die Funktionalität von Kanban können Sie mit den folgenden Eigenschaften konfigurieren: -## Karten {#cards} - -Das Kanban-Board besteht aus *Karten*, die auf *Spalten* und *Zeilen* verteilt sind. Sie können das Erscheinungsbild der Karten mit der [`cardShape`](api/config/js_kanban_cardshape_config.md) Konfigurationseigenschaft anpassen. Es gibt mehrere vordefinierte Felder, die Sie in die Kartenvorlage einfügen (oder ausschließen) können, nämlich: - -- eine Kartenbezeichnung über die `label: boolean` Konfiguration -- eine Kartenbeschreibung über die `description: boolean` Konfiguration - - :::tip - Sie können die Felder **label** und **description** jeder Karte über die entsprechenden Eingabefelder des Kanban-Editors verwalten. Wenn Sie diese Felder aktivieren, werden die entsprechenden Eingaben im Editor automatisch angezeigt. Zum Konfigurieren dieser Eingaben können Sie die Typen [**text** und **textarea**](#text-und-textarea-typen) verwenden. - ::: - -- einen Kartenfortschritt über die `progress: boolean` Konfiguration - - :::tip - Sie können das **progress**-Feld jeder Karte über das entsprechende Steuerelement des Kanban-Editors verwalten. Wenn Sie dieses Feld aktivieren, wird das entsprechende Steuerelement im Editor automatisch angezeigt. Zum Konfigurieren dieses Steuerelements können Sie den Typ [**progress**](#progress-typ) verwenden. - ::: - -- ein Startdatum über die `start_date: boolean` Konfiguration -- ein Enddatum über die `end_date: boolean` Konfiguration - - :::tip - Sie können die Felder **start date** und **end date** jeder Karte über die entsprechenden Steuerelemente des Kanban-Editors verwalten. Wenn Sie diese Felder aktivieren, werden die entsprechenden Steuerelemente im Editor automatisch angezeigt. Zum Konfigurieren dieser Steuerelemente können Sie den Typ [**date**](#date-und-daterange-typen) verwenden. - ::: - -- ein Kontextmenü für Karten über die `menu: boolean` Konfiguration -- einen Dateianhang über die `attached: boolean` Konfiguration - - :::tip - Sie können **Dateien an jede Karte anhängen** über das entsprechende Feld des Kanban-Editors. Zum Konfigurieren dieses Feldes können Sie den Typ [**files**](#files-typ) verwenden. - ::: - -- eine Kartenfarbe über die `color: boolean` Konfiguration - - :::tip - Sie können die **obere Farblinie** jeder Karte über das entsprechende Steuerelement des Kanban-Editors verwalten. Wenn Sie **color** aktivieren, wird das entsprechende Steuerelement (*colorpicker*) im Editor automatisch angezeigt. Zum Konfigurieren dieses Steuerelements können Sie den Typ [**color**](#color-typ) verwenden. - ::: - -- ein Karten-Cover (*Vorschaubild*) über die `cover: boolean` Konfiguration -- Kommentare zu einer Karte über die `comments: boolean` Konfiguration -- einen Bestätigungsdialog zum Löschen der Karte über die `confirmDeletion: boolean` Konfiguration -- eine Abstimmungsmöglichkeit über die `votes: boolean | { show: boolean, clicable: true }` Konfiguration -- eine Benutzerzuweisung über die `users: boolean | { show: boolean, values: object, maxCount: number | false }` Konfiguration +- [`cardShape`](api/config/js_kanban_cardshape_config.md) — Erscheinungsbild und integrierte Felder der Karten festlegen +- [`editorShape`](api/config/js_kanban_editorshape_config.md) — Editor-Felder definieren +- [`editor`](api/config/js_kanban_editor_config.md) — Sichtbarkeit, Autosave und Platzierung des Editors steuern +- [`renderType`](api/config/js_kanban_rendertype_config.md), [`scrollType`](api/config/js_kanban_scrolltype_config.md) — Karten-Rendering und Board-Scrollen anpassen +- [`history`](api/config/js_kanban_history_config.md) — Historie der Kartenoperationen verwalten +- [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) — Erscheinungsbild der Karten anpassen (siehe Abschnitt [Customization](guides/customization.md)) +- [`locale`](api/config/js_kanban_locale_config.md) — eine Sprache anwenden (siehe Abschnitt [Localization](guides/localization.md)) +- [`cards`](api/config/js_kanban_cards_config.md), [`columns`](api/config/js_kanban_columns_config.md), [`rows`](api/config/js_kanban_rows_config.md), [`links`](api/config/js_kanban_links_config.md) — Daten für Karten, Spalten, Zeilen und Verknüpfungen laden (siehe Abschnitt [Working with data](guides/working_with_data.md)) - :::tip - Sie können einer Karte einen oder mehrere Benutzer über das entsprechende Steuerelement des Kanban-Editors zuweisen. Zum Konfigurieren des Steuerelements für die Zuweisung eines einzelnen Benutzers verwenden Sie die Typen [**combo** oder **select**](#combo-select-und-multiselect-typen). Für die Zuweisung mehrerer Benutzer nutzen Sie den Typ [**multiselect**](#combo-select-und-multiselect-typen). - ::: +## Karten {#cards} -- eine Kartenpriorität über die `priority: boolean | { show: boolean, values: object }` Konfiguration +Das Kanban-Board besteht aus Karten, die auf Spalten und Zeilen verteilt sind. Verwenden Sie die [`cardShape`](api/config/js_kanban_cardshape_config.md) Eigenschaft, um das Erscheinungsbild und die integrierten Felder der Karten zu konfigurieren: + +- `label: boolean | { show }` — Kartenbezeichnung, bearbeitet mit dem Typ [`text`](#text-und-textarea-typen) +- `description: boolean | { show }` — Kartenbeschreibung, bearbeitet mit dem Typ [`textarea`](#text-und-textarea-typen) +- `progress: boolean | { show }` — Kartenfortschritt, bearbeitet mit dem Typ [`progress`](#progress-typ) +- `start_date: boolean | { show, format }` — Startdatum der Karte, bearbeitet mit dem Typ [`date`](#date-und-daterange-typen) +- `end_date: boolean | { show, format }` — Enddatum der Karte, bearbeitet mit dem Typ [`date`](#date-und-daterange-typen) +- `menu: boolean | { show, items }` — Kontextmenü der Karte +- `attached: boolean | { show }` — Dateianhang der Karte, bearbeitet mit dem Typ [`files`](#files-typ) +- `color: boolean | { show, values }` — obere Farblinie der Karte, bearbeitet mit dem Typ [`color`](#color-typ) +- `cover: boolean | { show }` — Vorschaubild der Karte +- `comments: boolean | { show }` — Kommentare zur Karte +- `confirmDeletion: boolean | { show }` — Bestätigungsdialog zum Löschen der Karte +- `votes: boolean | { show, clickable }` — Abstimmungsmöglichkeit bei der Karte +- `users: boolean | { show, values, maxCount }` — der Karte zugewiesene Benutzer, bearbeitet mit den Typen [`combo`, `select` oder `multiselect`](#combo-select-und-multiselect-typen) +- `priority: boolean | { show, values }` — Kartenpriorität, bearbeitet mit dem Typ [`combo` oder `select`](#combo-select-und-multiselect-typen) +- `css: (card) => string` — Funktion, die eine CSS-Klasse zurückgibt, die bedingt auf eine Karte angewendet wird +- `headerFields: [{ key, label, css }]` — benutzerdefinierte Kartenfelder - :::tip - Sie können die **priority**-Eigenschaft jeder Karte über das entsprechende Steuerelement des Kanban-Editors verwalten. Wenn Sie **priority** aktivieren, wird das entsprechende Steuerelement im Editor automatisch angezeigt. Zum Konfigurieren dieses Steuerelements können Sie nur die Typen [**combo** oder **select**](#combo-select-und-multiselect-typen) verwenden. - ::: +:::tip +Wenn Sie ein Feld in `cardShape` aktivieren, zeigt der Editor das entsprechende Steuerelement automatisch an. Konfigurieren Sie jedes Steuerelement über die [`editorShape`](api/config/js_kanban_editorshape_config.md) Eigenschaft — verfügbare Typen finden Sie unter [Editor](#editor). +::: -- *ein benutzerdefiniertes Feld* über die `headerFields: [ { key: string, label: string, css: string } ]` Konfiguration +Das folgende Code-Beispiel konfiguriert Karten mit benutzerdefinierten Benutzern, Prioritäten und einem benutzerdefinierten Header-Feld: ~~~jsx {12-35,42} const users = [ // Nutzerdaten @@ -122,36 +91,36 @@ new kanban.Kanban("#root", { ~~~ :::note -Sofern Sie keine Karteneinstellungen über die [`cardShape`](api/config/js_kanban_cardshape_config.md) Eigenschaft angeben, verwendet das Widget einen [**defaultCardShape**](api/config/js_kanban_cardshape_config.md#default-config) Parametersatz! +Sofern Sie keine Karteneinstellungen über die [`cardShape`](api/config/js_kanban_cardshape_config.md) Eigenschaft angeben, greift das Widget auf [`defaultCardShape`](api/config/js_kanban_cardshape_config.md#default-config) zurück. ::: ## Editor -:::info -Sie können den Editor als **Seitenleiste** oder **modales Fenster** anzeigen lassen, indem Sie die [`editor.placement`](api/config/js_kanban_editor_config.md) Eigenschaft verwenden! -::: +Der Kanban-Editor enthält Felder zur Verwaltung der Kartendaten. Verwenden Sie die [`editorShape`](api/config/js_kanban_editorshape_config.md) Eigenschaft, um Editor-Felder zu konfigurieren. Folgende Feldtypen stehen zur Verfügung: -Der *Editor* von Kanban besteht aus Feldern zur Verwaltung der Kartendaten. Zum Konfigurieren der Editor-Felder (Steuerelemente) verwenden Sie die [`editorShape`](api/config/js_kanban_editorshape_config.md) Eigenschaft. Folgende Typen von Editor-Feldern stehen zur Verfügung: +- [`combo`, `select`, `multiselect`](#combo-select-und-multiselect-typen) — Dropdown-Optionen +- [`color`](#color-typ) — Farbauswahl +- [`text`, `textarea`](#text-und-textarea-typen) — Texteingaben +- [`progress`](#progress-typ) — Fortschrittsregler +- [`files`](#files-typ) — Datei-Upload +- [`date`, `dateRange`](#date-und-daterange-typen) — einzelnes Datum oder Datumsbereich +- [`comments`](#comments-type) — Kartenkommentare +- [`links`](#links-type) — Kartenverknüpfungen -- [**combo**, **select** und **multiselect**](#combo-select-und-multiselect-typen) -- [**color**](#color-typ) -- [**text** und **textarea**](#text-und-textarea-typen) -- [**progress**](#progress-typ) -- [**files**](#files-typ) -- [**date** und **dataRange**](#date-und-daterange-typen) -- [**comments**](#comments-type) -- [**links**](#links-type) +:::info +Zeigen Sie den Editor als Seitenleiste oder modales Fenster an, indem Sie die [`editor.placement`](api/config/js_kanban_editor_config.md) Eigenschaft verwenden. +::: ### Combo-, Select- und Multiselect-Typen {#combo-select-und-multiselect-typen} -Die Editor-Felder der Typen **combo**, **select** und **multiselect** können wie folgt gesetzt werden: +Das folgende Code-Beispiel konfiguriert ein Dropdown zur Auswahl einer Kartenpriorität: ~~~jsx {3-12} new kanban.Kanban("#root", { editorShape: [ { type: "combo", // oder "select" und "multiselect" - key: "priority", // Der "priority"-Schlüssel wird bei der Konfiguration der "cardShape"-Eigenschaft verwendet + key: "priority", // Den "priority"-Schlüssel in der "cardShape"-Eigenschaft verwenden label: "Priority", values: [ { id: 1, label: "high" }, @@ -165,13 +134,13 @@ new kanban.Kanban("#root", { ~~~ :::info -Für Editor-Felder vom Typ **"multiselect"** und **"combo"** können Sie auch einen Pfad zum Vorschaubild über die Eigenschaft **avatar** angeben: +Für Felder vom Typ `multiselect` und `combo` können Sie über die Eigenschaft `avatar` einen Pfad zum Vorschaubild angeben: ~~~jsx {3,9,13} editorShape: [ { type: "multiselect", // oder "combo" - key: "users", // Der "users"-Schlüssel wird bei der Konfiguration der "cardShape"-Eigenschaft verwendet + key: "users", // Den "users"-Schlüssel in der "cardShape"-Eigenschaft verwenden label: "Users", values: [ { @@ -193,14 +162,14 @@ editorShape: [ ### Color-Typ -Das Editor-Feld vom Typ **color** kann wie folgt gesetzt werden: +Das folgende Code-Beispiel konfiguriert das Editor-Feld zur Auswahl einer Kartenfarbe: ~~~jsx {3-12} new kanban.Kanban("#root", { editorShape: [ { type: "color", - key: "color", // Der "color"-Schlüssel wird bei der Konfiguration der "cardShape"-Eigenschaft verwendet + key: "color", // Den "color"-Schlüssel in der "cardShape"-Eigenschaft verwenden label: "Card color", values: ["#65D3B3", "#FFC975", "#58C3FE"], config: { @@ -215,7 +184,7 @@ new kanban.Kanban("#root", { ### Text- und Textarea-Typen {#text-und-textarea-typen} -Die Editor-Felder der Typen **text** und **textarea** können wie folgt gesetzt werden: +Das folgende Code-Beispiel konfiguriert das Editor-Feld zur Eingabe einer Kartenbezeichnung: ~~~jsx {3-14} new kanban.Kanban("#root", { @@ -239,14 +208,14 @@ new kanban.Kanban("#root", { ### Progress-Typ -Das Editor-Feld vom Typ **progress** kann wie folgt gesetzt werden: +Das folgende Code-Beispiel konfiguriert das Editor-Feld zur Festlegung des Kartenfortschritts: ~~~jsx {3-12} new kanban.Kanban("#root", { editorShape: [ { type: "progress", - key: "progress", // Der "progress"-Schlüssel wird bei der Konfiguration der "cardShape"-Eigenschaft verwendet + key: "progress", // Den "progress"-Schlüssel in der "cardShape"-Eigenschaft verwenden label: "Progress", config: { min: 10, @@ -261,17 +230,19 @@ new kanban.Kanban("#root", { ### Files-Typ -Das Editor-Feld vom Typ **files** kann wie folgt gesetzt werden: +Setzen Sie den Parameter `uploadURL` auf einen String für einen einfachen Upload oder auf eine Funktion für eine benutzerdefinierte Anfrage. #### Upload-URL als String konfigurieren +Das folgende Code-Beispiel verwendet eine String-URL für den Datei-Upload: + ~~~jsx {4-15} const url = "https://docs.dhtmlx.com/kanban-backend"; new kanban.Kanban("#root", { editorShape: [ { type: "files", - key: "attached", // Der "attached"-Schlüssel wird bei der Konfiguration der "cardShape"-Eigenschaft verwendet + key: "attached", // Den "attached"-Schlüssel in der "cardShape"-Eigenschaft verwenden label: "Attachment", uploadURL: url + "/uploads", // URL als String angeben config: { @@ -288,6 +259,8 @@ new kanban.Kanban("#root", { #### Upload-URL als Funktion konfigurieren +Übergeben Sie eine Funktion an `uploadURL`, um benutzerdefinierte Header, Tokens oder eine eigene Antwortverarbeitung hinzuzufügen. Das folgende Code-Beispiel sendet jede Datei mit einem Bearer-Token: + ~~~jsx {9-31} const url = "https://docs.dhtmlx.com/kanban-backend"; new kanban.Kanban("#root", { @@ -326,7 +299,7 @@ new kanban.Kanban("#root", { ### Date- und DateRange-Typen {#date-und-daterange-typen} -Das Editor-Feld vom Typ **date** kann wie folgt gesetzt werden: +Das folgende Code-Beispiel konfiguriert das Editor-Feld für ein einzelnes Datum: ~~~jsx {3-8} new kanban.Kanban("#root", { @@ -342,7 +315,7 @@ new kanban.Kanban("#root", { }); ~~~ -Das Editor-Feld vom Typ **dateRange** kann wie folgt gesetzt werden: +Das folgende Code-Beispiel konfiguriert das Editor-Feld für einen Start-/Enddatumsbereich: ~~~jsx {3-11} new kanban.Kanban("#root", { @@ -363,7 +336,7 @@ new kanban.Kanban("#root", { ### Comments-Typ {#comments-type} -Das Editor-Feld vom Typ **comments** kann wie folgt gesetzt werden: +Das folgende Code-Beispiel konfiguriert das Kommentarfeld des Editors: ~~~jsx {3-13} new kanban.Kanban("#root", { @@ -386,7 +359,7 @@ new kanban.Kanban("#root", { ### Links-Typ {#links-type} -Das Editor-Feld vom Typ **links** kann wie folgt gesetzt werden: +Das folgende Code-Beispiel konfiguriert das Verknüpfungsfeld des Editors: ~~~jsx {3-10} new kanban.Kanban("#root", { @@ -406,8 +379,9 @@ new kanban.Kanban("#root", { ### Editor-Felder an Kartenfelder binden -:::info -Um das Editor-Feld mit dem entsprechenden Kartenfeld zu verbinden, müssen Sie einen speziellen **key** im Objekt der [`editorShape`](api/config/js_kanban_editorshape_config.md) Eigenschaft angeben (`key: "editor_field_key"`). Der Wert dieses Schlüssels muss auf *true* in der [`cardShape`](api/config/js_kanban_cardshape_config.md) Eigenschaft gesetzt werden (für eingebaute Kartenfelder) oder im **headerFields** Array angegeben werden (für benutzerdefinierte Kartenfelder). Sie können die Anfangsdaten jedes Feldes auch über diesen Schlüssel bereitstellen. +Jedes Editor-Feld ist über einen gemeinsamen `key` mit einem Kartenfeld verknüpft. Setzen Sie denselben `key`-Wert im [`editorShape`](api/config/js_kanban_editorshape_config.md)-Eintrag und in der [`cardShape`](api/config/js_kanban_cardshape_config.md) Eigenschaft. Bei integrierten Kartenfeldern setzen Sie den Schlüssel auf `true`. Bei benutzerdefinierten Feldern tragen Sie den Schlüssel im `headerFields`-Array ein. Derselbe Schlüssel liefert auch die Anfangsdaten der Karte. + +Das folgende Code-Beispiel bindet die Editor-Felder `label` und `note` an die entsprechenden Kartenfelder: ~~~jsx {5,13,22,25,33-34,38-39,45-47} // Editor-Einstellungen @@ -434,7 +408,7 @@ const cardShape = { label: true, // Schlüssel eines eingebauten Feldes headerFields: [ { - key: "note", // Schlüssel eines benutzerdefinierten Feldes + key: "note", // Schlüssel eines benutzerdefinierten Feldes label: "Note" } ] @@ -461,18 +435,21 @@ new kanban.Kanban("#root", { // andere Konfigurationsparameter }); ~~~ -::: :::note -Sofern Sie keine Editor-Einstellungen über die [`editorShape`](api/config/js_kanban_editorshape_config.md) Eigenschaft angeben, verwendet das Widget einen [**defaultEditorShape**](api/config/js_kanban_editorshape_config.md#default-config) Parametersatz. In diesem Fall werden die Standard-Steuerelemente und Eingaben im Editor erst angezeigt, nachdem die entsprechenden Felder der Karten über die [`cardShape`](api/config/js_kanban_cardshape_config.md) Eigenschaft aktiviert wurden. +Sofern Sie keine Editor-Einstellungen über die [`editorShape`](api/config/js_kanban_editorshape_config.md) Eigenschaft angeben, greift das Widget auf [`defaultEditorShape`](api/config/js_kanban_editorshape_config.md#default-config) zurück. Die Standard-Steuerelemente und Eingaben werden im Editor erst angezeigt, nachdem Sie die entsprechenden Kartenfelder über die [`cardShape`](api/config/js_kanban_cardshape_config.md) Eigenschaft aktiviert haben. ::: -### Den Editor konfigurieren +### Editor-Verhalten konfigurieren {#configure-editor-behavior} + +Die [`editor`](api/config/js_kanban_editor_config.md) Eigenschaft steuert Sichtbarkeit, Autosave und Platzierung des Editors: -Mit der [`editor`](api/config/js_kanban_editor_config.md) Eigenschaft können Sie den Editor wie folgt konfigurieren: +- [`editor.show`](api/config/js_kanban_editor_config.md) — Editor aktivieren oder deaktivieren +- [`editor.placement`](api/config/js_kanban_editor_config.md) — Editor als `"sidebar"` oder `"modal"`-Fenster anzeigen +- [`editor.autoSave`](api/config/js_kanban_editor_config.md) — Autosave-Modus aktivieren oder deaktivieren +- [`editor.debounce`](api/config/js_kanban_editor_config.md) — Verzögerung vor dem automatischen Speichern (gilt nur mit `autoSave: true`) -- Aktivieren/Deaktivieren des Autosave-Modus des Editors über die *`editor.autoSave`* Eigenschaft -- Angabe einer Verzögerungszeit für das automatische Speichern der Daten über die Eigenschaft *`editor.debounce`* (funktioniert nur mit dem Parameter ***autoSave: true***) +Das folgende Code-Beispiel aktiviert Autosave mit einer Verzögerung von 2 Sekunden: ~~~jsx {6-9} // Kanban erstellen @@ -488,9 +465,53 @@ new kanban.Kanban("#root", { }); ~~~ +## Rendering und Scrollen + +Standardmäßig rendert das Kanban-Widget alle Karten und scrollt das gesamte Board. Bei Boards mit vielen Karten können Sie auf Lazy Rendering oder spaltenweises Scrollen umschalten: + +- [`renderType`](api/config/js_kanban_rendertype_config.md) — auf `"lazy"` setzen, um nur die auf dem Board sichtbaren Karten zu rendern +- [`scrollType`](api/config/js_kanban_scrolltype_config.md) — auf `"column"` setzen, um jede Spalte unabhängig zu scrollen + +Das folgende Code-Beispiel aktiviert Lazy Rendering und spaltenweises Scrollen: + +~~~jsx {5-7} +new kanban.Kanban("#root", { + columns, + cards, + rows, + renderType: "lazy", + scrollType: "column", + cardHeight: 150 +}); +~~~ + +:::important +Wenn Sie `renderType: "lazy"` mit einem beliebigen `scrollType` kombinieren, legen Sie über die [`cardHeight`](api/config/js_kanban_cardheight_config.md) Eigenschaft eine statische Höhe für Karten fest. Ohne `cardHeight` werden Karten beim Lazy Rendering nicht korrekt angezeigt. +::: + +## Änderungsverlauf + +Kanban verfolgt Kartenoperationen und stellt Undo- und Redo-Steuerelemente in der Toolbar bereit. Verwenden Sie die [`history`](api/config/js_kanban_history_config.md) Eigenschaft, um dieses Verhalten zu deaktivieren. + +Das folgende Code-Beispiel deaktiviert die Verlaufsverfolgung: + +~~~jsx {4} +new kanban.Kanban("#root", { + columns, + cards, + history: false +}); +~~~ + +:::tip +Um einzelne Operationen aus dem Verlauf auszuschließen, übergeben Sie den [`$meta`](api/common/js_kanban_meta_parameter.md) Parameter an Methoden oder Events. +::: + ## Toolbar -Die **Toolbar** von Kanban besteht aus einer Suchleiste zum *Suchen von Karten* sowie Steuerelementen zum *Sortieren von Karten* und zum *Hinzufügen neuer Spalten und Zeilen*. Um die Toolbar anzuzeigen, müssen Sie sie in einem separaten Container mit dem **kanban.Toolbar()** Konstruktor initialisieren. +Die Kanban-Toolbar bietet eine Suchleiste, Sortiersteuerelemente sowie Steuerelemente zum Hinzufügen von Spalten und Zeilen. Initialisieren Sie die Toolbar in einem separaten Container mit dem Konstruktor `kanban.Toolbar()`. + +Das folgende Code-Beispiel erstellt eine Toolbar, die an die Kanban-Instanz gebunden ist: ~~~jsx {13} // Kanban erstellen @@ -508,7 +529,7 @@ const board = new kanban.Kanban("#root", { new kanban.Toolbar("#toolbar", { api: board.api }); ~~~ -Sie können die Steuerelemente der Toolbar (*ausblenden/anzeigen/anpassen*) mit der Eigenschaft **items** verwalten: +Verwenden Sie die [`items`](api/config/toolbar_items_config.md) Eigenschaft, um Toolbar-Steuerelemente anzuzeigen, auszublenden oder anzupassen. Das folgende Code-Beispiel setzt eine benutzerdefinierte Suchleiste, Undo- und Redo-Steuerelemente, eine benutzerdefinierte Sortierung sowie Spalten- und Zeilensteuerelemente: ~~~jsx {6-51} // Kanban erstellen @@ -541,8 +562,8 @@ new kanban.Toolbar("#toolbar", { }) }, "spacer", // Leerraum - "undo", // Steuerelement zum Rückgängigmachen von Kartenaktionen in der Historie - "redo", // Steuerelement zum Wiederherstellen von Kartenaktionen in der Historie + "undo", // Kartenaktionen in der Historie rückgängig machen + "redo", // Kartenaktionen in der Historie wiederherstellen { // benutzerdefiniertes Sortier-Steuerelement type: "sort", options: [ @@ -566,11 +587,11 @@ new kanban.Toolbar("#toolbar", { ~~~ :::tip -Um bestimmte Steuerelemente der Toolbar auszublenden, entfernen Sie die entsprechenden Zeichenfolgen aus dem **items** Array. +Entfernen Sie ein Steuerelement aus dem `items`-Array, um es auszublenden. ::: ## Beispiel -In diesem Beispiel sehen Sie, wie Sie **Karten**, **Editor** und **Toolbar** von Kanban konfigurieren können: +Das folgende Beispiel konfiguriert Karten, Editor und Toolbar von Kanban: diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/customization.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/customization.md index 55d51fa..0d6166f 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/customization.md +++ b/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 `
` 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: ## 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: +## 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 `
+ +
+ ${!column.collapsed + ? `
+ ${column.label} (${columnState.cardsCount}) +
+
+ +
` + : ""}`; + }), + collapsedTemplate: kanban.template(({ column }) => `
${column.label}
`) + } +}); +~~~ + +:::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: ## 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: - \ No newline at end of file + diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/initialization.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/initialization.md index 624d9e6..52574bc 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/initialization.md +++ b/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" ~~~ -## 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"
~~~ -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"
// Container für die Toolbar
// 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).
-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: - \ No newline at end of file + diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration.md index b58c46e..2e7cec4 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration.md +++ b/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: -## Integration mit DHTMLX To Do List +## To Do List + +Die folgende Demo bettet ein Kanban-Board neben einer To Do List ein: - \ No newline at end of file + diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md index 8f74078..dccdfa9 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md @@ -7,28 +7,28 @@ description: Erfahren Sie in der Dokumentation der DHTMLX JavaScript Kanban-Bibl # Integration mit Angular :::tip -Sie sollten mit den grundlegenden Konzepten und Mustern von **Angular** vertraut sein, bevor Sie diese Dokumentation lesen. Um Ihr Wissen aufzufrischen, besuchen Sie bitte die [**Angular-Dokumentation**](https://v17.angular.io/docs). +Dieser Leitfaden setzt Kenntnisse der Angular-Konzepte und -Muster voraus. Als Hintergrund empfiehlt sich die [Angular-Dokumentation](https://v17.angular.io/docs). ::: -DHTMLX Kanban ist mit **Angular** kompatibel. Wir haben Codebeispiele vorbereitet, wie Sie DHTMLX Kanban mit **Angular** verwenden können. Siehe auch das zugehörige [**Beispiel auf GitHub**](https://github.com/DHTMLX/angular-kanban-demo). +DHTMLX Kanban ist mit Angular kompatibel. Das vollständige Codebeispiel ist auf [GitHub](https://github.com/DHTMLX/angular-kanban-demo) verfügbar. ## Projekt erstellen :::info -Bevor Sie beginnen, ein neues Projekt zu erstellen, installieren Sie [**Angular CLI**](https://v17.angular.io/cli) und [**Node.js**](https://nodejs.org/en/). +Installieren Sie [Angular CLI](https://v17.angular.io/cli) und [Node.js](https://nodejs.org/en/), bevor Sie das Projekt anlegen. ::: -Erstellen Sie mit Angular CLI ein neues Projekt **my-angular-kanban-app**. Führen Sie diesen Befehl aus: +Der folgende Befehl erstellt ein neues Projekt *my-angular-kanban-app* mit Angular CLI: ~~~json ng new my-angular-kanban-app ~~~ :::note -Wenn Sie dieser Anleitung folgen möchten, deaktivieren Sie bei der Erstellung der neuen Angular-App Server-Side Rendering (SSR) und Static Site Generation (SSG/Prerendering)! +Deaktivieren Sie Server-Side Rendering (SSR) und Static Site Generation (SSG/Prerendering) auf Nachfrage, damit das Projekt mit dieser Anleitung übereinstimmt. ::: -Der Befehl installiert alle notwendigen Tools, sodass keine weiteren Schritte erforderlich sind. +Der Befehl installiert alle notwendigen Tools. Weitere Schritte sind nicht erforderlich. ### Abhängigkeiten installieren @@ -38,48 +38,48 @@ Wechseln Sie in das neu erstellte App-Verzeichnis: cd my-angular-kanban-app ~~~ -Installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver. Verwenden Sie den [**yarn**](https://yarnpkg.com/) Paketmanager: +Installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver mit dem [yarn](https://yarnpkg.com/) Paketmanager: ~~~json yarn yarn start ~~~ -Die App sollte nun lokal laufen (zum Beispiel unter `http://localhost:3000`). +Die App läuft unter einer lokalen Adresse (zum Beispiel `http://localhost:3000`). ## Kanban erstellen -Jetzt benötigen Sie die Quellcodes von DHTMLX Kanban. Stoppen Sie zunächst die App und fahren Sie mit der Installation des Kanban-Pakets fort. +Stoppen Sie den Entwicklungsserver und installieren Sie das Kanban-Paket. ### Schritt 1. Paket installieren -Laden Sie das [**Trial-Kanban-Paket**](/how_to_start/#kanban-mit-npm-oder-yarn-installieren) herunter und folgen Sie den Schritten in der README-Datei. Bitte beachten Sie, dass das Trial-Kanban nur 30 Tage verfügbar ist. - +Laden Sie das [Trial-Kanban-Paket](/how_to_start/#kanban-mit-npm-oder-yarn-installieren) herunter und folgen Sie den Schritten in der README-Datei. Die Trial-Version ist 30 Tage verfügbar. + ### Schritt 2. Komponente erstellen -Erstellen Sie eine Angular-Komponente, um Kanban und Toolbar zur Anwendung hinzuzufügen. Erstellen Sie dazu den Ordner **kanban** im Verzeichnis **src/app/** und fügen Sie darin eine neue Datei **kanban.component.ts** hinzu. +Erstellen Sie eine Angular-Komponente, die Kanban und die Toolbar einbindet. Erstellen Sie den Ordner *src/app/kanban/* und fügen Sie darin eine Datei *kanban.component.ts* hinzu. #### Quellcodedateien importieren -Öffnen Sie **kanban.component.ts** und importieren Sie die Kanban-Quelldateien. Beachten Sie: +Öffnen Sie *kanban.component.ts* und importieren Sie die Kanban-Quelldateien. Der Importpfad hängt von der Paketversion ab: -- Wenn Sie die PRO-Version verwenden und das Kanban-Paket lokal installiert haben, sieht der Importpfad so aus: +- Für die PRO-Version, die aus einem lokalen Ordner installiert wird: ~~~jsx import { Kanban, Toolbar } from 'dhx-kanban-package'; ~~~ -- Wenn Sie die Trial-Version von Kanban verwenden, nutzen Sie diesen Pfad: +- Für die Trial-Version: ~~~jsx import { Kanban, Toolbar } from '@dhx/trial-kanban'; ~~~ -In diesem Tutorial wird die **Trial**-Version von Kanban verwendet. +Dieses Tutorial verwendet die Trial-Version von Kanban. -#### Container festlegen und Kanban mit Toolbar initialisieren +#### Container einrichten und Kanban initialisieren -Um Kanban mit Toolbar auf der Seite einzufügen, müssen Sie Container für Kanban und Toolbar festlegen und diese Komponenten mit den jeweiligen Konstruktoren initialisieren: +Um Kanban mit der Toolbar anzuzeigen, richten Sie zwei Container ein und rufen Sie die Konstruktoren auf. Der folgende Code definiert das Komponenten-Template, referenziert die Container und erstellt die Instanzen: ~~~jsx {1,8-11,15-18,24-31} title="kanban.component.ts" import { Kanban, Toolbar } from '@dhx/trial-kanban'; @@ -124,7 +124,7 @@ export class KanbanComponent implements OnInit, OnDestroy { #### Styles hinzufügen -Um Kanban korrekt darzustellen, müssen Sie die entsprechenden Styles bereitstellen. Erstellen Sie die Datei **kanban.component.css** im Verzeichnis **src/app/kanban/** und fügen Sie die nötigen Styles für Kanban und den Container ein: +Fügen Sie Styles für Kanban und den Container hinzu. Erstellen Sie die Datei *kanban.component.css* im Verzeichnis *src/app/kanban/*: ~~~css title="kanban.component.css" /* Kanban-Styles importieren */ @@ -152,7 +152,7 @@ body{ #### Daten laden -Um Daten in Kanban zu laden, müssen Sie einen Datensatz bereitstellen. Erstellen Sie die Datei **data.ts** im Verzeichnis **src/app/kanban/** und fügen Sie einige Daten hinzu: +Um Kanban mit Daten zu befüllen, stellen Sie einen Datensatz bereit. Erstellen Sie die Datei *data.ts* im Verzeichnis *src/app/kanban/*: ~~~jsx {2,14,37,48} title="data.ts" export function getData() { @@ -206,7 +206,7 @@ export function getData() { } ~~~ -Öffnen Sie dann die Datei ***kanban.component.ts***. Importieren Sie die Datei mit den Daten und fügen Sie die entsprechenden Daten-Eigenschaften im Konfigurationsobjekt von Kanban in der Methode `ngOnInit()` wie unten gezeigt hinzu: +Öffnen Sie *kanban.component.ts*, importieren Sie den Datensatz und übergeben Sie die Dateneigenschaften an das Kanban-Konfigurationsobjekt innerhalb von `ngOnInit()`: ~~~jsx {2,23,25-27} title="kanban.component.ts" import { Kanban, Toolbar } from '@dhx/trial-kanban'; @@ -253,7 +253,7 @@ export class KanbanComponent implements OnInit, OnDestroy { } ~~~ -Sie können auch die [`setConfig()`](/api/methods/js_kanban_setconfig_method/) oder [`parse()`](/api/methods/js_kanban_parse_method/)-Methode innerhalb der `ngOnInit()`-Methode von Angular verwenden, um Daten in Kanban zu laden. Die Methode `setConfig` oder `parse()` ermöglicht das erneute Laden der Daten bei jeder Änderung. +Alternativ können Sie die Daten nach der Instanzerstellung mit [`setConfig()`](/api/methods/js_kanban_setconfig_method/) oder [`parse()`](/api/methods/js_kanban_parse_method/) innerhalb von `ngOnInit()` laden: ~~~jsx {2,23,37-42} title="kanban.component.ts" import { Kanban, Toolbar } from '@dhx/trial-kanban'; @@ -307,13 +307,13 @@ export class KanbanComponent implements OnInit, OnDestroy { } ~~~ -Jetzt ist die Kanban-Komponente einsatzbereit. Wenn das Element zur Seite hinzugefügt wird, wird Kanban mit Daten initialisiert. Sie können zudem die nötigen Konfigurationseinstellungen vornehmen. Besuchen Sie unsere [Kanban API-Dokumentation](/api/overview/properties_overview/), um die vollständige Liste der verfügbaren Eigenschaften zu sehen. +Die Kanban-Komponente ist jetzt einsatzbereit. Wenn das Element gerendert wird, initialisiert sich Kanban mit den Daten. Die vollständige Liste der unterstützten Konfigurationseigenschaften finden Sie in der [Kanban API-Referenz](/api/overview/properties_overview/). #### Ereignisse behandeln -Wenn ein Benutzer eine Aktion in Kanban ausführt, wird ein Ereignis ausgelöst. Sie können diese Ereignisse nutzen, um die Aktion zu erkennen und eigenen Code auszuführen. Die [vollständige Liste der Ereignisse](/api/overview/events_overview/) ist verfügbar. +Benutzeraktionen in Kanban lösen Ereignisse aus. Verwenden Sie Event-Listener, um auf bestimmte Aktionen zu reagieren. Die vollständige Liste finden Sie in der [Kanban-Ereignisreferenz](/api/overview/events_overview/). -Öffnen Sie **kanban.component.ts** und erweitern Sie die Methode `ngOnInit()` beispielsweise so: +Öffnen Sie *kanban.component.ts* und erweitern Sie die Methode `ngOnInit()`: ~~~jsx {5-7} title="kanban.component.ts" // ... @@ -332,7 +332,7 @@ ngOnDestroy(): void { ### Schritt 3. Kanban zur App hinzufügen -Um die ***KanbanComponent***-Komponente zu Ihrer App hinzuzufügen, öffnen Sie ***src/app/app.component.ts*** und ersetzen Sie den Standardcode durch: +Um die `KanbanComponent` in der App zu registrieren, öffnen Sie *src/app/app.component.ts* und ersetzen Sie den Standardcode: ~~~jsx {5} title="app.component.ts" import { Component } from "@angular/core"; @@ -346,7 +346,7 @@ export class AppComponent { } ~~~ -Erstellen Sie im Verzeichnis ***src/app/*** die Datei ***app.module.ts*** und deklarieren Sie die *KanbanComponent* wie folgt: +Erstellen Sie *app.module.ts* im Verzeichnis *src/app/* und deklarieren Sie die `KanbanComponent`: ~~~jsx {4-5,8} title="app.module.ts" import { NgModule } from "@angular/core"; @@ -363,7 +363,7 @@ import { KanbanComponent } from "./kanban/kanban.component"; export class AppModule {} ~~~ -Öffnen Sie abschließend ***src/main.ts*** und ersetzen Sie den Inhalt durch: +Öffnen Sie *src/main.ts* und ersetzen Sie den vorhandenen Code: ~~~jsx title="main.ts" import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; @@ -373,14 +373,14 @@ platformBrowserDynamic() .catch((err) => console.error(err)); ~~~ -Danach können Sie die App starten und Kanban mit Daten auf einer Seite sehen. +Starten Sie die App, um das befüllte Kanban-Board auf der Seite anzuzeigen. import trial from '@site/static/img/trial_kanban.png'; Kanban mit Angular -Jetzt wissen Sie, wie Sie DHTMLX Kanban mit Angular integrieren. Sie können den Code für Ihre Anforderungen anpassen. Das vollständige, erweiterte Beispiel finden Sie auf [**GitHub**](https://github.com/DHTMLX/angular-kanban-demo). +Das vollständige Projekt finden Sie auf [GitHub](https://github.com/DHTMLX/angular-kanban-demo). diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_react.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_react.md index 5c219f5..c14b790 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_react.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_react.md @@ -7,18 +7,18 @@ description: Erfahren Sie in der Dokumentation der DHTMLX JavaScript Kanban-Bibl # Integration mit React :::tip -Bevor Sie diese Dokumentation lesen, sollten Sie mit den grundlegenden Konzepten und Mustern von [**React**](https://react.dev) vertraut sein. Besuchen Sie zur Auffrischung bitte die [**React Dokumentation**](https://react.dev/learn). +Dieser Leitfaden setzt Kenntnisse der grundlegenden Konzepte und Muster von [React](https://react.dev) voraus. Zur Auffrischung lesen Sie bitte die [React Dokumentation](https://react.dev/learn). ::: -DHTMLX Kanban ist mit **React** kompatibel. Wir haben Codebeispiele vorbereitet, wie Sie DHTMLX Kanban mit **React** verwenden können. Weitere Informationen finden Sie im entsprechenden [**Beispiel auf GitHub**](https://github.com/DHTMLX/react-kanban-demo). +DHTMLX Kanban ist mit React kompatibel. Das vollständige Codebeispiel ist auf [GitHub](https://github.com/DHTMLX/react-kanban-demo) verfügbar. ## Ein Projekt erstellen :::info -Installieren Sie vor dem Erstellen eines neuen Projekts [**Vite**](https://vite.dev/) (optional) und [**Node.js**](https://nodejs.org/en/). +Installieren Sie vor dem Erstellen eines neuen Projekts [Vite](https://vite.dev/) (optional) und [Node.js](https://nodejs.org/en/). ::: -Sie können ein Standard-**React**-Projekt erstellen oder **React mit Vite** verwenden. Nennen wir das Projekt **my-react-kanban-app**: +Erstellen Sie ein Standard-React-Projekt (oder React mit Vite). Nennen Sie das Projekt *my-react-kanban-app*: ~~~json npx create-react-app my-react-kanban-app @@ -32,61 +32,61 @@ Wechseln Sie in das neu erstellte App-Verzeichnis: cd my-react-kanban-app ~~~ -Installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver mit einem Paketmanager: +Installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver mit einem der folgenden Paketmanager: -- Wenn Sie [**yarn**](https://yarnpkg.com/) verwenden, führen Sie Folgendes aus: +- Für [yarn](https://yarnpkg.com/): ~~~json yarn yarn start ~~~ -- Wenn Sie [**npm**](https://www.npmjs.com/) verwenden, führen Sie Folgendes aus: +- Für [npm](https://www.npmjs.com/): ~~~json npm install npm run dev ~~~ -Die App sollte nun auf einem lokalen Server laufen (z.B. `http://localhost:3000`). +Die App läuft unter einer lokalen Adresse (z.B. `http://localhost:3000`). ## Kanban erstellen -Nun sollten Sie den Quellcode von DHTMLX Kanban erhalten. Beenden Sie zunächst die App und installieren Sie das Kanban-Paket. +Beenden Sie den Entwicklungsserver und installieren Sie das Kanban-Paket. ### Schritt 1. Paket installieren -Laden Sie das [**Trial-Kanban-Paket**](/how_to_start/#kanban-mit-npm-oder-yarn-installieren) herunter und befolgen Sie die Schritte in der README-Datei. Beachten Sie, dass die Testversion von Kanban nur 30 Tage verfügbar ist. +Laden Sie das [Trial-Kanban-Paket](/how_to_start/#kanban-mit-npm-oder-yarn-installieren) herunter und befolgen Sie die Schritte in der README-Datei. Die Testversion ist 30 Tage verfügbar. ### Schritt 2. Komponente erstellen -Jetzt müssen Sie eine React-Komponente erstellen, um ein Kanban zum Projekt hinzuzufügen. Erstellen Sie eine neue Datei im Verzeichnis ***src/*** und nennen Sie sie ***Kanban.jsx***. +Erstellen Sie eine React-Komponente, die Kanban zur Anwendung hinzufügt. Legen Sie eine neue Datei im Verzeichnis *src/* an und nennen Sie sie *Kanban.jsx*. #### Quelldateien importieren -Öffnen Sie die Datei ***Kanban.jsx*** und importieren Sie die Kanban-Quelldateien. Beachten Sie dabei: +Öffnen Sie *Kanban.jsx* und importieren Sie die Kanban-Quelldateien. Die Importpfade hängen von der Paketversion ab: -- Wenn Sie die PRO-Version nutzen und das Kanban-Paket aus einem lokalen Ordner installiert haben, sehen die Importpfade wie folgt aus: +- Für die PRO-Version, die aus einem lokalen Ordner installiert wurde: ~~~jsx title="Kanban.jsx" import { Kanban, Toolbar } from 'dhx-kanban-package'; import 'dhx-kanban-package/dist/kanban.css'; ~~~ -Beachten Sie, dass je nach verwendetem Paket die Quelldateien minifiziert sein können. In diesem Fall stellen Sie sicher, dass Sie die CSS-Datei als ***kanban.min.css*** importieren. +Wenn das Paket minifizierte Quelldateien enthält, importieren Sie die CSS-Datei als *kanban.min.css*. -- Wenn Sie die Testversion von Kanban verwenden, geben Sie folgende Pfade an: +- Für die Testversion: ~~~jsx title="Kanban.jsx" import { Kanban, Toolbar } from '@dhx/trial-kanban'; import "@dhx/trial-kanban/dist/kanban.css"; ~~~ -In diesem Tutorial sehen Sie, wie Sie die **Testversion** von Kanban konfigurieren. +Dieses Tutorial verwendet die Testversion von Kanban. -#### Container einrichten und Kanban mit Toolbar hinzufügen +#### Container einrichten und Kanban initialisieren -Um Kanban mit Toolbar auf der Seite anzuzeigen, müssen Sie Container für Kanban und Toolbar anlegen und diese mit den entsprechenden Konstruktoren initialisieren: +Um Kanban mit der Toolbar anzuzeigen, erstellen Sie zwei Container und rufen Sie die Konstruktoren auf. Der folgende Code-Ausschnitt verbindet Refs und instanziiert die Komponenten innerhalb von `useEffect()`: ~~~jsx {2,6-7,10-11,13-17} title="Kanban.jsx" import { useEffect, useRef } from "react"; @@ -122,10 +122,10 @@ export default function KanbanComponent(props) { #### Stile hinzufügen -Damit Kanban korrekt angezeigt wird, müssen Sie die wichtigsten Stile für Kanban und seinen Container in der Haupt-CSS-Datei des Projekts festlegen: +Fügen Sie die Stile für Kanban und den Container in der Haupt-CSS-Datei hinzu: ~~~css title="index.css" -/* Stile für die Startseite festlegen */ +/* specify styles for initial page */ html, body, #root { @@ -134,13 +134,13 @@ body, margin: 0; } -/* Stile für Kanban- und Toolbar-Container */ +/* specify styles for Kanban and Toolbar container */ .component_container { height: 100%; margin: 0 auto; } -/* Stile für Kanban-Container */ +/* specify styles for Kanban container */ .widget { height: calc(100% - 56px); } @@ -148,7 +148,7 @@ body, #### Daten laden -Um Daten in das Kanban zu laden, müssen Sie einen Datensatz bereitstellen. Sie können die Datei ***data.js*** im Verzeichnis ***src/*** anlegen und einige Daten hinzufügen: +Um Kanban mit Daten zu befüllen, stellen Sie einen Datensatz bereit. Erstellen Sie die Datei *data.js* im Verzeichnis *src/*: ~~~jsx {2,14,37,48} title="data.js" export function getData() { @@ -202,7 +202,7 @@ export function getData() { } ~~~ -Öffnen Sie dann ***App.js*** und importieren Sie die Daten. Danach können Sie die Daten per **props** an die neue ``-Komponente übergeben: +Öffnen Sie *App.js*, importieren Sie den Datensatz und übergeben Sie die Werte per props an die neue ``-Komponente: ~~~jsx {2,5-6} title="App.js" import Kanban from "./Kanban"; @@ -216,7 +216,7 @@ function App() { export default App; ~~~ -Öffnen Sie ***Kanban.jsx*** und wenden Sie die übergebenen **props** auf das Kanban-Konfigurationsobjekt an: +Öffnen Sie *Kanban.jsx* und wenden Sie die props auf das Kanban-Konfigurationsobjekt an: ~~~jsx {5,11-13} title="Kanban.jsx" import { useEffect, useRef } from "react"; @@ -254,7 +254,7 @@ export default function KanbanComponent(props) { } ~~~ -Sie können auch die [`setConfig()`](/api/methods/js_kanban_setconfig_method/)- oder [`parse()`](/api/methods/js_kanban_parse_method/)-Methode innerhalb der `useEffect()`-Methode von React verwenden, um Daten in Kanban zu laden. Die `setConfig`- oder `parse()`-Methode ermöglicht das Neuladen der Daten bei jeder vorgenommenen Änderung. +Alternativ können Sie Daten nach dem Erstellen der Instanz mit [`setConfig()`](/api/methods/js_kanban_setconfig_method/) oder [`parse()`](/api/methods/js_kanban_parse_method/) innerhalb von `useEffect()` laden: ~~~jsx {9-11,27} title="Kanban.jsx" import { useEffect, useRef } from "react"; @@ -265,9 +265,9 @@ export default function KanbanComponent(props) { let kanban_container = useRef(); let toolbar_container = useRef(); - let columns = props.columns; // Daten für Spalten - let cards = props.cards; // Daten für Karten - let rows = props.rows; // Daten für Zeilen + let columns = props.columns; + let cards = props.cards; + let rows = props.rows; useEffect(() => { const kanban = new Kanban(kanban_container.current, { @@ -299,13 +299,13 @@ export default function KanbanComponent(props) { } ~~~ -Nun ist die Kanban-Komponente einsatzbereit. Wenn das Element zur Seite hinzugefügt wird, wird Kanban mit Daten initialisiert. Sie können auch weitere Konfigurationseinstellungen vornehmen. Besuchen Sie unsere [Kanban API-Dokumentation](/api/overview/properties_overview/), um die vollständige Liste der verfügbaren Eigenschaften zu sehen. +Die Kanban-Komponente ist nun einsatzbereit. Wenn das Element gerendert wird, initialisiert sich Kanban mit den Daten. Die vollständige Liste der unterstützten Konfigurationseigenschaften finden Sie in der [Kanban API-Referenz](/api/overview/properties_overview/). #### Ereignisse behandeln -Wenn ein Benutzer eine Aktion im Kanban ausführt, wird ein Ereignis ausgelöst. Sie können diese Ereignisse nutzen, um die Aktion zu erkennen und den gewünschten Code auszuführen. Sehen Sie sich die [vollständige Liste der Ereignisse](/api/overview/events_overview/) an. +Benutzeraktionen in Kanban lösen Ereignisse aus. Lauschen Sie auf Ereignisse, um auf bestimmte Aktionen zu reagieren. Die vollständige Liste finden Sie in der [Kanban Ereignisreferenz](/api/overview/events_overview/). -Öffnen Sie ***Kanban.jsx*** und ergänzen Sie die `useEffect()`-Methode wie folgt: +Öffnen Sie *Kanban.jsx* und erweitern Sie den `useEffect()`-Aufruf: ~~~jsx {5-7} title="Kanban.jsx" // ... @@ -323,14 +323,14 @@ useEffect(() => { // ... ~~~ -Danach können Sie die App starten, um Kanban mit Daten auf einer Seite zu sehen. +Starten Sie die App, um das befüllte Kanban-Board auf der Seite anzuzeigen. import trial from '@site/static/img/trial_kanban.png'; Kanban mit React -Jetzt wissen Sie, wie Sie DHTMLX Kanban mit React integrieren können. Sie können den Code nach Ihren spezifischen Anforderungen anpassen. Das endgültige, erweiterte Beispiel finden Sie auf [**GitHub**](https://github.com/DHTMLX/react-kanban-demo). +Das vollständige Projekt finden Sie auf [GitHub](https://github.com/DHTMLX/react-kanban-demo). diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_salesforce.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_salesforce.md index 0642877..d7a0e31 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_salesforce.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_salesforce.md @@ -7,49 +7,49 @@ description: Erfahren Sie, wie Sie DHTMLX Kanban in Salesforce integrieren. Dies # Integration mit Salesforce :::tip -Sie sollten mit den grundlegenden Konzepten und Mustern von [**Salesforce**](https://www.salesforce.com/) vertraut sein, bevor Sie diese Dokumentation lesen. Um Ihr Wissen aufzufrischen, lesen Sie bitte die [**Salesforce-Dokumentation**](https://developer.salesforce.com/docs). +Diese Anleitung setzt Kenntnisse der [Salesforce](https://www.salesforce.com/)-Konzepte und -Muster voraus. Hintergrundinformationen finden Sie in der [Salesforce-Dokumentation](https://developer.salesforce.com/docs). ::: -DHTMLX Kanban ist mit der [Salesforce](https://www.salesforce.com/) Plattform kompatibel. Wir haben Codebeispiele vorbereitet, die zeigen, wie Sie DHTMLX Kanban in die Salesforce-Umgebung einbinden können. Weitere Informationen finden Sie im entsprechenden [Beispiel auf GitHub](https://github.com/DHTMLX/salesforce-lwc-demo). +DHTMLX Kanban ist mit der [Salesforce](https://www.salesforce.com/) Plattform kompatibel. Das vollständige Codebeispiel ist auf [GitHub](https://github.com/DHTMLX/salesforce-lwc-demo) verfügbar. :::note -Das JavaScript Kanban-Widget erkennt automatisch, wenn es innerhalb einer [**Salesforce**](https://www.salesforce.com/) Umgebung ausgeführt wird und konfiguriert die Integrationslogik intern. In den meisten Fällen müssen Sie keine [**Salesforce-spezifischen Methoden**](#salesforce-spezifische-methoden) manuell aufrufen. +Das Kanban-Widget erkennt die Salesforce-Umgebung und konfiguriert die Integrationslogik intern. In den meisten Fällen müssen Sie keine [Salesforce-spezifischen Methoden](#salesforce-spezifische-methoden) manuell aufrufen. ::: -## Vorbereitung der Umgebung +## Umgebung vorbereiten -Wenn Sie Kanban in Ihr Salesforce-Projekt einbinden möchten, müssen Sie den *Root*-Container mit dem HTML-Attribut `data-wx-root="true"` versehen. Dieses Attribut ermöglicht es der Bibliothek, den Hauptknoten für das Mounten der **Kanban**- und **Toolbar**-Widgets zu finden. +Um Kanban in ein Salesforce-Projekt einzubinden, versehen Sie den *Root*-Container mit dem HTML-Attribut `data-wx-root="true"`. Die Bibliothek verwendet dieses Attribut, um den Hauptknoten für das Mounten von Kanban und der Toolbar zu finden: -```html title="kanban.html" +~~~html title="kanban.html" -``` +~~~ -Verschachtelte Elemente mit dem Attribut `data-wx-portal-root="1"` dienen als Container für DHTMLX-Komponenten (zum Beispiel **Toolbar** und **Kanban**). +Verschachtelte Elemente mit dem Attribut `data-wx-portal-root="1"` dienen als Container für die DHTMLX-Komponenten (Toolbar, Kanban). ## Salesforce-Umgebungs-API -DHTMLX Kanban enthält die Hilfsklasse `salesForceEnv`, die Methoden für die manuelle Steuerung der Salesforce-Umgebung bereitstellt. Sie können die Hilfsklasse `salesForceEnv` wie folgt importieren: +DHTMLX Kanban stellt die Hilfsklasse `salesForceEnv` mit Methoden für die manuelle Steuerung der Salesforce-Umgebung bereit. Importieren Sie die Hilfsklasse wie folgt: -```jsx {4} +~~~jsx {4} import { Kanban, Toolbar, salesForceEnv } from "@dhx/trial-kanban"; -``` +~~~ :::note -Normalerweise sind Salesforce-spezifische Methoden nicht erforderlich, sie stehen aber als Fallback zur Verfügung, falls die automatische Erkennung fehlschlägt. +Salesforce-spezifische Methoden sind in der Regel nicht erforderlich. Verwenden Sie sie als Fallback, wenn die automatische Erkennung fehlschlägt. ::: ### Salesforce-spezifische Methoden -Sie können die folgenden Methoden der Hilfsklasse `salesForceEnv` verwenden: +Die Hilfsklasse `salesForceEnv` stellt die folgenden Methoden bereit: | Methode | Beschreibung | | :------------------------------------------------------------- | :-------------------------------------------------------------------------- | @@ -57,7 +57,9 @@ Sie können die folgenden Methoden der Hilfsklasse `salesForceEnv` verwenden: | `salesForceEnv.addGlobalEvent(eventName, handler, htmlElement)`| Hängt ein globales Event an das erste verfügbare HTML-Element an | | `salesForceEnv.getTopNode()` | Gibt das erste verfügbare HTML-Element innerhalb der Salesforce-DOM-Hierarchie zurück | -```jsx {4,7} +Das folgende Code-Snippet importiert die Hilfsklasse und führt die Erkennung durch: + +~~~jsx {4,7} import { Kanban, Toolbar, @@ -65,7 +67,7 @@ import { } from "@dhx/trial-kanban"; salesForceEnv.detect(); -``` +~~~ ### Zusätzlich exportierte Funktion @@ -73,7 +75,9 @@ salesForceEnv.detect(); | :-------------------- | :--------------------------------------------------------------------------------- | | `enableSalesForce()` | Setzt die Salesforce-Umgebung manuell, wenn die automatische Erkennung nicht verfügbar ist | -```jsx {5,8} +Das folgende Code-Snippet importiert `enableSalesForce()` und erzwingt die Salesforce-Umgebung: + +~~~jsx {5,8} import { Kanban, Toolbar, @@ -82,18 +86,20 @@ import { } from "@dhx/trial-kanban"; enableSalesForce(); -``` +~~~ ## Arbeitsablauf -1. Fügen Sie das Attribut `data-wx-root="true"` zu Ihrem LWC-Container hinzu -2. Importieren und initialisieren Sie DHTMLX Kanban und optional die Toolbar -3. Das JavaScript Kanban-Widget erkennt automatisch den Salesforce-Kontext und wendet die interne Konfiguration an -4. Sie müssen die Funktion `enableSalesForce()` oder Methoden von `salesForceEnv` nur dann aufrufen, wenn Ihre App in einem nicht standardmäßigen Einbettungsszenario läuft +1. Fügen Sie das Attribut `data-wx-root="true"` zu Ihrem LWC-Container hinzu. +2. Importieren und initialisieren Sie Kanban und die Toolbar (die Toolbar ist optional). +3. Kanban erkennt den Salesforce-Kontext und wendet die interne Konfiguration automatisch an. +4. Verzichten Sie auf den Aufruf von `enableSalesForce()` und die Methoden von `salesForceEnv`, sofern die App nicht in einem nicht standardmäßigen Einbettungsszenario ausgeführt wird. ### Beispiel -```jsx title="kanban.js" +Das folgende Code-Snippet initialisiert Kanban und die Toolbar innerhalb einer LWC-Komponente: + +~~~jsx title="kanban.js" import { Kanban, Toolbar } from "@dhx/trial-kanban"; import "@dhx/trial-kanban/dist/kanban.css"; @@ -105,6 +111,6 @@ export default class KanbanLWC { const toolbar = new Toolbar(toolbar_container, { api: kanban.api }); } } -``` +~~~ -Nun ist die DHTMLX Kanban-Komponente vollständig in Ihre **Salesforce Lightning**-Umgebung integriert. Das Widget übernimmt automatisch die DOM-Hierarchie und das Event-Binding innerhalb von LWC. Sie können Kanban weiterhin über die Standard-API konfigurieren sowie das Erscheinungsbild und die Logik von Kanban nach den Anforderungen Ihres Projekts anpassen. Das vollständige Beispiel finden Sie auf [**GitHub**](https://github.com/DHTMLX/salesforce-lwc-demo). \ No newline at end of file +DHTMLX Kanban ist nun in die Salesforce Lightning-Umgebung integriert. Das Widget übernimmt die DOM-Hierarchie und das Event-Binding innerhalb von LWC. Konfigurieren Sie Kanban weiterhin über die Standard-API, um das Erscheinungsbild und das Verhalten anzupassen. Das vollständige Beispiel ist auf [GitHub](https://github.com/DHTMLX/salesforce-lwc-demo) verfügbar. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md index 723dc70..35b4c39 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md @@ -7,74 +7,71 @@ description: In der Dokumentation der DHTMLX JavaScript Kanban-Bibliothek erfahr # Integration mit Svelte :::tip -Sie sollten mit den grundlegenden Konzepten und Mustern von **Svelte** vertraut sein, bevor Sie diese Dokumentation lesen. Um Ihr Wissen aufzufrischen, besuchen Sie bitte die [**Svelte documentation**](https://svelte.dev/docs/svelte/overview). +Diese Anleitung setzt Kenntnisse der Svelte-Konzepte und -Muster voraus. Zur Einführung siehe die [Svelte documentation](https://svelte.dev/docs/svelte/overview). ::: -DHTMLX Kanban ist mit **Svelte** kompatibel. Wir haben Codebeispiele vorbereitet, wie Sie DHTMLX Kanban mit **Svelte** verwenden können. Weitere Informationen finden Sie im entsprechenden [**Example on GitHub**](https://github.com/DHTMLX/svelte-kanban-demo). +DHTMLX Kanban ist mit Svelte kompatibel. Das vollständige Codebeispiel ist auf [GitHub](https://github.com/DHTMLX/svelte-kanban-demo) verfügbar. -## Ein Projekt erstellen +## Projekt erstellen :::info -Bevor Sie mit der Erstellung eines neuen Projekts beginnen, installieren Sie [**Vite**](https://vite.dev/) (optional) und [**Node.js**](https://nodejs.org/en/). +Installieren Sie [Vite](https://vite.dev/) (optional) und [Node.js](https://nodejs.org/en/), bevor Sie das Projekt erstellen. ::: -Es gibt mehrere Möglichkeiten, ein **Svelte**-Projekt zu erstellen: +Richten Sie ein Svelte-Projekt auf eine der folgenden Arten ein: -- Sie können [**SvelteKit**](https://kit.svelte.dev/) verwenden - -oder - -- Sie können auch **Svelte mit Vite** (aber ohne SvelteKit) nutzen: +- mit [SvelteKit](https://kit.svelte.dev/) — empfohlen +- mit Svelte und Vite (ohne SvelteKit) — führen Sie aus: ~~~json npm create vite@latest ~~~ -Weitere Details finden Sie im [related article](https://svelte.dev/docs/svelte/overview). +Weitere Details finden Sie in der [Svelte documentation](https://svelte.dev/docs/svelte/overview). -### Installation der Abhängigkeiten +### Abhängigkeiten installieren -Nennen wir das Projekt **my-svelte-kanban-app** und wechseln Sie in das App-Verzeichnis: +Nennen Sie das Projekt *my-svelte-kanban-app*. Wechseln Sie in das App-Verzeichnis: ~~~json cd my-svelte-kanban-app ~~~ -Installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver. Verwenden Sie dazu einen Paketmanager: +Installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver mit einem der folgenden Paketmanager: -- Wenn Sie [**yarn**](https://yarnpkg.com/) verwenden, führen Sie folgende Befehle aus: +- Für [yarn](https://yarnpkg.com/): ~~~json yarn yarn start ~~~ -- Wenn Sie [**npm**](https://www.npmjs.com/) verwenden, führen Sie folgende Befehle aus: +- Für [npm](https://www.npmjs.com/): ~~~json npm install npm run dev ~~~ -Die App sollte nun auf localhost laufen (zum Beispiel `http://localhost:3000`). +Die App läuft unter einer localhost-Adresse (zum Beispiel `http://localhost:3000`). ## Kanban erstellen -Jetzt sollten Sie den DHTMLX Kanban-Quellcode besorgen. Stoppen Sie zunächst die App und fahren Sie mit der Installation des Kanban-Pakets fort. +Stoppen Sie den Entwicklungsserver und installieren Sie das Kanban-Paket. -### Schritt 1. Paketinstallation +### Schritt 1. Paket installieren -Laden Sie das [**trial Kanban package**](/how_to_start/#kanban-mit-npm-oder-yarn-installieren) herunter und folgen Sie den im README aufgeführten Schritten. Beachten Sie, dass die Testversion von Kanban nur 30 Tage verfügbar ist. +Laden Sie das [trial Kanban package](/how_to_start/#kanban-mit-npm-oder-yarn-installieren) herunter und folgen Sie den im README aufgeführten Schritten. Die Testversion ist 30 Tage lang verfügbar. -### Schritt 2. Komponentenerstellung +### Schritt 2. Komponente erstellen -Nun müssen Sie eine Svelte-Komponente erstellen, um ein Kanban mit Toolbar zur Anwendung hinzuzufügen. Erstellen Sie eine neue Datei im ***src/***-Verzeichnis und nennen Sie sie ***Kanban.svelte***. +Erstellen Sie eine Svelte-Komponente, die Kanban und die Toolbar einbindet. Fügen Sie eine neue Datei *Kanban.svelte* im Verzeichnis *src/* hinzu. -#### Importieren der Quelldateien +#### Quelldateien importieren -Öffnen Sie die ***Kanban.svelte***-Datei und importieren Sie die Kanban-Quelldateien. Beachten Sie dabei: +Öffnen Sie *Kanban.svelte* und importieren Sie die Kanban-Quelldateien. Die Importpfade hängen von der Paketversion ab: -- Wenn Sie die PRO-Version verwenden und das Kanban-Paket aus einem lokalen Ordner installieren, sehen die Importpfade wie folgt aus: +- Für die PRO-Version, die aus einem lokalen Ordner installiert wird: ~~~html title="Kanban.svelte" ~~~ -Beachten Sie, dass die Quelldateien, abhängig vom verwendeten Paket, minifiziert sein können. Stellen Sie in diesem Fall sicher, dass Sie die CSS-Datei als **kanban.min.css** importieren. +Wenn das Paket minifizierte Quelldateien enthält, importieren Sie die CSS-Datei als *kanban.min.css*. -- Wenn Sie die Testversion von Kanban nutzen, geben Sie folgende Pfade an: +- Für die Testversion: ~~~html title="Kanban.svelte" ~~~ -In diesem Tutorial sehen Sie, wie Sie die **trial**-Version von Kanban konfigurieren. +In diesem Tutorial wird die Testversion von Kanban verwendet. -#### Container setzen und Kanban mit Toolbar hinzufügen +#### Container einrichten und Kanban initialisieren -Um Kanban mit Toolbar auf der Seite anzuzeigen, müssen Sie Container für Kanban und Toolbar erstellen und diese Komponenten mit den entsprechenden Konstruktoren initialisieren: +Um Kanban mit der Toolbar anzuzeigen, erstellen Sie zwei Container und rufen Sie die Konstruktoren auf. Der folgende Code-Ausschnitt bindet die Container und instanziiert die Komponenten innerhalb von `onMount()`: ~~~html {3,6,10-11,13-17,27-28} title="Kanban.svelte" ~~~ -Danach können Sie die App starten, um Kanban mit Daten auf der Seite zu sehen. +Starten Sie die App, um das befüllte Kanban-Board auf der Seite anzuzeigen. import trial from '@site/static/img/trial_kanban.png'; Kanban mit Svelte -Nun wissen Sie, wie Sie DHTMLX Kanban mit Svelte integrieren können. Sie können den Code an Ihre spezifischen Anforderungen anpassen. Das finale, erweiterte Beispiel finden Sie auf [**GitHub**](https://github.com/DHTMLX/svelte-kanban-demo). +Das vollständige Projekt finden Sie auf [GitHub](https://github.com/DHTMLX/svelte-kanban-demo). diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md index cd79553..e1456d2 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md @@ -7,26 +7,26 @@ description: Erfahren Sie in der Dokumentation der DHTMLX JavaScript Kanban-Bibl # Integration mit Vue :::tip -Bevor Sie diese Dokumentation lesen, sollten Sie mit den grundlegenden Konzepten und Mustern von [**Vue**](https://vuejs.org/) vertraut sein. Um Ihr Wissen aufzufrischen, lesen Sie bitte die [**Vue 3-Dokumentation**](https://vuejs.org/guide/introduction.html#getting-started). +Dieser Leitfaden setzt Kenntnisse der grundlegenden Konzepte und Muster von [Vue](https://vuejs.org/) voraus. Als Hintergrundlektüre empfiehlt sich die [Vue 3-Dokumentation](https://vuejs.org/guide/introduction.html#getting-started). ::: -DHTMLX Kanban ist mit **Vue** kompatibel. Wir haben Codebeispiele vorbereitet, wie Sie DHTMLX Kanban mit **Vue 3** verwenden können. Weitere Informationen finden Sie im entsprechenden [**Beispiel auf GitHub**](https://github.com/DHTMLX/vue-kanban-demo). +DHTMLX Kanban ist mit Vue kompatibel. Das vollständige Codebeispiel für Vue 3 ist auf [GitHub](https://github.com/DHTMLX/vue-kanban-demo) verfügbar. ## Projekt erstellen :::info -Bevor Sie mit der Erstellung eines neuen Projekts beginnen, installieren Sie [**Node.js**](https://nodejs.org/en/). +Installieren Sie [Node.js](https://nodejs.org/en/) vor der Erstellung des Projekts. ::: -Um ein **Vue**-Projekt zu erstellen, führen Sie den folgenden Befehl aus: +Mit folgendem Befehl wird ein neues Vue-Projekt erstellt: ~~~json npm create vue@latest ~~~ -Dieser Befehl installiert und führt `create-vue` aus, das offizielle **Vue**-Projekt-Scaffolding-Tool. Details finden Sie im [Vue.js Quick Start](https://vuejs.org/guide/quick-start.html#creating-a-vue-application). +Der Befehl führt `create-vue` aus, das offizielle Vue-Projekt-Scaffolding-Tool. Details finden Sie im [Vue.js Quick Start](https://vuejs.org/guide/quick-start.html#creating-a-vue-application). -Nennen wir das Projekt **my-vue-kanban-app**. +Nennen Sie das Projekt *my-vue-kanban-app*. ### Installation der Abhängigkeiten @@ -36,41 +36,41 @@ Wechseln Sie in das App-Verzeichnis: cd my-vue-kanban-app ~~~ -Installieren Sie die Abhängigkeiten und starten Sie den Dev-Server. Verwenden Sie dazu einen Paketmanager: +Installieren Sie die Abhängigkeiten und starten Sie den Dev-Server mit einem der folgenden Paketmanager: -- Wenn Sie [**yarn**](https://yarnpkg.com/) verwenden, führen Sie folgende Befehle aus: +- Für [yarn](https://yarnpkg.com/): ~~~jsx yarn yarn start // oder yarn dev ~~~ -- Wenn Sie [**npm**](https://www.npmjs.com/) verwenden, führen Sie folgende Befehle aus: +- Für [npm](https://www.npmjs.com/): ~~~json npm install npm run dev ~~~ -Die App sollte auf localhost laufen (zum Beispiel `http://localhost:3000`). +Die App läuft unter einer localhost-Adresse (zum Beispiel `http://localhost:3000`). ## Kanban erstellen -Nun sollten Sie den DHTMLX Kanban-Quellcode erhalten. Stoppen Sie zuerst die App und fahren Sie mit der Installation des Kanban-Pakets fort. +Stoppen Sie den Dev-Server und installieren Sie das Kanban-Paket. -### Schritt 1. Paketinstallation +### Schritt 1. Paket installieren -Laden Sie das [**Test-Kanban-Paket**](/how_to_start/#kanban-mit-npm-oder-yarn-installieren) herunter und folgen Sie den im README beschriebenen Schritten. Beachten Sie, dass die Testversion von Kanban nur 30 Tage verfügbar ist. +Laden Sie das [Test-Kanban-Paket](/how_to_start/#kanban-mit-npm-oder-yarn-installieren) herunter und folgen Sie den Schritten in der README-Datei. Die Testversion ist 30 Tage lang verfügbar. -### Schritt 2. Komponentenerstellung +### Schritt 2. Komponente erstellen -Nun müssen Sie eine Vue-Komponente erstellen, um Kanban mit Toolbar in die Anwendung einzufügen. Erstellen Sie eine neue Datei im Verzeichnis ***src/components/*** und nennen Sie sie ***Kanban.vue***. +Erstellen Sie eine Vue-Komponente, die Kanban und die Toolbar einbindet. Fügen Sie eine neue Datei *Kanban.vue* im Verzeichnis *src/components/* hinzu. #### Quellcode importieren -Öffnen Sie die Datei ***Kanban.vue*** und importieren Sie die Kanban-Quellcodes. Beachten Sie dabei: +Öffnen Sie *Kanban.vue* und importieren Sie die Kanban-Quellcodes. Die Import-Pfade hängen von der Paketversion ab: -- Wenn Sie die PRO-Version verwenden und das Kanban-Paket aus einem lokalen Ordner installieren, sehen die Import-Pfade wie folgt aus: +- Für die PRO-Version, die aus einem lokalen Ordner installiert wird: ~~~html title="Kanban.vue" ~~~ -Beachten Sie, dass die Quellcodes je nach verwendetem Paket minifiziert sein können. In diesem Fall stellen Sie sicher, dass Sie die CSS-Datei als **kanban.min.css** importieren. +Wenn das Paket minifizierte Quellcodes enthält, importieren Sie die CSS-Datei als *kanban.min.css*. -- Wenn Sie die Testversion von Kanban verwenden, geben Sie folgende Pfade an: +- Für die Testversion: ~~~html title="Kanban.vue" ~~~ -In diesem Tutorial sehen Sie, wie Sie die **Testversion** von Kanban konfigurieren. +Dieses Tutorial verwendet die Testversion von Kanban. -#### Container setzen und Kanban mit Toolbar hinzufügen +#### Container einrichten und Kanban initialisieren -Um Kanban mit Toolbar auf der Seite anzuzeigen, müssen Sie Container für Kanban und Toolbar erstellen und diese Komponenten mit den entsprechenden Konstruktoren initialisieren: +Um Kanban mit der Toolbar anzuzeigen, erstellen Sie zwei Container und rufen Sie die Konstruktoren auf. Der folgende Code-Ausschnitt verbindet Refs und instanziiert die Komponenten innerhalb von `mounted()`: ~~~html {2,7-8,10-14} title="Kanban.vue" ~~~ -## 컨테이너 생성하기 +## Create a container -Kanban을 위한 컨테이너를 추가하고, 예를 들어 *"root"*와 같은 ID를 지정하세요. +Kanban을 위한 컨테이너를 추가하고, 예를 들어 `root`와 같은 ID를 지정하세요. ~~~jsx title="index.html"
~~~ -*Toolbar*와 함께 위젯을 생성하려면, 별도의 컨테이너도 추가해야 합니다. +Toolbar와 함께 위젯을 생성하려면, Toolbar를 위한 별도의 컨테이너도 추가하세요. ~~~jsx {1} title="index.html" -
// Toolbar용 컨테이너 -
// Kanban용 컨테이너 +
// container for Toolbar +
// container for Kanban ~~~ -## Kanban 초기화하기 +## Initialize Kanban -**kanban.Kanban** 생성자를 사용해 Kanban을 초기화합니다. 이 생성자는 두 개의 파라미터를 받습니다. +`kanban.Kanban` 생성자를 사용해 Kanban을 초기화합니다. 생성자는 두 개의 파라미터를 받습니다. -- HTML 컨테이너 (HTML 컨테이너의 ID) -- 설정 속성이 포함된 객체. [전체 속성 목록 보기](#설정-속성) +- HTML 컨테이너의 CSS 선택자 (또는 컨테이너 요소 자체) +- 설정 객체 ([전체 속성 목록](#configuration-properties) 참고) + +다음 코드 스니펫은 Kanban 인스턴스를 생성합니다. ~~~jsx title="index.html" // Kanban 생성 @@ -57,35 +59,33 @@ new kanban.Kanban("#root", { }); ~~~ -*Toolbar*와 함께 위젯을 생성하려면, **kanban.Toolbar** 생성자를 별도로 사용해 초기화해야 합니다. 이 생성자도 두 개의 파라미터를 받습니다. - -- HTML 컨테이너 (HTML 컨테이너의 ID) -- 설정 속성이 포함된 객체 +Toolbar와 함께 위젯을 생성하려면, `kanban.Toolbar` 생성자를 사용해 Toolbar를 별도로 초기화하세요. Toolbar 컨트롤은 [`api`](api/config/toolbar_api_config.md) 파라미터를 통해 Kanban 인스턴스와 연동됩니다. `board.api`를 전달하여 Toolbar를 보드에 연결하세요. -~~~jsx {6-8} title="index.html" +~~~jsx {7} title="index.html" // Kanban 생성 const board = new kanban.Kanban("#root", { // 설정 속성 }); new kanban.Toolbar("#toolbar", { - // 설정 속성 + api: board.api, // required: links Toolbar controls to the Kanban instance + // other configuration properties }); ~~~ :::info -Kanban의 Toolbar 구성에 대해 더 자세히 알고 싶다면 [**Configuration**](guides/configuration.md/#toolbar) 섹션을 참고하세요. +Toolbar 구성에 대한 자세한 내용은 [Configuration](guides/configuration.md#toolbar) 섹션을 참고하세요. ::: -### 설정 속성 +### Configuration properties -:::note -**Kanban**의 전체 설정 속성 목록은 [**여기**](api/overview/properties_overview.md)에서 확인할 수 있습니다.
-**Kanban의 Toolbar** 설정 속성 전체 목록은 [**여기**](api/overview/toolbar_properties_overview.md)에서 확인할 수 있습니다. -::: +전체 설정 레퍼런스는 다음을 참고하세요. + +- [Kanban properties overview](api/overview/properties_overview.md) — 전체 Kanban 설정 속성 +- [Toolbar properties overview](api/overview/toolbar_properties_overview.md) — 전체 Toolbar 설정 속성 ## 예제 -아래 코드 스니펫에서는 초기 데이터와 함께 **Kanban**을 초기화하는 방법을 확인할 수 있습니다. +다음 스니펫은 샘플 데이터와 함께 Kanban을 초기화합니다. - \ No newline at end of file + diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration.md index 3575131..bb965d7 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration.md @@ -6,12 +6,20 @@ description: DHTMLX JavaScript Kanban 라이브러리의 문서에서 통합 방 # DHTMLX 위젯과의 통합 -DHTMLX Kanban은 다른 DHTMLX 위젯(예: [Gantt](https://docs.dhtmlx.com/gantt/), [Scheduler](https://docs.dhtmlx.com/scheduler/), [To Do List](https://docs.dhtmlx.com/todolist/))과 통합하여 사용할 수 있습니다. 아래 예제를 참고하세요. +DHTMLX Kanban은 다음과 같은 다른 DHTMLX 위젯과 통합하여 사용할 수 있습니다: -## DHTMLX Gantt 및 Scheduler와의 통합 +- [Gantt](https://docs.dhtmlx.com/gantt/) +- [Scheduler](https://docs.dhtmlx.com/scheduler/) +- [To Do List](https://docs.dhtmlx.com/todolist/) + +## Gantt and Scheduler {#gantt-and-scheduler} + +다음 데모는 Gantt 및 Scheduler 뷰와 함께 Kanban 보드를 임베드한 예제입니다: -## DHTMLX To Do List와의 통합 +## To Do List + +다음 데모는 To Do List와 함께 Kanban 보드를 임베드한 예제입니다: - \ No newline at end of file + diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md index 872612e..ed27f06 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md @@ -7,18 +7,18 @@ description: DHTMLX JavaScript Kanban 라이브러리의 문서에서 Angular와 # Angular와의 통합 :::tip -이 문서를 읽기 전에 **Angular**의 기본 개념과 패턴에 익숙해야 합니다. 지식을 다시 확인하려면 [**Angular documentation**](https://v17.angular.io/docs)을 참고하세요. +이 가이드는 Angular의 개념과 패턴에 익숙하다고 가정합니다. 기본 내용은 [Angular documentation](https://v17.angular.io/docs)을 참고하세요. ::: -DHTMLX Kanban은 **Angular**와 호환됩니다. DHTMLX Kanban을 **Angular**에서 사용하는 방법에 대한 코드 예제가 준비되어 있습니다. 자세한 내용은 [**GitHub의 예제**](https://github.com/DHTMLX/angular-kanban-demo)를 참고하세요. +DHTMLX Kanban은 Angular와 호환됩니다. 전체 코드 예제는 [GitHub](https://github.com/DHTMLX/angular-kanban-demo)에서 확인할 수 있습니다. ## 프로젝트 생성 :::info -새 프로젝트를 생성하기 전에 [**Angular CLI**](https://v17.angular.io/cli)와 [**Node.js**](https://nodejs.org/en/)를 설치하세요. +프로젝트를 생성하기 전에 [Angular CLI](https://v17.angular.io/cli)와 [Node.js](https://nodejs.org/en/)를 설치하세요. ::: -Angular CLI를 사용하여 **my-angular-kanban-app** 프로젝트를 생성합니다. 아래 명령어를 실행하세요: +아래 명령어를 실행하면 Angular CLI로 새 *my-angular-kanban-app* 프로젝트가 생성됩니다: ~~~json ng new my-angular-kanban-app @@ -28,7 +28,7 @@ ng new my-angular-kanban-app 이 가이드를 따르려면, 새 Angular 앱을 생성할 때 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG/Prerendering)을 비활성화하세요! ::: -위 명령어는 필요한 모든 도구를 설치하므로 추가 명령어를 실행할 필요가 없습니다. +위 명령어는 필요한 모든 도구를 설치합니다. 추가 명령어를 실행할 필요가 없습니다. ### 의존성 설치 @@ -38,48 +38,48 @@ ng new my-angular-kanban-app cd my-angular-kanban-app ~~~ -의존성을 설치하고 개발 서버를 시작합니다. [**yarn**](https://yarnpkg.com/) 패키지 관리자를 사용하세요: +[yarn](https://yarnpkg.com/) 패키지 관리자로 의존성을 설치하고 개발 서버를 시작하세요: ~~~json yarn yarn start ~~~ -앱은 로컬호스트(예: `http://localhost:3000`)에서 실행됩니다. +앱은 로컬호스트 주소(예: `http://localhost:3000`)에서 실행됩니다. ## Kanban 생성 -이제 DHTMLX Kanban 소스 코드를 받아야 합니다. 먼저 앱을 중지하고 Kanban 패키지를 설치하세요. +개발 서버를 중지하고 Kanban 패키지를 설치하세요. ### 1단계. 패키지 설치 [**평가판 Kanban 패키지**](/how_to_start/#installing-kanban-via-npm-or-yarn)를 다운로드하고, README 파일에 안내된 단계를 따르세요. 평가판 Kanban은 30일간만 사용 가능합니다. - + ### 2단계. 컴포넌트 생성 -이제 Angular 컴포넌트를 생성하여 Kanban과 Toolbar를 애플리케이션에 추가해야 합니다. **src/app/** 디렉토리에 **kanban** 폴더를 만들고, 그 안에 **kanban.component.ts** 파일을 추가하세요. +Kanban과 Toolbar를 마운트하는 Angular 컴포넌트를 생성하세요. *src/app/kanban/* 폴더를 만들고 그 안에 *kanban.component.ts* 파일을 추가하세요. #### 소스 파일 임포트 -**kanban.component.ts** 파일을 열고 Kanban 소스 파일을 임포트하세요. 참고: +*kanban.component.ts* 파일을 열고 Kanban 소스 파일을 임포트하세요. 임포트 경로는 패키지 버전에 따라 다릅니다: -- PRO 버전을 사용하고 Kanban 패키지를 로컬 폴더에서 설치한 경우, 임포트 경로는 다음과 같습니다: +- 로컬 폴더에서 설치한 PRO 버전의 경우: ~~~jsx import { Kanban, Toolbar } from 'dhx-kanban-package'; ~~~ -- 평가판 Kanban을 사용하는 경우, 아래 경로를 명시하세요: +- 평가판 버전의 경우: ~~~jsx import { Kanban, Toolbar } from '@dhx/trial-kanban'; ~~~ -이 튜토리얼에서는 **평가판** Kanban의 구성 방법을 안내합니다. +이 튜토리얼에서는 평가판 Kanban을 사용합니다. -#### 컨테이너 설정 및 Toolbar와 함께 Kanban 초기화 +#### 컨테이너 설정 및 Kanban 초기화 -페이지에 Kanban과 Toolbar를 표시하려면, Kanban과 Toolbar의 컨테이너를 설정하고 해당 생성자를 사용하여 컴포넌트를 초기화해야 합니다: +Toolbar와 함께 Kanban을 표시하려면 두 개의 컨테이너를 설정하고 생성자를 호출하세요. 아래 코드 스니펫은 컴포넌트 템플릿을 정의하고, 컨테이너를 참조하며, 인스턴스를 생성합니다: ~~~jsx {1,8-11,15-18,24-31} title="kanban.component.ts" import { Kanban, Toolbar } from '@dhx/trial-kanban'; @@ -124,7 +124,7 @@ export class KanbanComponent implements OnInit, OnDestroy { #### 스타일 추가 -Kanban이 올바르게 표시되도록 관련 스타일을 지정해야 합니다. **src/app/kanban/** 디렉토리에 **kanban.component.css** 파일을 생성하고 Kanban 및 컨테이너에 필요한 스타일을 지정하세요: +Kanban과 컨테이너에 스타일을 추가하세요. *src/app/kanban/* 디렉토리에 *kanban.component.css* 파일을 생성하세요: ~~~css title="kanban.component.css" /* Kanban 스타일 임포트 */ @@ -152,7 +152,7 @@ body{ #### 데이터 로딩 -Kanban에 데이터를 추가하려면 데이터 세트를 제공해야 합니다. **src/app/kanban/** 디렉토리에 **data.ts** 파일을 생성하고 데이터를 추가하세요: +Kanban에 데이터를 채우려면 데이터 세트를 제공하세요. *src/app/kanban/* 디렉토리에 *data.ts* 파일을 생성하세요: ~~~jsx {2,14,37,48} title="data.ts" export function getData() { @@ -206,7 +206,7 @@ export function getData() { } ~~~ -이제 ***kanban.component.ts*** 파일을 열고, 데이터를 임포트한 다음 Kanban의 설정 객체에 데이터 속성을 `ngOnInit()` 메서드 내에서 지정하세요: +*kanban.component.ts* 파일을 열고 데이터 세트를 임포트한 다음, `ngOnInit()` 내부의 Kanban 설정 객체에 데이터 속성을 전달하세요: ~~~jsx {2,23,25-27} title="kanban.component.ts" import { Kanban, Toolbar } from '@dhx/trial-kanban'; @@ -253,7 +253,7 @@ export class KanbanComponent implements OnInit, OnDestroy { } ~~~ -또한 Angular의 `ngOnInit()` 메서드 내에서 [`setConfig()`](/api/methods/js_kanban_setconfig_method/) 또는 [`parse()`](/api/methods/js_kanban_parse_method/) 메서드를 사용해 Kanban에 데이터를 로드할 수 있습니다. `setConfig` 또는 `parse()` 메서드는 적용된 변경마다 데이터 리로딩을 제공합니다. +또는 `ngOnInit()` 내부에서 인스턴스 생성 후 [`setConfig()`](/api/methods/js_kanban_setconfig_method/) 또는 [`parse()`](/api/methods/js_kanban_parse_method/)를 사용하여 데이터를 로드할 수 있습니다: ~~~jsx {2,23,37-42} title="kanban.component.ts" import { Kanban, Toolbar } from '@dhx/trial-kanban'; @@ -307,13 +307,13 @@ export class KanbanComponent implements OnInit, OnDestroy { } ~~~ -이제 Kanban 컴포넌트를 사용할 준비가 되었습니다. 요소가 페이지에 추가되면 데이터와 함께 Kanban이 초기화됩니다. 필요한 구성 설정도 제공할 수 있습니다. 사용 가능한 전체 속성 목록은 [Kanban API docs](/api/overview/properties_overview/)를 참고하세요. +이제 Kanban 컴포넌트를 사용할 준비가 되었습니다. 요소가 렌더링되면 데이터와 함께 Kanban이 초기화됩니다. 지원되는 전체 구성 속성 목록은 [Kanban API 레퍼런스](/api/overview/properties_overview/)를 참고하세요. #### 이벤트 처리 -사용자가 Kanban에서 어떤 동작을 하면 이벤트가 발생합니다. 이러한 이벤트를 활용하여 동작을 감지하고 원하는 코드를 실행할 수 있습니다. [이벤트 전체 목록](/api/overview/events_overview/)을 확인하세요. +Kanban에서 사용자 동작이 발생하면 이벤트가 트리거됩니다. 이벤트를 수신하여 특정 동작에 반응할 수 있습니다. 전체 목록은 [Kanban 이벤트 레퍼런스](/api/overview/events_overview/)를 참고하세요. -**kanban.component.ts** 파일을 열고 아래와 같이 `ngOnInit()` 메서드를 완성하세요: +*kanban.component.ts* 파일을 열고 `ngOnInit()` 메서드를 확장하세요: ~~~jsx {5-7} title="kanban.component.ts" // ... @@ -332,7 +332,7 @@ ngOnDestroy(): void { ### 3단계. Kanban을 앱에 추가 -***KanbanComponent***를 앱에 추가하려면, ***src/app/app.component.ts*** 파일을 열고 아래 코드로 교체하세요: +앱에 `KanbanComponent`를 등록하려면 *src/app/app.component.ts* 파일을 열고 기본 코드를 교체하세요: ~~~jsx {5} title="app.component.ts" import { Component } from "@angular/core"; @@ -346,7 +346,7 @@ export class AppComponent { } ~~~ -그 다음, ***src/app/*** 디렉토리에 ***app.module.ts*** 파일을 만들고 *KanbanComponent*를 아래와 같이 지정하세요: +*src/app/* 디렉토리에 *app.module.ts* 파일을 생성하고 `KanbanComponent`를 선언하세요: ~~~jsx {4-5,8} title="app.module.ts" import { NgModule } from "@angular/core"; @@ -363,7 +363,7 @@ import { KanbanComponent } from "./kanban/kanban.component"; export class AppModule {} ~~~ -마지막으로, ***src/main.ts*** 파일을 열고 기존 코드를 아래와 같이 교체하세요: +*src/main.ts* 파일을 열고 기존 코드를 교체하세요: ~~~jsx title="main.ts" import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; @@ -373,14 +373,14 @@ platformBrowserDynamic() .catch((err) => console.error(err)); ~~~ -이제 앱을 시작하면 Kanban이 데이터와 함께 페이지에 표시됩니다. +앱을 실행하면 페이지에 데이터가 채워진 Kanban 보드가 표시됩니다. import trial from '@site/static/img/trial_kanban.png'; Kanban with Angular -이제 DHTMLX Kanban을 Angular와 통합하는 방법을 알게 되었습니다. 필요에 따라 코드를 자유롭게 커스터마이즈할 수 있습니다. 최종 고급 예제는 [**GitHub**](https://github.com/DHTMLX/angular-kanban-demo)에서 확인할 수 있습니다. +전체 프로젝트는 [GitHub](https://github.com/DHTMLX/angular-kanban-demo)에서 확인할 수 있습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_react.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_react.md index 46447c9..d3e4cec 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_react.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_react.md @@ -7,18 +7,18 @@ description: DHTMLX JavaScript Kanban 라이브러리의 문서에서 React와 # React와의 통합 :::tip -이 문서를 읽기 전에 [**React**](https://react.dev)의 기본 개념과 패턴에 익숙해야 합니다. 지식이 필요하다면 [**React 문서**](https://react.dev/learn)를 참고하세요. +이 가이드는 [React](https://react.dev)의 개념과 패턴에 익숙하다는 것을 전제로 합니다. 배경 지식이 필요하다면 [React 문서](https://react.dev/learn)를 참고하세요. ::: -DHTMLX Kanban은 **React**와 호환됩니다. DHTMLX Kanban을 **React**에서 사용하는 방법에 대한 코드 예제를 준비해두었습니다. 더 자세한 내용은 [**GitHub의 예제**](https://github.com/DHTMLX/react-kanban-demo)를 참고하세요. +DHTMLX Kanban은 React와 호환됩니다. 전체 코드 예제는 [GitHub](https://github.com/DHTMLX/react-kanban-demo)에서 확인할 수 있습니다. ## 프로젝트 생성 :::info -새 프로젝트를 만들기 전에 [**Vite**](https://vite.dev/) (선택 사항)와 [**Node.js**](https://nodejs.org/en/)를 설치하세요. +프로젝트를 만들기 전에 [Vite](https://vite.dev/) (선택 사항)와 [Node.js](https://nodejs.org/en/)를 설치하세요. ::: -기본 **React** 프로젝트를 생성하거나 **Vite와 함께 React**를 사용할 수 있습니다. 프로젝트 이름은 **my-react-kanban-app**으로 지정하겠습니다: +기본 React 프로젝트(또는 Vite와 함께 React)를 생성하세요. 프로젝트 이름은 *my-react-kanban-app*으로 지정합니다: ~~~json npx create-react-app my-react-kanban-app @@ -32,84 +32,84 @@ npx create-react-app my-react-kanban-app cd my-react-kanban-app ~~~ -의존성을 설치하고 개발 서버를 시작하세요. 패키지 매니저를 사용합니다: +패키지 매니저 중 하나를 사용하여 의존성을 설치하고 개발 서버를 시작하세요: -- [**yarn**](https://yarnpkg.com/)을 사용하는 경우, 다음 명령어를 실행하세요: +- [yarn](https://yarnpkg.com/)의 경우: ~~~json yarn yarn start ~~~ -- [**npm**](https://www.npmjs.com/)을 사용하는 경우, 다음 명령어를 실행하세요: +- [npm](https://www.npmjs.com/)의 경우: ~~~json npm install npm run dev ~~~ -앱이 로컬호스트(예: `http://localhost:3000`)에서 실행되어야 합니다. +앱이 로컬호스트 주소(예: `http://localhost:3000`)에서 실행됩니다. ## Kanban 생성 -이제 DHTMLX Kanban 소스 코드를 받아야 합니다. 먼저 앱을 중지하고 Kanban 패키지를 설치합니다. +개발 서버를 중지하고 Kanban 패키지를 설치하세요. ### 1단계. 패키지 설치 -[**평가판 Kanban 패키지**](/how_to_start/#installing-kanban-via-npm-or-yarn)를 다운로드하고 README 파일의 지침을 따르세요. 평가판 Kanban은 30일 동안만 사용할 수 있습니다. +[평가판 Kanban 패키지](/how_to_start/#installing-kanban-via-npm-or-yarn)를 다운로드하고 README 파일의 지침을 따르세요. 평가판은 30일 동안 사용할 수 있습니다. ### 2단계. 컴포넌트 생성 -이제 React 컴포넌트를 만들어 애플리케이션에 Kanban을 추가해야 합니다. ***src/*** 디렉터리에 새 파일을 만들고 이름을 ***Kanban.jsx***로 지정하세요. +애플리케이션에 Kanban을 추가하는 React 컴포넌트를 생성하세요. *src/* 디렉터리에 새 파일을 추가하고 이름을 *Kanban.jsx*로 지정하세요. #### 소스 파일 가져오기 -***Kanban.jsx*** 파일을 열고 Kanban 소스 파일을 import 하세요. 다음 사항에 유의하세요: +*Kanban.jsx*를 열고 Kanban 소스 파일을 import 하세요. import 경로는 패키지 버전에 따라 다릅니다: -- PRO 버전을 사용하고 Kanban 패키지를 로컬 폴더에서 설치한 경우, import 경로는 다음과 같습니다: +- 로컬 폴더에서 설치한 PRO 버전의 경우: ~~~jsx title="Kanban.jsx" import { Kanban, Toolbar } from 'dhx-kanban-package'; import 'dhx-kanban-package/dist/kanban.css'; ~~~ -사용하는 패키지에 따라 소스 파일이 minify 되어 있을 수 있습니다. 이 경우 CSS 파일을 ***kanban.min.css***로 import하는지 확인하세요. +패키지에 minify된 소스 파일이 포함된 경우, CSS 파일을 *kanban.min.css*로 import하세요. -- Kanban 평가판을 사용하는 경우, 다음 경로를 지정하세요: +- 평가판의 경우: ~~~jsx title="Kanban.jsx" import { Kanban, Toolbar } from '@dhx/trial-kanban'; import "@dhx/trial-kanban/dist/kanban.css"; ~~~ -이 튜토리얼에서는 **평가판** Kanban을 구성하는 방법을 설명합니다. +이 튜토리얼에서는 Kanban 평가판을 사용합니다. -#### 컨테이너 설정 및 Kanban과 Toolbar 추가 +#### 컨테이너 설정 및 Kanban 초기화 -페이지에 Kanban과 Toolbar를 표시하려면 Kanban과 Toolbar를 위한 컨테이너를 만들고, 해당 생성자를 사용하여 컴포넌트를 초기화해야 합니다: +Kanban과 Toolbar를 표시하려면 두 개의 컨테이너를 만들고 생성자를 호출하세요. 다음 코드 스니펫은 ref를 연결하고 `useEffect()` 내에서 컴포넌트를 인스턴스화합니다: ~~~jsx {2,6-7,10-11,13-17} title="Kanban.jsx" import { useEffect, useRef } from "react"; import { Kanban, Toolbar } from '@dhx/trial-kanban'; -import '@dhx/trial-kanban/dist/kanban.css'; // Kanban 스타일 포함 +import '@dhx/trial-kanban/dist/kanban.css'; // include Kanban styles export default function KanbanComponent(props) { - let toolbar_container = useRef(); // Toolbar용 컨테이너 초기화 - let kanban_container = useRef(); // Kanban용 컨테이너 초기화 + let toolbar_container = useRef(); // initialize container for Toolbar + let kanban_container = useRef(); // initialize container for Kanban useEffect(() => { - // Kanban 컴포넌트 초기화 + // initialize the Kanban component const kanban = new Kanban(kanban_container.current, {}); - // Toolbar 컴포넌트 초기화 + // initialize the Toolbar component const toolbar = new Toolbar(toolbar_container.current, { - api: kanban.api, // Kanban 내부 API 제공 - // 기타 설정 속성 + api: kanban.api, // provide Kanban inner API + // other configuration properties }); return () => { - kanban.destructor(); // Kanban 해제 - toolbar.destructor(); // Toolbar 해제 + kanban.destructor(); // destroy Kanban + toolbar.destructor(); // destroy Toolbar }; }, []); @@ -122,10 +122,10 @@ export default function KanbanComponent(props) { #### 스타일 추가 -Kanban이 올바르게 표시되도록, 프로젝트의 메인 css 파일에 Kanban 및 컨테이너에 대한 주요 스타일을 지정해야 합니다: +메인 CSS 파일에 Kanban과 컨테이너에 대한 스타일을 추가하세요: ~~~css title="index.css" -/* 초기 페이지 스타일 지정 */ +/* specify styles for initial page */ html, body, #root { @@ -134,13 +134,13 @@ body, margin: 0; } -/* Kanban과 Toolbar 컨테이너 스타일 */ +/* specify styles for Kanban and Toolbar container */ .component_container { height: 100%; margin: 0 auto; } -/* Kanban 컨테이너 스타일 */ +/* specify styles for Kanban container */ .widget { height: calc(100% - 56px); } @@ -148,7 +148,7 @@ body, #### 데이터 로딩 -Kanban에 데이터를 추가하려면 데이터 셋을 제공해야 합니다. ***src/*** 디렉터리에 ***data.js*** 파일을 만들고 데이터를 추가하세요: +Kanban에 데이터를 채우려면 데이터 셋을 제공하세요. *src/* 디렉터리에 *data.js* 파일을 생성하세요: ~~~jsx {2,14,37,48} title="data.js" export function getData() { @@ -202,7 +202,7 @@ export function getData() { } ~~~ -그런 다음 ***App.js*** 파일을 열고 데이터를 import 하세요. 이후 새로 생성한 `` 컴포넌트에 **props**로 데이터를 전달할 수 있습니다: +*App.js*를 열고 데이터 셋을 import 한 뒤, 새 `` 컴포넌트에 props로 값을 전달하세요: ~~~jsx {2,5-6} title="App.js" import Kanban from "./Kanban"; @@ -216,7 +216,7 @@ function App() { export default App; ~~~ -***Kanban.jsx*** 파일로 이동하여 전달된 **props**를 Kanban 설정 객체에 적용하세요: +*Kanban.jsx*를 열고 props를 Kanban 설정 객체에 적용하세요: ~~~jsx {5,11-13} title="Kanban.jsx" import { useEffect, useRef } from "react"; @@ -229,16 +229,16 @@ export default function KanbanComponent(props) { useEffect(() => { const kanban = new Kanban(kanban_container.current, { - columns: props.columns, // 컬럼 데이터 적용 - cards: props.cards, // 카드 데이터 적용 - rows: props.rows, // 행 데이터 적용 + columns: props.columns, // apply column data + cards: props.cards, // apply card data + rows: props.rows, // apply row data rowKey: "type", - // 기타 설정 속성 + // other configuration properties }); const toolbar = new Toolbar(toolbar_container.current, { api: kanban.api, - // 기타 설정 속성 + // other configuration properties }); return () => { @@ -254,7 +254,7 @@ export default function KanbanComponent(props) { } ~~~ -또한 React의 `useEffect()` 안에서 [`setConfig()`](/api/methods/js_kanban_setconfig_method/) 또는 [`parse()`](/api/methods/js_kanban_parse_method/) 메서드를 사용하여 Kanban에 데이터를 로드할 수 있습니다. `setConfig` 또는 `parse()` 메서드는 변경사항이 적용될 때마다 데이터 재로딩을 제공합니다. +또는 인스턴스 생성 후 `useEffect()` 내에서 [`setConfig()`](/api/methods/js_kanban_setconfig_method/) 또는 [`parse()`](/api/methods/js_kanban_parse_method/)로 데이터를 로드할 수 있습니다: ~~~jsx {9-11,27} title="Kanban.jsx" import { useEffect, useRef } from "react"; @@ -265,9 +265,9 @@ export default function KanbanComponent(props) { let kanban_container = useRef(); let toolbar_container = useRef(); - let columns = props.columns; // 컬럼 데이터 - let cards = props.cards; // 카드 데이터 - let rows = props.rows; // 행 데이터 + let columns = props.columns; + let cards = props.cards; + let rows = props.rows; useEffect(() => { const kanban = new Kanban(kanban_container.current, { @@ -275,16 +275,16 @@ export default function KanbanComponent(props) { cards: [], rows: [], rowKey: "type", - // 기타 설정 속성 + // other configuration properties }); const toolbar = new Toolbar(toolbar_container.current, { api: kanban.api, - // 기타 설정 속성 + // other configuration properties }); kanban.setConfig({ columns, cards, rows }); - // 또는 kanban.parse({ columns, cards, rows }); + // or kanban.parse({ columns, cards, rows }); return () => { kanban.destructor(); @@ -299,13 +299,13 @@ export default function KanbanComponent(props) { } ~~~ -이제 Kanban 컴포넌트가 준비되었습니다. 요소가 페이지에 추가되면 데이터를 가진 Kanban이 초기화됩니다. 필요한 설정 옵션도 제공할 수 있습니다. 사용 가능한 전체 속성 목록은 [Kanban API 문서](/api/overview/properties_overview/)를 참고하세요. +이제 Kanban 컴포넌트가 준비되었습니다. 요소가 렌더링되면 Kanban이 데이터와 함께 초기화됩니다. 지원되는 설정 속성의 전체 목록은 [Kanban API 레퍼런스](/api/overview/properties_overview/)를 참고하세요. #### 이벤트 처리 -사용자가 Kanban에서 어떤 동작을 하면 이벤트가 발생합니다. 이러한 이벤트를 활용하여 동작을 감지하고 원하는 코드를 실행할 수 있습니다. [이벤트 전체 목록](/api/overview/events_overview/)을 참고하세요. +Kanban에서 사용자 동작이 발생하면 이벤트가 트리거됩니다. 이벤트를 수신하여 특정 동작에 반응할 수 있습니다. 전체 목록은 [Kanban 이벤트 레퍼런스](/api/overview/events_overview/)를 참고하세요. -***Kanban.jsx*** 파일을 열고 `useEffect()` 메서드를 다음과 같이 완성하세요: +*Kanban.jsx*를 열고 `useEffect()` 호출을 확장하세요: ~~~jsx {5-7} title="Kanban.jsx" // ... @@ -323,14 +323,14 @@ useEffect(() => { // ... ~~~ -이제 앱을 시작하면 Kanban이 데이터와 함께 페이지에 표시됩니다. +앱을 실행하여 페이지에 Kanban 보드가 데이터와 함께 표시되는지 확인하세요. import trial from '@site/static/img/trial_kanban.png'; Kanban with React -이제 DHTMLX Kanban을 React에 통합하는 방법을 알게 되었습니다. 필요에 따라 코드를 자유롭게 커스터마이즈할 수 있습니다. 최종 고급 예제는 [**GitHub**](https://github.com/DHTMLX/react-kanban-demo)에서 확인하실 수 있습니다. +완성된 프로젝트는 [GitHub](https://github.com/DHTMLX/react-kanban-demo)에서 확인하세요. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_salesforce.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_salesforce.md index d6356b4..23d048e 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_salesforce.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_salesforce.md @@ -7,49 +7,49 @@ description: DHTMLX Kanban을 Salesforce에 통합하는 방법을 알아보세 # Salesforce와의 통합 :::tip -이 문서를 읽기 전에 [**Salesforce**](https://www.salesforce.com/)의 기본 개념과 패턴에 익숙해야 합니다. 지식이 필요하다면 [**Salesforce 문서**](https://developer.salesforce.com/docs)를 참고하세요. +이 가이드는 [Salesforce](https://www.salesforce.com/)의 개념과 패턴에 익숙하다는 것을 전제로 합니다. 배경 지식이 필요하다면 [Salesforce 문서](https://developer.salesforce.com/docs)를 참고하세요. ::: -DHTMLX Kanban은 [Salesforce](https://www.salesforce.com/) 플랫폼과 호환됩니다. Salesforce 환경에 DHTMLX Kanban을 추가하는 방법에 대한 코드 예제를 준비했습니다. 자세한 내용은 관련 [GitHub 예제](https://github.com/DHTMLX/salesforce-lwc-demo)를 참고하세요. +DHTMLX Kanban은 [Salesforce](https://www.salesforce.com/) 플랫폼과 호환됩니다. 전체 코드 예제는 [GitHub](https://github.com/DHTMLX/salesforce-lwc-demo)에서 확인할 수 있습니다. :::note -JavaScript Kanban 위젯은 [**Salesforce**](https://www.salesforce.com/) 환경에서 동작하고 있음을 자동으로 감지하여 내부적으로 통합 로직을 구성합니다. 대부분의 경우 [**Salesforce 전용 메서드**](#salesforce-전용-메서드)를 수동으로 호출할 필요가 없습니다. +Kanban 위젯은 Salesforce 환경을 감지하여 내부적으로 통합 로직을 구성합니다. 대부분의 경우 [Salesforce 전용 메서드](#salesforce-전용-메서드)를 수동으로 호출할 필요가 없습니다. ::: ## 환경 준비 -Salesforce 프로젝트에 Kanban을 추가하려면, *루트* 컨테이너에 `data-wx-root="true"` HTML 속성을 지정해야 합니다. 이 속성은 라이브러리가 **Kanban** 및 **Toolbar** 위젯을 마운트할 주요 노드를 찾을 수 있도록 도와줍니다. +Salesforce 프로젝트에 Kanban을 추가하려면, *루트* 컨테이너에 `data-wx-root="true"` HTML 속성을 지정해야 합니다. 라이브러리는 이 속성을 사용하여 Kanban 및 Toolbar를 마운트할 주요 노드를 찾습니다: -```html title="kanban.html" +~~~html title="kanban.html" -``` +~~~ -`data-wx-portal-root="1"` 속성으로 표시된 하위 요소들은 DHTMLX 컴포넌트(**Toolbar** 및 **Kanban** 등)를 위한 컨테이너 역할을 합니다. +`data-wx-portal-root="1"` 속성으로 표시된 하위 요소들은 DHTMLX 컴포넌트(Toolbar, Kanban)를 위한 컨테이너 역할을 합니다. ## Salesforce 환경 API -DHTMLX Kanban에는 Salesforce 환경을 수동으로 제어할 수 있는 메서드를 저장하는 `salesForceEnv` 헬퍼 클래스가 포함되어 있습니다. 아래와 같이 `salesForceEnv` 헬퍼 클래스를 가져올 수 있습니다: +DHTMLX Kanban은 Salesforce 환경을 수동으로 제어할 수 있는 메서드를 갖춘 `salesForceEnv` 헬퍼 클래스를 제공합니다. 아래와 같이 헬퍼를 가져올 수 있습니다: -```jsx {4} +~~~jsx {4} import { Kanban, Toolbar, salesForceEnv } from "@dhx/trial-kanban"; -``` +~~~ :::note -일반적으로 salesforce 전용 메서드는 필요하지 않지만, 자동 감지가 실패할 경우에만 예외적으로 사용할 수 있습니다. +Salesforce 전용 메서드는 일반적으로 필요하지 않습니다. 자동 감지가 실패할 경우에만 예외적으로 사용하세요. ::: ### Salesforce 전용 메서드 -`salesForceEnv` 헬퍼 클래스의 다음 메서드를 사용할 수 있습니다: +`salesForceEnv` 헬퍼 클래스는 다음 메서드를 제공합니다: | 메서드 | 설명 | | :--------------------------------------------------------------- | :----------------------------------------------------------------------------- | @@ -57,7 +57,9 @@ import { | `salesForceEnv.addGlobalEvent(eventName, handler, htmlElement)` | 첫 번째 사용 가능한 HTML 요소에 전역 이벤트를 연결합니다. | | `salesForceEnv.getTopNode()` | Salesforce DOM 계층 내에서 첫 번째 사용 가능한 HTML 요소를 반환합니다. | -```jsx {4,7} +다음 코드 스니펫은 헬퍼를 가져와 감지 검사를 실행합니다: + +~~~jsx {4,7} import { Kanban, Toolbar, @@ -65,7 +67,7 @@ import { } from "@dhx/trial-kanban"; salesForceEnv.detect(); -``` +~~~ ### 추가로 내보내는 함수 @@ -73,7 +75,9 @@ salesForceEnv.detect(); | :--------------------- | :-------------------------------------------------------------------------------- | | `enableSalesForce()` | 자동 감지가 불가능할 때 Salesforce 환경을 수동으로 설정합니다. | -```jsx {5,8} +다음 코드 스니펫은 `enableSalesForce()`를 가져와 Salesforce 환경을 강제로 적용합니다: + +~~~jsx {5,8} import { Kanban, Toolbar, @@ -82,18 +86,20 @@ import { } from "@dhx/trial-kanban"; enableSalesForce(); -``` +~~~ ## 작업 흐름 단계 1. LWC 컨테이너에 `data-wx-root="true"` 속성을 추가합니다. -2. DHTMLX Kanban 및 Toolbar를 가져오고(선택적으로) 초기화합니다. -3. JavaScript Kanban 위젯이 Salesforce 컨텍스트를 자동으로 감지하고 내부 구성을 적용합니다. -4. 비표준 임베딩 시나리오가 아니라면 `enableSalesForce()` 함수나 `salesForceEnv` 메서드를 호출할 필요가 없습니다. +2. Kanban 및 Toolbar를 가져오고 초기화합니다(Toolbar는 선택 사항). +3. Kanban이 Salesforce 컨텍스트를 감지하고 내부 구성을 자동으로 적용합니다. +4. 비표준 임베딩 시나리오가 아니라면 `enableSalesForce()` 호출과 `salesForceEnv` 메서드는 생략합니다. ### 예제 -```jsx title="kanban.js" +다음 코드 스니펫은 LWC 컴포넌트 내에서 Kanban과 Toolbar를 초기화합니다: + +~~~jsx title="kanban.js" import { Kanban, Toolbar } from "@dhx/trial-kanban"; import "@dhx/trial-kanban/dist/kanban.css"; @@ -105,6 +111,6 @@ export default class KanbanLWC { const toolbar = new Toolbar(toolbar_container, { api: kanban.api }); } } -``` +~~~ -이제 DHTMLX Kanban 컴포넌트가 **Salesforce Lightning** 환경에 완전히 통합되었습니다. 위젯은 LWC 내부에서 DOM 계층 구조와 이벤트 바인딩을 자동으로 처리합니다. 표준 API를 통해 Kanban을 계속 구성할 수 있으며, 프로젝트 요구 사항에 따라 Kanban의 외관과 로직을 사용자 정의할 수 있습니다. 최종 예제는 [**GitHub**](https://github.com/DHTMLX/salesforce-lwc-demo)에서 확인할 수 있습니다. \ No newline at end of file +DHTMLX Kanban이 이제 Salesforce Lightning 환경에 통합되었습니다. 위젯은 LWC 내부에서 DOM 계층 구조와 이벤트 바인딩을 처리합니다. 표준 API를 통해 Kanban을 계속 구성하여 외관과 동작을 사용자 정의할 수 있습니다. 전체 예제는 [GitHub](https://github.com/DHTMLX/salesforce-lwc-demo)에서 확인할 수 있습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md index 3c2dd03..f7cd281 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md @@ -7,74 +7,71 @@ description: DHTMLX JavaScript Kanban 라이브러리 문서에서 Svelte와의 # Svelte와의 통합 :::tip -이 문서를 읽기 전에 **Svelte**의 기본 개념과 패턴에 익숙해야 합니다. 지식을 다시 확인하려면 [**Svelte documentation**](https://svelte.dev/docs/svelte/overview)을 참고하세요. +이 가이드는 Svelte의 개념과 패턴에 익숙하다고 가정합니다. 기본 내용은 [Svelte documentation](https://svelte.dev/docs/svelte/overview)을 참고하세요. ::: -DHTMLX Kanban은 **Svelte**와 호환됩니다. DHTMLX Kanban을 **Svelte**와 함께 사용하는 방법에 대한 코드 예제를 준비했습니다. 자세한 내용은 [**Example on GitHub**](https://github.com/DHTMLX/svelte-kanban-demo)를 참고하세요. +DHTMLX Kanban은 Svelte와 호환됩니다. 전체 코드 예제는 [GitHub](https://github.com/DHTMLX/svelte-kanban-demo)에서 확인할 수 있습니다. ## 프로젝트 생성 :::info -새 프로젝트를 만들기 전에 [**Vite**](https://vite.dev/) (선택 사항)와 [**Node.js**](https://nodejs.org/en/)를 설치해야 합니다. +프로젝트를 만들기 전에 [Vite](https://vite.dev/) (선택 사항)와 [Node.js](https://nodejs.org/en/)를 설치하세요. ::: -**Svelte** 프로젝트를 만드는 방법은 여러 가지가 있습니다: +Svelte 프로젝트를 만드는 방법은 두 가지입니다: -- [**SvelteKit**](https://kit.svelte.dev/)을 사용할 수 있습니다. - -또는 - -- **Svelte와 Vite**를 사용할 수도 있습니다(SvelteKit 없이): +- [SvelteKit](https://kit.svelte.dev/) 사용 — 권장 +- Svelte와 Vite 사용(SvelteKit 없이) — 다음 명령어를 실행합니다: ~~~json npm create vite@latest ~~~ -자세한 내용은 [관련 문서](https://svelte.dev/docs/svelte/overview)를 참고하세요. +자세한 내용은 [Svelte documentation](https://svelte.dev/docs/svelte/overview)을 참고하세요. ### 의존성 설치 -프로젝트 이름을 **my-svelte-kanban-app**으로 지정하고 앱 디렉터리로 이동합니다: +프로젝트 이름을 *my-svelte-kanban-app*으로 지정합니다. 앱 디렉터리로 이동합니다: ~~~json cd my-svelte-kanban-app ~~~ -의존성을 설치하고 개발 서버를 실행합니다. 패키지 매니저를 사용하세요: +패키지 매니저 중 하나를 사용해 의존성을 설치하고 개발 서버를 실행하세요: -- [**yarn**](https://yarnpkg.com/)을 사용하는 경우, 다음 명령어를 실행하세요: +- [yarn](https://yarnpkg.com/)의 경우: ~~~json yarn yarn start ~~~ -- [**npm**](https://www.npmjs.com/)을 사용하는 경우, 다음 명령어를 실행하세요: +- [npm](https://www.npmjs.com/)의 경우: ~~~json npm install npm run dev ~~~ -앱은 localhost에서 실행됩니다(예: `http://localhost:3000`). +앱은 localhost 주소에서 실행됩니다(예: `http://localhost:3000`). ## Kanban 생성 -이제 DHTMLX Kanban 소스 코드를 받아야 합니다. 먼저 앱을 중지하고 Kanban 패키지 설치를 진행하세요. +개발 서버를 중지하고 Kanban 패키지를 설치하세요. ### 1단계. 패키지 설치 -[**trial Kanban package**](/how_to_start/#installing-kanban-via-npm-or-yarn)를 다운로드하고, README 파일에 안내된 단계를 따르세요. trial Kanban은 30일 동안만 사용할 수 있습니다. +[trial Kanban package](/how_to_start/#installing-kanban-via-npm-or-yarn)를 다운로드하고 README 파일의 단계를 따르세요. trial 버전은 30일 동안 사용할 수 있습니다. ### 2단계. 컴포넌트 생성 -이제 Svelte 컴포넌트를 만들어 애플리케이션에 Toolbar가 포함된 Kanban을 추가해야 합니다. ***src/*** 디렉터리에 새 파일을 만들고 이름을 ***Kanban.svelte***로 지정합니다. +Kanban과 Toolbar를 마운트하는 Svelte 컴포넌트를 만듭니다. *src/* 디렉터리에 새 *Kanban.svelte* 파일을 추가하세요. #### 소스 파일 가져오기 -***Kanban.svelte*** 파일을 열고 Kanban 소스 파일을 import 합니다. 참고: +*Kanban.svelte* 파일을 열고 Kanban 소스 파일을 import 합니다. import 경로는 패키지 버전에 따라 다릅니다: -- PRO 버전을 사용하고 Kanban 패키지를 로컬 폴더에서 설치한 경우, import 경로는 다음과 같습니다: +- 로컬 폴더에서 설치한 PRO 버전의 경우: ~~~html title="Kanban.svelte" ~~~ -사용하는 패키지에 따라 소스 파일이 minified 되어 있을 수 있습니다. 이 경우 **kanban.min.css** 파일을 import하는지 확인하세요. +패키지에 minified 소스 파일이 포함된 경우 CSS 파일을 *kanban.min.css*로 import 하세요. -- trial 버전을 사용하는 경우, 다음 경로를 지정하세요: +- trial 버전의 경우: ~~~html title="Kanban.svelte" ~~~ -이 튜토리얼에서는 **trial** 버전의 Kanban을 구성하는 방법을 안내합니다. +이 튜토리얼은 trial 버전의 Kanban을 사용합니다. -#### 컨테이너 설정 및 Toolbar와 함께 Kanban 추가 +#### 컨테이너 설정 및 Kanban 초기화 -페이지에 Toolbar와 함께 Kanban을 표시하려면 Kanban과 Toolbar용 컨테이너를 만들고, 해당 생성자를 사용해 컴포넌트를 초기화해야 합니다: +Toolbar와 함께 Kanban을 표시하려면 두 개의 컨테이너를 만들고 생성자를 호출합니다. 다음 코드 스니펫은 컨테이너를 바인딩하고 `onMount()` 내에서 컴포넌트를 인스턴스화합니다: ~~~html {3,6,10-11,13-17,27-28} title="Kanban.svelte" @@ -134,7 +131,7 @@ onDestroy(() => { #### 데이터 로딩 -Kanban에 데이터를 추가하려면 데이터 세트를 제공해야 합니다. ***src/*** 디렉터리에 ***data.js*** 파일을 만들고 데이터를 추가하세요: +Kanban에 데이터를 채우려면 데이터 세트를 제공하세요. *src/* 디렉터리에 *data.js* 파일을 만듭니다: ~~~jsx {2,14,37,48} title="data.js" export function getData() { @@ -162,7 +159,7 @@ export function getData() { type: "feature", }, { - label: "Archive the cards/kanbans ", + label: "Archive the cards/boards", priority: 3, color: "#58C3FE", users: [4], @@ -188,7 +185,7 @@ export function getData() { } ~~~ -그런 다음 ***App.svelte*** 파일을 열고, 데이터를 import하여 새로 만든 `` 컴포넌트에 **props**로 전달하세요: +*App.svelte* 파일을 열고 데이터 세트를 import하여 새 `` 컴포넌트에 props로 전달하세요: ~~~html {3,5,8} title="App.svelte" ~~~ -이제 앱을 실행하면 Kanban이 데이터와 함께 페이지에 로드됩니다. +앱을 실행하면 Kanban 보드가 데이터와 함께 페이지에 표시됩니다. import trial from '@site/static/img/trial_kanban.png'; Kanban with Svelte -이제 DHTMLX Kanban을 Svelte와 통합하는 방법을 알게 되었습니다. 필요에 맞게 코드를 커스터마이즈할 수 있습니다. 최종 고급 예제는 [**GitHub**](https://github.com/DHTMLX/svelte-kanban-demo)에서 확인할 수 있습니다. +전체 프로젝트는 [GitHub](https://github.com/DHTMLX/svelte-kanban-demo)에서 확인하세요. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md index 0240e51..c449b53 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md @@ -7,26 +7,26 @@ description: DHTMLX JavaScript Kanban 라이브러리의 문서에서 Vue와의 # Vue와의 통합 :::tip -이 문서를 읽기 전에 [**Vue**](https://vuejs.org/)의 기본 개념과 패턴에 익숙해야 합니다. 지식을 다시 확인하려면 [**Vue 3 문서**](https://vuejs.org/guide/introduction.html#getting-started)를 참고하세요. +이 가이드는 [Vue](https://vuejs.org/)의 개념과 패턴에 익숙하다고 가정합니다. 배경 지식은 [Vue 3 문서](https://vuejs.org/guide/introduction.html#getting-started)를 참고하세요. ::: -DHTMLX Kanban은 **Vue**와 호환됩니다. **Vue 3**에서 DHTMLX Kanban을 사용하는 방법에 대한 코드 예제가 준비되어 있습니다. 자세한 내용은 [**GitHub의 예제**](https://github.com/DHTMLX/vue-kanban-demo)를 참고하세요. +DHTMLX Kanban은 Vue와 호환됩니다. Vue 3에 대한 전체 코드 예제는 [GitHub](https://github.com/DHTMLX/vue-kanban-demo)에서 확인할 수 있습니다. ## 프로젝트 생성 :::info -새 프로젝트를 생성하기 전에 [**Node.js**](https://nodejs.org/en/)를 설치하세요. +프로젝트를 생성하기 전에 [Node.js](https://nodejs.org/en/)를 설치하세요. ::: -**Vue** 프로젝트를 생성하려면 다음 명령어를 실행하세요: +다음 명령어로 새 Vue 프로젝트를 생성합니다: ~~~json npm create vue@latest ~~~ -이 명령어는 공식 **Vue** 프로젝트 스캐폴딩 툴인 `create-vue`를 설치하고 실행합니다. 자세한 내용은 [Vue.js 빠른 시작](https://vuejs.org/guide/quick-start.html#creating-a-vue-application)을 참고하세요. +이 명령어는 공식 Vue 프로젝트 스캐폴딩 툴인 `create-vue`를 실행합니다. 자세한 내용은 [Vue.js 빠른 시작](https://vuejs.org/guide/quick-start.html#creating-a-vue-application)을 참고하세요. -프로젝트 이름은 **my-vue-kanban-app**으로 지정하겠습니다. +프로젝트 이름은 *my-vue-kanban-app*으로 지정합니다. ### 의존성 설치 @@ -36,41 +36,41 @@ npm create vue@latest cd my-vue-kanban-app ~~~ -의존성을 설치하고 개발 서버를 시작하세요. 패키지 매니저에 따라 아래 명령어를 사용합니다: +패키지 매니저 중 하나로 의존성을 설치하고 개발 서버를 시작하세요: -- [**yarn**](https://yarnpkg.com/)을 사용하는 경우: +- [yarn](https://yarnpkg.com/)의 경우: ~~~jsx yarn yarn start // 또는 yarn dev ~~~ -- [**npm**](https://www.npmjs.com/)을 사용하는 경우: +- [npm](https://www.npmjs.com/)의 경우: ~~~json npm install npm run dev ~~~ -앱은 로컬호스트(예: `http://localhost:3000`)에서 실행됩니다. +앱은 로컬호스트 주소(예: `http://localhost:3000`)에서 실행됩니다. ## Kanban 생성 -이제 DHTMLX Kanban 소스 코드를 준비해야 합니다. 먼저 앱을 중지한 후 Kanban 패키지를 설치하세요. +개발 서버를 중지하고 Kanban 패키지를 설치하세요. ### 1단계. 패키지 설치 -[**평가판 Kanban 패키지**](/how_to_start/#installing-kanban-via-npm-or-yarn)를 다운로드하고, README 파일에 안내된 단계를 따르세요. 평가판 Kanban은 30일간만 사용 가능합니다. +[평가판 Kanban 패키지](/how_to_start/#installing-kanban-via-npm-or-yarn)를 다운로드하고 README 파일의 단계를 따르세요. 평가판은 30일간 사용 가능합니다. ### 2단계. 컴포넌트 생성 -이제 Kanban과 Toolbar를 앱에 추가할 Vue 컴포넌트를 생성해야 합니다. ***src/components/*** 디렉토리에 ***Kanban.vue*** 파일을 새로 만드세요. +Kanban과 Toolbar를 마운트하는 Vue 컴포넌트를 생성합니다. *src/components/* 디렉토리에 *Kanban.vue* 파일을 새로 추가하세요. #### 소스 파일 가져오기 -***Kanban.vue*** 파일을 열고 Kanban 소스 파일을 import 하세요. 참고: +*Kanban.vue*를 열고 Kanban 소스 파일을 import 하세요. import 경로는 패키지 버전에 따라 다릅니다: -- PRO 버전을 사용하고 Kanban 패키지를 로컬 폴더에서 설치한 경우, import 경로는 다음과 같습니다: +- 로컬 폴더에서 설치한 PRO 버전의 경우: ~~~html title="Kanban.vue" ~~~ -패키지에 따라 소스 파일이 minified 되어 있을 수 있습니다. 이 경우 CSS 파일을 **kanban.min.css**로 import 해야 합니다. +패키지에 minified 소스 파일이 포함된 경우, CSS 파일을 *kanban.min.css*로 import 하세요. -- Kanban 평가판을 사용하는 경우, 아래와 같이 경로를 지정하세요: +- 평가판의 경우: ~~~html title="Kanban.vue" ~~~ -이 튜토리얼에서는 **평가판** Kanban의 설정 방법을 보여줍니다. +이 튜토리얼에서는 Kanban 평가판을 사용합니다. -#### 컨테이너 설정 및 Kanban + Toolbar 추가 +#### 컨테이너 설정 및 Kanban 초기화 -Kanban과 Toolbar를 페이지에 표시하려면 각 컨테이너를 생성하고, 해당 생성자를 사용해 컴포넌트를 초기화해야 합니다: +Kanban과 Toolbar를 표시하려면 두 개의 컨테이너를 생성하고 생성자를 호출하세요. 다음 코드는 refs를 연결하고 `mounted()` 내부에서 컴포넌트를 인스턴스화합니다: ~~~html {2,7-8,10-14} title="Kanban.vue" @@ -130,25 +130,25 @@ export default { #### 스타일 추가 -Kanban이 올바르게 표시되도록, 프로젝트의 메인 css 파일에 Kanban 및 컨테이너에 대한 중요한 스타일을 지정해야 합니다: +메인 CSS 파일에 Kanban과 컨테이너에 대한 스타일을 추가하세요: ~~~css title="main.css" -/* 초기 페이지 스타일 지정 */ +/* specify styles for initial page */ html, body, -#app { /* #app 루트 컨테이너 사용 확인 */ +#app { /* make sure that you use the #app root container */ height: 100%; padding: 0; margin: 0; } -/* Kanban 및 Toolbar 컨테이너 스타일 */ +/* specify styles for Kanban and Toolbar container */ .component_container { height: 100%; margin: 0 auto; } -/* Kanban 컨테이너 스타일 */ +/* specify styles for Kanban container */ .widget { height: calc(100% - 56px); } @@ -156,7 +156,7 @@ body, #### 데이터 로딩 -Kanban에 데이터를 추가하려면 데이터셋을 제공해야 합니다. ***src/*** 디렉토리에 ***data.js*** 파일을 만들고 데이터를 추가하세요: +Kanban에 데이터를 채우려면 데이터셋을 제공하세요. *src/* 디렉토리에 *data.js* 파일을 생성하세요: ~~~jsx {2,14,37,48} title="data.js" export function getData() { @@ -184,7 +184,7 @@ export function getData() { type: "feature", }, { - label: "Archive the cards/kanbans ", + label: "Archive the cards/boards", priority: 3, color: "#58C3FE", users: [4], @@ -210,7 +210,7 @@ export function getData() { } ~~~ -그 다음 ***App.vue*** 파일을 열고, 데이터를 import 한 뒤 내부 `data()` 메서드로 초기화하세요. 이후 새로 만든 `` 컴포넌트에 **props**로 데이터를 전달할 수 있습니다: +*App.vue*를 열고 데이터셋을 import 하세요. 내부 `data()` 메서드를 통해 값을 초기화한 후, 새 `` 컴포넌트에 props로 전달하세요: ~~~html {3,8,10-12,19} title="App.vue" ~~~ -## Создание контейнера +## Создание контейнера {#create-a-container} -Добавьте контейнер для Kanban и задайте ему идентификатор, например, *"root"*: +Добавьте контейнер для Kanban и задайте ему идентификатор, например `root`: ~~~jsx title="index.html"
~~~ -Если вы хотите создать виджет вместе с *Toolbar*, необходимо добавить для него отдельный контейнер: +Чтобы создать виджет вместе с Toolbar, добавьте отдельный контейнер для Toolbar: ~~~jsx {1} title="index.html"
// контейнер для Toolbar
// контейнер для Kanban ~~~ -## Инициализация Kanban +## Инициализация Kanban {#initialize-kanban} -Инициализируйте Kanban с помощью конструктора **kanban.Kanban**. Он принимает два параметра: +Инициализируйте Kanban с помощью конструктора `kanban.Kanban`. Конструктор принимает два параметра: -- HTML-контейнер (ID HTML-контейнера) -- объект с конфигурационными свойствами. [Полный список смотрите здесь](#конфигурационные-свойства) +- CSS-селектор HTML-контейнера (или сам элемент контейнера) +- объект конфигурации (см. [полный список свойств](#configuration-properties)) + +Следующий фрагмент кода создаёт экземпляр Kanban: ~~~jsx title="index.html" // создание Kanban @@ -57,35 +59,33 @@ new kanban.Kanban("#root", { }); ~~~ -Если вы хотите создать виджет вместе с *Toolbar*, его необходимо инициализировать отдельно с помощью конструктора **kanban.Toolbar**. Он также принимает два параметра: - -- HTML-контейнер (ID HTML-контейнера) -- объект с конфигурационными свойствами +Чтобы создать виджет вместе с Toolbar, инициализируйте Toolbar отдельно с помощью конструктора `kanban.Toolbar`. Элементы управления Toolbar взаимодействуют с экземпляром Kanban через параметр [`api`](api/config/toolbar_api_config.md). Передайте `board.api`, чтобы привязать Toolbar к доске: -~~~jsx {6-8} title="index.html" +~~~jsx {7} title="index.html" // создание Kanban const board = new kanban.Kanban("#root", { // конфигурационные свойства }); new kanban.Toolbar("#toolbar", { - // конфигурационные свойства + api: board.api, // обязательно: связывает элементы управления Toolbar с экземпляром Kanban + // другие конфигурационные свойства }); ~~~ :::info -Чтобы узнать больше о настройке Toolbar для Kanban, прочитайте раздел [**Configuration**](guides/configuration.md/#toolbar) +Подробнее о настройке Toolbar читайте в разделе [Configuration](guides/configuration.md#toolbar). ::: -### Конфигурационные свойства +### Конфигурационные свойства {#configuration-properties} -:::note -Полный список свойств для настройки **Kanban** можно найти [**здесь**](api/overview/properties_overview.md).
-Полный список свойств для настройки **Toolbar для Kanban** можно найти [**здесь**](api/overview/toolbar_properties_overview.md). -::: +Полный справочник конфигурации: + +- [Обзор свойств Kanban](api/overview/properties_overview.md) — все конфигурационные свойства Kanban +- [Обзор свойств Toolbar](api/overview/toolbar_properties_overview.md) — все конфигурационные свойства Toolbar ## Пример -В этом примере показано, как инициализировать **Kanban** с начальными данными: +Следующий пример инициализирует Kanban с тестовыми данными: - \ No newline at end of file + diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration.md index 8fa4b82..0b89018 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration.md @@ -6,12 +6,20 @@ description: Вы можете узнать об интеграции в док # Интеграция с DHTMLX виджетами -Вы можете интегрировать DHTMLX Kanban с другими виджетами DHTMLX (например, [Gantt](https://docs.dhtmlx.com/gantt/), [Scheduler](https://docs.dhtmlx.com/scheduler/), [To Do List](https://docs.dhtmlx.com/todolist/)). Ознакомьтесь с примерами ниже. +Вы можете интегрировать DHTMLX Kanban с другими виджетами DHTMLX, в том числе: -## Интеграция с DHTMLX Gantt и Scheduler +- [Gantt](https://docs.dhtmlx.com/gantt/) +- [Scheduler](https://docs.dhtmlx.com/scheduler/) +- [To Do List](https://docs.dhtmlx.com/todolist/) + +## Gantt и Scheduler {#gantt-and-scheduler} + +Следующее демо встраивает доску Kanban вместе с представлениями Gantt и Scheduler: -## Интеграция с DHTMLX To Do List +## To Do List + +Следующее демо встраивает доску Kanban вместе со списком To Do List: - \ No newline at end of file + diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md index 6dc7e8c..19c1f1c 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md @@ -7,38 +7,38 @@ description: Вы можете узнать об интеграции с Angular # Интеграция с Angular :::tip -Перед прочтением данной документации рекомендуется ознакомиться с базовыми концепциями и паттернами **Angular**. Для обновления знаний обратитесь к [**Angular documentation**](https://v17.angular.io/docs). +Данное руководство предполагает знакомство с концепциями и паттернами Angular. Для углубления знаний обратитесь к [Angular documentation](https://v17.angular.io/docs). ::: -DHTMLX Kanban совместим с **Angular**. Мы подготовили примеры кода по использованию DHTMLX Kanban с **Angular**. Для получения дополнительной информации обратитесь к соответствующему [**Example on GitHub**](https://github.com/DHTMLX/angular-kanban-demo). +DHTMLX Kanban совместим с Angular. Полный пример кода доступен на [GitHub](https://github.com/DHTMLX/angular-kanban-demo). ## Создание проекта :::info -Перед началом создания нового проекта установите [**Angular CLI**](https://v17.angular.io/cli) и [**Node.js**](https://nodejs.org/en/). +Перед созданием проекта установите [Angular CLI](https://v17.angular.io/cli) и [Node.js](https://nodejs.org/en/). ::: -Создайте новый проект **my-angular-kanban-app** с помощью Angular CLI. Для этого выполните следующую команду: +Следующая команда создаёт новый проект *my-angular-kanban-app* с помощью Angular CLI: ~~~json ng new my-angular-kanban-app ~~~ :::note -Если вы хотите следовать этому руководству, отключите Server-Side Rendering (SSR) и Static Site Generation (SSG/Prerendering) при создании нового приложения Angular! +При появлении соответствующего запроса отключите Server-Side Rendering (SSR) и Static Site Generation (SSG/Prerendering), чтобы проект соответствовал данному руководству. ::: -Команда выше установит все необходимые инструменты, поэтому дополнительные команды запускать не требуется. +Команда установит все необходимые инструменты. Дополнительные команды не требуются. ### Установка зависимостей -Перейдите в директорию только что созданного приложения: +Перейдите в директорию нового приложения: ~~~json cd my-angular-kanban-app ~~~ -Установите зависимости и запустите dev-сервер. Для этого используйте менеджер пакетов [**yarn**](https://yarnpkg.com/): +Установите зависимости и запустите dev-сервер с помощью менеджера пакетов [yarn](https://yarnpkg.com/): ~~~json yarn @@ -49,37 +49,37 @@ yarn start ## Создание Kanban -Теперь необходимо получить исходный код DHTMLX Kanban. Для начала остановите приложение и установите пакет Kanban. +Остановите dev-сервер и установите пакет Kanban. ### Шаг 1. Установка пакета -Скачайте [**trial Kanban package**](/how_to_start/#installing-kanban-via-npm-or-yarn) и следуйте инструкциям из файла README. Обратите внимание, что пробная версия Kanban доступна только 30 дней. - +Скачайте [trial Kanban package](/how_to_start/#installing-kanban-via-npm-or-yarn) и следуйте инструкциям из файла README. Пробная версия доступна 30 дней. + ### Шаг 2. Создание компонента -Теперь нужно создать Angular-компонент, чтобы добавить Kanban с Toolbar в приложение. Создайте папку **kanban** в директории **src/app/**, добавьте в неё новый файл и назовите его **kanban.component.ts**. +Создайте Angular-компонент, который монтирует Kanban и Toolbar. Создайте папку *src/app/kanban/* и добавьте в неё файл *kanban.component.ts*. #### Импорт исходных файлов -Откройте файл **kanban.component.ts** и импортируйте исходные файлы Kanban. Обратите внимание: +Откройте *kanban.component.ts* и импортируйте исходные файлы Kanban. Путь импорта зависит от версии пакета: -- если вы используете PRO-версию и устанавливаете пакет Kanban из локальной папки, импорт будет выглядеть так: +- Для PRO-версии, установленной из локальной папки: ~~~jsx import { Kanban, Toolbar } from 'dhx-kanban-package'; ~~~ -- если вы используете пробную версию Kanban, укажите следующий путь: +- Для пробной версии: ~~~jsx import { Kanban, Toolbar } from '@dhx/trial-kanban'; ~~~ -В этом руководстве показано, как настроить **trial** версию Kanban. +В данном руководстве используется пробная версия Kanban. -#### Задание контейнеров и инициализация Kanban с Toolbar +#### Настройка контейнеров и инициализация Kanban -Чтобы отобразить Kanban с Toolbar на странице, нужно задать контейнеры для Kanban и Toolbar, а также инициализировать эти компоненты с помощью соответствующих конструкторов: +Чтобы отобразить Kanban с Toolbar, задайте два контейнера и вызовите конструкторы. Следующий фрагмент кода определяет шаблон компонента, ссылки на контейнеры и создаёт экземпляры: ~~~jsx {1,8-11,15-18,24-31} title="kanban.component.ts" import { Kanban, Toolbar } from '@dhx/trial-kanban'; @@ -124,7 +124,7 @@ export class KanbanComponent implements OnInit, OnDestroy { #### Добавление стилей -Для корректного отображения Kanban необходимо добавить соответствующие стили. Для этого создайте файл **kanban.component.css** в директории **src/app/kanban/** и пропишите в нём основные стили для Kanban и его контейнера: +Добавьте стили для Kanban и контейнера. Создайте файл *kanban.component.css* в директории *src/app/kanban/*: ~~~css title="kanban.component.css" /* импорт стилей Kanban */ @@ -152,7 +152,7 @@ body{ #### Загрузка данных -Чтобы добавить данные в Kanban, необходимо предоставить набор данных. Вы можете создать файл **data.ts** в директории **src/app/kanban/** и добавить туда данные: +Чтобы заполнить Kanban данными, предоставьте набор данных. Создайте файл *data.ts* в директории *src/app/kanban/*: ~~~jsx {2,14,37,48} title="data.ts" export function getData() { @@ -206,7 +206,7 @@ export function getData() { } ~~~ -Далее откройте файл ***kanban.component.ts***. Импортируйте файл с данными и укажите соответствующие свойства данных в объекте конфигурации Kanban внутри метода `ngOnInit()`, как показано ниже: +Откройте *kanban.component.ts*, импортируйте набор данных и передайте свойства данных в объект конфигурации Kanban внутри `ngOnInit()`: ~~~jsx {2,23,25-27} title="kanban.component.ts" import { Kanban, Toolbar } from '@dhx/trial-kanban'; @@ -253,7 +253,7 @@ export class KanbanComponent implements OnInit, OnDestroy { } ~~~ -Вы также можете использовать методы [`setConfig()`](/api/methods/js_kanban_setconfig_method/) или [`parse()`](/api/methods/js_kanban_parse_method/) внутри метода `ngOnInit()` компонента Angular для загрузки данных в Kanban. Метод `setConfig` или `parse()` обеспечивает перезагрузку данных при каждом применённом изменении. +В качестве альтернативы загрузите данные после создания экземпляра с помощью [`setConfig()`](/api/methods/js_kanban_setconfig_method/) или [`parse()`](/api/methods/js_kanban_parse_method/) внутри `ngOnInit()`: ~~~jsx {2,23,37-42} title="kanban.component.ts" import { Kanban, Toolbar } from '@dhx/trial-kanban'; @@ -307,13 +307,13 @@ export class KanbanComponent implements OnInit, OnDestroy { } ~~~ -Теперь компонент Kanban готов к использованию. После добавления элемента на страницу Kanban будет инициализирован с данными. Вы также можете задать необходимые параметры конфигурации. Посетите [Kanban API docs](/api/overview/properties_overview/), чтобы ознакомиться с полным списком доступных свойств. +Компонент Kanban готов к работе. После отрисовки элемента Kanban инициализируется с данными. Полный список поддерживаемых параметров конфигурации см. в [справочнике Kanban API](/api/overview/properties_overview/). #### Обработка событий -Когда пользователь выполняет какое-либо действие в Kanban, вызывается событие. Вы можете использовать эти события для отслеживания действий и запуска необходимого кода. Ознакомьтесь с [полным списком событий](/api/overview/events_overview/). +Действия пользователя в Kanban вызывают события. Подписывайтесь на события, чтобы реагировать на конкретные действия. Полный список см. в [справочнике событий Kanban](/api/overview/events_overview/). -Откройте файл **kanban.component.ts** и дополните метод `ngOnInit()` следующим образом: +Откройте *kanban.component.ts* и расширьте метод `ngOnInit()`: ~~~jsx {5-7} title="kanban.component.ts" // ... @@ -332,7 +332,7 @@ ngOnDestroy(): void { ### Шаг 3. Добавление Kanban в приложение -Чтобы добавить компонент ***KanbanComponent*** в ваше приложение, откройте файл ***src/app/app.component.ts*** и замените стандартный код следующим образом: +Чтобы зарегистрировать `KanbanComponent` в приложении, откройте *src/app/app.component.ts* и замените стандартный код: ~~~jsx {5} title="app.component.ts" import { Component } from "@angular/core"; @@ -346,7 +346,7 @@ export class AppComponent { } ~~~ -Затем создайте файл ***app.module.ts*** в директории ***src/app/*** и укажите компонент *KanbanComponent* следующим образом: +Создайте *app.module.ts* в директории *src/app/* и объявите `KanbanComponent`: ~~~jsx {4-5,8} title="app.module.ts" import { NgModule } from "@angular/core"; @@ -363,7 +363,7 @@ import { KanbanComponent } from "./kanban/kanban.component"; export class AppModule {} ~~~ -Последний шаг - откройте файл ***src/main.ts*** и замените существующий код следующим: +Откройте *src/main.ts* и замените существующий код: ~~~jsx title="main.ts" import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; @@ -373,14 +373,14 @@ platformBrowserDynamic() .catch((err) => console.error(err)); ~~~ -После этого вы можете запустить приложение и увидеть Kanban с загруженными данными на странице. +Запустите приложение, чтобы увидеть заполненную доску Kanban на странице. import trial from '@site/static/img/trial_kanban.png'; Kanban with Angular -Теперь вы знаете, как интегрировать DHTMLX Kanban с Angular. Вы можете доработать код под свои задачи. Финальный продвинутый пример доступен на [**GitHub**](https://github.com/DHTMLX/angular-kanban-demo). +Полный проект доступен на [GitHub](https://github.com/DHTMLX/angular-kanban-demo). diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_react.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_react.md index 10c9f27..7fd9335 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_react.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_react.md @@ -7,18 +7,18 @@ description: Ознакомьтесь с интеграцией с React в до # Интеграция с React :::tip -Перед чтением этой документации рекомендуется ознакомиться с базовыми концепциями и паттернами [**React**](https://react.dev). Для обновления знаний обратитесь к [**документации React**](https://react.dev/learn). +Это руководство предполагает знакомство с концепциями и паттернами [React](https://react.dev). Для подготовки обратитесь к [документации React](https://react.dev/learn). ::: -DHTMLX Kanban совместим с **React**. Мы подготовили примеры кода, показывающие, как использовать DHTMLX Kanban с **React**. Подробности смотрите в соответствующем [**примере на GitHub**](https://github.com/DHTMLX/react-kanban-demo). +DHTMLX Kanban совместим с React. Полный пример кода доступен на [GitHub](https://github.com/DHTMLX/react-kanban-demo). ## Создание проекта :::info -Перед созданием нового проекта установите [**Vite**](https://vite.dev/) (опционально) и [**Node.js**](https://nodejs.org/en/). +Перед созданием нового проекта установите [Vite](https://vite.dev/) (опционально) и [Node.js](https://nodejs.org/en/). ::: -Вы можете создать базовый проект **React** или использовать **React с Vite**. Назовём проект **my-react-kanban-app**: +Создайте базовый проект React (или React с Vite). Назовём проект *my-react-kanban-app*: ~~~json npx create-react-app my-react-kanban-app @@ -32,61 +32,61 @@ npx create-react-app my-react-kanban-app cd my-react-kanban-app ~~~ -Установите зависимости и запустите dev-сервер. Для этого используйте менеджер пакетов: +Установите зависимости и запустите dev-сервер с помощью одного из менеджеров пакетов: -- если вы используете [**yarn**](https://yarnpkg.com/), выполните следующие команды: +- Для [yarn](https://yarnpkg.com/): ~~~json yarn yarn start ~~~ -- если вы используете [**npm**](https://www.npmjs.com/), выполните следующие команды: +- Для [npm](https://www.npmjs.com/): ~~~json npm install npm run dev ~~~ -Приложение будет работать на локальном сервере (например, `http://localhost:3000`). +Приложение будет работать на локальном адресе (например, `http://localhost:3000`). ## Создание Kanban -Теперь необходимо получить исходный код DHTMLX Kanban. Сначала остановите приложение и приступайте к установке пакета Kanban. +Остановите dev-сервер и установите пакет Kanban. ### Шаг 1. Установка пакета -Скачайте [**пробный пакет Kanban**](/how_to_start/#installing-kanban-via-npm-or-yarn) и выполните шаги, описанные в файле README. Обратите внимание, что пробная версия Kanban доступна только 30 дней. +Скачайте [пробный пакет Kanban](/how_to_start/#installing-kanban-via-npm-or-yarn) и выполните шаги, описанные в файле README. Пробная версия доступна в течение 30 дней. ### Шаг 2. Создание компонента -Теперь необходимо создать компонент React, чтобы добавить Kanban в приложение. Создайте новый файл в директории ***src/*** и назовите его ***Kanban.jsx***. +Создайте компонент React, добавляющий Kanban в приложение. Добавьте новый файл в директорию *src/* и назовите его *Kanban.jsx*. #### Импорт исходных файлов -Откройте файл ***Kanban.jsx*** и импортируйте исходные файлы Kanban. Обратите внимание: +Откройте *Kanban.jsx* и импортируйте исходные файлы Kanban. Пути к импортам зависят от версии пакета: -- если вы используете PRO-версию и устанавливаете пакет Kanban из локальной папки, пути к импортам будут следующими: +- Для PRO-версии, установленной из локальной папки: ~~~jsx title="Kanban.jsx" import { Kanban, Toolbar } from 'dhx-kanban-package'; import 'dhx-kanban-package/dist/kanban.css'; ~~~ -Учтите, что в зависимости от используемого пакета исходные файлы могут быть минифицированы. В этом случае убедитесь, что импортируете CSS-файл как ***kanban.min.css***. +Если пакет поставляется с минифицированными исходными файлами, импортируйте CSS-файл как *kanban.min.css*. -- если вы используете пробную версию Kanban, укажите следующие пути: +- Для пробной версии: ~~~jsx title="Kanban.jsx" import { Kanban, Toolbar } from '@dhx/trial-kanban'; import "@dhx/trial-kanban/dist/kanban.css"; ~~~ -В этом руководстве показано, как настроить **пробную** версию Kanban. +В этом руководстве используется пробная версия Kanban. -#### Задание контейнеров и добавление Kanban с Toolbar +#### Настройка контейнеров и инициализация Kanban -Чтобы отобразить Kanban с Toolbar на странице, необходимо создать контейнеры для Kanban и Toolbar и инициализировать эти компоненты с помощью соответствующих конструкторов: +Чтобы отобразить Kanban с Toolbar, создайте два контейнера и вызовите конструкторы. Следующий фрагмент кода связывает рефы и инициализирует компоненты внутри `useEffect()`: ~~~jsx {2,6-7,10-11,13-17} title="Kanban.jsx" import { useEffect, useRef } from "react"; @@ -122,10 +122,10 @@ export default function KanbanComponent(props) { #### Добавление стилей -Для корректного отображения Kanban необходимо задать основные стили для Kanban и его контейнера в основном css-файле проекта: +Добавьте стили для Kanban и его контейнера в основной CSS-файл: ~~~css title="index.css" -/* стили для начальной страницы */ +/* specify styles for initial page */ html, body, #root { @@ -134,13 +134,13 @@ body, margin: 0; } -/* стили для контейнера Kanban и Toolbar */ +/* specify styles for Kanban and Toolbar container */ .component_container { height: 100%; margin: 0 auto; } -/* стили для контейнера Kanban */ +/* specify styles for Kanban container */ .widget { height: calc(100% - 56px); } @@ -148,7 +148,7 @@ body, #### Загрузка данных -Чтобы добавить данные в Kanban, необходимо предоставить набор данных. Вы можете создать файл ***data.js*** в директории ***src/*** и добавить в него данные: +Чтобы наполнить Kanban данными, предоставьте набор данных. Создайте файл *data.js* в директории *src/*: ~~~jsx {2,14,37,48} title="data.js" export function getData() { @@ -202,7 +202,7 @@ export function getData() { } ~~~ -Затем откройте файл ***App.js*** и импортируйте данные. После этого можно передать данные в созданный компонент `` через **props**: +Откройте *App.js*, импортируйте данные и передайте значения в новый компонент `` через props: ~~~jsx {2,5-6} title="App.js" import Kanban from "./Kanban"; @@ -216,7 +216,7 @@ function App() { export default App; ~~~ -Перейдите в файл ***Kanban.jsx*** и примените переданные **props** к объекту конфигурации Kanban: +Откройте *Kanban.jsx* и примените props к объекту конфигурации Kanban: ~~~jsx {5,11-13} title="Kanban.jsx" import { useEffect, useRef } from "react"; @@ -254,7 +254,7 @@ export default function KanbanComponent(props) { } ~~~ -Вы также можете использовать методы [`setConfig()`](/api/methods/js_kanban_setconfig_method/) или [`parse()`](/api/methods/js_kanban_parse_method/) внутри метода `useEffect()` в React для загрузки данных в Kanban. Метод `setConfig` или `parse()` обеспечивает перезагрузку данных при каждом применённом изменении. +В качестве альтернативы данные можно загрузить после создания экземпляра с помощью [`setConfig()`](/api/methods/js_kanban_setconfig_method/) или [`parse()`](/api/methods/js_kanban_parse_method/) внутри `useEffect()`: ~~~jsx {9-11,27} title="Kanban.jsx" import { useEffect, useRef } from "react"; @@ -265,9 +265,9 @@ export default function KanbanComponent(props) { let kanban_container = useRef(); let toolbar_container = useRef(); - let columns = props.columns; // данные для колонок - let cards = props.cards; // данные для карточек - let rows = props.rows; // данные для строк + let columns = props.columns; + let cards = props.cards; + let rows = props.rows; useEffect(() => { const kanban = new Kanban(kanban_container.current, { @@ -284,7 +284,7 @@ export default function KanbanComponent(props) { }); kanban.setConfig({ columns, cards, rows }); - // или kanban.parse({ columns, cards, rows }); + // or kanban.parse({ columns, cards, rows }); return () => { kanban.destructor(); @@ -299,13 +299,13 @@ export default function KanbanComponent(props) { } ~~~ -Теперь компонент Kanban готов. Когда элемент будет добавлен на страницу, он инициализирует Kanban с данными. Вы также можете задать необходимые настройки конфигурации. Посетите [документацию по API Kanban](/api/overview/properties_overview/), чтобы ознакомиться с полным списком доступных свойств. +Компонент Kanban готов. При рендеринге элемента Kanban инициализируется с данными. Полный список поддерживаемых свойств конфигурации см. в [справочнике API Kanban](/api/overview/properties_overview/). #### Обработка событий -Когда пользователь выполняет действие в Kanban, возникает событие. Вы можете использовать эти события для определения действия и запуска необходимого кода. Ознакомьтесь с [полным списком событий](/api/overview/events_overview/). +Действия пользователя в Kanban инициируют события. Подписывайтесь на события, чтобы реагировать на конкретные действия. Полный список см. в [справочнике событий Kanban](/api/overview/events_overview/). -Откройте ***Kanban.jsx*** и дополните метод `useEffect()` следующим образом: +Откройте *Kanban.jsx* и расширьте вызов `useEffect()`: ~~~jsx {5-7} title="Kanban.jsx" // ... @@ -323,14 +323,14 @@ useEffect(() => { // ... ~~~ -После этого вы можете запустить приложение и увидеть Kanban с загруженными данными на странице. +Запустите приложение, чтобы увидеть заполненную доску Kanban на странице. import trial from '@site/static/img/trial_kanban.png'; Kanban с React -Теперь вы знаете, как интегрировать DHTMLX Kanban с React. Вы можете доработать код в соответствии с вашими требованиями. Финальный расширенный пример доступен на [**GitHub**](https://github.com/DHTMLX/react-kanban-demo). +Готовый проект доступен на [GitHub](https://github.com/DHTMLX/react-kanban-demo). diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_salesforce.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_salesforce.md index 7d06dee..62fc08a 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_salesforce.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_salesforce.md @@ -7,49 +7,49 @@ description: Узнайте, как интегрировать DHTMLX Kanban в # Интеграция с Salesforce :::tip -Перед прочтением этой документации рекомендуется ознакомиться с базовыми концепциями и паттернами работы с [**Salesforce**](https://www.salesforce.com/). Для повторения материала воспользуйтесь [**официальной документацией Salesforce**](https://developer.salesforce.com/docs). +Это руководство предполагает знакомство с концепциями и паттернами работы с [Salesforce](https://www.salesforce.com/). Для ознакомления с материалом воспользуйтесь [документацией Salesforce](https://developer.salesforce.com/docs). ::: -DHTMLX Kanban совместим с платформой [Salesforce](https://www.salesforce.com/). Мы подготовили примеры кода по добавлению DHTMLX Kanban в окружение Salesforce. Дополнительную информацию можно найти в соответствующем [примере на GitHub](https://github.com/DHTMLX/salesforce-lwc-demo). +DHTMLX Kanban совместим с платформой [Salesforce](https://www.salesforce.com/). Полный пример кода доступен на [GitHub](https://github.com/DHTMLX/salesforce-lwc-demo). :::note -Виджет Kanban на JavaScript автоматически определяет, что работает в окружении [**Salesforce**](https://www.salesforce.com/) и настраивает внутреннюю логику интеграции. В большинстве случаев вам не нужно вручную вызывать какие-либо [**специфические методы Salesforce**](#специфические-методы-salesforce). +Виджет Kanban автоматически определяет окружение Salesforce и настраивает внутреннюю логику интеграции. В большинстве случаев вам не нужно вручную вызывать какие-либо [специфические методы Salesforce](#специфические-методы-salesforce). ::: ## Подготовка окружения -Если вы хотите добавить Kanban в свой проект Salesforce, необходимо пометить *корневой* контейнер HTML-атрибутом `data-wx-root="true"`. Этот атрибут позволяет библиотеке определить основной узел для монтирования виджетов **Kanban** и **Toolbar**. +Чтобы добавить Kanban в проект Salesforce, пометьте *корневой* контейнер HTML-атрибутом `data-wx-root="true"`. Библиотека использует этот атрибут для определения основного узла монтирования Kanban и Toolbar: -```html title="kanban.html" +~~~html title="kanban.html" -``` +~~~ -Вложенные элементы с атрибутом `data-wx-portal-root="1"` служат контейнерами для компонентов DHTMLX (например, **Toolbar** и **Kanban**). +Вложенные элементы с атрибутом `data-wx-portal-root="1"` служат контейнерами для компонентов DHTMLX (Toolbar, Kanban). ## API окружения Salesforce -DHTMLX Kanban включает вспомогательный класс `salesForceEnv`, который содержит методы для ручного управления окружением Salesforce. Вы можете импортировать класс `salesForceEnv` следующим образом: +DHTMLX Kanban предоставляет вспомогательный класс `salesForceEnv` с методами для ручного управления окружением Salesforce. Импортируйте его следующим образом: -```jsx {4} +~~~jsx {4} import { Kanban, Toolbar, salesForceEnv } from "@dhx/trial-kanban"; -``` +~~~ :::note -Обычно специфические для Salesforce методы не требуются, но они доступны как запасной вариант на случай, если автоматическое определение не сработает. +Специфические для Salesforce методы, как правило, не требуются. Используйте их как запасной вариант, если автоматическое определение не сработает. ::: ### Специфические методы Salesforce -Вы можете использовать следующие методы вспомогательного класса `salesForceEnv`: +Вспомогательный класс `salesForceEnv` предоставляет следующие методы: | Метод | Описание | | :------------------------------------------------------------- | :----------------------------------------------------------------------- | @@ -57,7 +57,9 @@ import { | `salesForceEnv.addGlobalEvent(eventName, handler, htmlElement)`| Подключает глобальное событие к первому доступному HTML-элементу | | `salesForceEnv.getTopNode()` | Возвращает первый доступный HTML-элемент в DOM-иерархии Salesforce | -```jsx {4,7} +Следующий фрагмент кода импортирует класс и запускает проверку определения окружения: + +~~~jsx {4,7} import { Kanban, Toolbar, @@ -65,7 +67,7 @@ import { } from "@dhx/trial-kanban"; salesForceEnv.detect(); -``` +~~~ ### Дополнительная экспортируемая функция @@ -73,7 +75,9 @@ salesForceEnv.detect(); | :------------------- | :-------------------------------------------------------------------------------- | | `enableSalesForce()` | Ручная установка окружения Salesforce, если автоматическое определение недоступно | -```jsx {5,8} +Следующий фрагмент кода импортирует `enableSalesForce()` и принудительно устанавливает окружение Salesforce: + +~~~jsx {5,8} import { Kanban, Toolbar, @@ -82,18 +86,20 @@ import { } from "@dhx/trial-kanban"; enableSalesForce(); -``` +~~~ ## Этапы работы -1. Добавьте атрибут `data-wx-root="true"` в ваш LWC-контейнер -2. Импортируйте и инициализируйте DHTMLX Kanban и Toolbar (опционально) -3. Виджет Kanban на JavaScript автоматически определяет контекст Salesforce и применяет внутреннюю конфигурацию -4. Нет необходимости вызывать функцию `enableSalesForce()` или использовать методы `salesForceEnv`, если ваше приложение не работает в нестандартном сценарии встраивания +1. Добавьте атрибут `data-wx-root="true"` в ваш LWC-контейнер. +2. Импортируйте и инициализируйте Kanban и Toolbar (Toolbar опционален). +3. Kanban автоматически определяет контекст Salesforce и применяет внутреннюю конфигурацию. +4. Не вызывайте `enableSalesForce()` и не используйте методы `salesForceEnv`, если приложение не работает в нестандартном сценарии встраивания. ### Пример -```jsx title="kanban.js" +Следующий фрагмент кода инициализирует Kanban и Toolbar внутри LWC-компонента: + +~~~jsx title="kanban.js" import { Kanban, Toolbar } from "@dhx/trial-kanban"; import "@dhx/trial-kanban/dist/kanban.css"; @@ -105,6 +111,6 @@ export default class KanbanLWC { const toolbar = new Toolbar(toolbar_container, { api: kanban.api }); } } -``` +~~~ -Теперь компонент DHTMLX Kanban полностью интегрирован в ваше окружение **Salesforce Lightning**. Виджет автоматически обрабатывает DOM-иерархию и привязку событий внутри LWC. Вы можете продолжить настройку Kanban через его стандартный API, а также изменять внешний вид и логику Kanban в соответствии с требованиями вашего проекта. Финальный пример вы найдете на [**GitHub**](https://github.com/DHTMLX/salesforce-lwc-demo). \ No newline at end of file +DHTMLX Kanban теперь интегрирован в окружение Salesforce Lightning. Виджет обрабатывает DOM-иерархию и привязку событий внутри LWC. Продолжите настройку Kanban через его стандартный API для изменения внешнего вида и поведения. Полный пример доступен на [GitHub](https://github.com/DHTMLX/salesforce-lwc-demo). diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md index 3e74547..bfaabc0 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md @@ -7,74 +7,71 @@ description: Ознакомьтесь с документацией по инт # Интеграция с Svelte :::tip -Перед чтением этой документации рекомендуется ознакомиться с базовыми понятиями и паттернами **Svelte**. Для обновления знаний обратитесь к [**документации Svelte**](https://svelte.dev/docs/svelte/overview). +Это руководство предполагает знакомство с концепциями и паттернами Svelte. Для справки обратитесь к [документации Svelte](https://svelte.dev/docs/svelte/overview). ::: -DHTMLX Kanban совместим с **Svelte**. Мы подготовили примеры кода по использованию DHTMLX Kanban с **Svelte**. Для получения дополнительной информации смотрите соответствующий [**пример на GitHub**](https://github.com/DHTMLX/svelte-kanban-demo). +DHTMLX Kanban совместим с Svelte. Полный пример кода доступен на [GitHub](https://github.com/DHTMLX/svelte-kanban-demo). ## Создание проекта :::info -Перед началом создания нового проекта установите [**Vite**](https://vite.dev/) (опционально) и [**Node.js**](https://nodejs.org/en/). +Перед созданием проекта установите [Vite](https://vite.dev/) (опционально) и [Node.js](https://nodejs.org/en/). ::: -Существует несколько способов создания проекта на **Svelte**: +Проект на Svelte можно настроить одним из двух способов: -- можно использовать [**SvelteKit**](https://kit.svelte.dev/) - -или - -- можно также использовать **Svelte с Vite** (без SvelteKit): +- с помощью [SvelteKit](https://kit.svelte.dev/) — рекомендуется +- с помощью Svelte и Vite (без SvelteKit) — выполните: ~~~json npm create vite@latest ~~~ -Подробнее смотрите в [связанной статье](https://svelte.dev/docs/svelte/overview). +Подробнее смотрите в [документации Svelte](https://svelte.dev/docs/svelte/overview). ### Установка зависимостей -Назовём проект **my-svelte-kanban-app** и перейдём в директорию приложения: +Назовите проект *my-svelte-kanban-app*. Перейдите в директорию приложения: ~~~json cd my-svelte-kanban-app ~~~ -Установите зависимости и запустите dev-сервер. Для этого используйте менеджер пакетов: +Установите зависимости и запустите dev-сервер с помощью одного из менеджеров пакетов: -- если вы используете [**yarn**](https://yarnpkg.com/), выполните следующие команды: +- Для [yarn](https://yarnpkg.com/): ~~~json yarn yarn start ~~~ -- если вы используете [**npm**](https://www.npmjs.com/), выполните следующие команды: +- Для [npm](https://www.npmjs.com/): ~~~json npm install npm run dev ~~~ -Приложение должно запуститься на localhost (например, `http://localhost:3000`). +Приложение запустится на адресе localhost (например, `http://localhost:3000`). ## Создание Kanban -Теперь необходимо получить исходный код DHTMLX Kanban. Сначала остановите приложение и установите пакет Kanban. +Остановите dev-сервер и установите пакет Kanban. ### Шаг 1. Установка пакета -Скачайте [**пробный пакет Kanban**](/how_to_start/#installing-kanban-via-npm-or-yarn) и следуйте шагам, описанным в файле README. Обратите внимание, что пробная версия Kanban доступна только 30 дней. +Скачайте [пробный пакет Kanban](/how_to_start/#installing-kanban-via-npm-or-yarn) и следуйте шагам, описанным в файле README. Пробная версия доступна 30 дней. ### Шаг 2. Создание компонента -Теперь нужно создать компонент Svelte, чтобы добавить Kanban с Toolbar в приложение. Создайте новый файл в директории ***src/*** и назовите его ***Kanban.svelte***. +Создайте компонент Svelte, который монтирует Kanban и Toolbar. Добавьте новый файл *Kanban.svelte* в директорию *src/*. #### Импорт исходных файлов -Откройте файл ***Kanban.svelte*** и импортируйте исходные файлы Kanban. Обратите внимание: +Откройте *Kanban.svelte* и импортируйте исходные файлы Kanban. Пути для импорта зависят от версии пакета: -- если вы используете PRO-версию и устанавливаете Kanban из локальной папки, пути для импорта будут такими: +- Для PRO-версии, установленной из локальной папки: ~~~html title="Kanban.svelte" ~~~ -В зависимости от используемого пакета исходные файлы могут быть минифицированы. В этом случае убедитесь, что импортируете CSS-файл как **kanban.min.css**. +Если пакет поставляется с минифицированными исходными файлами, импортируйте CSS-файл как *kanban.min.css*. -- если вы используете пробную версию Kanban, укажите следующие пути: +- Для пробной версии: ~~~html title="Kanban.svelte" ~~~ -В этом руководстве показано, как настраивать **пробную** версию Kanban. +В этом руководстве используется пробная версия Kanban. -#### Задание контейнеров и добавление Kanban с Toolbar +#### Настройка контейнеров и инициализация Kanban -Чтобы отобразить Kanban с Toolbar на странице, необходимо создать контейнеры для Kanban и Toolbar, а затем инициализировать эти компоненты с помощью соответствующих конструкторов: +Чтобы отобразить Kanban с Toolbar, создайте два контейнера и вызовите конструкторы. Следующий фрагмент кода привязывает контейнеры и создаёт экземпляры компонентов внутри `onMount()`: ~~~html {3,6,10-11,13-17,27-28} title="Kanban.svelte" ~~~ -После этого вы можете запустить приложение и увидеть Kanban с загруженными данными на странице. +Запустите приложение, чтобы увидеть заполненную доску Kanban на странице. import trial from '@site/static/img/trial_kanban.png'; Kanban with Svelte -Теперь вы знаете, как интегрировать DHTMLX Kanban с Svelte. Вы можете настроить код под свои задачи. Финальный расширенный пример доступен на [**GitHub**](https://github.com/DHTMLX/svelte-kanban-demo). +Полный проект доступен на [GitHub](https://github.com/DHTMLX/svelte-kanban-demo). diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md index 3179f30..da2b078 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md @@ -7,26 +7,26 @@ description: Узнайте об интеграции с Vue в документ # Интеграция с Vue :::tip -Перед чтением этой документации рекомендуется ознакомиться с базовыми концепциями и паттернами [**Vue**](https://vuejs.org/). Для повторения знаний обратитесь к [**документации по Vue 3**](https://vuejs.org/guide/introduction.html#getting-started). +Это руководство предполагает знакомство с концепциями и паттернами [Vue](https://vuejs.org/). Для повторения знаний обратитесь к [документации по Vue 3](https://vuejs.org/guide/introduction.html#getting-started). ::: -DHTMLX Kanban совместим с **Vue**. Мы подготовили примеры кода по использованию DHTMLX Kanban с **Vue 3**. Подробнее смотрите в соответствующем [**примере на GitHub**](https://github.com/DHTMLX/vue-kanban-demo). +DHTMLX Kanban совместим с Vue. Полный пример кода для Vue 3 доступен на [GitHub](https://github.com/DHTMLX/vue-kanban-demo). ## Создание проекта :::info -Перед созданием нового проекта установите [**Node.js**](https://nodejs.org/en/). +Перед созданием нового проекта установите [Node.js](https://nodejs.org/en/). ::: -Для создания проекта на **Vue** выполните следующую команду: +Следующая команда создаёт новый проект Vue: ~~~json npm create vue@latest ~~~ -Эта команда установит и запустит `create-vue`, официальный инструмент для создания проектов на **Vue**. Подробнее смотрите в разделе [Vue.js Quick Start](https://vuejs.org/guide/quick-start.html#creating-a-vue-application). +Команда запускает `create-vue`, официальный инструмент для создания проектов на Vue. Подробнее смотрите в разделе [Vue.js Quick Start](https://vuejs.org/guide/quick-start.html#creating-a-vue-application). -Назовём проект **my-vue-kanban-app**. +Назовём проект *my-vue-kanban-app*. ### Установка зависимостей @@ -36,16 +36,16 @@ npm create vue@latest cd my-vue-kanban-app ~~~ -Установите зависимости и запустите dev-сервер. Для этого используйте менеджер пакетов: +Установите зависимости и запустите dev-сервер с помощью одного из менеджеров пакетов: -- если используете [**yarn**](https://yarnpkg.com/), выполните следующие команды: +- Для [yarn](https://yarnpkg.com/): ~~~jsx yarn -yarn start // или yarn dev +yarn start // or yarn dev ~~~ -- если используете [**npm**](https://www.npmjs.com/), выполните следующие команды: +- Для [npm](https://www.npmjs.com/): ~~~json npm install @@ -56,21 +56,21 @@ npm run dev ## Создание Kanban -Теперь необходимо получить исходный код DHTMLX Kanban. Сначала остановите приложение и установите пакет Kanban. +Остановите dev-сервер и установите пакет Kanban. ### Шаг 1. Установка пакета -Скачайте [**триальную версию Kanban**](/how_to_start/#installing-kanban-via-npm-or-yarn) и следуйте инструкциям из файла README. Обратите внимание, что триальная версия Kanban доступна только 30 дней. +Скачайте [триальную версию Kanban](/how_to_start/#installing-kanban-via-npm-or-yarn) и следуйте инструкциям из файла README. Триальная версия доступна 30 дней. ### Шаг 2. Создание компонента -Теперь нужно создать компонент Vue, чтобы добавить Kanban с Toolbar в приложение. Создайте новый файл в директории ***src/components/*** и назовите его ***Kanban.vue***. +Создайте компонент Vue, который монтирует Kanban и Toolbar. Добавьте новый файл *Kanban.vue* в директорию *src/components/*. #### Импорт исходных файлов -Откройте файл ***Kanban.vue*** и импортируйте исходные файлы Kanban. Обратите внимание: +Откройте *Kanban.vue* и импортируйте исходные файлы Kanban. Пути к импортам зависят от версии пакета: -- если вы используете PRO-версию и устанавливаете пакет Kanban из локальной папки, пути к импортам будут такими: +- Для PRO-версии, установленной из локальной папки: ~~~html title="Kanban.vue" ~~~ -Обратите внимание, что в зависимости от используемого пакета исходные файлы могут быть минифицированы. В этом случае убедитесь, что импортируете CSS-файл как **kanban.min.css**. +Если пакет поставляется с минифицированными исходными файлами, импортируйте CSS-файл как *kanban.min.css*. -- если вы используете триальную версию Kanban, укажите следующие пути: +- Для триальной версии: ~~~html title="Kanban.vue" ~~~ -В этом руководстве показано, как настроить **триальную** версию Kanban. +В этом руководстве используется триальная версия Kanban. -#### Установка контейнеров и добавление Kanban с Toolbar +#### Настройка контейнеров и инициализация Kanban -Чтобы отобразить Kanban с Toolbar на странице, необходимо создать контейнеры для Kanban и Toolbar и инициализировать эти компоненты с помощью соответствующих конструкторов: +Чтобы отобразить Kanban с Toolbar, создайте два контейнера и вызовите конструкторы. Следующий фрагмент кода настраивает refs и инициализирует компоненты внутри `mounted()`: ~~~html {2,7-8,10-14} title="Kanban.vue" @@ -130,25 +130,25 @@ export default { #### Добавление стилей -Для корректного отображения Kanban необходимо задать важные стили для Kanban и его контейнера в основном css-файле проекта: +Добавьте стили для Kanban и контейнера в основной CSS-файл: ~~~css title="main.css" -/* стили для начальной страницы */ +/* specify styles for initial page */ html, body, -#app { /* убедитесь, что используется корневой контейнер #app */ +#app { /* make sure that you use the #app root container */ height: 100%; padding: 0; margin: 0; } -/* стили для контейнера Kanban и Toolbar */ +/* specify styles for Kanban and Toolbar container */ .component_container { height: 100%; margin: 0 auto; } -/* стили для контейнера Kanban */ +/* specify styles for Kanban container */ .widget { height: calc(100% - 56px); } @@ -156,7 +156,7 @@ body, #### Загрузка данных -Чтобы добавить данные в Kanban, необходимо предоставить набор данных. Можно создать файл ***data.js*** в директории ***src/*** и добавить туда данные: +Чтобы наполнить Kanban данными, предоставьте набор данных. Создайте файл *data.js* в директории *src/*: ~~~jsx {2,14,37,48} title="data.js" export function getData() { @@ -184,7 +184,7 @@ export function getData() { type: "feature", }, { - label: "Archive the cards/kanbans ", + label: "Archive the cards/boards", priority: 3, color: "#58C3FE", users: [4], @@ -210,7 +210,7 @@ export function getData() { } ~~~ -Далее откройте файл ***App.vue***, импортируйте данные и инициализируйте их через внутренний метод `data()`. После этого можно передать данные в созданный компонент `` как **props**: +Откройте *App.vue* и импортируйте набор данных. Инициализируйте значения через внутренний метод `data()`, затем передайте их в новый компонент `` как props: ~~~html {3,8,10-12,19} title="App.vue" ~~~ -## 创建容器 +## Create a container -为 Kanban 添加一个容器，并为其指定一个 ID，例如 *"root"*： +为 Kanban 添加一个容器，并为其分配一个 ID，例如 `root`： ~~~jsx title="index.html"
~~~ -如果您希望同时创建带有 *Toolbar* 的控件，需要为其单独添加一个容器： +如果需要同时创建带有 Toolbar 的控件，请为 Toolbar 单独添加一个容器： ~~~jsx {1} title="index.html"
// Toolbar 的容器
// Kanban 的容器 ~~~ -## 初始化 Kanban +## Initialize Kanban -使用 **kanban.Kanban** 构造函数初始化 Kanban。它接受两个参数： +使用 `kanban.Kanban` 构造函数初始化 Kanban。构造函数接受两个参数： -- 一个 HTML 容器（HTML 容器的 ID） -- 一个包含配置属性的对象。[完整属性列表见此处](#配置属性) +- HTML 容器的 CSS 选择器（或容器元素本身） +- 配置对象（参见[完整属性列表](#configuration-properties)） + +以下代码片段创建一个 Kanban 实例： ~~~jsx title="index.html" -// 创建 Kanban +// create Kanban new kanban.Kanban("#root", { - // 配置属性 + // configuration properties }); ~~~ -如果您希望同时创建带有 *Toolbar* 的控件，需要使用 **kanban.Toolbar** 构造函数单独初始化 Toolbar。它同样接受两个参数： - -- 一个 HTML 容器（HTML 容器的 ID） -- 一个包含配置属性的对象 +如需同时创建带有 Toolbar 的控件，请使用 `kanban.Toolbar` 构造函数单独初始化 Toolbar。Toolbar 控件通过 [`api`](api/config/toolbar_api_config.md) 参数操作 Kanban 实例。传入 `board.api` 以将 Toolbar 绑定到看板： -~~~jsx {6-8} title="index.html" -// 创建 Kanban +~~~jsx {7} title="index.html" +// create Kanban const board = new kanban.Kanban("#root", { - // 配置属性 + // configuration properties }); new kanban.Toolbar("#toolbar", { - // 配置属性 + api: board.api, // required: links Toolbar controls to the Kanban instance + // other configuration properties }); ~~~ :::info -如需了解更多关于 Kanban Toolbar 配置的信息，请阅读 [**配置**](guides/configuration.md/#toolbar) 章节 +有关 Toolbar 配置的详细信息，请阅读[配置](guides/configuration.md#toolbar)章节。 ::: -### 配置属性 +### Configuration properties -:::note -配置 **Kanban** 的完整属性列表可在[**此处**](api/overview/properties_overview.md)查看。
-配置 **Kanban Toolbar** 的完整属性列表可在[**此处**](api/overview/toolbar_properties_overview.md)查看。 -::: +完整配置参考： + +- [Kanban 属性概览](api/overview/properties_overview.md) — 所有 Kanban 配置属性 +- [Toolbar 属性概览](api/overview/toolbar_properties_overview.md) — 所有 Toolbar 配置属性 ## 示例 -在以下代码片段中，您可以看到如何通过初始数据初始化 **Kanban**： +以下代码片段使用示例数据初始化 Kanban： - \ No newline at end of file + diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration.md index 2352d17..c15ba3d 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration.md @@ -6,12 +6,20 @@ description: 您可以在DHTMLX JavaScript Kanban库的文档中了解集成方 # 与DHTMLX小部件集成 -您可以将DHTMLX Kanban与其他DHTMLX小部件集成使用（例如，[Gantt](https://docs.dhtmlx.com/gantt/)、[Scheduler](https://docs.dhtmlx.com/scheduler/)、[To Do List](https://docs.dhtmlx.com/todolist/)）。请参考以下示例。 +您可以将DHTMLX Kanban与其他DHTMLX小部件集成使用，包括： -## 与DHTMLX Gantt和Scheduler的集成 +- [Gantt](https://docs.dhtmlx.com/gantt/) +- [Scheduler](https://docs.dhtmlx.com/scheduler/) +- [To Do List](https://docs.dhtmlx.com/todolist/) + +## Gantt和Scheduler {#gantt-and-scheduler} + +以下示例将Kanban看板与Gantt和Scheduler视图嵌入在一起： -## 与DHTMLX To Do List的集成 +## To Do List + +以下示例将Kanban看板与To Do List嵌入在一起： - \ No newline at end of file + diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md index d229ba7..52c3246 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md @@ -7,28 +7,28 @@ description: 您可以在 DHTMLX JavaScript Kanban 库的文档中了解与 Angu # 与 Angular 的集成 :::tip -在阅读本篇文档前，您应熟悉 **Angular** 的基本概念和模式。如需回顾相关知识，请参考 [**Angular documentation**](https://v17.angular.io/docs)。 +本指南假设您已熟悉 Angular 的概念和模式。如需了解背景知识，请参考 [Angular documentation](https://v17.angular.io/docs)。 ::: -DHTMLX Kanban 与 **Angular** 兼容。我们已经准备了如何在 **Angular** 中使用 DHTMLX Kanban 的代码示例。更多信息请参阅对应的 [**GitHub 示例**](https://github.com/DHTMLX/angular-kanban-demo)。 +DHTMLX Kanban 与 Angular 兼容。完整代码示例可在 [GitHub](https://github.com/DHTMLX/angular-kanban-demo) 上查看。 ## 创建项目 :::info -在开始创建新项目之前，请先安装 [**Angular CLI**](https://v17.angular.io/cli) 和 [**Node.js**](https://nodejs.org/en/)。 +在创建项目之前，请先安装 [Angular CLI](https://v17.angular.io/cli) 和 [Node.js](https://nodejs.org/en/)。 ::: -使用 Angular CLI 创建一个新的 **my-angular-kanban-app** 项目。请运行以下命令： +以下命令使用 Angular CLI 创建一个新的 *my-angular-kanban-app* 项目： ~~~json ng new my-angular-kanban-app ~~~ :::note -如果您希望按照本指南操作，请在创建新的 Angular 应用时禁用服务端渲染（SSR）和静态站点生成（SSG/Prerendering）！ +在出现提示时，禁用服务端渲染（SSR）和静态站点生成（SSG/Prerendering），以使项目与本指南保持一致。 ::: -上述命令会安装所有必要工具，无需额外运行其他命令。 +该命令会安装所有必要工具，无需额外运行其他命令。 ### 安装依赖 @@ -38,48 +38,48 @@ ng new my-angular-kanban-app cd my-angular-kanban-app ~~~ -安装依赖并启动开发服务器。为此，请使用 [**yarn**](https://yarnpkg.com/) 包管理器： +使用 [yarn](https://yarnpkg.com/) 包管理器安装依赖并启动开发服务器： ~~~json yarn yarn start ~~~ -应用将会在本地（例如 `http://localhost:3000`）运行。 +应用将会在本地地址（例如 `http://localhost:3000`）运行。 ## 创建 Kanban -接下来需要获取 DHTMLX Kanban 的源代码。首先，停止当前应用并开始安装 Kanban 包。 +停止开发服务器并安装 Kanban 包。 ### 步骤 1. 安装包 -下载 [**试用版 Kanban 包**](/how_to_start/#install-kanban-via-npm-or-yarn)，并按照 README 文件中的步骤进行操作。请注意，试用版 Kanban 仅可使用 30 天。 +下载 [试用版 Kanban 包](/how_to_start/#install-kanban-via-npm-or-yarn)，并按照 README 文件中的步骤进行操作。试用版可使用 30 天。 ### 步骤 2. 创建组件 -现在需要创建一个 Angular 组件，将 Kanban 和 Toolbar 添加到应用中。在 **src/app/** 目录下创建 **kanban** 文件夹，并在其中新建一个名为 **kanban.component.ts** 的文件。 +创建一个用于挂载 Kanban 和 Toolbar 的 Angular 组件。创建 *src/app/kanban/* 文件夹，并在其中添加 *kanban.component.ts* 文件。 #### 导入源文件 -打开 **kanban.component.ts** 文件并导入 Kanban 源文件。请注意： +打开 *kanban.component.ts* 并导入 Kanban 源文件。导入路径取决于所使用的包版本： -- 如果您使用 PRO 版本并从本地文件夹安装 Kanban 包，导入路径如下： +- 对于从本地文件夹安装的 PRO 版本： ~~~jsx import { Kanban, Toolbar } from 'dhx-kanban-package'; ~~~ -- 如果您使用 Kanban 的试用版，请指定如下路径： +- 对于试用版： ~~~jsx import { Kanban, Toolbar } from '@dhx/trial-kanban'; ~~~ -本教程展示了如何配置 **trial** 版本的 Kanban。 +本教程使用 Kanban 的试用版。 -#### 设置容器并初始化带有 Toolbar 的 Kanban +#### 设置容器并初始化 Kanban -要在页面上显示带有 Toolbar 的 Kanban，需要为 Kanban 和 Toolbar 设置容器，并使用相应的构造函数初始化这些组件： +要显示带有 Toolbar 的 Kanban，需要设置两个容器并调用构造函数。以下代码片段定义了组件模板、引用容器并创建实例： ~~~jsx {1,8-11,15-18,24-31} title="kanban.component.ts" import { Kanban, Toolbar } from '@dhx/trial-kanban'; @@ -124,7 +124,7 @@ export class KanbanComponent implements OnInit, OnDestroy { #### 添加样式 -为了正确显示 Kanban，需要提供相应的样式。为此，您可以在 **src/app/kanban/** 目录下创建 **kanban.component.css** 文件，并为 Kanban 及其容器指定必要样式： +为 Kanban 和容器添加样式。在 *src/app/kanban/* 目录下创建 *kanban.component.css* 文件： ~~~css title="kanban.component.css" /* 导入 Kanban 样式 */ @@ -152,7 +152,7 @@ body{ #### 加载数据 -要向 Kanban 添加数据，需要提供一组数据。您可以在 **src/app/kanban/** 目录下创建 **data.ts** 文件，并在其中添加一些数据： +要填充 Kanban，需要提供一组数据。在 *src/app/kanban/* 目录下创建 *data.ts* 文件： ~~~jsx {2,14,37,48} title="data.ts" export function getData() { @@ -206,7 +206,7 @@ export function getData() { } ~~~ -然后打开 ***kanban.component.ts*** 文件。导入数据文件，并在 `ngOnInit()` 方法中将相应的数据属性指定到 Kanban 的配置对象，如下所示： +打开 *kanban.component.ts*，导入数据集，并在 `ngOnInit()` 中将数据属性传入 Kanban 配置对象： ~~~jsx {2,23,25-27} title="kanban.component.ts" import { Kanban, Toolbar } from '@dhx/trial-kanban'; @@ -253,7 +253,7 @@ export class KanbanComponent implements OnInit, OnDestroy { } ~~~ -您也可以在 Angular 的 `ngOnInit()` 方法中使用 [`setConfig()`](/api/methods/js_kanban_setconfig_method/) 或 [`parse()`](/api/methods/js_kanban_parse_method/) 方法将数据加载到 Kanban。`setConfig` 或 `parse()` 方法在每次应用更改时都能实现数据重新加载。 +也可以在创建实例后，通过 `ngOnInit()` 中的 [`setConfig()`](/api/methods/js_kanban_setconfig_method/) 或 [`parse()`](/api/methods/js_kanban_parse_method/) 方法加载数据： ~~~jsx {2,23,37-42} title="kanban.component.ts" import { Kanban, Toolbar } from '@dhx/trial-kanban'; @@ -307,13 +307,13 @@ export class KanbanComponent implements OnInit, OnDestroy { } ~~~ -现在 Kanban 组件已经可以使用。当该元素被添加到页面时，会自动初始化带有数据的 Kanban。您还可以根据需要提供其他配置设置。请访问我们的 [Kanban API 文档](/api/overview/properties_overview/) 查看所有可用属性的完整列表。 +Kanban 组件现已可以使用。当该元素渲染时，Kanban 会初始化并加载数据。有关支持的配置属性的完整列表，请参阅 [Kanban API 参考](/api/overview/properties_overview/)。 #### 事件处理 -当用户在 Kanban 上执行某些操作时，会触发事件。您可以利用这些事件检测操作并执行所需代码。参阅 [完整事件列表](/api/overview/events_overview/)。 +用户在 Kanban 中的操作会触发事件。通过监听事件可以响应特定操作。完整列表请参阅 [Kanban 事件参考](/api/overview/events_overview/)。 -打开 **kanban.component.ts** 文件，并按以下方式补充 `ngOnInit()` 方法： +打开 *kanban.component.ts* 并扩展 `ngOnInit()` 方法： ~~~jsx {5-7} title="kanban.component.ts" // ... @@ -332,7 +332,7 @@ ngOnDestroy(): void { ### 步骤 3. 将 Kanban 添加到应用中 -要将 ***KanbanComponent*** 组件添加到您的应用中，请打开 ***src/app/app.component.ts*** 文件，并用以下内容替换默认代码： +要在应用中注册 `KanbanComponent`，请打开 *src/app/app.component.ts* 并替换默认代码： ~~~jsx {5} title="app.component.ts" import { Component } from "@angular/core"; @@ -346,7 +346,7 @@ export class AppComponent { } ~~~ -然后在 ***src/app/*** 目录下创建 ***app.module.ts*** 文件，并按如下方式指定 *KanbanComponent*： +在 *src/app/* 目录下创建 *app.module.ts* 并声明 `KanbanComponent`： ~~~jsx {4-5,8} title="app.module.ts" import { NgModule } from "@angular/core"; @@ -363,7 +363,7 @@ import { KanbanComponent } from "./kanban/kanban.component"; export class AppModule {} ~~~ -最后一步，打开 ***src/main.ts*** 文件，并用以下内容替换现有代码： +打开 *src/main.ts* 并替换现有代码： ~~~jsx title="main.ts" import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; @@ -373,14 +373,14 @@ platformBrowserDynamic() .catch((err) => console.error(err)); ~~~ -此后，您即可启动应用，在页面上看到加载了数据的 Kanban。 +运行应用，在页面上查看已填充数据的 Kanban 看板。 import trial from '@site/static/img/trial_kanban.png'; Kanban with Angular -现在您已经了解如何将 DHTMLX Kanban 集成到 Angular 中。您可以根据具体需求自定义代码。最终的高级示例可在 [**GitHub**](https://github.com/DHTMLX/angular-kanban-demo) 查看。 \ No newline at end of file +在 [GitHub](https://github.com/DHTMLX/angular-kanban-demo) 上查看完整项目。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_react.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_react.md index 41a356f..114abc3 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_react.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_react.md @@ -7,18 +7,18 @@ description: 您可以在 DHTMLX JavaScript Kanban 库的文档中了解与 Reac # 与 React 集成 :::tip -在阅读本篇文档之前，您应当熟悉 [**React**](https://react.dev) 的基本概念和模式。如需复习相关知识，请参考 [**React 官方文档**](https://react.dev/learn)。 +本指南假定您已熟悉 [React](https://react.dev) 的基本概念和模式。如需了解相关背景知识，请参考 [React 官方文档](https://react.dev/learn)。 ::: -DHTMLX Kanban 支持与 **React** 集成。我们已准备了如何在 **React** 中使用 DHTMLX Kanban 的代码示例。更多信息请参考 [**GitHub 示例**](https://github.com/DHTMLX/react-kanban-demo)。 +DHTMLX Kanban 支持与 React 集成。完整代码示例可在 [GitHub](https://github.com/DHTMLX/react-kanban-demo) 查看。 ## 创建项目 :::info -在开始创建新项目之前，请先安装 [**Vite**](https://vite.dev/)（可选）和 [**Node.js**](https://nodejs.org/en/)。 +在创建项目之前，请先安装 [Vite](https://vite.dev/)（可选）和 [Node.js](https://nodejs.org/en/)。 ::: -您可以创建一个基础的 **React** 项目，或使用 **React + Vite**。我们将项目命名为 **my-react-kanban-app**： +创建一个基础的 React 项目（或 React + Vite）。将项目命名为 *my-react-kanban-app*： ~~~json npx create-react-app my-react-kanban-app @@ -32,61 +32,61 @@ npx create-react-app my-react-kanban-app cd my-react-kanban-app ~~~ -安装依赖并启动开发服务器。您可以根据使用的包管理器选择命令： +使用以下任一包管理器安装依赖并启动开发服务器： -- 如果使用 [**yarn**](https://yarnpkg.com/)，运行以下命令： +- 使用 [yarn](https://yarnpkg.com/)： ~~~json yarn yarn start ~~~ -- 如果使用 [**npm**](https://www.npmjs.com/)，运行以下命令： +- 使用 [npm](https://www.npmjs.com/)： ~~~json npm install npm run dev ~~~ -应用会在本地服务器上运行（例如 `http://localhost:3000`）。 +应用会在本地服务器地址上运行（例如 `http://localhost:3000`）。 ## 创建 Kanban -现在您需要获取 DHTMLX Kanban 的源代码。首先，停止应用并安装 Kanban 包。 +停止开发服务器并安装 Kanban 包。 ### 步骤 1. 安装包 -下载 [**试用版 Kanban 包**](/how_to_start/#install-kanban-via-npm-or-yarn)，并按照 README 文件中的步骤操作。请注意，试用版 Kanban 仅可使用 30 天。 +下载 [**试用版 Kanban 包**](/how_to_start/#install-kanban-via-npm-or-yarn)，并按照 README 文件中的步骤操作。试用版可使用 30 天。 ### 步骤 2. 创建组件 -现在需要创建一个 React 组件，将 Kanban 添加到应用中。在 ***src/*** 目录下新建一个文件，命名为 ***Kanban.jsx***。 +创建一个将 Kanban 添加到应用中的 React 组件。在 *src/* 目录下新建一个文件，命名为 *Kanban.jsx*。 #### 导入源文件 -打开 ***Kanban.jsx*** 文件并导入 Kanban 源文件。注意： +打开 *Kanban.jsx* 并导入 Kanban 源文件。导入路径取决于所用的包版本： -- 如果您使用 PRO 版本并从本地文件夹安装 Kanban 包，导入路径如下： +- 使用从本地文件夹安装的 PRO 版本： ~~~jsx title="Kanban.jsx" import { Kanban, Toolbar } from 'dhx-kanban-package'; import 'dhx-kanban-package/dist/kanban.css'; ~~~ -请注意，根据所用包的不同，源文件可能是压缩版。此时请确保导入的 CSS 文件为 ***kanban.min.css***。 +如果包附带压缩版源文件，请将 CSS 文件导入为 *kanban.min.css*。 -- 如果您使用 Kanban 试用版，请指定以下路径： +- 使用试用版： ~~~jsx title="Kanban.jsx" import { Kanban, Toolbar } from '@dhx/trial-kanban'; import "@dhx/trial-kanban/dist/kanban.css"; ~~~ -本教程将展示如何配置 **试用版** Kanban。 +本教程使用 Kanban 的试用版。 -#### 设置容器并添加 Kanban 和 Toolbar +#### 设置容器并初始化 Kanban -要在页面上显示带有 Toolbar 的 Kanban，需要为 Kanban 和 Toolbar 创建容器，并使用相应的构造函数初始化这些组件： +要在页面上显示带有 Toolbar 的 Kanban，需要创建两个容器并调用相应的构造函数。以下代码片段在 `useEffect()` 中绑定 ref 并实例化组件： ~~~jsx {2,6-7,10-11,13-17} title="Kanban.jsx" import { useEffect, useRef } from "react"; @@ -122,10 +122,10 @@ export default function KanbanComponent(props) { #### 添加样式 -为了正确显示 Kanban，需要在项目的主 css 文件中为 Kanban 及其容器指定必要样式： +在项目的主 CSS 文件中为 Kanban 及其容器添加样式： ~~~css title="index.css" -/* 页面初始样式 */ +/* specify styles for initial page */ html, body, #root { @@ -134,13 +134,13 @@ body, margin: 0; } -/* Kanban 和 Toolbar 容器样式 */ +/* specify styles for Kanban and Toolbar container */ .component_container { height: 100%; margin: 0 auto; } -/* Kanban 容器样式 */ +/* specify styles for Kanban container */ .widget { height: calc(100% - 56px); } @@ -148,7 +148,7 @@ body, #### 加载数据 -要向 Kanban 添加数据，需要提供一个数据集。可以在 ***src/*** 目录下新建 ***data.js*** 文件，并添加一些数据： +要向 Kanban 填充数据，需要提供一个数据集。在 *src/* 目录下新建 *data.js* 文件： ~~~jsx {2,14,37,48} title="data.js" export function getData() { @@ -202,7 +202,7 @@ export function getData() { } ~~~ -然后打开 ***App.js*** 文件并导入数据。之后可以将数据作为 **props** 传递给新创建的 `` 组件： +打开 *App.js*，导入数据集，并将数据作为 props 传递给新创建的 `` 组件： ~~~jsx {2,5-6} title="App.js" import Kanban from "./Kanban"; @@ -216,7 +216,7 @@ function App() { export default App; ~~~ -接着进入 ***Kanban.jsx*** 文件，将传递过来的 **props** 应用到 Kanban 配置对象中： +打开 *Kanban.jsx*，将 props 应用到 Kanban 配置对象中： ~~~jsx {5,11-13} title="Kanban.jsx" import { useEffect, useRef } from "react"; @@ -254,7 +254,7 @@ export default function KanbanComponent(props) { } ~~~ -您还可以在 React 的 `useEffect()` 方法中使用 [`setConfig()`](/api/methods/js_kanban_setconfig_method/) 或 [`parse()`](/api/methods/js_kanban_parse_method/) 方法将数据加载到 Kanban 中。`setConfig` 或 `parse()` 方法可在每次更改时重新加载数据。 +另外，也可以在创建实例后，在 `useEffect()` 中使用 [`setConfig()`](/api/methods/js_kanban_setconfig_method/) 或 [`parse()`](/api/methods/js_kanban_parse_method/) 加载数据： ~~~jsx {9-11,27} title="Kanban.jsx" import { useEffect, useRef } from "react"; @@ -265,9 +265,9 @@ export default function KanbanComponent(props) { let kanban_container = useRef(); let toolbar_container = useRef(); - let columns = props.columns; // 列数据 - let cards = props.cards; // 卡片数据 - let rows = props.rows; // 行数据 + let columns = props.columns; + let cards = props.cards; + let rows = props.rows; useEffect(() => { const kanban = new Kanban(kanban_container.current, { @@ -299,13 +299,13 @@ export default function KanbanComponent(props) { } ~~~ -现在 Kanban 组件已经准备就绪。当该元素被添加到页面时，会初始化并加载数据。您还可以根据需要提供配置项。请访问我们的 [Kanban API 文档](/api/overview/properties_overview/)，查看全部可用属性列表。 +Kanban 组件现已准备就绪。当元素渲染时，Kanban 会随数据一起初始化。完整的配置属性列表请参见 [Kanban API 参考](/api/overview/properties_overview/)。 #### 事件处理 -当用户在 Kanban 中执行某些操作时，会触发事件。您可以利用这些事件检测操作并执行相应代码。完整事件列表请见 [事件文档](/api/overview/events_overview/)。 +用户在 Kanban 中的操作会触发事件。通过监听事件可以对特定操作作出响应。完整列表请参见 [Kanban 事件参考](/api/overview/events_overview/)。 -打开 ***Kanban.jsx***，按如下方式完善 `useEffect()` 方法： +打开 *Kanban.jsx*，扩展 `useEffect()` 调用： ~~~jsx {5-7} title="Kanban.jsx" // ... @@ -323,14 +323,14 @@ useEffect(() => { // ... ~~~ -完成后，即可启动应用，在页面上查看加载了数据的 Kanban。 +运行应用，即可在页面上查看填充了数据的 Kanban 看板。 import trial from '@site/static/img/trial_kanban.png'; Kanban with React -现在您已经了解了如何将 DHTMLX Kanban 集成到 React 中。您可以根据具体需求自定义代码。最终的高级示例可在 [**GitHub**](https://github.com/DHTMLX/react-kanban-demo) 查看。 +完整项目可在 [GitHub](https://github.com/DHTMLX/react-kanban-demo) 查看。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_salesforce.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_salesforce.md index 66f7b3d..a3893c6 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_salesforce.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_salesforce.md @@ -7,49 +7,49 @@ description: 了解如何将 DHTMLX Kanban 集成到 Salesforce。本指南解 # 与 Salesforce 集成 :::tip -在阅读本说明文档之前，您应当熟悉 [**Salesforce**](https://www.salesforce.com/) 的基本概念和模式。如需回顾相关知识，请参考 [**Salesforce 文档**](https://developer.salesforce.com/docs)。 +本指南假设您已熟悉 [Salesforce](https://www.salesforce.com/) 的基本概念和模式。如需了解背景知识，请参考 [Salesforce 文档](https://developer.salesforce.com/docs)。 ::: -DHTMLX Kanban 兼容 [Salesforce](https://www.salesforce.com/) 平台。我们已准备了将 DHTMLX Kanban 添加到 Salesforce 环境的代码示例。更多信息请参考相应的 [GitHub 示例](https://github.com/DHTMLX/salesforce-lwc-demo)。 +DHTMLX Kanban 兼容 [Salesforce](https://www.salesforce.com/) 平台。完整代码示例可在 [GitHub](https://github.com/DHTMLX/salesforce-lwc-demo) 上查看。 :::note -JavaScript Kanban 组件会自动检测其运行在 [**Salesforce**](https://www.salesforce.com/) 环境中，并在内部配置集成逻辑。在大多数情况下，您无需手动调用任何 [**Salesforce 专用方法**](#salesforce-专用方法)。 +Kanban 组件会自动检测 Salesforce 环境，并在内部配置集成逻辑。在大多数情况下，您无需手动调用任何 [Salesforce 专用方法](#salesforce-专用方法)。 ::: ## 环境准备 -如果您想将 Kanban 添加到 Salesforce 项目中，需要在 *根* 容器上添加 `data-wx-root="true"` HTML 属性。此属性允许库定位挂载 **Kanban** 和 **Toolbar** 组件的主节点。 +如需将 Kanban 添加到 Salesforce 项目中，请在 *根* 容器上添加 `data-wx-root="true"` HTML 属性。库将通过此属性定位 Kanban 和 Toolbar 的主挂载节点： -```html title="kanban.html" +~~~html title="kanban.html" -``` +~~~ -带有 `data-wx-portal-root="1"` 属性的嵌套元素作为 DHTMLX 组件（例如 **Toolbar** 和 **Kanban**）的容器。 +带有 `data-wx-portal-root="1"` 属性的嵌套元素作为 DHTMLX 组件（Toolbar、Kanban）的容器。 ## Salesforce 环境 API -DHTMLX Kanban 包含 `salesForceEnv` 辅助类，用于手动控制 Salesforce 环境。您可以按如下方式导入 `salesForceEnv` 辅助类： +DHTMLX Kanban 提供 `salesForceEnv` 辅助类，包含用于手动控制 Salesforce 环境的方法。可按如下方式导入该辅助类： -```jsx {4} +~~~jsx {4} import { Kanban, Toolbar, salesForceEnv } from "@dhx/trial-kanban"; -``` +~~~ :::note -通常情况下，无需使用 Salesforce 专用方法，仅在自动检测失败时作为备用方案使用。 +通常情况下，无需使用 Salesforce 专用方法。仅在自动检测失败时将其作为备用方案使用。 ::: ### Salesforce 专用方法 -您可以使用 `salesForceEnv` 辅助类提供的以下方法： +`salesForceEnv` 辅助类提供以下方法： | 方法 | 描述 | | :------------------------------------------------------------- | :-------------------------------------------------------------- | @@ -57,7 +57,9 @@ import { | `salesForceEnv.addGlobalEvent(eventName, handler, htmlElement)`| 将全局事件绑定到第一个可用的 HTML 元素 | | `salesForceEnv.getTopNode()` | 返回 Salesforce DOM 层级中第一个可用的 HTML 元素 | -```jsx {4,7} +以下代码片段导入辅助类并运行检测： + +~~~jsx {4,7} import { Kanban, Toolbar, @@ -65,7 +67,7 @@ import { } from "@dhx/trial-kanban"; salesForceEnv.detect(); -``` +~~~ ### 额外导出函数 @@ -73,7 +75,9 @@ salesForceEnv.detect(); | :------------------- | :----------------------------------------------------------- | | `enableSalesForce()` | 当自动检测不可用时，手动设置 Salesforce 环境 | -```jsx {5,8} +以下代码片段导入 `enableSalesForce()` 并强制启用 Salesforce 环境： + +~~~jsx {5,8} import { Kanban, Toolbar, @@ -82,18 +86,20 @@ import { } from "@dhx/trial-kanban"; enableSalesForce(); -``` +~~~ ## 工作流程步骤 -1. 在您的 LWC 容器上添加 `data-wx-root="true"` 属性 -2. 导入并初始化 DHTMLX Kanban 和 Toolbar（可选） -3. JavaScript Kanban 组件会自动检测 Salesforce 上下文并应用内部配置 -4. 除非您的应用在非标准嵌入场景下运行，否则无需调用 `enableSalesForce()` 函数或使用 `salesForceEnv` 方法 +1. 在您的 LWC 容器上添加 `data-wx-root="true"` 属性。 +2. 导入并初始化 Kanban 和 Toolbar（Toolbar 为可选）。 +3. Kanban 会自动检测 Salesforce 上下文并应用内部配置。 +4. 除非您的应用在非标准嵌入场景下运行，否则无需调用 `enableSalesForce()` 函数或使用 `salesForceEnv` 方法。 ### 示例 -```jsx title="kanban.js" +以下代码片段在 LWC 组件中初始化 Kanban 和 Toolbar： + +~~~jsx title="kanban.js" import { Kanban, Toolbar } from "@dhx/trial-kanban"; import "@dhx/trial-kanban/dist/kanban.css"; @@ -105,6 +111,6 @@ export default class KanbanLWC { const toolbar = new Toolbar(toolbar_container, { api: kanban.api }); } } -``` +~~~ -现在 DHTMLX Kanban 组件已完全集成到您的 **Salesforce Lightning** 环境中。该组件会自动处理 LWC 内的 DOM 层级和事件绑定。您可以继续通过其标准 API 配置 Kanban，并根据项目需求自定义 Kanban 的外观和逻辑。最终示例可在 [**GitHub**](https://github.com/DHTMLX/salesforce-lwc-demo) 上查看。 \ No newline at end of file +DHTMLX Kanban 现已集成到 Salesforce Lightning 环境中。该组件自动处理 LWC 内的 DOM 层级和事件绑定。您可以继续通过标准 API 配置 Kanban，自定义外观和行为。完整示例可在 [GitHub](https://github.com/DHTMLX/salesforce-lwc-demo) 上查看。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md index 3b5bcae..bea6295 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md @@ -7,74 +7,71 @@ description: 您可以在 DHTMLX JavaScript Kanban 库的文档中了解与 Svel # 与 Svelte 集成 :::tip -在阅读本文档之前，您应当熟悉 **Svelte** 的基本概念和模式。如需复习相关知识，请参考 [**Svelte documentation**](https://svelte.dev/docs/svelte/overview)。 +本指南假设您已熟悉 Svelte 的概念和模式。如需了解相关背景，请参阅 [Svelte documentation](https://svelte.dev/docs/svelte/overview)。 ::: -DHTMLX Kanban 与 **Svelte** 兼容。我们已准备了如何在 **Svelte** 中使用 DHTMLX Kanban 的代码示例。更多信息请参考 [**Example on GitHub**](https://github.com/DHTMLX/svelte-kanban-demo)。 +DHTMLX Kanban 与 Svelte 兼容。完整的代码示例可在 [GitHub](https://github.com/DHTMLX/svelte-kanban-demo) 上找到。 ## 创建项目 :::info -在开始创建新项目之前，请安装 [**Vite**](https://vite.dev/)（可选）和 [**Node.js**](https://nodejs.org/en/)。 +在创建项目之前，请先安装 [Vite](https://vite.dev/)（可选）和 [Node.js](https://nodejs.org/en/)。 ::: -创建 **Svelte** 项目有多种方式： +通过以下两种方式之一创建 Svelte 项目： -- 您可以使用 [**SvelteKit**](https://kit.svelte.dev/) - -或者 - -- 您也可以使用 **Svelte with Vite**（不使用 SvelteKit）： +- 使用 [SvelteKit](https://kit.svelte.dev/) — 推荐 +- 使用 Svelte 和 Vite（不使用 SvelteKit）— 运行： ~~~json npm create vite@latest ~~~ -详细信息请参考 [相关文档](https://svelte.dev/docs/svelte/overview)。 +详细信息请参阅 [Svelte documentation](https://svelte.dev/docs/svelte/overview)。 ### 安装依赖 -我们将项目命名为 **my-svelte-kanban-app**，并进入应用目录： +将项目命名为 *my-svelte-kanban-app*，并进入应用目录： ~~~json cd my-svelte-kanban-app ~~~ -安装依赖并启动开发服务器。您可以根据使用的包管理器选择命令： +使用以下任一包管理器安装依赖并启动开发服务器： -- 如果使用 [**yarn**](https://yarnpkg.com/)，运行以下命令： +- 使用 [yarn](https://yarnpkg.com/)： ~~~json yarn yarn start ~~~ -- 如果使用 [**npm**](https://www.npmjs.com/)，运行以下命令： +- 使用 [npm](https://www.npmjs.com/)： ~~~json npm install npm run dev ~~~ -应用应在本地（例如 `http://localhost:3000`）运行。 +应用将在本地地址运行（例如 `http://localhost:3000`）。 ## 创建 Kanban -现在您需要获取 DHTMLX Kanban 源码。首先，停止应用并继续安装 Kanban 包。 +停止开发服务器并安装 Kanban 包。 ### 步骤 1. 安装包 -下载 [**trial Kanban package**](/how_to_start/#install-kanban-via-npm-or-yarn)，并按照 README 文件中的步骤操作。请注意，试用版 Kanban 仅可使用 30 天。 +下载 [**trial Kanban package**](/how_to_start/#install-kanban-via-npm-or-yarn)，并按照 README 文件中的步骤操作。试用版可使用 30 天。 ### 步骤 2. 创建组件 -现在需要创建一个 Svelte 组件，将带有 Toolbar 的 Kanban 添加到应用中。在 ***src/*** 目录下新建一个文件，命名为 ***Kanban.svelte***。 +创建一个用于挂载 Kanban 和 Toolbar 的 Svelte 组件。在 *src/* 目录下新建 *Kanban.svelte* 文件。 #### 导入源文件 -打开 ***Kanban.svelte*** 文件并导入 Kanban 源文件。请注意： +打开 *Kanban.svelte* 并导入 Kanban 源文件。导入路径取决于所用的包版本： -- 如果您使用 PRO 版本并从本地文件夹安装 Kanban 包，导入路径如下： +- 使用从本地文件夹安装的 PRO 版本时： ~~~html title="Kanban.svelte" ~~~ -注意根据所用包的不同，源文件可能已被压缩。在这种情况下，请确保导入的 CSS 文件为 **kanban.min.css**。 +如果包附带压缩后的源文件，请将 CSS 文件导入为 *kanban.min.css*。 -- 如果您使用 Kanban 的试用版，请指定以下路径： +- 使用试用版时： ~~~html title="Kanban.svelte" ~~~ -本教程展示了如何配置 Kanban 的 **trial** 版本。 +本教程使用 Kanban 的试用版。 -#### 设置容器并添加带有 Toolbar 的 Kanban +#### 设置容器并初始化 Kanban -要在页面上显示带有 Toolbar 的 Kanban，需要为 Kanban 和 Toolbar 创建容器，并使用相应的构造函数初始化这些组件： +要显示带有 Toolbar 的 Kanban，需创建两个容器并调用相应的构造函数。以下代码片段在 `onMount()` 中绑定容器并实例化组件： ~~~html {3,6,10-11,13-17,27-28} title="Kanban.svelte" @@ -134,7 +131,7 @@ onDestroy(() => { #### 加载数据 -要向 Kanban 添加数据，需要提供一组数据。您可以在 ***src/*** 目录下创建 ***data.js*** 文件并添加一些数据： +要向 Kanban 填充数据，需提供一组数据集。在 *src/* 目录下创建 *data.js* 文件： ~~~jsx {2,14,37,48} title="data.js" export function getData() { @@ -162,7 +159,7 @@ export function getData() { type: "feature", }, { - label: "Archive the cards/kanbans ", + label: "Archive the cards/boards", priority: 3, color: "#58C3FE", users: [4], @@ -188,7 +185,7 @@ export function getData() { } ~~~ -然后打开 ***App.svelte*** 文件，导入数据，并将其作为 **props** 传递给新创建的 `` 组件： +打开 *App.svelte*，导入数据集，并将数据作为 props 传递给新的 `` 组件： ~~~html {3,5,8} title="App.svelte" ~~~ -之后，您可以启动应用，在页面上查看加载了数据的 Kanban。 +运行应用，在页面上查看已填充数据的 Kanban 看板。 import trial from '@site/static/img/trial_kanban.png'; Kanban with Svelte -现在，您已经了解了如何将 DHTMLX Kanban 集成到 Svelte 中。您可以根据具体需求自定义代码。最终的高级示例可参见 [**GitHub**](https://github.com/DHTMLX/svelte-kanban-demo)。 +完整项目请参见 [GitHub](https://github.com/DHTMLX/svelte-kanban-demo)。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md index 53a41f1..a9b460e 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md @@ -7,26 +7,26 @@ description: 您可以在 DHTMLX JavaScript Kanban 库的文档中了解与 Vue # 与 Vue 集成 :::tip -在阅读本篇文档之前，您应当熟悉 [**Vue**](https://vuejs.org/) 的基本概念和模式。如需复习相关知识，请参阅 [**Vue 3 文档**](https://vuejs.org/guide/introduction.html#getting-started)。 +本指南假定您已熟悉 [Vue](https://vuejs.org/) 的基本概念和模式。如需了解背景知识，请参阅 [Vue 3 文档](https://vuejs.org/guide/introduction.html#getting-started)。 ::: -DHTMLX Kanban 与 **Vue** 兼容。我们已准备好如何在 **Vue 3** 中使用 DHTMLX Kanban 的代码示例。更多信息请参考对应的 [**GitHub 示例**](https://github.com/DHTMLX/vue-kanban-demo)。 +DHTMLX Kanban 与 Vue 兼容。Vue 3 的完整代码示例可在 [GitHub](https://github.com/DHTMLX/vue-kanban-demo) 上获取。 ## 创建项目 :::info -在开始创建新项目之前，请先安装 [**Node.js**](https://nodejs.org/en/)。 +在创建项目之前，请先安装 [Node.js](https://nodejs.org/en/)。 ::: -要创建一个 **Vue** 项目，请运行以下命令： +以下命令将创建一个新的 Vue 项目： ~~~json npm create vue@latest ~~~ -该命令会安装并执行 `create-vue`，即官方的 **Vue** 项目脚手架工具。详细信息请参考 [Vue.js 快速开始](https://vuejs.org/guide/quick-start.html#creating-a-vue-application)。 +该命令会运行 `create-vue`，即官方的 Vue 项目脚手架工具。详细信息请参考 [Vue.js 快速开始](https://vuejs.org/guide/quick-start.html#creating-a-vue-application)。 -我们将项目命名为 **my-vue-kanban-app**。 +将项目命名为 *my-vue-kanban-app*。 ### 安装依赖 @@ -36,41 +36,41 @@ npm create vue@latest cd my-vue-kanban-app ~~~ -安装依赖并启动开发服务器。您可以根据使用的包管理器选择以下命令： +使用以下任一包管理器安装依赖并启动开发服务器： -- 如果使用 [**yarn**](https://yarnpkg.com/)，请运行： +- 使用 [yarn](https://yarnpkg.com/)： ~~~jsx yarn yarn start // 或 yarn dev ~~~ -- 如果使用 [**npm**](https://www.npmjs.com/)，请运行： +- 使用 [npm](https://www.npmjs.com/)： ~~~json npm install npm run dev ~~~ -应用将会在本地服务器上运行（例如 `http://localhost:3000`）。 +应用将在本地服务器地址上运行（例如 `http://localhost:3000`）。 ## 创建 Kanban -现在您需要获取 DHTMLX Kanban 的源代码。首先停止应用的运行，然后安装 Kanban 包。 +停止开发服务器并安装 Kanban 包。 ### 步骤 1. 安装包 -下载 [**试用版 Kanban 包**](/how_to_start/#install-kanban-via-npm-or-yarn)，并按照 README 文件中的步骤操作。请注意，试用版 Kanban 仅可使用 30 天。 +下载 [试用版 Kanban 包](/how_to_start/#install-kanban-via-npm-or-yarn)，并按照 README 文件中的步骤操作。试用版可使用 30 天。 ### 步骤 2. 创建组件 -现在需要创建一个 Vue 组件，将 Kanban 和 Toolbar 添加到应用中。在 ***src/components/*** 目录下新建一个文件，命名为 ***Kanban.vue***。 +创建一个挂载 Kanban 和 Toolbar 的 Vue 组件。在 *src/components/* 目录下新建 *Kanban.vue* 文件。 #### 导入源文件 -打开 ***Kanban.vue*** 文件并导入 Kanban 的源文件。注意： +打开 *Kanban.vue* 并导入 Kanban 的源文件。导入路径取决于所用包的版本： -- 如果您使用 PRO 版本并从本地文件夹安装 Kanban 包，导入路径如下： +- 使用从本地文件夹安装的 PRO 版本： ~~~html title="Kanban.vue" ~~~ -请注意，根据所用包的不同，源文件可能已被压缩。在这种情况下，请确保导入的 CSS 文件为 **kanban.min.css**。 +如果包附带压缩后的源文件，请将 CSS 文件导入为 *kanban.min.css*。 -- 如果您使用 Kanban 试用版，请指定如下路径： +- 使用试用版： ~~~html title="Kanban.vue" ~~~ -本教程将演示如何配置 **试用版** Kanban。 +本教程使用 Kanban 的试用版。 -#### 设置容器并添加 Kanban 和 Toolbar +#### 设置容器并初始化 Kanban -要在页面上显示带有 Toolbar 的 Kanban，需要为 Kanban 和 Toolbar 创建容器，并使用相应的构造函数初始化这些组件： +要显示带有 Toolbar 的 Kanban，需要创建两个容器并调用相应的构造函数。以下代码片段在 `mounted()` 中绑定 refs 并实例化组件： ~~~html {2,7-8,10-14} title="Kanban.vue"