vben-layout.ts 3.0 KB

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