vben-layout.ts 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  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. * header高度增加高度
  65. * 在顶部存在导航时,额外加高header高度
  66. * @default 10
  67. */
  68. headerHeightOffset?: number;
  69. /**
  70. * 顶栏是否隐藏
  71. * @default false
  72. */
  73. headerHidden?: boolean;
  74. /**
  75. * header 显示模式
  76. * @default 'fixed'
  77. */
  78. headerMode?: LayoutHeaderModeType;
  79. /**
  80. * 是否显示header切换侧边栏按钮
  81. * @default
  82. */
  83. headerToggleSidebarButton?: boolean;
  84. /**
  85. * header是否显示
  86. * @default true
  87. */
  88. headerVisible?: boolean;
  89. /**
  90. * 是否移动端显示
  91. * @default false
  92. */
  93. isMobile?: boolean;
  94. /**
  95. * 布局方式
  96. * sidebar-nav 侧边菜单布局
  97. * header-nav 顶部菜单布局
  98. * mixed-nav 侧边&顶部菜单布局
  99. * sidebar-mixed-nav 侧边混合菜单布局
  100. * full-content 全屏内容布局
  101. * @default sidebar-nav
  102. */
  103. layout?: LayoutType;
  104. /**
  105. * 侧边菜单折叠状态
  106. * @default false
  107. */
  108. sidebarCollapse?: boolean;
  109. /**
  110. * 侧边菜单是否折叠时,是否显示title
  111. * @default true
  112. */
  113. sidebarCollapseShowTitle?: boolean;
  114. /**
  115. * 侧边栏是否可见
  116. * @default true
  117. */
  118. sidebarEnable?: boolean;
  119. /**
  120. * 侧边菜单折叠额外宽度
  121. * @default 48
  122. */
  123. sidebarExtraCollapsedWidth?: number;
  124. /**
  125. * 侧边栏是否隐藏
  126. * @default false
  127. */
  128. sidebarHidden?: boolean;
  129. /**
  130. * 混合侧边栏宽度
  131. * @default 80
  132. */
  133. sidebarMixedWidth?: number;
  134. /**
  135. * 侧边栏是否半深色
  136. * @default false
  137. */
  138. sidebarSemiDark?: boolean;
  139. /**
  140. * 侧边栏
  141. * @default dark
  142. */
  143. sidebarTheme?: ThemeModeType;
  144. /**
  145. * 侧边栏宽度
  146. * @default 210
  147. */
  148. sidebarWidth?: number;
  149. /**
  150. * 侧边菜单折叠宽度
  151. * @default 48
  152. */
  153. sideCollapseWidth?: number;
  154. /**
  155. * tab是否可见
  156. * @default true
  157. */
  158. tabbarEnable?: boolean;
  159. /**
  160. * tab高度
  161. * @default 30
  162. */
  163. tabbarHeight?: number;
  164. /**
  165. * zIndex
  166. * @default 100
  167. */
  168. zIndex?: number;
  169. }
  170. export type { VbenLayoutProps };