chore: responsive

vbenjs · Aug 13, 2024 · 2273a86 · 2273a86
1 parent 5a759d5
commit 2273a86
Showing 1 changed file with 12 additions and 15 deletions.
diff --git a/playground/src/views/demos/features/full-screen/index.vue b/playground/src/views/demos/features/full-screen/index.vue
@@ -17,21 +17,18 @@ const { isFullscreen: isDomFullscreen, toggle: toggleDom } =
 <template>
   <Page title="全屏示例">
     <Card title="Window Full Screen">
-      <Button
-        :disabled="isFullscreen"
-        class="mr-2"
-        type="primary"
-        @click="enter"
-      >
-        Enter Window Full Screen
-      </Button>
-      <Button class="mr-2" @click="toggle"> Toggle Window Full Screen </Button>
-
-      <Button class="mr-2" danger @click="exit">
-        Exit Window Full Screen
-      </Button>
-
-      Current State: {{ isFullscreen }}
+      <div class="flex flex-wrap items-center gap-4">
+        <Button :disabled="isFullscreen" type="primary" @click="enter">
+          Enter Window Full Screen
+        </Button>
+        <Button @click="toggle"> Toggle Window Full Screen </Button>
+
+        <Button :disabled="!isFullscreen" danger @click="exit">
+          Exit Window Full Screen
+        </Button>
+
+        <span class="text-nowrap"> Current State: {{ isFullscreen }} </span>
+      </div>
     </Card>
 
     <Card title="Dom Full Screen">