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

Question

我的 vaadin 表中有包含默认 vaadin 复选框的 列。我的表格宽度是 100%，我还有包含 嵌入图像 的列，所以行高是 90 像素。

Vaadin 版本是 7.6.3。

我想将复选框的 height 和 width 设置为大约 60px。

我该如何实现？

我的 java 代码：

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

我将高度和宽度设置为 60 像素。我将 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;
   }
}

但仍然没有任何反应。复选框仍然和以前一样大小。

Answer 1

在 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");