docs(slideover): add close button in some examples for mobile (nuxt#1827

) Co-authored-by: Benjamin Canac <[email protected]>
simkidd · Jun 3, 2024 · 831c560 · 831c560
1 parent 06990be
commit 831c560
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 1 deletion.
diff --git a/docs/components/content/examples/SlideoverExampleBasic.vue b/docs/components/content/examples/SlideoverExampleBasic.vue
@@ -8,6 +8,16 @@ const isOpen = ref(false)
 
     <USlideover v-model="isOpen">
       <div class="p-4 flex-1">
+        <UButton
+          color="gray"
+          variant="ghost"
+          size="sm"
+          icon="i-heroicons-x-mark-20-solid"
+          class="flex sm:hidden absolute end-5 top-5 z-10"
+          square
+          padded
+          @click="isOpen = false"
+        />
         <Placeholder class="h-full" />
       </div>
     </USlideover>

diff --git a/docs/components/content/examples/SlideoverExampleCard.vue b/docs/components/content/examples/SlideoverExampleCard.vue
@@ -7,8 +7,22 @@ const isOpen = ref(false)
     <UButton label="Open" @click="isOpen = true" />
 
     <USlideover v-model="isOpen">
-      <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+      <UCard
+        class="flex flex-col flex-1"
+        :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }"
+      >
         <template #header>
+          <UButton
+            color="gray"
+            variant="ghost"
+            size="sm"
+            icon="i-heroicons-x-mark-20-solid"
+            class="flex sm:hidden absolute end-5 top-5 z-10"
+            square
+            padded
+            @click="isOpen = false"
+          />
+
           <Placeholder class="h-8" />
         </template>
 

diff --git a/docs/components/content/examples/SlideoverExampleDisableOverlay.vue b/docs/components/content/examples/SlideoverExampleDisableOverlay.vue
@@ -8,6 +8,17 @@ const isOpen = ref(false)
 
     <USlideover v-model="isOpen" :overlay="false">
       <div class="p-4 flex-1">
+        <UButton
+          color="gray"
+          variant="ghost"
+          size="sm"
+          icon="i-heroicons-x-mark-20-solid"
+          class="flex sm:hidden absolute end-5 top-5 z-10"
+          square
+          padded
+          @click="isOpen = false"
+        />
+
         <Placeholder class="h-full" />
       </div>
     </USlideover>

diff --git a/docs/components/content/examples/SlideoverExampleDisableTransition.vue b/docs/components/content/examples/SlideoverExampleDisableTransition.vue
@@ -8,6 +8,17 @@ const isOpen = ref(false)
 
     <USlideover v-model="isOpen" :transition="false">
       <div class="p-4 flex-1">
+        <UButton
+          color="gray"
+          variant="ghost"
+          size="sm"
+          icon="i-heroicons-x-mark-20-solid"
+          class="flex sm:hidden absolute end-5 top-5 z-10"
+          square
+          padded
+          @click="isOpen = false"
+        />
+
         <Placeholder class="h-full" />
       </div>
     </USlideover>