如何使用primeng将文本“ON”和“OFF”添加到角度切换按钮？

Question

我在我的 angular14 项目中使用 primeng。我想在开关切换按钮内显示 ON 和 OFF 标签。可能有人知道该怎么做吗？

<p-inputSwitch ></p-inputSwitch>

https://primeng.org/inputswitch

我尝试用 CSS 类来解决这个问题，不幸的是没有成功

Answer 1

我尝试按照您最初的 CSS 类方法进行操作，并运行了一个示例：

模板：

<div class="custom-switch">
  <div class="switch-container">
    <span class="switch-label">{{ isOn ? 'ON' : 'OFF' }}</span>
    <p-inputSwitch [(ngModel)]="isOn"></p-inputSwitch>
  </div>
</div>

CSS：

.custom-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.switch-container {
  position: relative;
  display: inline-block;
}

.switch-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9;
}

也许你有同样的想法，只是错过了 z-index，因为我必须设置它才能看到输入开关上方/内部的标签。为了使其成为一个漂亮的组件，您可能需要在大小和字体方面尝试更多的样式，但作为一个起点，它是有效的。