新特性：新增j-box组件，同时支持垂直和水平方向上的布局，可完成任意复杂的布局要求

* layout dev * layout dev * layout-box dev * layout dev * layout dev * layout add grid 24 * add offset pull push * review to grid,and add row and column component * box layout dev * box layout dev * format code * without grid * remove grid temporarily * add box module into package * rollback removed code * auto check flex in box component innner * add direction justify align map for user * update demo doc * update demo * add doc for demo * better code * prtected to public * optimize demo * optimize demo * optimize demo * add doc for demo * remove useless code * add form demo * add more doc * fix open-desc url * j-box overflow solution * remove unused code * remove unused code * add fixable input property * box overflow scroll * with perfect scrollbar demo * with perfect scrollbar demo * with perfect scrollbar demo * with perfect scrollbar demo * simplify box scroll demo * fixes build error * better demo code
rdkmaster · Jan 2, 2018 · bb1a91a · bb1a91a
1 parent 0dbe7c9
commit bb1a91a
Show file tree

Hide file tree

Showing 27 changed files with 781 additions and 1 deletion.
diff --git a/src/app/demo-list.component.ts b/src/app/demo-list.component.ts
@@ -12,6 +12,7 @@ import {routerConfig as formConfig} from "./demo/form/demo.module";
 import {routerConfig as graphConfig} from "./demo/graph/demo.module";
 import {routerConfig as i18nConfig} from "./demo/i18n/demo.module";
 import {routerConfig as inputConfig} from "./demo/input/demo.module";
+import {routerConfig as layoutConfig} from "./demo/layout/demo.module";
 import {routerConfig as listConfig} from "./demo/list/demo.module";
 import {routerConfig as loadingConfig} from "./demo/loading/demo.module";
 import {routerConfig as miscConfig} from "./demo/misc/demo.module";
