docs: add documentation for ControlButton

bcakmakoglu · Jun 15, 2022 · 33cd638 · 33cd638
1 parent 3162b79
commit 33cd638
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/docs/src/.vuepress/theme/index.ts b/docs/src/.vuepress/theme/index.ts
@@ -53,10 +53,25 @@ export default {
             '/guide/node',
             '/guide/edge',
             '/guide/composables',
-            { text: 'Utilities', children: ['/guide/utils/graph', '/guide/utils/instance', '/guide/utils/edge'] },
+            {
+              text: 'Utilities',
+              children: [
+                '/guide/utils/graph',
+                '/guide/utils/instance',
+                '/guide/utils/edge'
+              ]
+            },
             {
               text: 'Additional Components',
-              children: ['/guide/components/background', '/guide/components/minimap', '/guide/components/controls'],
+              children: [
+                '/guide/components/background',
+                '/guide/components/minimap',
+                {
+                  text: 'Controls',
+                  link: '/guide/components/controls',
+                  children: ['/guide/components/control-button']
+                },
+              ],
             },
           ],
         },

diff --git a/docs/src/guide/components/control-button.md b/docs/src/guide/components/control-button.md
@@ -0,0 +1,26 @@
+# Control Button
+
+You can use the existing `ControlButton` component to create new control buttons.
+
+## Usage
+
+To use the component pass the `ControlButton` component as a child to the [`Controls`](/guide/components/control-button.html/) component.
+
+```vue
+<template>
+  <VueFlow>
+    <Controls>
+      <ControlButton>
+        <i class="fa fa-plus"></i>
+      </ControlButton>
+    </Controls>
+  </VueFlow>
+</template>
+```
+
+## Slots
+
+| Name    | Definition                                           |
+|---------|------------------------------------------------------|
+| default | inner slot of btn (is wrapped by a `<button>` element) |
+