✨ 为菜单栏的 tab 栏新增横向滑动

nonebot · Oct 31, 2024 · b84d5a0 · b84d5a0
1 parent 1d8fe23
commit b84d5a0
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/frontend/src/components/header/TabBar.vue b/frontend/src/components/header/TabBar.vue
@@ -44,14 +44,14 @@ const operation = (route: NavItem) => {
 </script>
 
 <template>
-  <div role="tablist" class="tabs tabs-lifted justify-start">
+  <div role="tablist" class="tabs tabs-lifted justify-start overflow-x-auto !flex">
     <TransitionGroup>
       <a
         v-for="(i, index) in store.viewHistory"
         :key="i.name"
         role="tab"
         :class="{
-          'tab flex gap-2 hover:bg-primary/[.2] transition !border-b-0': true,
+          'tab flex gap-2 hover:bg-primary/[.2] transition !border-b-0 shrink-0': true,
           '[--tab-bg:oklch(var(--b2))] tab-active': isCurrentRoute(i.routeData.path)
         }"
         @click="operation(i)"
@@ -88,4 +88,8 @@ const operation = (route: NavItem) => {
 .tabs-lifted > .tab:is(input:checked):before {
   z-index: 0;
 }
+
+.tabs::-webkit-scrollbar {
+  display: none;
+}
 </style>