css 在剑道开关上贴标签

2cmtqfgy 于 2023-04-23 发布在其他

关注(0)|答案(1)|浏览(106)

我正在使用Kendo UI for Angular的Switch组件。我创建了一个switch组件，但我注意到在文档中，switch显示默认标签“On”和“Off”default switch，但我的Button显示没有它们。所以我去文档中看到了“offLabel”和“onLabel”properties。我在代码中使用了它们，但仍然没有得到标签。
component.html

<kendo-switch name="isActive" onLabel="Yes" offLabel="No" class="switch" [(ngModel)]="inspectionPlan.isActive"></kendo-switch>

我打开浏览器DevTools，看到了这个

<span class="k-switch-label-on" aria-hidden="true"> Yes </span>
<span class="k-switch-label-off" aria-hidden="true"> Yes </span>

我认为标签不会出现，因为aria-hidden属性，但我不明白为什么它默认设置为隐藏。有人知道如何删除它吗？

css

来源：https://stackoverflow.com/questions/76065563/put-labels-on-kendo-switch

1条答案

按热度按时间

bnlyeluc1#

一些剑道主题似乎隐藏了标签，而默认主题则显示它们...
这是我用来显示标签的CSS：

.k-switch.k-switch-md {
  width: 4.5rem;
}
   
.k-switch-label-off, .k-switch-label-on {
    display: inline;
    width: calc(100% - 2em - 12px);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-shadow: none;
    line-height: 2em;
    overflow: hidden;
}
.k-switch-label-on {
  color: #FFF;
  text-align: left;
  left: 8px;
}
.k-switch-label-off {
  color: #333;
  text-align: right;
  right: 8px;
}

这里有一个**DEMO**

赞(0）回复(0）举报 2023-04-23

我来回答

css 在剑道开关上贴标签

1条答案

相关问题

热门标签

最新问答