Skip to content

Commit bec496b

Browse files
zdrawkuzdrawku
authored
Merge pull request #1113 from IgniteUI/divider-samples
Adding samples for divider component
2 parents 27b8aee + b57893f commit bec496b

17 files changed

+308
-34
lines changed

‎live-editing/configs/DividerConfigGenerator.ts‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/* tslint:disable:object-literal-sort-keys */
2+
import { IgxDividerModule } from "igniteui-angular";
3+
import { DividerDashedComponent } from "../../src/app/layouts/divider/dashed/divider-dashed.component";
4+
import { DividerDefaultComponent } from "../../src/app/layouts/divider/default/divider-default.component";
5+
import { DividerInsetComponent } from "../../src/app/layouts/divider/inset/divider-inset.component";
6+
import { DividerVerticalComponent } from "../../src/app/layouts/divider/vertical/divider-vertical.component";
7+
import { AppModuleConfig } from "./core/AppModuleConfig";
8+
import { Config } from "./core/Config";
9+
import { IConfigGenerator } from "./core/IConfigGenerator";
10+
11+
export class DividerConfigGenerator implements IConfigGenerator {
12+
public generateConfigs(): Config[] {
13+
const configs = new Array<Config>();
14+
15+
configs.push(new Config({
16+
component: DividerDefaultComponent,
17+
appModuleConfig: new AppModuleConfig({
18+
imports: [IgxDividerModule, DividerDefaultComponent],
19+
ngDeclarations: [DividerDefaultComponent],
20+
ngImports: [IgxDividerModule]
21+
}),
22+
shortenComponentPathBy: "/layouts/divider/"
23+
}));
24+
25+
configs.push(new Config({
26+
component: DividerDashedComponent,
27+
appModuleConfig: new AppModuleConfig({
28+
imports: [IgxDividerModule, DividerDashedComponent],
29+
ngDeclarations: [DividerDashedComponent],
30+
ngImports: [IgxDividerModule]
31+
}),
32+
shortenComponentPathBy: "/layouts/divider/"
33+
}));
34+
35+
configs.push(new Config({
36+
component: DividerVerticalComponent,
37+
appModuleConfig: new AppModuleConfig({
38+
imports: [IgxDividerModule, DividerVerticalComponent],
39+
ngDeclarations: [DividerVerticalComponent],
40+
ngImports: [IgxDividerModule]
41+
}),
42+
shortenComponentPathBy: "/layouts/divider/"
43+
}));
44+
45+
configs.push(new Config({
46+
component: DividerInsetComponent,
47+
appModuleConfig: new AppModuleConfig({
48+
imports: [IgxDividerModule, DividerInsetComponent],
49+
ngDeclarations: [DividerInsetComponent],
50+
ngImports: [IgxDividerModule]
51+
}),
52+
shortenComponentPathBy: "/layouts/divider/"
53+
}));
54+
55+
return configs;
56+
}
57+
}

‎live-editing/generators/ConfigGenerators.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { ComboConfigGenerator } from "../configs/ComboConfigGenerator";
1515
import { DataChartConfigGenerator } from "../configs/DataChartConfigGenerator";
1616
import { DatePickerConfigGenerator } from "../configs/DatePickerConfigGenerator";
1717
import { DialogConfigGenerator } from "../configs/DialogConfigGenerator";
18+
import { DividerConfigGenerator } from "../configs/DividerConfigGenerator";
1819
import { DoughnutChartConfigGenerator } from "../configs/DoughnutChartConfigGenerator";
1920
import { DragAndDropConfigGenerator } from "../configs/DragAndDropConfigGenerator";
2021
import { DropDownConfigGenerator } from "../configs/DropDownConfigGenerator";
@@ -63,7 +64,7 @@ export const CONFIG_GENERATORS =
6364
ButtonConfigGenerator, ButtonGroupConfigGenerator, CalendarConfigGenerator, CardConfigGenerator,
6465
CarouselConfigGenerator, CategoryChartConfigGenerator, CheckboxConfigGenerator, ChipConfigGenerator,
6566
CircularProgressbarConfigGenerator, ComboConfigGenerator, DataChartConfigGenerator,
66-
DatePickerConfigGenerator, DialogConfigGenerator,
67+
DatePickerConfigGenerator, DividerConfigGenerator, DialogConfigGenerator,
6768
DropDownConfigGenerator, ExpansionPanelConfigGenerator, ExportCsvConfigGenerator, ExportExcelConfigGenerator,
6869
ExcelLibraryConfigGenerator, PieChartConfigGenerator, DoughnutChartConfigGenerator,
6970
TreeGridFinjsConfigGenerator, ForConfigGenerator, FinancialChartConfigGenerator, GridConfigGenerator,

