NG7 - Gird view toggle List view - Full Design
====================================
COMPONENT.TS
=============
export class AngularComponent implements OnInit {
displayMode=1;
constructor() { }
ngOnInit() {
}
// List View
listView() {
this.displayMode = 2;
}
// Grid View
gridView() {
this.displayMode = 1;
}
}
template.html
=================
<p>Switch to list view or grid view.</p>
<div id="btnContainer">
<button [ngClass]="{'btn-active': displayMode === 1, 'btn':displayMode === 2}" (click)="listView()"><i class="fa fa-bars"></i> List</button>
<button [ngClass]="{'btn-active': displayMode === 2, 'btn':displayMode === 1}" (click)="gridView()"><i class="fa fa-th-large"></i> Grid</button>
</div>
<div class="row">
<div [ngClass]="{'grid':displayMode === 1, 'list':displayMode !=1}" >
<div class="title">
<span class="pull-left">1.Angular Introdution </span>
<span class="pull-right" routerLink="/angular-intro"> ⟹ </span>
</div>
<div class="content">
<b>What is Angular?</b>
<p>
Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection,
end to end tooling, and integrated best practices to solve development challenges.
Angular empowers developers to build applications that live on the web, mobile, or the desktop.</p>
</div>
</div>
<div [ngClass]="{'grid':displayMode === 1, 'list':displayMode !=1}" >
<div class="title">
<span class="pull-left">2. Components & Modules </span>
<span class="pull-right" routerLink="/modules-components"> ⟹ </span>
</div>
<div class="content">
<div class="parent">
<div class="front">
<b>Module</b>
<p><b>@NgModule</b></p>
<p>Every Angular app has a root module, conventionally named AppModule, which provides the bootstrap mechanism that launches the application. An app typically contains many functional modules.</p>
</div>
<div class="back">
<b>Component</b>
<p><b> @Component()</b></p>
<p>Every Angular application has at least one component, the root component that connects a component hierarchy with the page document object model (DOM).
Each component defines a class that contains application data and logic, and is associated with an HTML template that defines a view to be displayed in a target environment.
</p>
</div>
</div>
</div>
</div>
<div [ngClass]="{'grid':displayMode === 1, 'list':displayMode !=1}" >
<div class="title">
<span class="pull-left">3. Forms & Bindings</span>
<span class="pull-right" routerLink="/forms-binding"> ⟹ </span>
</div>
<div class="content">
<div class="view scard1">
<div class="frontText">
<b>Introduction to forms in Angular</b>
<p> Handling user input with forms is the cornerstone of many common applications. Applications use forms to enable users to log in, to update a profile, to enter sensitive information,
and to perform many other data-entry tasks.</p>
<p>[Data Binding], (Event Binding), [(Two Way binding)] - Deprecated</p>
</div>
<div class="mask">
<p><b>Reactive forms</b> are more robust: they're more scalable, reusable, and testable. If forms are a key part of your application, or you're already using reactive patterns for building your application,
use reactive forms.</p>
<p><b>Template-driven</b> forms are useful for adding a simple form to an app, such as an email list signup form. They're easy to add to an app, but they don't scale as well as reactive forms.
If you have very basic form requirements and logic that can be managed solely in the template, use template-driven forms.</p>
</div>
</div>
</div>
</div>
</div>
....... continue the <div class="row" for multiple rows
STYLE.LESS
=============
* {
box-sizing: border-box;
}
.grid {
float: left;
width: 31.8%;
height: 24vh;
margin: 0.5% 0.6%;
//background: #ccc;
// border: 1px solid #ccc;
box-shadow: 1px 1px 2px 3px grey;
.title{
padding:10px;
height:15%;
font-weight: bold;
background: #2282fb;
color: #fff;
}
.content{
padding:10px;
height:85%;
overflow-y:auto;
text-align: justify;
}
}
.list {
float: left;
width: 100%;
padding: 10px;
margin: 4px 8px;
background: #e4e2e2;
border: 1px solid #ccc;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Style the buttons */
.btn {
padding: 12px 16px;
background-color: #666;
cursor: pointer;
}
.btn-active {
padding: 12px 16px;
background-color: #f1f1f1;
}
///////////////////////////////////
.parent {
transition: transform 1s ease-in-out 0s;
transform-style: preserve-3d;
width: 100%;
}
.parent:hover {
transform: rotateY(180deg);
}
.back,
.front {
width: 100%;
height: 170px;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
.front {
background-color: #f1f1f1;
}
.back {
background-color: #fff;
transform: rotateY(180deg);
}
.list .parent{
display: none;
}
////////////////////////
// using less preprocessor the css prob is used
.view {
width: 100%;
height: 100%;
margin:0px 0px 0px 0px;
float: left;
overflow: hidden;
position: relative;
//-webkit-box-shadow: 1px 1px 2px #e6e6e6;
//-moz-box-shadow: 1px 1px 2px #e6e6e6;
//box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff;
border: thin solid #ccc;
//background: #fff url(avatar.png) no-repeat center center;
}
.scard1{
background:#f1f1f1;
}
.scard2{
background:#E8892B;
}
.scard3{
background:#EB2A47;
}
.scard4{
background:#27699A;
}
.view .mask {
width: 100%;
height: 98%;
// border:thin solid #0f2d51;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
text-align: justify;
background-color: #fff;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.view .frontText {
display: block;
position: relative;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.frontText{
h5,h2{
color:#333;
}
}
.view:hover .mask {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.view:hover .frontText {
-webkit-transform: translateY(200px);
-moz-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
transform: translateY(200px);
}
.score-cards{
.single-card{
padding:0px;
}
}
.frontText{
padding: 1rem;
}
.list .view{
display: none;
}
b{
color:brown;
background: yellow;
}
====================================
COMPONENT.TS
=============
export class AngularComponent implements OnInit {
displayMode=1;
constructor() { }
ngOnInit() {
}
// List View
listView() {
this.displayMode = 2;
}
// Grid View
gridView() {
this.displayMode = 1;
}
}
template.html
=================
<p>Switch to list view or grid view.</p>
<div id="btnContainer">
<button [ngClass]="{'btn-active': displayMode === 1, 'btn':displayMode === 2}" (click)="listView()"><i class="fa fa-bars"></i> List</button>
<button [ngClass]="{'btn-active': displayMode === 2, 'btn':displayMode === 1}" (click)="gridView()"><i class="fa fa-th-large"></i> Grid</button>
</div>
<div class="row">
<div [ngClass]="{'grid':displayMode === 1, 'list':displayMode !=1}" >
<div class="title">
<span class="pull-left">1.Angular Introdution </span>
<span class="pull-right" routerLink="/angular-intro"> ⟹ </span>
</div>
<div class="content">
<b>What is Angular?</b>
<p>
Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection,
end to end tooling, and integrated best practices to solve development challenges.
Angular empowers developers to build applications that live on the web, mobile, or the desktop.</p>
</div>
</div>
<div [ngClass]="{'grid':displayMode === 1, 'list':displayMode !=1}" >
<div class="title">
<span class="pull-left">2. Components & Modules </span>
<span class="pull-right" routerLink="/modules-components"> ⟹ </span>
</div>
<div class="content">
<div class="parent">
<div class="front">
<b>Module</b>
<p><b>@NgModule</b></p>
<p>Every Angular app has a root module, conventionally named AppModule, which provides the bootstrap mechanism that launches the application. An app typically contains many functional modules.</p>
</div>
<div class="back">
<b>Component</b>
<p><b> @Component()</b></p>
<p>Every Angular application has at least one component, the root component that connects a component hierarchy with the page document object model (DOM).
Each component defines a class that contains application data and logic, and is associated with an HTML template that defines a view to be displayed in a target environment.
</p>
</div>
</div>
</div>
</div>
<div [ngClass]="{'grid':displayMode === 1, 'list':displayMode !=1}" >
<div class="title">
<span class="pull-left">3. Forms & Bindings</span>
<span class="pull-right" routerLink="/forms-binding"> ⟹ </span>
</div>
<div class="content">
<div class="view scard1">
<div class="frontText">
<b>Introduction to forms in Angular</b>
<p> Handling user input with forms is the cornerstone of many common applications. Applications use forms to enable users to log in, to update a profile, to enter sensitive information,
and to perform many other data-entry tasks.</p>
<p>[Data Binding], (Event Binding), [(Two Way binding)] - Deprecated</p>
</div>
<div class="mask">
<p><b>Reactive forms</b> are more robust: they're more scalable, reusable, and testable. If forms are a key part of your application, or you're already using reactive patterns for building your application,
use reactive forms.</p>
<p><b>Template-driven</b> forms are useful for adding a simple form to an app, such as an email list signup form. They're easy to add to an app, but they don't scale as well as reactive forms.
If you have very basic form requirements and logic that can be managed solely in the template, use template-driven forms.</p>
</div>
</div>
</div>
</div>
</div>
....... continue the <div class="row" for multiple rows
STYLE.LESS
=============
* {
box-sizing: border-box;
}
.grid {
float: left;
width: 31.8%;
height: 24vh;
margin: 0.5% 0.6%;
//background: #ccc;
// border: 1px solid #ccc;
box-shadow: 1px 1px 2px 3px grey;
.title{
padding:10px;
height:15%;
font-weight: bold;
background: #2282fb;
color: #fff;
}
.content{
padding:10px;
height:85%;
overflow-y:auto;
text-align: justify;
}
}
.list {
float: left;
width: 100%;
padding: 10px;
margin: 4px 8px;
background: #e4e2e2;
border: 1px solid #ccc;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Style the buttons */
.btn {
padding: 12px 16px;
background-color: #666;
cursor: pointer;
}
.btn-active {
padding: 12px 16px;
background-color: #f1f1f1;
}
///////////////////////////////////
.parent {
transition: transform 1s ease-in-out 0s;
transform-style: preserve-3d;
width: 100%;
}
.parent:hover {
transform: rotateY(180deg);
}
.back,
.front {
width: 100%;
height: 170px;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
.front {
background-color: #f1f1f1;
}
.back {
background-color: #fff;
transform: rotateY(180deg);
}
.list .parent{
display: none;
}
////////////////////////
// using less preprocessor the css prob is used
.view {
width: 100%;
height: 100%;
margin:0px 0px 0px 0px;
float: left;
overflow: hidden;
position: relative;
//-webkit-box-shadow: 1px 1px 2px #e6e6e6;
//-moz-box-shadow: 1px 1px 2px #e6e6e6;
//box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff;
border: thin solid #ccc;
//background: #fff url(avatar.png) no-repeat center center;
}
.scard1{
background:#f1f1f1;
}
.scard2{
background:#E8892B;
}
.scard3{
background:#EB2A47;
}
.scard4{
background:#27699A;
}
.view .mask {
width: 100%;
height: 98%;
// border:thin solid #0f2d51;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
text-align: justify;
background-color: #fff;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.view .frontText {
display: block;
position: relative;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.frontText{
h5,h2{
color:#333;
}
}
.view:hover .mask {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.view:hover .frontText {
-webkit-transform: translateY(200px);
-moz-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
transform: translateY(200px);
}
.score-cards{
.single-card{
padding:0px;
}
}
.frontText{
padding: 1rem;
}
.list .view{
display: none;
}
b{
color:brown;
background: yellow;
}
