我正在尝试使用 this admin starter template我在顺风工具箱上找到了,我正在尝试根据自己的喜好对其进行自定义。我已将模板中的代码拆分为 3 个单独的文件,如下所示,当我替换 children
时主文件中的变量,甚至类似于 test
我在页面底部看到一个带有大量额外空白的滚动条,如下所示
“Main”文件导入导航栏和侧边栏,然后还有一个主页面内容的占位符
import Navbar from "@/Components/Layouts/Navbar"
import Sidebar from "@/Components/Layouts/Sidebar"
export default function Main({ name, children }) {
return (
<div className="bg-gray-800 flex flex-col h-screen">
<Navbar />
<div className="flex flex-col md:flex-row flex-grow">
<Sidebar />
<div className="flex-1 bg-gray-100">
<div className="bg-gray-800 pt-3">
<div className="rounded-tl-3xl bg-gradient-to-r from-blue-900 to-gray-800 p-4 shadow text-2xl text-white">
<h3 className="font-bold pl-2">{name}</h3>
</div>
</div>
<div className="p-4">
{children}
</div>
</div>
</div>
</div>
)
}
导航栏import { useState } from "react";
export default function Navbar() {
const [dropdownState, setDropdownState] = useState('invisible');
const toggleDropdown = () => {
console.log('toggle');
if (dropdownState) {
setDropdownState(null);
} else {
setDropdownState('invisible')
}
}
return (
< nav className="bg-gray-800 pt-2 md:pt-1 pb-1 px-1 mt-0 h-auto sticky w-full z-20 top-0" >
<div className="flex flex-wrap items-center">
<div className="flex flex-shrink md:w-1/3 justify-center md:justify-start text-white">
<a href="#">
<span className="text-xl pl-2"><i className="em em-grinning"></i></span>
</a>
</div>
<div className="flex flex-1 md:w-1/3 justify-center md:justify-start text-white px-2">
<span className="relative w-full">
<input type="search" placeholder="Search"
className="w-full bg-gray-900 text-white transition border border-transparent focus:outline-none focus:border-gray-400 rounded py-3 px-2 pl-10 appearance-none leading-normal" />
<div className="absolute search-icon" style={{ top: "1rem", left: ".8rem" }}>
<svg className="fill-current pointer-events-none text-white w-4 h-4"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path
d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z">
</path>
</svg>
</div>
</span>
</div>
<div className="flex w-full pt-2 content-center justify-between md:w-1/3 md:justify-end">
<ul className="list-reset flex justify-between flex-1 md:flex-none items-center">
<li className="flex-1 md:flex-none md:mr-3">
<a className="inline-block py-2 px-4 text-white no-underline" href="#">Active</a>
</li>
<li className="flex-1 md:flex-none md:mr-3">
<a className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4"
href="#">link</a>
</li>
<li className="flex-1 md:flex-none md:mr-3">
<div className="relative inline-block">
<button onClick={toggleDropdown} className="drop-button text-white focus:outline-none">
<span className="pr-2"><i className="em em-robot_face"></i></span> Hi, User <svg
className="h-3 fill-current inline" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<path
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
</svg></button>
<div id="myDropdown"
className={"dropdownlist absolute bg-gray-800 text-white right-0 mt-3 p-3 overflow-auto z-30 " + dropdownState}>
<a href="#"
className="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i
className="fa fa-user fa-fw"></i> Profile</a>
<a href="#"
className="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i
className="fa fa-cog fa-fw"></i> Settings</a>
<div className="border border-gray-800"></div>
<a href="#"
className="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i
className="fas fa-sign-out-alt fa-fw"></i> Log Out</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav >
)
}
和侧边栏import { InertiaLink } from "@inertiajs/inertia-react"
export default function Sidebar() {
const linkClass = (route) => {
if (window.location.href.indexOf(route) !== -1) {
return ' border-blue-600'
} else {
return ' border-gray-800'
}
}
const iconClass = (route) => {
if (window.location.href.indexOf(route) !== -1) {
return ' text-blue-600'
}
}
const textClass = (route) => {
if (window.location.href.indexOf(route) !== -1) {
return ' text-white md:text-white'
} else {
return ' text-gray-600 md:text-gray-400'
}
}
return (
<div className="bg-gray-800 shadow-xl h-16 fixed bottom-0 mt-12 md:relative md:h-screen z-10 w-full md:w-48">
<div
className="md:mt-12 md:w-48 md:fixed md:left-0 md:top-0 content-center md:content-start text-left justify-between">
<ul className="list-reset flex flex-row md:flex-col py-0 md:py-3 px-1 md:px-2 text-center md:text-left">
<li className="mr-3 flex-1">
<InertiaLink href="/owner/dashboard"
className={"block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 hover:border-blue-900"
+ linkClass('/owner/dashboard')}>
<i className={"fas fa-tv pr-2 "
+ iconClass('/owner/dashboard')}></i><span
className={"pb-1 md:pb-0 text-xs md:text-base block md:inline-block"
+ textClass('/owner/dashboard')}>Dashboard</span>
</InertiaLink>
</li>
<li className="mr-3 flex-1">
<InertiaLink href="/owner/restaurants"
className={"block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 hover:border-blue-900"
+ linkClass('/owner/restaurants')}>
<i className={"fa fa-utensils pr-2 "
+ iconClass('/owner/restaurants')}></i><span
className={"pb-1 md:pb-0 text-xs md:text-base block md:inline-block"
+ textClass('/owner/restaurants')}>Restaurants</span>
</InertiaLink>
</li>
<li className="mr-3 flex-1">
<a href="#"
className={"block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 hover:border-blue-900"
+ linkClass('/owner/layouts')}>
<i className={"fas fa-pencil-ruler pr-2 "
+ iconClass('/owner/layouts')}></i><span
className={"pb-1 md:pb-0 text-xs md:text-base block md:inline-block"
+ textClass('/owner/layouts')}>Layouts</span>
</a>
</li>
<li className="mr-3 flex-1">
<a href="#"
className={"block py-1 md:py-3 pl-0 md:pl-1 align-middle text-white no-underline hover:text-white border-b-2 hover:border-blue-900"
+ linkClass('/owner/payments')}>
<i className={"fa fa-wallet pr-2 "
+ iconClass('/owner/payments')}></i><span
className={"pb-1 md:pb-0 text-xs md:text-base block md:inline-block"
+ textClass('/owner/payments')}>Payments</span>
</a>
</li>
</ul>
</div>
</div>
)
}
编辑 这是一个带有代码的代码笔链接,可帮助调试 https://codepen.io/hcphoon01/pen/OJmXrRN
更新 我现在已经解决了一个问题,但又创建了另一个问题,我通过将最高级别的 div 更改为
<div className="bg-gray-800 flex flex-col h-screen">
来解决空白问题。然后添加 flex-grow
在包含侧边栏的 div 上,尽管现在的问题是,如果内容大于屏幕,侧边栏不会变大以适应。代码笔已更新以反射(reflect)这一点
最佳答案
检查您的 Sidebar
成分。
必须是 h-auto
或 h-full
或 h-initial
相反 h-screen
.因为它放入了main
组件,所以只有 main
应该是 h-screen
.
请更改此代码而不是使用 h-screen
.
<div class="bg-gray-800 shadow-xl h-16 bottom-0 mt-12 md:relative z-10 w-full md:w-48">
查看 Tailwind Paly有关 CSS 中的视口(viewport)单位的更多信息,请查看此网站 doc
关于html - Tailwind CSS 不必要的空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68304526/