Блог

Главная - Вопросы по программированию - Кнопки с угловым материалом, не соответствующие теме

Кнопки с угловым материалом, не соответствующие теме

#css #angular #angular-material

#css #угловые #angular-material

Вопрос:

Я только что установил Angular 10 с Angular Materials ng add @angular/material

Там я выбираю пользовательскую тему: фиолетовый / зеленый

Следующим шагом было просто добавить панель инструментов, в основном скопировать вставку с сайта googles. Но я не могу расположить кнопки, соответствующие теме. Я понятия не имею, почему это выглядит так.

введите описание изображения здесь

как это должно выглядеть

введите описание изображения здесь

 <mat-toolbar color="primary">
  <button mat-icon-button aria-label="Example icon-button with menu icon">
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App</span>
  <span class="nav-spacer"></span>
  <button mat-icon-button class="material-icons-outlined" aria-label="Example icon-button with heart icon">
    <mat-icon>favorite</mat-icon>
  </button>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
    <mat-icon>share</mat-icon>
  </button>
</mat-toolbar>

мой stlye.css

 /* You can add global styles to this file, and also import other style files */

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

мой index.html

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Frontend</title>
  <base href="/">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link href="favicon.ico" rel="icon" type="image/x-icon">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500amp;display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>

и эти импортные

   imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    FormsModule,
    MatToolbarModule,
    MatIconModule,
  ],

Что я здесь пропустил, пожалуйста?

Комментарии:

1. Вы должны импортировать файл темы css в свой файл css. **@import ‘@angular/material/prebuilt-themes/deeppurple-amber.css’; **

Ответ №1:

Вам нужно добавить MatButtonModule в ваш импорт.