Guest User

Untitled

a guest
Dec 11th, 2019
76
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