#html #css #reactjs #tailwind-css #inertiajs
Вопрос:
Я пытаюсь использовать этот начальный шаблон администратора, который я нашел на панели инструментов tailwind, и пытаюсь настроить его по своему вкусу. Я разделил код из шаблона на 3 отдельных файла, как показано ниже, и когда я заменяю children переменную в основном файле чем-то похожим test , я получаю полосу прокрутки с большим количеством дополнительных пробелов внизу страницы, как показано здесь 
«Основной» файл, который импортирует навигационную панель и боковую панель, а затем также содержит заполнитель для содержимого главной страницы
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 выше, где включена боковая панель, хотя теперь проблема в том, что если содержимое больше экрана, боковая панель не подходит. Кодовый набор был обновлен, чтобы отразить это
Комментарии:
1. Пожалуйста, создайте песочницу кода для облегчения отладки. Или просто используйте свой инспектор для прямой проверки css. Из того, что вы дали, я предполагаю, что когда вы устанавливаете боковую панель на h-экран, а затем даете поля для других компонентов, это заставляет страницу быть еще длиннее, чем высота экрана. Попробуйте скорректировать свою маржу.
Ответ №1:
Проверьте свой 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">
проверь, как там Попутный ветер, Пали
Дополнительные сведения о единицах просмотра в CSS см. в этом веб — документе
Комментарии:
1. Я только что попробовал это, но проблема сейчас в том, что если я добавлю
h-screenв раздел верхнего уровня, чтобы устранить эту проблему , а затем добавлюh-screenв раздел чуть ниже, где включена боковая панель, чтобы основное содержимое было во всю высоту, у меня снова возникнет та же проблема с пробелами внизу2. проверьте отредактировано. и вы можете приспособиться к своему исправлению там.
Ответ №2:
Когда вы добавляете h-screen класс, он устанавливает высоту 100vh , которая будет соответствовать высоте окна просмотра. Проблема здесь в том, что, поскольку мы фиксируем высоту, <div> он не будет расти, чтобы соответствовать своим детям, и все будет переполнено.
Чтобы исправить это, мы можем установить min-height вместо min-h-screen этого класс утилиты. Это позволит <div> ему расти в соответствии со своими детьми, но не позволит ему уменьшаться ниже высоты окна просмотра. Я попробовал это в предоставленном вами коде, и, похоже, он делает то, что вы хотите.
Примечание: Есть некоторые особенности при использовании 100vh на мобильных устройствах. Просто найдите «проблема с мобильным телефоном 100 Вч», чтобы найти дополнительную информацию, но вы должны проверить ее, чтобы убедиться, что это то, что вам нужно. В качестве альтернативы вы можете использовать процентные единицы с h-full / min-h-full , но вам нужно будет убедиться, что у всех предков height / min-height установлено значение 100%, включая <body> <html> теги и. Проверьте все на различных мобильных браузерах для себя, чтобы выяснить, какой из них лучше подходит для вашего приложения.
Ответ №3:
В родительском div в главном файле добавьте и m-0 p-0 в имя класса, а в div для «Теста» добавьте пробелы-нормально к имени класса, как показано ниже :
import Navbar from "@/Components/Layouts/Navbar"
import Sidebar from "@/Components/Layouts/Sidebar"
export default function Main({ name, children }) {
return (
<div className="m-0 p-0 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 whitespace-normal">
Test
</div>
</div>
</div>
</div>
)
}