我试图创建一个书籍布局的页面,即一个带有一些选项卡的页面,用户可以逐个展开。
这里是一个工作示例:https://codesandbox.io/s/book-layout-l28gh?file=/src/App.js:0-1419
import { useState } from "react";
const dataset = [
{ name: "A section", description: "page A" },
{ name: "B section", description: "page B" },
{ name: "C section with long title", description: "page C" },
{ name: "D section", description: "page D" }
];
export default function App() {
return <Page />;
}
function Page({}) {
const [openSection, setOpenSection] = useState(0);
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100vh"
}}
>
{dataset.map((datum, i) => {
const { name } = datum;
const isOpen = i === openSection;
return (
<div
key={name}
style={{
height: "100%",
backgroundColor: isOpen ? "white" : "lightgray",
border: `1px solid ${isOpen ? "white" : "black"}`,
padding: 10,
flex: 1,
flexGrow: isOpen ? 1 : 0,
transition: "all 2s ease"
}}
>
<div
style={{
cursor: "pointer",
writingMode: isOpen ? "horizontal-tb" : "vertical-rl",
transition: "all 2s ease"
}}
onClick={() => setOpenSection(i)}
>
{name}
</div>
</div>
);
})}
</div>
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
如果你进行测试,你会发现一些问题:
- 当你展开一个部分时,标题不会平滑地跟随它过渡从垂直变为水平。应该是平滑旋转的。
- 有时候,我不确定具体什么时候,当你点击标题时,所有卡片似乎都靠得更近了。
- 另一个要求是使灰色区域全部可点击,但当它打开时显然存在问题。
为什么?出了什么问题?是否有更好的方法来设计这样的布局呢?
// writingMode: isOpen ? "horizontal-tb" : "vertical-rl", transform:
rotate(${isOpen ? "0" : "90"}deg)``我更新了 CodeSandbox。 - whitecircle