1

我正在尝试通过引用链接来创建 ON-OFF 开关

在这里，我不能在 index.html 文件中使用 FontAwesome 引用，我所做的是我在我的项目中复制了 font-awesome-css 文件。但是没有显示开关ON-OFF按钮。

在这里，我删除了 index.html 中的引用，并将 font-awesome.min.css 的内容复制到我的 style.css 文件中。我的要求是根据模型值（布尔值）创建 ON-OFF 开关。

它应该具有编辑（开/关）功能。

任何人都可以建议为什么 css 文件不起作用，或者我有什么其他方法可以做到这一点。

4

3 回答 3

7

Fontawesome 简单的开关

<style>
     .active, .inactive {
            font-size: 26px;
            cursor: pointer;
        }

        .active, .inactive {
            font-size: 26px;
            cursor: pointer;
        }

        i.active {
            color: #5cb85c;
        }

        i.inactive {
            color: #d9534f;
        }
    </style> 

<i class="fa fa-toggle-on" ng-class="isActive?'active':'fa-rotate-180 inactive'" ng-click="isActive=!isActive" />

"isActive"(bool) 是开关状态 在此处输入图像描述

于 2018-06-13T06:12:37.950 回答
1

我已经从https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch复制了代码

<!DOCTYPE html>
<html>
<head>
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <div class="slider"></div>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <div class="slider round"></div>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <div class="slider round"></div>
</label>

</body>
</html>
于 2017-02-23T06:35:54.000 回答
1

输出

<html lang="en">

<head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script language="javascript">
    angular
      .module('myApp', ['ngMaterial'])
      .controller('switchController', switchController);

    function switchController($scope) {
      $scope.data = {
        switch1: true
      };
      $scope.message = 'false';
      $scope.onChange = function(state) {
        $scope.message = state;
      };
    }
  </script>
</head>

<body ng-app="myApp">
  <div id="switchContainer" ng-controller="switchController as ctrl" layout="column" ng-cloak>
    <md-switch ng-model="data.switch1" aria-label="Switch 1">
      Switch 1: {{ data.switch1 }}
    </md-switch>

  </div>
</body>

</html>

于 2017-02-23T07:03:08.370 回答