examples/vue-ts-example
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

feat: 适配 FlowbiteSidebar 页面 iPhone 横屏安全区域

Browse Source
This commit is contained in:
mini2024
2025-04-06 19:18:00 +08:00
parent a5dd8f3e52
commit bf68819b4a
1 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/FlowbiteSidebar.page.vue
View File

@ -2,7 +2,9 @@
<template> <template>
<!-- https://flowbite.com/docs/components/sidebar/#sidebar-with-navbar --> <!-- https://flowbite.com/docs/components/sidebar/#sidebar-with-navbar -->
<nav class="fixed top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700"> <nav
class="fixed top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700 pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]"
>
<div class="px-3 py-3 lg:px-5 lg:pl-3"> <div class="px-3 py-3 lg:px-5 lg:pl-3">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center justify-start rtl:justify-end"> <div class="flex items-center justify-start rtl:justify-end">
@ -105,13 +107,13 @@
<aside <aside
id="logo-sidebar" id="logo-sidebar"
class="fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700" class="fixed top-0 left-[env(safe-area-inset-left)] z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
aria-label="Sidebar" aria-label="Sidebar"
> >
<div class="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-gray-800" b="1px dashed red">Sidebar</div> <div class="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-gray-800" b="1px dashed red">Sidebar</div>
</aside> </aside>
<div class="p-4 sm:ml-64"> <div class="p-4 sm:ml-[calc(16rem+env(safe-area-inset-left))] pr-[env(safe-area-inset-right)]">
<div class="p-4 border-2 border-gray-200 border-dashed rounded-lg dark:border-gray-700 mt-14">CONTENT</div> <div class="p-4 border-2 border-gray-200 border-dashed rounded-lg dark:border-gray-700 mt-14">CONTENT</div>
</div> </div>
</template> </template>