angular简易switch选择按钮

最新推荐文章于 2026-04-07 13:38:21 发布

原创最新推荐文章于 2026-04-07 13:38:21 发布 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#typescript

typescript 专栏收录该内容

211 篇文章

订阅专栏

本文将指导您通过三个步骤在Angular应用中创建一个简单的Switch选择按钮。首先，您将在'app.component.ts'文件中进行配置；其次，在'app.component.html'中定义视图；最后，在'app.component.css'中设置样式完成交互设计。

angular简易switch选择按钮

step1: D:\vue\untitled2905\src\app\app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'untitled2905';
  name = false;
  viewName = '关闭';
  getData(){
    if (this.name){
      console.log('关闭');
      this.name = false;
      this.viewName = '关闭';
    }else{
      console.log('打开');
      this.name = true;
      this.viewName = '打开';
    }
  }
}

step2: D:\vue\untitled2905\src\app\app.component.html

<div class="example-con">
  <label>
  <input [ngModel]="name" type="checkbox"  class="mui-switch mui-switch-anim" value="旅游" (click)="getData()">{{viewName}}
  </label>
</div>

step3: D:\vue\untitled2905\src\app\app.component.css


.mui-switch-con {
  margin-top: 10px;
  font-size: 16px;
}

.mui-switch-con label {
  display: block
}

.mui-switch {
  width: 52px;
  height: 31px;
  position: relative;
  border: 1px solid #dfdfdf;
  background-color: #fdfdfd;
  box-shadow: #dfdfdf 0 0 0 0 inset;
  border-radius: 20px;
  background-clip: content-box;
  display: inline-block;
  -webkit-appearance: none;
  user-select: none;
  outline: none;
}

.mui-switch:before {
  content: '';
  width: 29px;
  height: 29px;
  position: absolute;
  top: 0px;
  left: 0;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.mui-switch:checked {
  border-color: #64bd63;
  box-shadow: #64bd63 0 0 0 16px inset;
  background-color: #64bd63;
}

.mui-switch:checked:before {
  left: 21px;
}

.mui-switch.mui-switch-animbg {
  transition: background-color ease 0.4s;
}

.mui-switch.mui-switch-animbg:before {
  transition: left 0.3s;
}

.mui-switch.mui-switch-animbg:checked {
  box-shadow: #dfdfdf 0 0 0 0 inset;
  background-color: #64bd63;
  transition: border-color 0.4s, background-color ease 0.4s;
}

.mui-switch.mui-switch-animbg:checked:before {
  transition: left 0.3s;
}

.mui-switch.mui-switch-anim {
  transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
}

.mui-switch.mui-switch-anim:before {
  transition: left 0.3s;
}

.mui-switch.mui-switch-anim:checked {
  box-shadow: #64bd63 0 0 0 16px inset;
  background-color: #64bd63;
  transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
}

.mui-switch.mui-switch-anim:checked:before {
  transition: left 0.3s;
}

end