角度材料开关拇指内的文字

Question

我无法使用角度材料在角度开关内放置文本。我正在使用以下标记，我想在切换拇指内插入文本。

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

在下图中，我需要这样的输出。

Answer 1

尝试这可能会解决您的问题

 <md-switch class="inline-label" md-no-ink aria-label="Switch No Ink" ng-model="data.cb5"><p>hi</p> </md-switch>

<强> CSS

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;
}

Answer 2

试试这个..

md-switch.md-checked .md-thumb:before{
    content: 'on';
    color: white;
    line-height: 20px;
    padding-left: 2px;
    font-size: 14px;
}