java - 如何在表vaadin中设置复选框的大小

我的vaadin表中的列包含默认vaadin复选框。我的表格宽度为100％，我也有包含嵌入式图像的列，因此行的高度为90像素。

Vaadin版本是7.6.3。

我想将复选框的高度和宽度设置为约60像素。

我该如何实现？

我的Java代码：

CheckBox cboxone=new CheckBox();
cboxone.setConvertedValue(true);
cboxone.setHeight("60px");
cboxone.setWidth("60px");
cboxone.setStyleName("csmy");

我将高度和宽度设置为60px。我将CSS样式（样式名称为csmy）应用于复选框。我尝试以下CSS样式：

  @import "../valo/valo.scss";

  @mixin blabla{
  @include valo;

    //here i put my css styles

    .csmy .v-checkbox > label{

        height:60px !important;
        width:60px !important;
    }

    .csmy .v-checkbox{

        height:60px !important;
        width:60px !important;
    }

   .csmy{
      height:60px !important;
      width:60px !important;
   }

   .csmy .v-checkbox > input{

        height:60px !important;
        width:60px !important;
   }
}

但是仍然没有任何反应。复选框的大小仍与以前相同。

最佳答案

在valo主题的checkbox.scss中，您将看到以下内容：

/**
 * Outputs the selectors and properties for the CheckBox component.
 *
 * @param {string} $primary-stylename (v-checkbox) - the primary style name for the selectors
 * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
 *
 * @group checkbox
 */
@mixin valo-checkbox ($primary-stylename: v-checkbox, $include-additional-styles: contains($v-included-additional-styles, checkbox)) {

  .#{$primary-stylename} {
    @include valo-checkbox-style;
  }


  @if $include-additional-styles {
    .#{$primary-stylename}-small {
      @include valo-checkbox-style($unit-size: $v-unit-size--small);
      font-size: $v-font-size--small;
    }

    .#{$primary-stylename}-large {
      @include valo-checkbox-style($unit-size: $v-unit-size--large);
      font-size: $v-font-size--large;
    }
  }
}

您会看到两种变体大/小样式。
基本上，它使用的是$v-font-size值，因此，例如，将另一个复选框样式定义为huge，并将变量的大小设为60px即可使用。

因此，在主题scss文件中添加以下行，并为复选框使用样式huge

  $v-unit-size--huge: 60px;
  $v-font-size--huge: 60px;

  // Insert your own theme rules here
  .v-checkbox-huge {
  @include valo-checkbox-style($unit-size: $v-unit-size--huge);
      font-size: $v-font-size--huge;
    }

并在Java代码中：

    CheckBox cb1= new CheckBox();
    cb1.addStyleName("huge");