ionic 4增加复选框图标的大小

时间:2019-04-19 09:45:19

标签: ionic-framework ionic4

我正在尝试增加ion-checkbox中的图标大小,但找不到解决方法。

我尝试了font-size--size属性,但是它们增加了背景的总体宽度和高度,而不是选中图标的大小。

enter image description here

HTML

<ion-checkbox
        color="secondary"
        slot="start"
        size="large">
</ion-checkbox>

CSS

ion-checkbox {
    --background: var(--background-color);
    --background-checked: var(--background-color);
    --checkmark-color: var(--color-blue-medium);
    --border-color: transparent;
    --border-color-checked: transparent;
   /* increasing overall width not the check icon size */
    --size:48px;
}

2 个答案:

答案 0 :(得分:1)

可以通过样式的zoom属性修改图标的大小。

在.scss文件中

   .my-icon { zoom : 2.0;}

在.html文件中

<ion-icon class="my-icon"></ion-icon>

答案 1 :(得分:0)

您不能设置图标大小的样式,因为它是Shadow DOM。

仅在使用CSS4变量时才可以设置影子DOM的样式(在这里不是这种情况)。

(请参阅article