sidebar组件

实现sidebar的方式

方法A

创建一个AppLayout组件

export const Sidebar = ({ className, children, ...props }:ComponentProps<'aside'>) => {
	return (
		<aside className={twMerge('w-[250px] mt-10 h-[100vh + 10px] overflow-auto',className)} {...props}>
			{children}
		</aside>
)}
.mt-10 {  
margin-top: 2.5rem /* 40px */;  
}

rem 单位的定义:

  • rem 是相对于根元素(<html>)的字体大小来计算的。

  • 如果根元素的字体大小设置为 16px,那么 1 rem 就等于 16px。

  • 如果根元素的字体大小设置为 20px,那么 1 rem 就等于 20px。

overflow-auto:

  • overflow-auto 表示只有当内容超出容器的大小时,才会显示滚动条。

  • 如果内容在垂直方向上超出容器的高度,会显示垂直滚动条。

  • 如果内容在水平方向上超出容器的宽度,会显示水平滚动条。

Last updated