ResponsiveService 响应式服务

更友好的使用响应式规则,将原 xssm 等属性简化成 col 栏,默认响应式规则:

col<576px≥576px≥768px≥992px≥1200px≥1600px
1111111
2122222
3123333
4123444
5123466
61234612

为了更好的开发响应式查看、编辑页,这种规则将默认将运用在 sgsvse 等组件中。你也可以利用 ResponsiveConfig 来改写默认规则。

ResponsiveConfig

通用配置项,例如统一对 ResponsiveService 设置响应式规则。

  1. import { AlainThemeConfig } from '@delon/theme';
  2. export function fnAlainThemeConfig(): AlainThemeConfig {
  3. return Object.assign(new AlainThemeConfig(), {
  4. responsive: {
  5. rules: {
  6. 1: { xs: 24 },
  7. 2: { xs: 24, sm: 12 },
  8. 3: { xs: 24, sm: 12, md: 8 },
  9. 4: { xs: 24, sm: 12, md: 8, lg: 6 },
  10. 5: { xs: 24, sm: 12, md: 8, lg: 6, xl: 4 },
  11. 6: { xs: 24, sm: 12, md: 8, lg: 6, xl: 4, xxl: 2 },
  12. }
  13. },
  14. });
  15. }
  16. @NgModule({})
  17. export class DelonModule {
  18. static forRoot(): ModuleWithProviders {
  19. return {
  20. ngModule: DelonModule,
  21. providers: [
  22. { provide: AlainThemeConfig, useFactory: fnAlainThemeConfig },
  23. ],
  24. };
  25. }
  26. }