Skip to content

Commit bb1a91a

Browse files
hpyourdkmaster
hpyou
authored and
rdkmaster
committed
新特性：新增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
1 parent 0dbe7c9 commit bb1a91a

27 files changed

+781
-1
lines changed

‎src/app/demo-list.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {routerConfig as formConfig} from "./demo/form/demo.module";
1212
import {routerConfig as graphConfig} from "./demo/graph/demo.module";
1313
import {routerConfig as i18nConfig} from "./demo/i18n/demo.module";
1414
import {routerConfig as inputConfig} from "./demo/input/demo.module";
15+
import {routerConfig as layoutConfig} from "./demo/layout/demo.module";
1516
import {routerConfig as listConfig} from "./demo/list/demo.module";
1617
import {routerConfig as loadingConfig} from "./demo/loading/demo.module";
1718
import {routerConfig as miscConfig} from "./demo/misc/demo.module";
@@ -90,6 +91,7 @@ export class DemoListManager {
9091
this._addRouterConfig(routerConfig, 'graph', graphConfig);
9192
this._addRouterConfig(routerConfig, 'i18n', i18nConfig);
9293
this._addRouterConfig(routerConfig, 'input', inputConfig);
94+
this._addRouterConfig(routerConfig, 'layout', layoutConfig);
9395
this._addRouterConfig(routerConfig, 'list', listConfig);
9496
this._addRouterConfig(routerConfig, 'loading', loadingConfig);
9597
this._addRouterConfig(routerConfig, 'misc', miscConfig);

‎src/app/demo/layout/box-justify/app.component.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.inner-content {
2+
line-height: 30px;
3+
text-align: center;
4+
color: #666;
5+
}
6+
7+
.line-box {
8+
margin-bottom: 8px;
9+
}
10+
11+
.line-box label {
12+
vertical-align: middle;
13+
margin: 0 8px 0 0;
14+
}
15+
16+
j-box {
17+
border: 1px solid #bbb;
18+
}
19+
20+
.item {
21+
border: 1px solid #bbb;
22+
background: #b3def1;
23+
width: 12.5%;
24+
}
25+
26+
.h50 {
27+
height: 50px;
28+
line-height: 50px;
29+
}
30+
31+
.h30 {
32+
height: 30px;
33+
line-height: 30px;
34+
}
35+
36+
.h80 {
37+
height: 80px;
38+
line-height: 80px;
39+
}
40+
41+
.h40 {
42+
height: 40px;
43+
line-height: 40px;
44+
}
45+

‎src/app/demo/layout/box-justify/app.component.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!-- ignore the following lines, they are not important to this demo -->
2+
<jigsaw-demo-description [summary]="summary" [content]="description">
3+
</jigsaw-demo-description>
4+
5+
6+
<!-- start to learn the demo from here -->
7+
<div class="live-demo-wrap">
8+
<h2>Box</h2>
9+
<div class="demo-1 live-demo">
10+
<h3>对齐</h3>
11+
<div class="line-box">
12+
<label>direction(布局方向): </label>
13+
<j-radios [(value)]="direction">
14+
<j-radio-option *ngFor="let item of directionArr" [value]="item">
15+
{{item}}
16+
</j-radio-option>
17+
</j-radios>
18+
</div>
19+
<div class="line-box">
20+
<label>justify(主轴对齐): </label>
21+
<j-radios [(value)]="justify">
22+
<j-radio-option *ngFor="let item of justifyArr" [value]="item">
23+
{{item}}
24+
</j-radio-option>
25+
</j-radios>
26+
</div>
27+
<div class="line-box">
28+
<label>align(垂直主轴对齐): </label>
29+
<j-radios [(value)]="align">
30+
<j-radio-option *ngFor="let item of alignArr" [value]="item">
31+
{{item}}
32+
</j-radio-option>
33+
</j-radios>
34+
</div>
35+
36+
<j-box [direction]="direction" [justify]="justify" [align]="align" height="400">
37+
<div class="item">
38+
<p class="inner-content h50">box1</p>
39+
</div>
40+
<div class="item">
41+
<p class="inner-content h30">box2</p>
42+
</div>
43+
<div class="item">
44+
<p class="inner-content h80">box3</p>
45+
</div>
46+
<div class="item">
47+
<p class="inner-content h40">box4</p>
48+
</div>
49+
</j-box>
50+
</div>
51+
</div>
52+
53+

‎src/app/demo/layout/box-justify/app.component.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import {Component} from "@angular/core";
2+
3+
@Component({
4+
templateUrl: './app.component.html',
5+
styleUrls: ['./app.component.css']
6+
})
7+
export class BoxJustifyDemoComponent {
8+
direction = 'horizontal';
9+
directionArr = ['horizontal', 'horizontal-reverse', 'vertical', 'vertical-reverse'];
10+
11+
justify = 'around';
12+
justifyArr = ['start', 'end', 'center', 'between', 'around'];
13+
14+
align = 'center';
15+
alignArr = ['start', 'end', 'center', 'baseline', 'stretch'];
16+
17+
// ====================================================================
18+
// ignore the following lines, they are not important to this demo
19+
// ====================================================================
20+
summary: string = '这个demo展示了box的对齐方式';
21+
description: string = require('!!raw-loader!./readme.md');
22+
}
23+
24+

‎src/app/demo/layout/box-justify/app.module.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {NgModule} from "@angular/core";
2+
import {BoxJustifyDemoComponent} from "./app.component";
3+
import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description";
4+
import {CommonModule} from "@angular/common";
5+
import {JigsawRadioModule} from "jigsaw/component/radio/radio";
6+
import {JigsawBoxModule} from "jigsaw/component/box/box";
7+
8+
@NgModule({
9+
declarations: [BoxJustifyDemoComponent],
10+
exports: [BoxJustifyDemoComponent],
11+
imports: [JigsawDemoDescriptionModule, CommonModule, JigsawRadioModule, JigsawBoxModule]
12+
})
13+
export class BoxJustifyDemoModule {
14+
15+
}

‎src/app/demo/layout/box-justify/readme.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
`direction`的值都有简写：
2+
- `horizontal` --> `h`;
3+
- `horizontal-reverse` --> `hr`;
4+
- `vertical` --> `v`;
5+
- `vertical-reverse` --> `vr`
6+
7+
关于box布局器的更多信息，请打开[这里](/jigsaw/layout/box-layout#open-desc=true)。

‎src/app/demo/layout/box-layout-scroll/app.component.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.inner-content {
2+
line-height: 30px;
3+
text-align: center;
4+
color: #666;
5+
}
6+
.inner-content.self-line-height{
7+
line-height: 1;
8+
}
9+
.inner-content.not-break-line{
10+
white-space: nowrap;
11+
}
12+
13+
j-box {
14+
border: 1px solid #bbb;
15+
}

‎src/app/demo/layout/box-layout-scroll/app.component.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!-- ignore the following lines, they are not important to this demo -->
2+
<jigsaw-demo-description [summary]="summary" [content]="description">
3+
</jigsaw-demo-description>
4+
5+
6+
<!-- start to learn the demo from here -->
7+
<div class="live-demo-wrap">
8+
<h2>Box</h2>
9+
<div class="demo-1 live-demo">
10+
<h3>滚动条</h3>
11+
<j-box height="400">
12+
<j-box>
13+
<p class="inner-content not-break-line">
14+
<span *ngFor="let i of arr1; index as ii;">
15+
<i *ngFor="let j of arr1; index as jj">原生滚动条 ({{ii}}, {{jj}}) ... <br *ngIf='jj==19'></i>
16+
</span>
17+
</p>
18+
</j-box>
19+
<j-box [perfectScrollbar]="{wheelSpeed: 0.5, wheelPropagation: true}">
20+
<p class="inner-content not-break-line">
21+
<span *ngFor="let i of arr1; index as ii;">
22+
<i *ngFor="let j of arr1; index as jj">自定义滚动条 ({{ii}}, {{jj}}) ... <br *ngIf='jj==19'></i>
23+
</span>
24+
</p>
25+
</j-box>
26+
</j-box>
27+
</div>
28+
</div>
29+
30+

‎src/app/demo/layout/box-layout-scroll/app.component.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {Component} from "@angular/core";
2+
3+
@Component({
4+
templateUrl: './app.component.html',
5+
styleUrls: ['./app.component.css']
6+
})
7+
export class BoxLayoutScrollDemoComponent {
8+
9+
arr1 = new Array(20);
10+
11+
// ====================================================================
12+
// ignore the following lines, they are not important to this demo
13+
// ====================================================================
14+
summary: string = '这个DEMO演示了在内容溢出后，j-box在滚动条方面的行为，以及如何添加自定义滚动条';
15+
description: string = '';
16+
}
17+
18+

‎src/app/demo/layout/box-layout-scroll/app.module.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {NgModule} from "@angular/core";
2+
import {BoxLayoutScrollDemoComponent} from "./app.component";
3+
import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description";
4+
import {JigsawBoxModule} from "jigsaw/component/box/box";
5+
import {PerfectScrollbarModule} from "ngx-perfect-scrollbar";
6+
7+
@NgModule({
8+
declarations: [BoxLayoutScrollDemoComponent],
9+
exports: [BoxLayoutScrollDemoComponent],
10+
imports: [JigsawDemoDescriptionModule, JigsawBoxModule, PerfectScrollbarModule]
11+
})
12+
export class BoxLayoutScrollDemoModule {
13+
14+
}

0 commit comments

Comments
 (0)