vben-layout.ts
3.01 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
import type {
ContentCompactType,
LayoutHeaderModeType,
LayoutType,
ThemeModeType,
} from '@vben-core/typings';
interface VbenLayoutProps {
/**
* 内容区域定宽
* @default 'wide'
*/
contentCompact?: ContentCompactType;
/**
* 定宽布局宽度
* @default 1200
*/
contentCompactWidth?: number;
/**
* padding
* @default 16
*/
contentPadding?: number;
/**
* paddingBottom
* @default 16
*/
contentPaddingBottom?: number;
/**
* paddingLeft
* @default 16
*/
contentPaddingLeft?: number;
/**
* paddingRight
* @default 16
*/
contentPaddingRight?: number;
/**
* paddingTop
* @default 16
*/
contentPaddingTop?: number;
/**
* footer 是否可见
* @default false
*/
footerEnable?: boolean;
/**
* footer 是否固定
* @default true
*/
footerFixed?: boolean;
/**
* footer 高度
* @default 32
*/
footerHeight?: number;
/**
* header高度
* @default 48
*/
headerHeight?: number;
/**
* 顶栏是否隐藏
* @default false
*/
headerHidden?: boolean;
/**
* header 显示模式
* @default 'fixed'
*/
headerMode?: LayoutHeaderModeType;
/**
* header 顶栏主题
*/
headerTheme?: ThemeModeType;
/**
* 是否显示header切换侧边栏按钮
* @default
*/
headerToggleSidebarButton?: boolean;
/**
* header是否显示
* @default true
*/
headerVisible?: boolean;
/**
* 是否移动端显示
* @default false
*/
isMobile?: boolean;
/**
* 布局方式
* sidebar-nav 侧边菜单布局
* header-nav 顶部菜单布局
* mixed-nav 侧边&顶部菜单布局
* sidebar-mixed-nav 侧边混合菜单布局
* full-content 全屏内容布局
* @default sidebar-nav
*/
layout?: LayoutType;
/**
* 侧边菜单折叠状态
* @default false
*/
sidebarCollapse?: boolean;
/**
* 侧边菜单折叠按钮
* @default true
*/
sidebarCollapsedButton?: boolean;
/**
* 侧边菜单是否折叠时，是否显示title
* @default true
*/
sidebarCollapseShowTitle?: boolean;
/**
* 侧边栏是否可见
* @default true
*/
sidebarEnable?: boolean;
/**
* 侧边菜单折叠额外宽度
* @default 48
*/
sidebarExtraCollapsedWidth?: number;
/**
* 侧边菜单折叠按钮是否固定
* @default true
*/
sidebarFixedButton?: boolean;
/**
* 侧边栏是否隐藏
* @default false
*/
sidebarHidden?: boolean;
/**
* 混合侧边栏宽度
* @default 80
*/
sidebarMixedWidth?: number;
/**
* 侧边栏
* @default dark
*/
sidebarTheme?: ThemeModeType;
/**
* 侧边栏宽度
* @default 210
*/
sidebarWidth?: number;
/**
* 侧边菜单折叠宽度
* @default 48
*/
sideCollapseWidth?: number;
/**
* tab是否可见
* @default true
*/
tabbarEnable?: boolean;
/**
* tab高度
* @default 30
*/
tabbarHeight?: number;
/**
* zIndex
* @default 100
*/
zIndex?: number;
}
export type { VbenLayoutProps };