From 300f5c0fc9571db0147b83c29564e0d6d4c40964 Mon Sep 17 00:00:00 2001
From: Ni55aN <stoliarov.v.s@gmail.com>
Date: Thu, 28 Sep 2023 13:16:41 +0300
Subject: [PATCH] feat(examples): add Labeled connections example

---
 content/en/examples/11.labeled-connections.md | 24 +++++++++++++++++++
 content/uk/examples/11.labeled-connections.md | 24 +++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 content/en/examples/11.labeled-connections.md
 create mode 100644 content/uk/examples/11.labeled-connections.md

diff --git a/content/en/examples/11.labeled-connections.md b/content/en/examples/11.labeled-connections.md
new file mode 100644
index 00000000..57e28645
--- /dev/null
+++ b/content/en/examples/11.labeled-connections.md
@@ -0,0 +1,24 @@
+---
+image:
+  src: labeled-connections.png
+navigation:
+  pro: true
+  preview: labeled-connections.png
+---
+
+# Labeled connections
+
+::references
+:ref-guide{title="Guide" link="/docs/guides/renderers/react#full-connection-customization"}
+::
+
+You can add labels to connections by implementing a custom connection component. This approach provides you with full flexibility to customize and optimize this feature. All you need is:
+
+- create a custom connection component
+- calculate the position of the point relative to the path (start, middle, end)
+- display a text block at this position
+- create user-added connections with predefined labels
+
+:proExample{src="https://retejs-labeled-connections.netlify.app"}
+
+Although the example is built on React.js, you can easily adapt it for a different stack. To do so, simply copy certain modules from this example and substitute the custom connection component with one that matches your stack. If you encounter any issues with it, don't hesitate to reach out via GitHub Issues in the relevant repository.
diff --git a/content/uk/examples/11.labeled-connections.md b/content/uk/examples/11.labeled-connections.md
new file mode 100644
index 00000000..9aa423f6
--- /dev/null
+++ b/content/uk/examples/11.labeled-connections.md
@@ -0,0 +1,24 @@
+---
+image:
+  src: labeled-connections.png
+navigation:
+  pro: true
+  preview: labeled-connections.png
+---
+
+# Марковані з'єднання
+
+::references
+:ref-guide{title="Гайд" link="/uk/docs/guides/renderers/react#full-connection-customization"}
+::
+
+Ви можете додавати мітки до з’єднань, реалізувавши кастомний компонент з’єднання. Цей підхід надає вам повну гнучкість для налаштування та оптимізації цієї функції. Все, що тобі потрібно, це:
+
+- створити кастомний компонент з’єднання
+- розрахувати положення точки відносно шляху (початок, середина, кінець)
+- відобразити текстовий блок на цій позиції
+- створювати додані користувачем підключення з попередньо визначеними мітками
+
+:proExample{src="https://retejs-labeled-connections.netlify.app"}
+
+Хоча приклад побудовано на React.js, ви можете легко адаптувати його для іншого стеку. Для цього просто скопіюйте певні модулі з цього прикладу та замініть кастомний компонент з’єднання на той, який відповідає вашому стеку. Якщо ви зіткнетеся з будь-якими проблемами, не соромтеся зв’язатися через GitHub Issues у відповідному репозиторії.