chore: add story

unovue · Sep 18, 2024 · 06c30ff · 06c30ff
1 parent 2149487
commit 06c30ff
Showing 1 changed file with 18 additions and 0 deletions.
diff --git a/packages/radix-vue/src/Listbox/story/ListboxChromatic.story.vue b/packages/radix-vue/src/Listbox/story/ListboxChromatic.story.vue
@@ -172,5 +172,23 @@ const multipleControl = ref()
         </ListboxContent>
       </ListboxRoot>
     </Variant>
+
+    <Variant title="Orientation (Horizontal)">
+      <ListboxRoot
+        class="w-64 h-full flex flex-col p-1 rounded-lg border bg-white text-green9 mx-auto overflow-auto"
+        orientation="horizontal"
+      >
+        <ListboxContent class="flex flex-row ">
+          <ListboxItem
+            v-for="i in options"
+            :key="i"
+            :value="i"
+            class="w-full py-1 px-2 text-green9 select-none text-sm focus:ring-0 data-[highlighted]:outline-green9 data-[highlighted]:outline-1 data-[highlighted]:outline focus:outline-green9 data-[state=checked]:bg-green9 data-[state=checked]:text-white data-[disabled]:opacity-50 rounded"
+          >
+            {{ i }}
+          </ListboxItem>
+        </ListboxContent>
+      </ListboxRoot>
+    </Variant>
   </Story>
 </template>