YbLayoutPro 布局
内置多种布局方式的组件,主要用于主页结构
# 基本用法
复制
# 切换布局
使用yb-theme-select
控制布局变化
复制
# props
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
sidebarWidth | 左侧栏的宽度 | string | - | "240px" |
sideFooterHeight | 左侧栏底部的高度 | string | - | "40px" |
headerHeight | 顶部栏的高度 | string | - | "50px" |
layout | 布局类型 | string | "tlr"|"tlr-light"|"ltr"|"ltr-light"|"ltr-dark"|"ttlr"|"tb-light"|"tb"|"lr"|"lr-light" | "tlr" |
onelyBody | 是否只显示中间区域,开启后不会显示左侧栏和顶部栏 | boolean | - | false |
collapse | 是否折叠左侧栏 | - | false |
# Slots
名称 | 说明 | 参数 |
---|---|---|
header | 顶部栏内容插槽 | - |
body | 中间内容插槽 | - |
sideHeader | 左侧栏头部插槽 | - |
sideBody | 左侧栏中间插槽 | - |
sideFooter | 左侧栏底部插槽 | - |
# Events
事件 | 说明 | 参数 |
---|---|---|
collapseChange | 左侧栏折叠按钮切换时触发 | (collapsed)=>{} |
collapseTransitionEnd | 折叠过渡完了之后触发 | (collapsed)=>{} |
上次更新: 2024/02/28, 17:31:26