diff options
| author | syuilo <4439005+syuilo@users.noreply.github.com> | 2025-08-04 20:03:34 +0900 |
|---|---|---|
| committer | syuilo <4439005+syuilo@users.noreply.github.com> | 2025-08-04 20:03:34 +0900 |
| commit | bb56b3b4f11837f2d3e564184a9243a9a98490d6 (patch) | |
| tree | b11ae18070bde0fcf2d7791ffe3e00651dc714d8 /packages/frontend/src/components/MkTabs.vue | |
| parent | chore: リモートノートの削除条件をデータベース上で確認... (diff) | |
| download | misskey-bb56b3b4f11837f2d3e564184a9243a9a98490d6.tar.gz misskey-bb56b3b4f11837f2d3e564184a9243a9a98490d6.tar.bz2 misskey-bb56b3b4f11837f2d3e564184a9243a9a98490d6.zip | |
feat(frontend): ページのタブバーを下部に表示できるように
Diffstat (limited to 'packages/frontend/src/components/MkTabs.vue')
| -rw-r--r-- | packages/frontend/src/components/MkTabs.vue | 21 |
1 files changed, 19 insertions, 2 deletions
diff --git a/packages/frontend/src/components/MkTabs.vue b/packages/frontend/src/components/MkTabs.vue index 5c4a67b026..75cf84e918 100644 --- a/packages/frontend/src/components/MkTabs.vue +++ b/packages/frontend/src/components/MkTabs.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<div :class="$style.tabs"> +<div :class="[$style.tabs, { [$style.centered]: props.centered }]"> <div :class="$style.tabsInner"> <button v-for="t in tabs" :ref="(el) => tabRefs[t.key] = (el as HTMLElement)" v-tooltip.noDelay="t.title" @@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only </div> <div ref="tabHighlightEl" - :class="[$style.tabHighlight, { [$style.animate]: prefer.s.animation }]" + :class="[$style.tabHighlight, { [$style.animate]: prefer.s.animation, [$style.tabHighlightUpper]: tabHighlightUpper }]" ></div> </div> </template> @@ -59,6 +59,8 @@ import { prefer } from '@/preferences.js'; const props = withDefaults(defineProps<{ tabs?: Tab[]; tab?: string; + centered?: boolean; + tabHighlightUpper?: boolean; }>(), { tabs: () => ([] as Tab[]), }); @@ -169,6 +171,16 @@ onUnmounted(() => { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; + + &.centered { + text-align: center; + } +} + +@container (max-width: 450px) { + .tabs { + font-size: 80%; + } } .tabsInner { @@ -227,5 +239,10 @@ onUnmounted(() => { &.animate { transition: width 0.15s ease, left 0.15s ease; } + + &.tabHighlightUpper { + top: 0; + bottom: auto; + } } </style> |