feat: add BaseFocusLoop demos to playground

shuriken-ui · Dec 18, 2023 · d52ab4b · d52ab4b
1 parent be1c41d
commit d52ab4b
Showing 1 changed file with 26 additions and 0 deletions.
diff --git a/.playground/pages/tests/base/focus-loop.vue b/.playground/pages/tests/base/focus-loop.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+definePageMeta({
+  title: 'BaseFocusLoop',
+  icon: 'mingcute:back-fill',
+  description: 'Focus Loop component',
+  section: 'base',
+})
+</script>
+
+<template>
+  <div>
+    <NuiPreviewContainer title="BaseFocusLoop">
+      <NuiPreview title="Main demo" description="Focus Loop component demo">
+        <BaseFocusLoop class="flex flex-wrap items-end gap-2">
+          <BaseButton>Button</BaseButton>
+          <BaseButton color="primary">Button</BaseButton>
+          <BaseButton color="success">Button</BaseButton>
+          <BaseButton color="info">Button</BaseButton>
+          <BaseButton color="warning">Button</BaseButton>
+          <BaseButton color="danger">Button</BaseButton>
+          <BaseButton color="muted">Button</BaseButton>
+        </BaseFocusLoop>
+      </NuiPreview>
+    </NuiPreviewContainer>
+  </div>
+</template>