From c0efb43bd6418788a93f044125d9a913a5fdf701 Mon Sep 17 00:00:00 2001 From: Alexander Zhukov Date: Thu, 4 May 2017 16:36:38 +0300 Subject: [PATCH] feat(ui-features): add a grid page --- .../ui-features/grid/grid.component.html | 252 ++++++++++++++++++ .../ui-features/grid/grid.component.scss | 23 ++ .../pages/ui-features/grid/grid.component.ts | 5 +- 3 files changed, 277 insertions(+), 3 deletions(-) create mode 100644 src/app/pages/ui-features/grid/grid.component.html create mode 100644 src/app/pages/ui-features/grid/grid.component.scss diff --git a/src/app/pages/ui-features/grid/grid.component.html b/src/app/pages/ui-features/grid/grid.component.html new file mode 100644 index 00000000..5aa7c855 --- /dev/null +++ b/src/app/pages/ui-features/grid/grid.component.html @@ -0,0 +1,252 @@ +
+
+ + + Inline Form + + +

Stacked to horizontal

+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
+
+
.col-md-8
+
+
+
.col-md-4
+
+
+
+
+
.col-md-4
+
+
+
.col-md-4
+
+
+
.col-md-4
+
+
+
+
+
.col-md-6
+
+
+
.col-md-6
+
+
+ +

Mobile and desktop

+
+
+
.col-12 .col-md-8
+
+
+
.col-6 .col-md-4
+
+
+
+
+
.col-6 .col-md-4
+
+
+
col-6 .col-md-4
+
+
+
.col-6 .col-md-4
+
+
+
+
+
.col-6
+
+
+
.col-6
+
+
+ +

Mobile, tablet, desktop

+
+
+
.col-12 .col-sm-6 .col-md-8
+
+
+
.col-6 .col-md-4
+
+
+
+
+
.col-6 .col-sm-4
+
+
+
.col-6 .col-sm-4
+
+
+
.col-6 .col-sm-4
+
+
+ +

Column wrapping

+
+
+
.col-9
+
+
+
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit. +
+
+
+
.col-6
Subsequent columns continue along the new line.
+
+
+ +

Responsive column resets

+
+
+
.col-6 .col-sm-3 +

Resize your viewport or check it out on your phone for an example.

+
+
+
+
.col-6 .col-sm-3
+
+
+
.col-6 .col-sm-3
+
+
+
.col-6 .col-sm-3
+
+
+ +

Offsetting columns

+
+
+
.col-md-4
+
+
+
.col-md-4 .offset-md-4
+
+
+
+
+
.col-md-3 .offset-md-3
+
+
+
.col-md-3 .offset-md-3
+
+
+
+
+
.col-md-6 .offset-md-3
+
+
+ +

Grid options

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Extra small devices + Phones (<576px) + Small devices + Tablets (≥576px) + Medium devices + Desktops (≥768px) + Large devices + Desktops (≥992px) + Large devices + Desktops (≥1200px) +
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Container widthNone (auto)540px720px960px1140px
Class prefix.col-.col-sm-.col-md-.col-lg-.col-xl-
# of columns12
Gutter width1.875rem / 30px (15px on each side of a column)
NestableYes
OffsetsYes
Column orderingYes
+
+ + + +
+
diff --git a/src/app/pages/ui-features/grid/grid.component.scss b/src/app/pages/ui-features/grid/grid.component.scss new file mode 100644 index 00000000..5071f60c --- /dev/null +++ b/src/app/pages/ui-features/grid/grid.component.scss @@ -0,0 +1,23 @@ +:host { + .show-grid { + div[class^=col-] { + padding: 10px; + box-sizing: border-box; + + div { + text-align: center; + background-color: rgba(white, 0.3); + padding: 12px 5px; + } + } + } + + .grid-h { + margin-top: 40px; + margin-bottom: 0; + + &:first-child { + margin-top: 0; + } + } +} diff --git a/src/app/pages/ui-features/grid/grid.component.ts b/src/app/pages/ui-features/grid/grid.component.ts index a9aab951..256f4b78 100644 --- a/src/app/pages/ui-features/grid/grid.component.ts +++ b/src/app/pages/ui-features/grid/grid.component.ts @@ -2,9 +2,8 @@ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'ngx-grid', - template: ` -

grid works!

- `, + styleUrls: ['./grid.component.scss'], + templateUrl: './grid.component.html', }) export class NgxGridComponent implements OnInit {