SHARE
TWEET

Untitled

a guest Dec 11th, 2019 69 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. ============================models.ts=========
  2.  
  3. import { BrowserModule } from '@angular/platform-browser';
  4. import { NgModule } from '@angular/core';
  5.  
  6. import { MatInputModule } from '@angular/material/input';
  7. import { MatCardModule } from '@angular/material/card';
  8. import { MatButtonModule } from '@angular/material/button';
  9. import { MatMenuModule } from '@angular/material/menu';
  10. import { MatToolbarModule } from '@angular/material/toolbar';
  11. import { AppRoutingModule } from './app-routing.module';
  12. import { AppComponent } from './app.component';
  13. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  14.  
  15. @NgModule({
  16.   declarations: [
  17.     AppComponent
  18.   ],
  19.   imports: [
  20.     BrowserModule,
  21.     AppRoutingModule,
  22.     BrowserAnimationsModule,
  23.     MatInputModule,
  24.     MatCardModule,
  25.     MatToolbarModule,
  26.     MatButtonModule,
  27.     MatMenuModule
  28.   ],
  29.   providers: [],
  30.   bootstrap: [AppComponent]
  31. })
  32. export class AppModule { }
  33.  
  34. ============================app.html=========
  35.  
  36. <mat-toolbar class="mat-toolbar">
  37.   <button class="mat-button" (onclick)="myLog();" mat-button>Home
  38.   </button>
  39. </mat-toolbar>
  40.  
  41. <mat-card class="example-card">
  42.   <mat-card-header>
  43.     <div mat-card-avatar class="example-header-image"></div>
  44.     <mat-card-title>*username*</mat-card-title>
  45.     <mat-card-subtitle>*location*</mat-card-subtitle>
  46.   </mat-card-header>
  47.   <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  48.   <mat-card-content>
  49.     <p>
  50.       *comment section*
  51.     </p>
  52.     <form class="example-form">
  53.         <mat-form-field class="example-full-width">
  54.           <textarea matInput placeholder="Leave a comment"></textarea>
  55.         </mat-form-field>
  56.       </form>
  57.   </mat-card-content>
  58.   <mat-card-actions>
  59.     <button mat-button>LIKE</button>
  60.     <button mat-button>SHARE</button>
  61.   </mat-card-actions>
  62. </mat-card>
  63.  
  64. <mat-card class="example-card">
  65.   <mat-card-header>
  66.     <div mat-card-avatar class="example-header-image"></div>
  67.     <mat-card-title>*username*</mat-card-title>
  68.     <mat-card-subtitle>*location*</mat-card-subtitle>
  69.   </mat-card-header>
  70.   <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  71.   <mat-card-content>
  72.     <p>
  73.       *comment section*
  74.     </p>
  75.     <form class="example-form">
  76.       <mat-form-field class="example-full-width">
  77.         <textarea matInput placeholder="Leave a comment"></textarea>
  78.       </mat-form-field>
  79.     </form>
  80.  
  81.   </mat-card-content>
  82.   <mat-card-actions>
  83.     <button mat-button>LIKE</button>
  84.     <button mat-button>SHARE</button>
  85.   </mat-card-actions>
  86. </mat-card>
  87.  
  88. ============================app.css=========
  89.  
  90. .mat-toolbar {
  91.     background: linear-gradient(to left,  #e66465, #9198e5);
  92.     margin-block-end: auto;
  93.     margin-block-start: auto;
  94. }
  95.  
  96. .mat-button {
  97.     margin-inline-start: 60px;
  98.     font-size: medium;
  99. }
  100.  
  101. .example-card {
  102.     margin-block-start: 25px;
  103.     max-width: 400px;
  104.     margin-inline-start: 480px;
  105.  
  106. }
  107.  
  108. .example-header-image {
  109.     background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
  110.     background-size: cover;
  111. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top