docs: add tag doc (#328)

altai-ui · Aug 11, 2022 · 6e56e04 · 6e56e04
1 parent ad9a646
commit 6e56e04
Show file tree

Hide file tree

Showing 3 changed files with 142 additions and 2 deletions.
diff --git a/vuepress-docs/docs/.vuepress/config.ts b/vuepress-docs/docs/.vuepress/config.ts
@@ -37,9 +37,9 @@ export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
           '/components/QScrollbar.md',
           '/components/QSelect.md',
           '/components/QSlider.md',
-          '/components/QSelect.md',
           '/components/QSwitch.md',
           '/components/QTabs.md',
+          '/components/QTag.md',
           '/components/QUpload.md'
         ]
       },
@@ -77,9 +77,9 @@ export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
             '/components/QScrollbar.md',
             '/components/QSelect.md',
             '/components/QSlider.md',
-            '/components/QSelect.md',
             '/components/QSwitch.md',
             '/components/QTabs.md',
+            '/components/QTag.md',
             '/components/QUpload.md'
           ]
         }

diff --git a/vuepress-docs/docs/.vuepress/public/QTag/main.html b/vuepress-docs/docs/.vuepress/public/QTag/main.html
@@ -0,0 +1,79 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <!-- import CSS -->
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@qvant/qui-max/dist/style.css"
+    />
+  </head>
+
+  <body>
+    <div id="app">
+      <div class="block">
+        <span>Default:</span>
+        <div>
+          <q-tag
+            v-for="tag in tags"
+            :key="tag"
+            @close="handleCloseClick(tag)"
+          >
+            {{ tag }}
+          </q-tag>
+        </div>
+      </div>
+      <div class="block">
+        <span>Closable:</span>
+        <div>
+          <q-tag
+            v-for="tag in tagsClosable"
+            :key="tag"
+            :closable="true"
+            @close="handleCloseClick(tag)"
+          >
+            {{ tag }}
+          </q-tag>
+        </div>
+      </div>
+    </div>
+  </body>
+  <!-- import Vue before Qui -->
+  <script src="https://unpkg.com/vue@latest"></script>
+  <!-- import JavaScript -->
+  <script src="https://unpkg.com/@qvant/qui-max@latest"></script>
+  <script>
+    const app = Vue.createApp({
+      setup() {
+        const tags = Vue.ref(['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']);
+        const tagsClosable = Vue.ref([
+          'Tag 1',
+          'Tag 2',
+          'Tag 3',
+          'Tag 4',
+          'Tag 5'
+        ]);
+
+        const handleCloseClick = clickedTag => {
+          console.log('Close tag clicked');
+          tagsClosable.value = tagsClosable.value.filter(
+            tag => tag !== clickedTag
+          );
+        };
+
+        return { tags, tagsClosable, handleCloseClick };
+      }
+    });
+
+    app.use(QuiMax.default);
+    app.mount('#app');
+  </script>
+  <style>
+    .block {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      width: 100%;
+      padding: 25px 40px 10px;
+    }
+  </style>
+</html>
diff --git a/vuepress-docs/docs/components/QTag.md b/vuepress-docs/docs/components/QTag.md
@@ -0,0 +1,61 @@
+# QTag #️⃣
+
+`QTag` component is used for items that need to be labeled, categorized, or organized using keywords that describe them.
+Also `QTag` tag is being used in `QSelect` | `QCascader`
+
+## Examples
+
+All kind of types:
+
+<iframe height="190" style="width: 100%;" scrolling="no" frameborder="no" src="/QTag/main.html"></iframe>
+
+Template:
+
+```vue
+<template>
+  <q-tag
+    v-for="tag in tags"
+    :key="tag"
+    @close="handleCloseClick(tag)"
+  >
+    {{ tag }}
+  </q-tag>
+</template>
+```
+
+Component instance:
+
+```js
+export default {
+  setup() {
+    const tags = ref(['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']);
+
+    const handleCloseClick = clickedTag => {
+      tags.value = tags.value.filter(tag => tag !== clickedTag);
+    };
+
+    return { tags, handleCloseClick };
+  }
+};
+```
+
+## Props
+
+### closable
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether is close button shown.
+
+## Events
+
+### close
+
+Triggers when the close button is clicked.
+
+## Slots
+
+### default
+
+Provide custom content into `QTag`.