html - Mat-slide-toggle شبیه به چکباکس معمولی به نظر میرسد

من یک mat-slide-toggle در صفحه انگولار خود دارم. مقادیر مناسب را در ماژول وارد کردهام، با این حال پس از بارگذاری صفحه، سوئیچ به صورت یک چکباکس معمولی نمایش داده میشود.

اچتیامال :

<div style="width:100%;overflow:hidden">
<h5 class="mx-2 mb-0" style="width:50%;float:left;clear:none">Suggested Titles</h5>
<mat-slide-toggle
  style = "float:right;width:30%"
  [color]="color"
  [checked]="checked"
  (change)="andOrBoxChecked()"
  [disabled]="disabled"> {{slideValue}}
</mat-slide-toggle>
</div>

تایپاسکریپت :

import { Component, OnInit, NgModule } from '@angular/core';
import { MatSlideToggleModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
[...]
  color = 'accent';
  checked = true;
  disabled = false;
  slideValue = "And";
[...]
  andOrBoxChecked(){
    if(this.slideValue == 'And')
      this.slideValue = 'Or';

    else  
      this.slideValue='And';
  }

ماژول :

import { MatSlideToggleModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
[...]
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule, //Here
        routing,
        HttpClientModule,
        FormsModule,
        NgSelectModule,
        AlertModule.forRoot(),
        ButtonsModule.forRoot(),
        CollapseModule.forRoot(),
        // BsDatepickerModule.forRoot(),
        ModalModule.forRoot(),
        PaginationModule.forRoot(),
        TooltipModule.forRoot(),
        TypeaheadModule.forRoot(),
        MdcDrawerModule,
        MdcIconModule,
        MdcListModule,
        MatSlideToggleModule, //And here
        NgxChartsModule,
        SharedModule
    ],

ظاهراً این باید شبیه یک کلید کشویی باشد و نه فقط یک چکباکس ساده.

پاسخ شماره ۱

شما نیاز دارید تا فایل استایل پایهای که توسط Angular Material ارائه شده است را در فایل css/scss خود اضافه کنید.

لطفاً خط زیر را در فایل styles.css خود اضافه کنید.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

یا

اگر از Angular CLI استفاده نمیکنید، میتوانید یک تم از پیش ساختهشده را از طریق یک عنصر <link> در index.html خود وارد کنید.

مستندات شروع به کار را بررسی کنید و بخش مرحله ۴: اضافه کردن یک تم را برای تمها دنبال کنید.