Question

我想更改剑道道具的大小，例如40px。但是当我尝试这样做时，什么也没发生。对我来说，还有一个问题，我只需要一个按钮，该按钮的开始就具有正常的（灰色）颜色，但是单击鼠标后，应该在剑道项目的侧面改变的情况下在粉色和绿色之间切换（如下所示）。单击后，剑道项目也应更改颜色背景。Angular6中的所有内容。

我真的不知道如何调整剑道道具的大小。我尝试按照以下代码进行操作，但效果不佳。

<button class = "k-icon k-button" [ngClass] = "'nx-button toggle-button accept'">
  Accept
<span class="k-icon k-i-check-outline k-i-checkmark-outline accept"></span>
</button>

<button class = "k-icon k-button" [ngClass] = "'nx-button toggle-button denied'">
    Denied
  <span class="k-icon k-i-check-outline k-i-checkmark-outline denied"></span>
  </button>

.nx-button.toggle-button.denied {
    margin: 50px 0 0 50px;
    background: pink;
    width : 150px;
    height: 50px;
    text-align: center;
}

.nx-button.toggle-button.accept {
    margin: 50px 0 0 50px;
    background: greenyellow;
    width : 150px;
    height: 50px;
    text-align: center;
}

.k-icon.k-i-check-outline.k-i-checkmark-outline.denied { 
    position: absolute;
    background: pink;
    margin: -22px 10px 0 -75px;
    border-radius:40px;
    // width: 25px;
    // height: 25px;
    width: auto !important;
    -moz-min-width: 40px;
    -ms-min-width: 40px;
    -o-min-width: 40px;
    -webkit-min-width: 40px;
}

.k-icon.k-i-check-outline.k-i-checkmark-outline.accept { 
    position: absolute;
    background: greenyellow;
    margin: -22px 10px 0 75px;
    border-radius:40px;
    // width: 25px;
    // height: 25px;
    -moz-min-width: 40px;
    -ms-min-width: 40px;
    -o-min-width: 40px;
    -webkit-min-width: 40px;
}

Answer 1

您可以使用Kendo Button toggleable functionality并添加一些其他的自定义逻辑，以根据所需的行为添加和删除自定义类并更改文本，例如：

EXAMPLE

调整剑道道具的大小

1 个答案: