antDesign之layout.Sider布局属性

ant Design的学习笔记

layout布局排版
Layout.Sider的属性学习

breakpoint的属性是通过屏幕区域的宽度自动激活sider的收缩和扩展，breakpint="xs"表示当屏幕是超小屏幕的时候自动收缩，当大于超小屏的宽度自动展开

collapsed我们可以通过这个属性动态的设置sider的展开和收缩，是一个boolean 当collapsed=true的时候当前的sider就会收缩，当collapsed=false的时候这个sider就是一个展开状态

collapsible属性字面意思是可折叠的这个属性和上面那个区分开，当前的属性是一个 布尔值，当我们不写入这个属性 的时候默认的是false值及collapsible={false}，当我们写入这个属性的时候就是一个true,这个属性的作用是，是否显示一个折叠的图标，默认false是不写入，当为true的时候sider会在底部产生一个可以折叠的图标箭头

trigger这个属性，可以用来隐藏collapsible产生的箭头图标trigger={null}这样就把箭头隐藏了暂时不清楚他的用途，因为我们不写入collpasible也不会显示箭头图标

collapsibleWidth这个属性也是一个响应折叠的一个属性，当我们把collapsibleWidth={0}的时候我们收缩浏览器窗口的时候，当缩小的一定的值就会产生一个特殊的折叠按钮，我们点击这个按钮就会进行折叠sider。

defaultCollapsed这个属性是设置折叠的一个默认状态就是设置一个初始化的默认值

reverseArrow这个是设置通过collapsible产生一个箭头折叠按钮，当我们的sider在右侧的时候，我们可以通过这个属性来修改箭头的方向

theme属性是一个主题属性 主要有两个值 light（淡蓝色）和dark（暗黑色）这两个属性是显示的主题颜色

width={200}这个是用来设置sider的宽度的参数是一个number值

onCollapse这个属性主要是用来给可以折叠的sider一个回掉函数，当折叠的时候会触发这个函数，只有收起的时候才会触发这个函数，有两个参数第一个参数是collapsible这个是显示当前的一个折叠状态就是collpasible的值
onBreakpoint这个属性的值也是一个回掉函数，当响应式达到收缩的时候就会触发这个函数