Question

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

Vaadin版本为7.6.3。

我想将复选框的 height 和 width 设置为 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");

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

1 个答案: