时间戳

首页 > 解决方案 > Mat-slide-toggle 看起来像普通复选框

html - Mat-slide-toggle 看起来像普通复选框

问题描述

mat-slide-toggle我的角度页面上有一个。我在模块中导入了适当的值，但是一旦页面加载，切换只会显示为普通复选框。

HTML：

<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
    ],

我的幻灯片切换 显然，这应该类似于一个滑动切换，而不仅仅是一个普通的复选框。

标签： htmlangulartypescript

解决方案

您需要在css/scss文件中添加 Angular Material 提供的基本样式表。

styles.css请在您的文件中添加以下行。

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

或者

<link>如果您不使用 Angular CLI，则可以通过index.html.

查看入门文档并按照步骤 4：包含主题的主题部分。

推荐阅读