layout布局_Angular 组件库 NG-NEST 源码解析：Layout 栅格布局

最新推荐文章于 2022-12-04 23:23:54 发布
最新推荐文章于 2022-12-04 23:23:54 发布
阅读量299 收藏
点赞数
文章标签： layout布局

前言

NG-NEST介绍

今天我们看一下 Layout 栅格布局 是如何实现的

0b8c2319e204bf063f5da45815ddfd8f.gif

功能分析

栅格布局是基于行和列（24栅格）来定义内容区域的，提供了以下的功能：

  • 基础布局
  • 分栏间隔
  • 分栏偏移
  • 对齐方式
  • 响应布局
  • 响应隐藏

代码分析

先看是如何使用的：

<x-row>
  <x-col span="12">col-12</x-col>
  <x-col span="12">col-12</x-col>
</x-row>

x-row 用来定义行，x-col 用来定义列, span 属性用来设置每列的占比 ，涉及到2个组件：

lib/ng-nest/ui/layout
├── style
├── col.component.html         
├── col.component.ts                   列组件
├── row.component.html 
├── row.component.ts                   行组件
├── layout.property.ts                 参数定义
└── ......

我们先看 x-row 行组件 row.component.ts 代码是如何定义的：

@Component({
  selector: `${XRowPrefix}`,
  template: '<ng-content></ng-content>',
  styleUrls: ['./row.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class XRowComponent extends XRowProperty implements OnInit {
  // 当有设置水平或垂直排列方式时添加 x-flex 布局样式
  @HostBinding(`class.x-flex`) get getFlex() {
    return this.justify || this.align ? true : false;
  }

  constructor(private renderer: Renderer2, private elementRef: ElementRef) {
    super();
    this.renderer.addClass(this.elementRef.nativeElement, XRowPrefix);
  }

  ngOnInit() {
    this.setSpace();
    this.setJustify();
    this.setAlign();
  }

  // 设置行的左右外边距
  setSpace() {
    if (!this.space) return;
    this.renderer.setStyle(this.elementRef.nativeElement, 'margin-left', `-${Number(this.space) / 2}rem`);
    this.renderer.setStyle(this.elementRef.nativeElement, 'margin-right', `-${Number(this.space) / 2}rem`);
  }

  // 设置行中列的水平排列方式
  setJustify() {
    if (!this.justify) return;
    this.renderer.addClass(this.elementRef.nativeElement, `x-justify-${this.justify}`);
  }

  // 设置行中列的垂直排列方式
  setAlign() {
    if (!this.align) return;
    this.renderer.addClass(this.elementRef.nativeElement, `x-align-${this.align}`);
  }
}

对应在 layout.property.ts 中的参数定义：

/**
 * Row Property
 */
@Component({ template: '' })
export class XRowProperty extends XProperty {
  /**
   * 列间隔，rem
   */
  @Input() @XInputNumber() space: XNumber;
  /**
   * flex 布局下的水平排列方式
   */
  @Input() justify: XJustify;
  /**
   * flex 布局下的垂直排列方式
   */
  @Input() align: XAlign;
}

列间距、flex 布局下列的排列方式都是通过 x-row 组件设置，接下来我们继续看 x-col 列组件都做了什么事情：

打开 col.component.ts 文件：

@Component({
  selector: `${XColPrefix}`,
  template: '<ng-content></ng-content>',
  styleUrls: ['./col.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class XColComponent extends XColProperty implements OnInit {
  // 如果设置了响应布局，默认添加 x-col-24 样式，占满24格 
  @HostBinding(`class.x-col-24`) get getFlex() {
    return this.xs || this.sm || this.md || this.lg || this.xl || this.span == 24 ? true : false;
  }

  constructor(
    @Optional() @Host() public rowComponent: XRowComponent, 
    private renderer: Renderer2, 
    private elementRef: ElementRef) {
    super();
    this.renderer.addClass(this.elementRef.nativeElement, XColPrefix);
  }

  ngOnInit() {
    this.setSpan();
    this.setOffset();
    this.setSpace();
    this.setLayout();
    this.setInherit();
  }

  // 设置每列的占比样式
  setSpan() {
    if (!this.span) return;
    this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-${this.span}`);
  }
  
  // 设置每列的偏移样式
  setOffset() {
    if (!this.offset) return;
    this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-offset-${this.offset}`);
  }
  
  // 设置列与列之间的间距，来源于行组件的 space 参数
  setSpace() {
    if (!this.rowComponent?.space) return;
    this.renderer.setStyle(this.elementRef.nativeElement, 'padding-left', `${Number(this.rowComponent.space) / 2}rem`);
    this.renderer.setStyle(this.elementRef.nativeElement, 'padding-right', `${Number(this.rowComponent.space) / 2}rem`);
  }

  // 设置响应布局尺寸
  setLayout() {
    if (this.xs) {
      this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-xs-${this.xs}`);
    }
    if (this.sm) {
      this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-sm-${this.sm}`);
    }
    if (this.md) {
      this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-md-${this.md}`);
    }
    if (this.lg) {
      this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-lg-${this.lg}`);
    }
    if (this.xl) {
      this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-xl-${this.xl}`);
    }
  }

  // 设置宽度默认属性
  setInherit() {
    if (!this.inherit) return;
    this.renderer.addClass(this.elementRef.nativeElement, `${XColPrefix}-inherit`);
  }
}

对应在 layout.property.ts 中的参数定义：

/**
 * Col Property
 */
@Component({ template: '' })
export class XColProperty extends XProperty {
  /**
   * 24栅格布局，列占的宽度
   */
  @Input() @XInputNumber() span: XNumber;
  /**
   * 栅格左侧的间隔格数
   */
  @Input() @XInputNumber() offset: XNumber;
  /**
   * <768px
   */
  @Input() @XInputNumber() xs: XNumber;
  /**
   * ≥768px
   */
  @Input() @XInputNumber() sm: XNumber;
  /**
   * ≥992px
   */
  @Input() @XInputNumber() md: XNumber;
  /**
   * ≥1200px
   */
  @Input() @XInputNumber() lg: XNumber;
  /**
   * ≥1920px
   */
  @Input() @XInputNumber() xl: XNumber;
  /**
   * 默认样式
   */
  @Input() @XInputBoolean() inherit: XBoolean;
}

x-row 和 x-col 组件的代码都比较简单，都是根据参数设置指定的样式，列间距通过获取父组件的 space 参数来设置，我们来看一下具体样式是如何写的：

打开 lib/ng-nest/ui/layout/style/mixin.scss 文件

 @mixin row {
  display: block;
  position: relative;
  height: auto;
  &:before,
  &:after {
    content: '';
    display: table;
    clear: both;
  }
  @include flex();
}

@mixin media-screen($key, $value) {
  $col-layout-initial: $--x-col-layout;
  @while $col-layout-initial>0 {
    $col-percentage: 100% * $col-layout-initial / $--x-col-layout;
    @media only screen and #{inspect($value)} {
      &-#{$key}-#{$col-layout-initial} {
        width: $col-percentage;
      }
    }
    $col-layout-initial: $col-layout-initial - 1;
  }
}

@mixin col {
  position: relative;
  float: left;
  display: block;
  width: 100%;
  box-sizing: border-box;
  $col-layout-initial: $--x-col-layout;
  @while $col-layout-initial>0 {
    $col-percentage: 100% * $col-layout-initial / $--x-col-layout;
    &-#{$col-layout-initial} {
      width: $col-percentage;
    }
    &-offset-#{$col-layout-initial} {
      margin-left: $col-percentage;
    }
    $col-layout-initial: $col-layout-initial - 1;
  }
  @each $key, $value in $--x-size-range {
    @include media-screen($key, $value);
  }
  &-inherit {
    width: inherit;
  }
}

@mixin row 里面定义行样式，在里面又包含了一个 flex 混合，这个定义在 lib/ng-nest/ui/style/mixins/flex.scss 中，主要就是 flex 布局的一些通用样式，通过 flex 最终生成的样式如下：

.x-row.x-flex {
  display: flex;
}
.x-row.x-justify-start {
  justify-content: flex-start;
}
.x-row.x-justify-center {
  justify-content: center;
}
.x-row.x-justify-end {
  justify-content: flex-end;
}
.x-row.x-justify-space-between {
  justify-content: space-between;
}
.x-row.x-justify-space-around {
  justify-content: space-around;
}
.x-row.x-align-start {
  align-items: flex-start;
}
.x-row.x-align-center {
  align-items: center;
}
.x-row.x-align-end {
  align-items: flex-end;
}
.x-row.x-direction-column {
  flex-direction: column;
}
.x-row.x-direction-column-reverse {
  flex-direction: column-reverse;
}
.x-row.x-direction-row {
  flex-direction: row;
}
.x-row.x-direction-row-reverse {
  flex-direction: row-reverse;
}

@mixin media-screen 里面定义响应样式，$--x-col-layout 为 24 栅格，通过 @while 循环输出不同尺寸对应 @media 查询样式，最终生成的样式代码如下：

@media only screen and (max-width: 767px) {
  .x-col-xs-24 {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .x-col-xs-23 {
    width: 95.8333333333%;
  }
}

...

@media only screen and (max-width: 767px) {
  .x-col-xs-1 {
    width: 4.1666666667%;
  }
}
@media only screen and (min-width: 768px) {
  .x-col-sm-24 {
    width: 100%;
  }
}

...

@media only screen and (min-width: 768px) {
  .x-col-sm-1 {
    width: 4.1666666667%;
  }
}
...
@media only screen and (min-width: 992px) {
  .x-col-md-24 {
    width: 100%;
  }
}
...

@mixin col 定义列样式，同样通过 @while 循环输出对应栅格所占用的宽度，此处还包含了偏移的格数，通过 margin-left 来设置，还有一个 @each in 的用来遍历输出定义的媒体查询参数 $--x-size-range：

// Layout
$--x-col-layout: 24;

$--x-sm: 768px !default;
$--x-md: 992px !default;
$--x-lg: 1200px !default;
$--x-xl: 1920px !default;

$--x-size-range: (
  'xs': (
    max-width: $--x-sm - 1
  ),
  'sm': (
    min-width: $--x-sm
  ),
  'md': (
    min-width: $--x-md
  ),
  'lg': (
    min-width: $--x-lg
  ),
  'xl': (
    min-width: $--x-xl
  )
);

最终生成的样式如下:

.x-col-24 {
  width: 100%;
}
.x-col-offset-24 {
  margin-left: 100%;
}

...

.x-col-1 {
  width: 4.1666666667%;
}
.x-col-offset-1 {
  margin-left: 4.1666666667%;
}

响应隐藏功能是通过公共的 var-size-hidden 这个混合实现，这个定义在 lib/ng-nest/ui/style/mixins/hidden.scss 中

@mixin var-size-hidden($hidden) {
  @each $key, $value in $hidden {
    [#{$--x-prefix}-hidden-#{$key}] {
      @media only screen and #{inspect($value)} {
        display: none !important;
      }
    }
  }
}

此处就是一个属性样式，通过在具体的 @media 查询样式下隐藏元素，在 lib/ng-nest/ui/style/core/var.scss 中使用：

@include var-size-hidden($--x-size-range-only);

$--x-size-range-only 参数定义如下：

$--x-size-range-only: (
  'xs-only': (
    max-width: $--x-sm - 1
  ),
  'sm-and-up': (
    min-width: $--x-sm
  ),
  'sm-only': (
    min-width: $--x-sm
  )
  and
  (
    max-width: $--x-md - 1
  ),
  'sm-and-down': (
    max-width: $--x-md - 1
  ),
  'md-and-up': (
    min-width: $--x-md
  ),
  'md-only': (
    min-width: $--x-md
  )
  and
  (
    max-width: $--x-lg - 1
  ),
  'md-and-down': (
    max-width: $--x-lg - 1
  ),
  'lg-and-up': (
    min-width: $--x-lg
  ),
  'lg-only': (
    min-width: $--x-lg
  )
  and
  (
    max-width: $--x-xl - 1
  ),
  'lg-and-down': (
    max-width: $--x-xl - 1
  ),
  'xl-only': (
    min-width: $--x-xl
  )
);

生成的最终样式如下：

@media only screen and (max-width: 767px) {
  [x-hidden-xs-only] {
    display: none !important;
  }
}
@media only screen and (min-width: 768px) {
  [x-hidden-sm-and-up] {
    display: none !important;
  }
}
@media only screen and (max-width: 991px) {
  [x-hidden-sm-only] {
    display: none !important;
  }
}
@media only screen and (max-width: 991px) {
  [x-hidden-sm-and-down] {
    display: none !important;
  }
}
@media only screen and (min-width: 992px) {
  [x-hidden-md-and-up] {
    display: none !important;
  }
}
@media only screen and (max-width: 1199px) {
  [x-hidden-md-only] {
    display: none !important;
  }
}
@media only screen and (max-width: 1199px) {
  [x-hidden-md-and-down] {
    display: none !important;
  }
}
@media only screen and (min-width: 1200px) {
  [x-hidden-lg-and-up] {
    display: none !important;
  }
}
@media only screen and (max-width: 1919px) {
  [x-hidden-lg-only] {
    display: none !important;
  }
}
@media only screen and (max-width: 1919px) {
  [x-hidden-lg-and-down] {
    display: none !important;
  }
}
@media only screen and (min-width: 1920px) {
  [x-hidden-xl-only] {
    display: none !important;
  }
}

总结

以上就是 Layout 栅格布局 的源码分析，主要还是一些样式的应用，通过 SCSS 的混合、循环和遍历有效减少了重复的样式代码。

weixin_39726267
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular_layout
02-21
新应用 该项目是使用版本8.3.5生成的。 开发服务器 为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-name生成一个新的组件。 您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。 建造 运行ng build来构建项目。 构建工件将存储在dist/目录中。 使用--prod标志进行生产构建。 运行单元测试 运行ng test通过执行单元测试。 运行端到端测试 运行ng e2e以通过执行端到端测试。 进一步的帮助 要获得有关Angular CLI的更多帮助，请使用ng help或查看 。
Angular cdk 学习之 Layout
旧路
12-18 1074
&nbsp; &nbsp; &nbsp; &nbsp;cdk Layout是cdk 提供的响应式布局工具，提供了实用程序来构建响应屏幕大小更改的响应UI，其服务可以轻松检测窗口大小并与媒体查询匹配。这使得你可以完全控制UI并适应不同的屏幕尺寸。官网地址 https://material.angular.io/cdk/layout/overview &nbsp; &nbsp; &nbsp; &nbs...
angular里面使用TweenMax与flex-layout
上食埃土，下饮黄泉
02-20 527
angular中使用TweenMax
Angular 4入门教程系列：17：NG-ZORRO：Layout
热门推荐
知行合一 止于至善
11-19 1万+
这篇文章介绍一下如何使用NG-ZORRO的layout相关的组件。
angular-dynamic-layout, 一个轻量级AngularJS动态网格布局.zip
09-18
angular-dynamic-layout, 一个轻量级AngularJS动态网格布局 [ 这个项目正在寻找一个合作者来接受开发，因为我不再有ressources这样做了。 如果你有兴趣请让我知道感谢]这是什么？angular-dynamic-layout是AngularJS的动态网格布局。 它灵感来自 successf
angular6-ng-zorro-admin:angular6 + ng-zorro
05-14
运行ng generate component component-name生成一个新的组件。 您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。 建造 运行ng build来构建项目。 构建工件将存储在dist/目录中...
ng-nest-icon：svg图标
02-17
"ng-nest-icon" 是一个专门针对Angular框架开发的SVG图标库。在现代Web开发中，SVG（可缩放矢量图形）图标由于其优秀的可伸缩性、高清晰度和小体积，已经成为前端开发者首选的图标解决方案。而ng-nest-icon则是这个...
ng-golden-layout:角度绑定用于金色布局
05-09
兼容Angular 2.4.x安装要安装此库及其依赖项，请运行： $ npm install @goldsam/ng-golden-layout golden-layout --save$ npm install @types/jquery --save-dev入门首先，将GoldenLayoutModule导入您的根AppModule ...
ng-nest-admin:Angular和Nestjs构建的开源后台管理系统，基于@ ng-nestui组件库
03-11
使用对应的@ ng-nest / ui组件库 支持环境 角^ 11.0.0 Nestjs ^ 7.0.0 Chrome Microsoft Edge Firefox Safari最新2个版本最新2个版本最新2个版本最新2个版本 2.目录说明 目录 说明 api Nestjs后台API接口项目 ui ...
ng-dynamic-forms：Angular的快速表单开发库
01-31
NG Dynamic Forms是基于官方Angular的快速表单开发库。 通过引入一组可维护的表单控件模型和动态表单控件组件，它完全自动化了表单UI创建 为所有流行的UI库提供开箱即用的支持，包括 ， ， ， ， ， 和 。 探索和...
angular-grid-layout:响应式网格，带有可拖动和可调整大小的项目，用于Angular应用程序
03-06
角网格布局 带有可拖动项目和可调整大小项目的网格，用于Angular应用程序。 高度可定制的仪表板非常适合。 它的核心功能基于众所周知的库。 可以将其视为Angular生态系统的“端口”（经过一些更改）。 两者涵盖了相同的必需品。 特征 没有依赖关系 可拖动项 可调整大小的项目 REDUX友好（akita，ngrx，ngxs ...） 可自定义的“拖动和调整大小”手柄。 网格压缩的3种模式：垂直，水平和自由（与完全相同的算法） 添加/删除项目 高性能 支持触摸设备 拖动时自动滚动 演示版 安装 要在项目中使用@ katoid / angular-grid-layout，请通过安装它： npm install @katoid/angular-grid-layout --save 用法 将KtdGridModule导入到要使用网格的模块中： import { KtdGridMod
ng-nest：NG-NEST是一个开源的Web应用程序框架，基于Angular和Nest，主要用于研发企业级中后台产品
02-01
NG-NEST NG-NEST是一个开源的网络应用程序框架，基于角和鸟巢，主要用于研发企业级中后台产品。 是一个应用设计框架与开发平台，用于创建高效，复杂，精致的单页面应用。 是开发高效，可扩展的Node.js服务器端应用程序的框架。 特性 客户端与服务端都使用TypeScript构建，提供完整的类型定义文件。 开箱即用的预期Angular组件，与Angular保持同步升级。 使用OnPush模式提升性能。 使用严格的模式规范代码。 使用CSS3中的var来定义主题样式。 当前版本 npm 11.0.3 支持Angular版本 @ng-nest/ui目前支持Angular ^ 11.0.0 支持环境 现代浏览器 Chrome 微软Edge 火狐浏览器 苹果浏览器 最新2个版本 最新2个版本 最新2个版本 最新2个版本 基本假设 本文档假设您已经熟悉了和的一些基础知识。文档中的代码范例都是使用最新版本的 ，它会用实现依赖注入，然后用来提供元数据。 交流群号 QQ 微信
libnest2d:用现代C ++编写的2D不规则垃圾箱包装和嵌套库
05-13
注意 该库是项目的一部分。 您可以在找到原始版本。 该存储库是原始项目（实际上是一个fork）的延续，其中包含向后移植的稳定更改，并且对试验性的新功能开放。 介绍 Libnest2D是2D装箱问题的库和框架。 该项目从 Javascript库启发而来，是在C ++ 11中从头开始构建的。 该库的编写策略是，它应该通过一个非常简单的界面即开即用地使用，但也必须针对其核心进行自定义。 仅以模板格式的几何类型以标头方式定义算法。 这些几何可以具有自定义的或已经存在的实现，以避免复制或具有不必要的依赖关系。 如果该库的用户只想直接使用它而无需其他集成，则提供默认后端。 该后端相当快且健壮，建立在增强几何图形和库的基础上。 使用此默认后端意味着依赖于这些程序包，但也仅依赖其标头。 该软件仍然功能不完善，并且缺少完整的文档以及一些必不可少的算法。 在此阶段，它在不考虑Kong和凹面的情况下，对于
angularIonic CLI环境搭建安装以及栅格响应式布局
tangdou369098655的博客
08-27 144
angular Ionic CLI环境搭建安装以及栅格响应式布局
tangdou369098655的博客
08-29 318
angular6 flex-layout
上食埃土，下饮黄泉
05-08 1628
npm install angular/flex-layout-builds 安装后会报错 需要安装 npm install @angular/cdk npm install --save rxjs-compat
非常好用的栅格布局 来自ANT-DESIGN&&ANGULAR
最新发布
m0_63586335的博客
12-04 355
如果说flex布局是一维布局而存在，那么grid是为二维布局而存在的grid布局被称为栅格布局，也被称为网格布局，他可以将网页划分成许多方格，我们可以在方格中填充自己需要的内
angular使用什么样的样式_Angular布局利器FlexLayout
weixin_42509803的博客
12-28 584
Flex Layout布局安装要在Angular CLI项目中使用@angular/flex-layout相当简单，只需要两个步骤：安装组件指令： npm install --save @angular/flex-layout将Angular Flex Layout导入到app.module中Angular Flex Layout简介Angular Flex Layout底层使用FlexBox C...
ng-book2：Angular 2入门指南 - 最新版r41
在实际操作部分，“Writing Your First Angular 2 Web Application”带领读者创建一个简单的Reddit克隆项目，逐步学习如何使用TypeScript（Angular 2的首选编程语言），以及如何利用angular-cli工具进行项目初始化。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值