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 表示只有当内容超出容器的大小时，才会显示滚动条。
如果内容在垂直方向上超出容器的高度，会显示垂直滚动条。
如果内容在水平方向上超出容器的宽度，会显示水平滚动条。

Previousbutton组件 NextREACT介绍

Last updated 1 month ago

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 表示只有当内容超出容器的大小时，才会显示滚动条。
如果内容在垂直方向上超出容器的高度，会显示垂直滚动条。
如果内容在水平方向上超出容器的宽度，会显示水平滚动条。

Previousbutton组件 NextREACT介绍

Last updated 1 month ago