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

Question

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

Vaadin 版本为 7.6.3.

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

如何实现？

我的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;
   }
}

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

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

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

How to set size of a checkbox in table vaadin

css

java

checkbox

vaadin