@@ -90,6 +91,7 @@ export class DemoListManager {
         this._addRouterConfig(routerConfig, 'graph', graphConfig);
         this._addRouterConfig(routerConfig, 'i18n', i18nConfig);
         this._addRouterConfig(routerConfig, 'input', inputConfig);
+        this._addRouterConfig(routerConfig, 'layout', layoutConfig);
         this._addRouterConfig(routerConfig, 'list', listConfig);
         this._addRouterConfig(routerConfig, 'loading', loadingConfig);
         this._addRouterConfig(routerConfig, 'misc', miscConfig);

diff --git a/src/app/demo/layout/box-justify/app.component.css b/src/app/demo/layout/box-justify/app.component.css
@@ -0,0 +1,45 @@
+.inner-content {
+    line-height: 30px;
+    text-align: center;
+    color: #666;
+}
+
+.line-box {
+    margin-bottom: 8px;
+}
+
+.line-box label {
+    vertical-align: middle;
+    margin: 0 8px 0 0;
+}
+
+j-box {
+    border: 1px solid #bbb;
+}
+
+.item {
+    border: 1px solid #bbb;
+    background: #b3def1;
+    width: 12.5%;
+}
+
+.h50 {
+    height: 50px;
+    line-height: 50px;
+}
+
+.h30 {
+    height: 30px;
+    line-height: 30px;
+}
+
+.h80 {
+    height: 80px;
+    line-height: 80px;
+}
+
+.h40 {
+    height: 40px;
+    line-height: 40px;
+}
+
diff --git a/src/app/demo/layout/box-justify/app.component.html b/src/app/demo/layout/box-justify/app.component.html
@@ -0,0 +1,53 @@
+<!-- ignore the following lines, they are not important to this demo -->
+<jigsaw-demo-description [summary]="summary" [content]="description">
+</jigsaw-demo-description>
+
+
+<!-- start to learn the demo from here -->
+<div class="live-demo-wrap">
+    <h2>Box</h2>
+    <div class="demo-1 live-demo">
+        <h3>对齐</h3>
+        <div class="line-box">
+            <label>direction(布局方向): </label>
+            <j-radios [(value)]="direction">
+                <j-radio-option *ngFor="let item of directionArr" [value]="item">
+                    {{item}}
+                </j-radio-option>
+            </j-radios>
+        </div>
+        <div class="line-box">
+            <label>justify(主轴对齐): </label>
+            <j-radios [(value)]="justify">
+                <j-radio-option *ngFor="let item of justifyArr" [value]="item">
+                    {{item}}
+                </j-radio-option>
+            </j-radios>
+        </div>
+        <div class="line-box">
+            <label>align(垂直主轴对齐): </label>
+            <j-radios [(value)]="align">
+                <j-radio-option *ngFor="let item of alignArr" [value]="item">
+                    {{item}}
+                </j-radio-option>
+            </j-radios>
+        </div>
+
+        <j-box [direction]="direction" [justify]="justify" [align]="align" height="400">
+            <div class="item">
+                <p class="inner-content h50">box1</p>
+            </div>
+            <div class="item">
+                <p class="inner-content h30">box2</p>
+            </div>
+            <div class="item">
+                <p class="inner-content h80">box3</p>
+            </div>
+            <div class="item">
+                <p class="inner-content h40">box4</p>
+            </div>
+        </j-box>
+    </div>
+</div>
+
+
diff --git a/src/app/demo/layout/box-justify/app.component.ts b/src/app/demo/layout/box-justify/app.component.ts
@@ -0,0 +1,24 @@
+import {Component} from "@angular/core";
+
+@Component({
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css']
+})
+export class BoxJustifyDemoComponent {
+    direction = 'horizontal';
+    directionArr = ['horizontal', 'horizontal-reverse', 'vertical', 'vertical-reverse'];
+
+    justify = 'around';
+    justifyArr = ['start', 'end', 'center', 'between', 'around'];
+
+    align = 'center';
+    alignArr = ['start', 'end', 'center', 'baseline', 'stretch'];
+
+    // ====================================================================
+    // ignore the following lines, they are not important to this demo
+    // ====================================================================
+    summary: string = '这个demo展示了box的对齐方式';
+    description: string = require('!!raw-loader!./readme.md');
+}
+
+
diff --git a/src/app/demo/layout/box-justify/app.module.ts b/src/app/demo/layout/box-justify/app.module.ts
@@ -0,0 +1,15 @@
+import {NgModule} from "@angular/core";
+import {BoxJustifyDemoComponent} from "./app.component";
+import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description";
+import {CommonModule} from "@angular/common";
+import {JigsawRadioModule} from "jigsaw/component/radio/radio";
+import {JigsawBoxModule} from "jigsaw/component/box/box";
+
+@NgModule({
+    declarations: [BoxJustifyDemoComponent],
+    exports: [BoxJustifyDemoComponent],
+    imports: [JigsawDemoDescriptionModule, CommonModule, JigsawRadioModule, JigsawBoxModule]
+})
+export class BoxJustifyDemoModule {
+
+}
diff --git a/src/app/demo/layout/box-justify/readme.md b/src/app/demo/layout/box-justify/readme.md
@@ -0,0 +1,7 @@
+`direction`的值都有简写：
+- `horizontal` --> `h`;
+- `horizontal-reverse` --> `hr`;
+- `vertical` --> `v`;
+- `vertical-reverse` --> `vr`
+
+关于box布局器的更多信息，请打开[这里](/jigsaw/layout/box-layout#open-desc=true)。
diff --git a/src/app/demo/layout/box-layout-scroll/app.component.css b/src/app/demo/layout/box-layout-scroll/app.component.css
@@ -0,0 +1,15 @@
+.inner-content {
+    line-height: 30px;
+    text-align: center;
+    color: #666;
+}
+.inner-content.self-line-height{
+    line-height: 1;
+}
+.inner-content.not-break-line{
+    white-space: nowrap;
+}
+
+j-box {
+    border: 1px solid #bbb;
+}
diff --git a/src/app/demo/layout/box-layout-scroll/app.component.html b/src/app/demo/layout/box-layout-scroll/app.component.html
@@ -0,0 +1,30 @@
+<!-- ignore the following lines, they are not important to this demo -->
+<jigsaw-demo-description [summary]="summary" [content]="description">
+</jigsaw-demo-description>
+
+
+<!-- start to learn the demo from here -->
+<div class="live-demo-wrap">
+    <h2>Box</h2>
+    <div class="demo-1 live-demo">
+        <h3>滚动条</h3>
+        <j-box height="400">
+            <j-box>
+                <p class="inner-content not-break-line">
+                    <span *ngFor="let i of arr1; index as ii;">
+                        <i *ngFor="let j of arr1; index as jj">原生滚动条 ({{ii}}, {{jj}}) ... <br *ngIf='jj==19'></i>
+                    </span>
+                </p>
+            </j-box>
+            <j-box [perfectScrollbar]="{wheelSpeed: 0.5, wheelPropagation: true}">
+                <p class="inner-content not-break-line">
+                    <span *ngFor="let i of arr1; index as ii;">
+                        <i *ngFor="let j of arr1; index as jj">自定义滚动条 ({{ii}}, {{jj}}) ... <br *ngIf='jj==19'></i>
+                    </span>
+                </p>
+            </j-box>
+        </j-box>
+    </div>
+</div>
+
+
diff --git a/src/app/demo/layout/box-layout-scroll/app.component.ts b/src/app/demo/layout/box-layout-scroll/app.component.ts
@@ -0,0 +1,18 @@
+import {Component} from "@angular/core";
+
+@Component({
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css']
+})
+export class BoxLayoutScrollDemoComponent {
+
+    arr1 = new Array(20);
+
+    // ====================================================================
+    // ignore the following lines, they are not important to this demo
+    // ====================================================================
+    summary: string = '这个DEMO演示了在内容溢出后，j-box在滚动条方面的行为，以及如何添加自定义滚动条';
+    description: string = '';
+}
+
+
diff --git a/src/app/demo/layout/box-layout-scroll/app.module.ts b/src/app/demo/layout/box-layout-scroll/app.module.ts
@@ -0,0 +1,14 @@
+import {NgModule} from "@angular/core";
+import {BoxLayoutScrollDemoComponent} from "./app.component";
+import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description";
+import {JigsawBoxModule} from "jigsaw/component/box/box";
+import {PerfectScrollbarModule} from "ngx-perfect-scrollbar";
+
+@NgModule({
+    declarations: [BoxLayoutScrollDemoComponent],
+    exports: [BoxLayoutScrollDemoComponent],
+    imports: [JigsawDemoDescriptionModule, JigsawBoxModule, PerfectScrollbarModule]
+})
+export class BoxLayoutScrollDemoModule {
+
+}
diff --git a/src/app/demo/layout/box-layout/app.component.css b/src/app/demo/layout/box-layout/app.component.css
@@ -0,0 +1,12 @@
+.inner-content {
+    line-height: 30px;
+    text-align: center;
+    color: #666;
+}
+.inner-content.self-line-height{
+    line-height: 1;
+}
+
+j-box {
+    border: 1px solid #bbb;
+}
diff --git a/src/app/demo/layout/box-layout/app.component.html b/src/app/demo/layout/box-layout/app.component.html
@@ -0,0 +1,56 @@
+<!-- ignore the following lines, they are not important to this demo -->
+<jigsaw-demo-description [summary]="summary" [content]="description">
+</jigsaw-demo-description>
+
+
+<!-- start to learn the demo from here -->
+<div class="live-demo-wrap">
+    <h2>Box</h2>
+    <div class="demo-1 live-demo">
+        <h3>布局</h3>
+        <j-box height="400">
+            <j-box direction="v">
+                <j-box grow="1">
+                    <j-box></j-box>
+                    <j-box direction="v">
+                        <j-box>
+                            <p class="inner-content self-line-height">
+                                content1...<br>
+                                content2...<br>
+                                content3...<br>
+                                content4...<br>
+                                content5...<br>
+                                content6...<br>
+                                content7...<br>
+                            </p>
+                        </j-box>
+                        <j-box></j-box>
+                    </j-box>
+                </j-box>
+                <j-box grow="2">
+                    <j-box>
+                        <p class="inner-content not-break-line">
+                            content1...content2...content3...content4...content5...<br>
+                            content1...content2...content3...content4...content5...<br>
+                            content1...content2...content3...content4...content5...<br>
+                            content1...content2...content3...content4...content5...<br>
+                        </p>
+                    </j-box>
+                    <j-box></j-box>
+                    <j-box></j-box>
+                </j-box>
+            </j-box>
+            <j-box grow="3">
+                <p class="inner-content">
+                    content...<br>
+                    content...<br>
+                    content...<br>
+                    content...<br>
+                    content...<br>
+                </p>
+            </j-box>
+        </j-box>
+    </div>
+</div>
+
+
diff --git a/src/app/demo/layout/box-layout/app.component.ts b/src/app/demo/layout/box-layout/app.component.ts
@@ -0,0 +1,16 @@
+import {Component} from "@angular/core";
+
+@Component({
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css']
+})
+export class BoxLayoutDemoComponent {
+
+    // ====================================================================
+    // ignore the following lines, they are not important to this demo
+    // ====================================================================
+    summary: string = '这个demo展示了如何使用box来布局一个比较复杂的页面';
+    description: string = require('!!raw-loader!./readme.md');
+}
+
+
diff --git a/src/app/demo/layout/box-layout/app.module.ts b/src/app/demo/layout/box-layout/app.module.ts
@@ -0,0 +1,13 @@
+import {NgModule} from "@angular/core";
+import {BoxLayoutDemoComponent} from "./app.component";
+import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description";
+import {JigsawBoxModule} from "jigsaw/component/box/box";
+
+@NgModule({
+    declarations: [BoxLayoutDemoComponent],
+    exports: [BoxLayoutDemoComponent],
+    imports: [JigsawDemoDescriptionModule, JigsawBoxModule]
+})
+export class BoxLayoutDemoModule {
+
+}
diff --git a/src/app/demo/layout/box-layout/readme.md b/src/app/demo/layout/box-layout/readme.md
@@ -0,0 +1,36 @@
+### 简介
+
+j-box布局器不仅可以很好的布局水平方向上元素，还可以很好的布局垂直方向上的元素。
+
+水平方向上的布局功能和bootstrap的栅格功能非常类似，支持多种排列方式和对齐方式，具体参考[这个demo](/jigsaw/layout/box-justify)。
+也支持嵌套布局，水平上可以继续嵌套另一个垂直布局或者水平布局（请参考本demo的代码）。
+
+j-box还能够在垂直方向上布局，这是bootstrap的栅格功能所不支持的。相同的，垂直方向上的布局也支持嵌套一个水平或者垂直布局。
+
+### 主要属性
+
+#### direction
+关于j-box的`direction`属性：它用于设置其子级j-box是按照水平排列还是垂直排列，默认值是水平排列，如果需要子级垂直排列，
+则可以设置`direction="vertical"`。注意`vertical`可以简写为`v`
+
+#### grow
+关于j-box的`grow`属性：它用于设置其子级j-box的宽/高（取决于`direction`属性的值）占比，默认`grow`是1，即默认
+每个子级j-box会1:1均分宽/高，如需控制子级j-box的宽/高比例，比如1:2，需要将第一个子j-box的`grow`设置为1，第二个设置为2。
+grow的值可以有小数点，使比例更精确。
+
+### 内容溢出
+j-box内容溢出是自动产生滚动条的，因此，j-box里面的元素请尽量使用相对全局定位，或者把j-box尺寸设的足够大。
+
+### 使用建议
+
+从功能上讲，j-box完全可以使用这个布局器替代栅格系统了，只要给`grow`属性一个数字就够了，无需记住bootstrap栅格系统里那么多的class名。
+但是任何事情没有是完美的，毕竟每个j-box背后都有一个组件实例，因此j-box会稍重一些，而栅格系统或者自行通过css实现的布局则是纯css，
+因此比j-box要轻量一些。
+
+综合起来，我们的建议是：**当视图比较复杂特别是需要在水平&垂直方向上同时进行布局的时候，采用j-box来布局；在视图很简单仅需要水平布局时，
+采用栅格或者自行css布局**，j-box和栅格系统是可以完美嵌套使用的。
+
+有个特殊情况，如果你不熟悉栅格系统，或者css用的不溜，那就尽管用j-box布局吧，只要适当的将页面切分成子模块，并用路由实现懒加载，
+那单模块视图上的j-box组件数量是有限的，数量控制在一二百个之内，即使在IE11等低性能浏览器上，也几乎没有差别的。
+我们测试过在页面上放6000个box，IE11上大概多花2~3s渲染。
+