左侧固定面板,右侧为主页面

示例页面

示例代码

调用组件

function Demo() {
	return <>
		<Panel><div className='cls001'>页面主体内容</div></Panel>
		<style jsx>{`
.cls001{
margin:0;
padding:0;
height: 30rem;
background-color: burlywood;
}
`}</style>
	</>;
}

function Demo() {
	return <>
		<Panel><div className='cls001'>页面主体内容</div></Panel>
		<style jsx>{`
.cls001{
margin:0;
padding:0;
height: 30rem;
background-color: burlywood;
}
`}</style>
	</>;
}

面板组件

这里将面板组件制作为容器组件,如果该组件为公共组件,这种容器类组件对使用者来讲会很方便.

function Panel({ children }: { children: ReactNode; }) {
	return <>
		<div className='cls001'>
			<div className='cls002'>
				<LeftMenu />
			</div>
			<div className='cls003'>
				{children}
			</div>
		</div>
		<style jsx>{`
.cls001{
display: flex;
}
.cls002{
position: fixed;
overflow-y: scroll;
left: 0;
top:0;
bottom:0;
height: 100%;
width: 10rem;
margin: 0;
background-color: blue;
}
.cls003{
flex-grow: 1;
margin-left: 10rem;
}
`}</style>
	</>;
}

function Panel({ children }: { children: ReactNode; }) {
	return <>
		<div className='cls001'>
			<div className='cls002'>
				<LeftMenu />
			</div>
			<div className='cls003'>
				{children}
			</div>
		</div>
		<style jsx>{`
.cls001{
display: flex;
}
.cls002{
position: fixed;
overflow-y: scroll;
left: 0;
top:0;
bottom:0;
height: 100%;
width: 10rem;
margin: 0;
background-color: blue;
}
.cls003{
flex-grow: 1;
margin-left: 10rem;
}
`}</style>
	</>;
}

以上代码中,外层div组件的样式设置display: flex;使用flex布局,可以方便进行页面的布局.它有两个子组件,一个为左侧面板部分,一而为右而主体部分.

左侧面板部分设置其位置为固定position: fixed;,且给定其固定宽度width: 10rem;,因其脱离了文档流,所以右侧部分需要设置margin-left: 10rem;让出左侧面板部分.否则会重叠.

右侧面板设置flex-grow: 1;主要作用是在页面大小变化时(如用户拖动浏览器窗口改变显示区域大小)右侧随窗口大小同时变化,一直为填充整个窗口大小.

左侧面板虽然设定其高度为height: 100%;且超出时竖直滚动overflow-y: scroll;,但如没有top:0;和bottom:0;,依然不会滚动.这个很重要.

左侧菜单组件

function LeftMenu() {
	const arr = new Array<number>(100).fill(1);
	return <>
		<ol className="cls001">
			{arr.map((it, key) => {
				return <li className='cls002' key={key}>{(it + key).toString().padStart(6, '0')}</li>
			})}
		</ol>
		<style jsx>{`
.cls001 {
height: 100%;
margin: 0;
}
.cls002{
width: 100%;
display: flex;
justify-content: center;
transition: all 500ms;
}
.cls002:hover{
background-color: aliceblue;
}
`}</style>
	</>;
}

function LeftMenu() {
	const arr = new Array<number>(100).fill(1);
	return <>
		<ol className="cls001">
			{arr.map((it, key) => {
				return <li className='cls002' key={key}>{(it + key).toString().padStart(6, '0')}</li>
			})}
		</ol>
		<style jsx>{`
.cls001 {
height: 100%;
margin: 0;
}
.cls002{
width: 100%;
display: flex;
justify-content: center;
transition: all 500ms;
}
.cls002:hover{
background-color: aliceblue;
}
`}</style>
	</>;
}

方案文档