css - 如何在md-Switch上设置文本？

Question

我正在尝试在 Material Angular 设计下的 md-switch 上设置信息文本，以便用户可以知道字段值的当前状态是什么。我想要的图形表示可以是

各位，这是怎么做到的？我是 Material 设计新手。

Answer 1

您可以尝试使用 CSS 向 md-bar 添加标签:

md-switch.inline-label .md-bar::before {
  position: absolute;
  font-size: 9px;
  line-height: 13px;

  content: "off";
  right: 0;
  padding-right: 3px;      
}

md-switch.inline-label.md-checked .md-bar::before {
  content: "on";
  left: 0;
  padding-left: 3px;
}

将类inline-label应用到您的md-switch:

<md-switch class="inline-label" ng-model="data.cb1" aria-label="Switch 1">
  Switch 1: {{ data.cb1 }}
</md-switch>

angular.module('MyApp', ['ngMaterial'])
  .controller('SwitchDemoCtrl', function($scope) {
    $scope.data = {
      cb1: true,
      cb4: true,
      cb5: false
    };

    $scope.message = 'false';

    $scope.onChange = function(cbState) {
      $scope.message = cbState;
    };
  });

.switchdemoBasicUsage .inset {
  padding-left: 25px;
  padding-top: 25px;
}
md-switch.wlabel .md-bar::before {
  content: "off";
  position: absolute;
  right: 0;
  font-size: 9px;
  line-height: 13px;
  padding-right: 3px;
}
md-switch.wlabel.md-checked .md-bar::before {
  content: "on";
  left: 0;
  padding-left: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.css" rel="stylesheet" />

<div class="inset switchdemoBasicUsage" ng-controller="SwitchDemoCtrl" ng-cloak="" ng-app="MyApp">
  <md-switch class="wlabel" ng-model="data.cb1" aria-label="Switch 1">
    Switch 1: {{ data.cb1 }}
  </md-switch>

  <md-switch ng-model="data.cb2" aria-label="Switch 2" ng-true-value="'yup'" ng-false-value="'nope'" class="md-warn">
    Switch 2 (md-warn): {{ data.cb2 }}
  </md-switch>

  <md-switch ng-disabled="true" aria-label="Disabled switch" ng-model="disabledModel">
    Switch (Disabled)
  </md-switch>

  <md-switch ng-disabled="true" aria-label="Disabled active switch" ng-model="data.cb4">
    Switch (Disabled, Active)
  </md-switch>

  <md-switch class="md-primary" md-no-ink="" aria-label="Switch No Ink" ng-model="data.cb5">
    Switch (md-primary): No Ink
  </md-switch>

  <md-switch ng-model="data.cb6" aria-label="Switch 6" ng-change="onChange(data.cb6)">
    Switch 6 message: {{ message }}
  </md-switch>
</div>