oktatas:web:angular:angular_material
Tartalomjegyzék
Angular Material
- Szerző: Sallai András
- Copyright © 2021, Sallai András
- Szerkesztve: 2021, 2022, 2025
- Web: https://szit.hu
Telepítés
Telepítés:
ng add @angular/material
Telepítéskor rákérdez, hogy globálisan szeretnénk használni.
Használat adott komponensben
Tegyük fel, hogy az app.component.html fájlba szeretnénk használni.
- src/app/app.component.ts
import {MatButtonModule} from '@angular/material/button'; /* ... */ imports: [RouterOutlet, MatButtonModule ],
A modul használata
- src/app/app.component.html
<h1>Példa</h1> <button mat-button>Mehet</button>
Vízszintes menü gombokból
<button mat-button routerLink="home">Főoldal</button> <button mat-button routerLink="employees">Dolgozók</button> <button mat-button routerLink="tasks">Feladatok</button> <button mat-button routerLink="admin">Admin</button>
Input
Az app.component.ts fájlba felvesszük:
import {MatInputModule} from '@angular/material/input'; imports: [RouterOutlet, MatInputModule ],
<form> <mat-form-field class="example-full-width" appearance="fill"> <mat-label>Alap</mat-label> <input matInput placeholder="alap" value="30"> </mat-form-field> <mat-form-field class="example-full-width" appearance="fill"> <mat-label>Magasság</mat-label> <input matInput placeholder="magasság" value="35"> </mat-form-field> </form>
Link
oktatas/web/angular/angular_material.txt · Utolsó módosítás: 2025/03/02 14:09 szerkesztette: admin