Utilisez React pour implémenter une barre de navigation fixe et des pages de barre latérale fixes pliables
P粉356361722
2023-08-29 08:43:17
<p>J'essaie d'implémenter une page avec une barre de navigation fixe et une barre latérale fixe pliable à l'aide des composants <strong>React</strong> Vous trouverez ci-dessous un exemple de code. </p>
<pre class="brush:php;toolbar:false;">importer { Box } depuis "@chakra-ui/react" ;
exporter const App = () =>
retour (
<Affichage de la boîte="flex">
<Position de la boîte="fixe" largeur="200px" hauteur="100 %" bg="rouge" {/* Barre latérale */}
<Box flex="1" position="fixe">
<Position de la boîte="fixe" top="0" largeur="100%" hauteur="50px" bg="bleu" {/* Barre de navigation */}
<Boîte mt="50px" p="4">
{/* Rester le contenu */}
≪/Boîte>
≪/Boîte>
≪/Boîte>
);
};</pré>
<p>Mais maintenant, la largeur de la barre de navigation supérieure n'a jamais atteint mes attentes. C'est sa sortie actuelle. </p>
<p>Je souhaite obtenir le résultat suivant. </p>
<p>La case rouge est la barre latérale et la case bleue est la barre de navigation supérieure. Tous deux devraient conserver leur poste actuel. Veuillez fournir quelques suggestions sur la façon de répondre à mes attentes. Je serai très reconnaissant! </p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous pouvez essayer :
<Box position="fixed" top="0" right="0" width="calc(100vh - 200px)" height="50px" bg="blue" /> {/* Navbar */}Notez que 200px est la largeur de la barre latérale