‎src/app/layouts/divider/dashed/divider-dashed.component.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div class="divider-sample">
2+
<div>
3+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi officiis veritatis.</p>
4+
<igx-divider type="dashed"></igx-divider>
5+
<p class="mt mb">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi officiis veritatis.</p>
6+
</div>
7+
</div>

‎src/app/layouts/divider/dashed/divider-dashed.component.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.divider-sample {
2+
display: flex;
3+
padding: 20px;
4+
border: 1px solid #ededed;
5+
p {
6+
margin-top: 0;
7+
}
8+
.mt {
9+
margin-top: 16px;
10+
}
11+
.mb {
12+
margin-bottom: 0;
13+
}
14+
}

‎src/app/layouts/divider/dashed/divider-dashed.component.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import {Component, OnInit} from "@angular/core";
2+
3+
@Component({
4+
selector: "app-divider-dashed",
5+
styleUrls: ["./divider-dashed.component.scss"],
6+
templateUrl: "./divider-dashed.component.html"
7+
})
8+
export class DividerDashedComponent implements OnInit {
9+
10+
constructor() {
11+
}
12+
13+
public ngOnInit() {
14+
}
15+
16+
}

‎src/app/layouts/divider/default/divider-default.component.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div class="divider-sample">
2+
<div>
3+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi officiis veritatis.</p>
4+
<igx-divider></igx-divider>
5+
<p class="mt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi officiis veritatis.</p>
6+
</div>
7+
</div>

‎src/app/layouts/divider/default/divider-default.component.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.divider-sample {
2+
display: flex;
3+
padding: 20px;
4+
border: 1px solid #ededed;
5+
p {
6+
margin-top: 0;
7+
}
8+
.mt {
9+
margin-top: 20px;
10+
}
11+
}

‎src/app/layouts/divider/default/divider-default.component.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import {Component, OnInit} from "@angular/core";
2+
3+
@Component({
4+
selector: "app-divider-default",
5+
styleUrls: ["./divider-default.component.scss"],
6+
templateUrl: "./divider-default.component.html"
7+
})
8+
export class DividerDefaultComponent implements OnInit {
9+
10+
constructor() {
11+
}
12+
13+
public ngOnInit() {
14+
}
15+
16+
}

‎src/app/layouts/divider/inset/divider-inset.component.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div class="divider-sample">
2+
<div>
3+
<h4 class="mb">Both sides inset.</h4>
4+
<igx-divider [middle]="true" inset="100px"></igx-divider>
5+
<p class="mt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias at consectetur dolor magnam maiores nihil quasi quod repudiandae similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi.</p>
6+
</div>
7+
<div>
8+
<h4 class="mb">Left side only(default).</h4>
9+
<igx-divider inset="40px"></igx-divider>
10+
<p class="mt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias at consectetur dolor magnam maiores nihil quasi quod repudiandae similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi.</p>
11+
</div>
12+
</div>

‎src/app/layouts/divider/inset/divider-inset.component.scss‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.divider-sample {
2+
display: flex;
3+
padding: 20px;
4+
border: 1px solid #ededed;
5+
> div {
6+
margin-left: 40px;
7+
&:first-of-type {
8+
margin-left: 0;
9+
margin-right: 0;
10+
}
11+
}
12+
h4 {
13+
margin-top: 0;
14+
}
15+
p {
16+
margin-top: 0;
17+
}
18+
.mt {
19+
margin-top: 16px;
20+
margin-bottom: 0;
21+
}
22+
.mb {
23+
margin-bottom: 16px;
24+
}
25+
}
26+
.inset-sample {
27+
display: flex;
28+
flex-direction: column;
29+
justify-content: flex-start;
30+
}
31+
32+
.divider-indent-text {
33+
padding-left: 40px;
34+
}

0 commit comments

Comments
 (0)