vben-layout.ts 3.0 KB

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