@riil-frontend/component-layout
1.0.1-a.18 • Public • Published
LayoutCom
layout-com
这是新监控的前端布局组件
简介:LayoutCom
#布局组件使用说明
Layout ,布局容器
属性 |
类型 |
说明 |
默认值 |
必填 |
className |
String |
扩展样式类名 |
layout |
非必填 |
Top 头部布局(默认高度 54px)
属性 |
类型 |
说明 |
默认值 |
必填 |
className |
String |
扩展样式类名 |
top |
非必填 |
style |
Object |
自定样式布局 |
|
非必填 |
grid |
number |
纵向栅格布局 |
|
非必填 |
mg |
boolean |
是否开启外边距 |
false |
非必填 |
mgL |
boolean |
是否开启左侧外边距 |
false |
非必填 |
mgR |
boolean |
是否开启右侧外边距 |
false |
非必填 |
mgT |
boolean |
是否开启顶部外边距 |
false |
非必填 |
mgB |
boolean |
是否开启底部外边距 |
false |
非必填 |
mgSize |
String |
外边距尺寸,对应主题包的 s-1~s-12 |
s-4 |
非必填 |
CTop 次头部(使用场景,面包屑,默认高度 40px)
属性 |
类型 |
说明 |
默认值 |
必填 |
style |
Object |
自定样式布局 |
ctop |
非必填 |
grid |
number |
纵向栅格布局 |
|
非必填 |
mg |
boolean |
是否开启外边距 |
false |
非必填 |
mgL |
boolean |
是否开启左侧外边距 |
false |
非必填 |
mgR |
boolean |
是否开启右侧外边距 |
false |
非必填 |
mgT |
boolean |
是否开启顶部外边距 |
false |
非必填 |
mgB |
boolean |
是否开启底部外边距 |
false |
非必填 |
mgSize |
String |
外边距尺寸,对应主题包的 s-1~s-12 |
s-4 |
非必填 |
Content 内容组件布局
属性 |
类型 |
说明 |
默认值 |
必填 |
className |
String |
扩展样式类名 |
content |
非必填 |
style |
Object |
自定样式布局 |
|
非必填 |
hasClose |
boolean |
是否显示关闭按钮 |
false |
非必填 |
closeContent |
func |
点击内容区域关闭按钮回调 |
|
非必填 |
isOpenContent |
boolean |
是否打开内容布局 |
true |
非必填 |
flex |
number |
横向占比,与拖拽列表同用时不要使用此属性,范围 1~24 |
|
非必填 |
hasMutiWindow |
boolean |
是否显示多窗口按钮 |
false |
非必填 |
secondWindowsWidth |
number |
第二窗口初始宽度 |
窗口宽度的 1/2 |
非必填 |
secondtWindowsHeight |
number |
第二窗口初始高度 |
窗口高度的 1/2 |
非必填 |
minResizeWidth |
number |
第二窗口最小宽度 |
400 |
非必填 |
minResizeHeight |
number |
第二窗口最小高度 |
200 |
非必填 |
mg |
boolean |
是否开启外边距 |
false |
非必填 |
mgL |
boolean |
是否开启左侧外边距 |
false |
非必填 |
mgR |
boolean |
是否开启右侧外边距 |
false |
非必填 |
mgT |
boolean |
是否开启顶部外边距 |
false |
非必填 |
mgB |
boolean |
是否开启底部外边距 |
false |
非必填 |
mgSize |
String |
外边距尺寸,对应主题包的 s-1~s-12 |
s-4 |
非必填 |
ContentColumn 横向布局(左右排列,包裹容器)
属性 |
类型 |
说明 |
className |
String |
扩展样式类名 |
style |
Object |
自定样式布局 |
mg |
boolean |
是否开启外边距 |
mgL |
boolean |
是否开启左侧外边距 |
mgR |
boolean |
是否开启右侧外边距 |
mgT |
boolean |
是否开启顶部外边距 |
mgB |
boolean |
是否开启底部外边距 |
mgSize |
String |
外边距尺寸,对应主题包的 s-1~s-12 |
LeftSide 左侧边导航(默认宽度 200px)
属性 |
类型 |
说明 |
className |
String |
扩展样式类名 |
style |
Object |
自定样式布局 |
flex |
number |
横向占比 ,范围 1~24 |
mg |
boolean |
是否开启外边距 |
mgL |
boolean |
是否开启左侧外边距 |
mgR |
boolean |
是否开启右侧外边距 |
mgT |
boolean |
是否开启顶部外边距 |
mgB |
boolean |
是否开启底部外边距 |
mgSize |
String |
外边距尺寸,对应主题包的 s-1~s-12 |
LeftList 左侧列表(默认宽度 240 px)
属性 |
类型 |
说明 |
className |
String |
扩展样式类名 |
style |
Object |
自定样式布局 |
enableShrink |
boolean |
是否开启列表收缩功能,默认不开启 |
enableDrag |
boolean |
是否开启拖拽功能,默认不开启 |
flex |
number |
横向占比,在开启拖拽功能时,开启此功能无效,范围 1~24 |
mg |
boolean |
是否开启外边距 |
mgL |
boolean |
是否开启左侧外边距 |
mgR |
boolean |
是否开启右侧外边距 |
mgT |
boolean |
是否开启顶部外边距 |
mgB |
boolean |
是否开启底部外边距 |
mgSize |
String |
外边距尺寸,对应主题包的 s-1~s-12 |
Package Sidebar
Install
npm i @riil-frontend/component-layout
Weekly Downloads