英文:
When opening sidebar horizontally, text is momentarily oriented vertically
问题
Here's the translation of the provided text:
"chakra ui 和 next.js。
当侧边栏显示时，图标旁边的文本会瞬间变成垂直。
以下是代码。
我还包含了 CodePen 的链接。
https://codesandbox.io/s/boring-matan-du82mv?file=/src/Sidebar.tsx:0-1975
import {
Box,
chakra,
HStack,
IconButton,
Text,
useColorModeValue,
VStack
} from "@chakra-ui/react";
import * as React from "react";
import { FiFileText, FiMenu, FiSettings, FiUser } from "react-icons/fi";
interface SidebarItemProps {
icon: JSX.Element;
isOpen: boolean;
label: string;
}
const SidebarItem: React.FC<SidebarItemProps> = ({ icon, isOpen, label }) => {
const hoverColor = useColorModeValue("gray.600", "gray.300");
return (
<chakra.div
role="group"
_hover={{ bg: hoverColor }}
transition="background-color 0.2s"
borderRadius="md"
w="100%"
>
<HStack alignItems="center" p={2} maxW="100%">
<IconButton
aria-label={label}
icon={icon}
size="sm"
variant="ghost"
_groupHover={{ bg: "transparent" }}
boxSize={6}
/>
<Text
display={isOpen ? "flex" : "none"}
alignItems="center"
color="white"
ml={2}
>
{label}
</Text>
</HStack>
</chakra.div>
);
};
export const Sidebar: React.FC = () => {
const [isOpen, setIsOpen] = React.useState(false);
const handleToggle = () => {
setIsOpen(!isOpen);
};
return (
<Box
as="nav"
position="fixed"
left="0"
top="0"
bg="black"
h="100vh"
w={isOpen ? "200px" : "78px"}
transition={isOpen ? "width 0.3s" : ""}
>
<VStack align="start" p={4}>
<IconButton
aria-label="Toggle Menu"
icon={<FiMenu />}
onClick={handleToggle}
mb={6}
w="12"
/>
<VStack w="100%" align="start" spacing={6}>
<SidebarItem icon={<FiUser />} isOpen={isOpen} label="ユーザー" />
<SidebarItem icon={<FiFileText />} isOpen={isOpen} label="投稿" />
<SidebarItem icon={<FiSettings />} isOpen={isOpen} label="管理" />
</VStack>
</VStack>
</Box>
);
};
我尝试在 Text 中添加 flexDirection，但没有解决问题。"
英文:
chakra ui and next.js.
When the sidebar is displayed, the text next to the icon momentarily becomes vertical.
The code is listed below.
I have also included the codepen url.
https://codesandbox.io/s/boring-matan-du82mv?file=/src/Sidebar.tsx:0-1975
import {
Box,
chakra,
HStack,
IconButton,
Text,
useColorModeValue,
VStack
} from "@chakra-ui/react";
import * as React from "react";
import { FiFileText, FiMenu, FiSettings, FiUser } from "react-icons/fi";
interface SidebarItemProps {
icon: JSX.Element;
isOpen: boolean;
label: string;
}
const SidebarItem: React.FC<SidebarItemProps> = ({ icon, isOpen, label }) => {
const hoverColor = useColorModeValue("gray.600", "gray.300");
return (
<chakra.div
role="group"
_hover={{ bg: hoverColor }}
transition="background-color 0.2s"
borderRadius="md"
w="100%"
>
<HStack alignItems="center" p={2} maxW="100%">
<IconButton
aria-label={label}
icon={icon}
size="sm"
variant="ghost"
_groupHover={{ bg: "transparent" }}
boxSize={6}
/>
<Text
display={isOpen ? "flex" : "none"}
alignItems="center"
color="white"
ml={2}
>
{label}
</Text>
</HStack>
</chakra.div>
);
};
export const Sidebar: React.FC = () => {
const [isOpen, setIsOpen] = React.useState(false);
const handleToggle = () => {
setIsOpen(!isOpen);
};
return (
<Box
as="nav"
position="fixed"
left="0"
top="0"
bg="black"
h="100vh"
w={isOpen ? "200px" : "78px"}
transition={isOpen ? "width 0.3s" : ""}
>
<VStack align="start" p={4}>
<IconButton
aria-label="Toggle Menu"
icon={<FiMenu />}
onClick={handleToggle}
mb={6}
w="12"
/>
<VStack w="100%" align="start" spacing={6}>
<SidebarItem icon={<FiUser />} isOpen={isOpen} label="ユーザー" />
<SidebarItem icon={<FiFileText />} isOpen={isOpen} label="投稿" />
<SidebarItem icon={<FiSettings />} isOpen={isOpen} label="管理" />
</VStack>
</VStack>
</Box>
);
};
I tried adding flexDirection to Text, but it didn't solve the problem.
答案1
得分: 0
你可以将以下内容添加到你的CSS文件中：
#text {
white-space: nowrap;
overflow: hidden;
}
并在App.tsx文件中将<Sidebar />替换为：
<div id="text"><Sidebar /></div>
这两者共同作用，防止文本从新行开始并溢出到侧边栏之外。
英文:
You can add this to you css file:
#text {
white-space: nowrap;
overflow:hidden;
}
and replace <Sidebar /> this in the App.tsx file:
<div id="text"><Sidebar /></div>
Both these work together to both stop it from starting on a new line and overflowing to outside the sidebar.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论