时间戳

首页 > 解决方案 > div标签类属性包含很多字符串，不能用css字符串定义字符串替换

vaadin - div标签类属性包含很多字符串，不能用css字符串定义字符串替换

问题描述

我正在尝试开发一个 UI，第一步是创建 CssLayout。每个 CssLayout 组件都分层添加了许多 CssLayout 组件。

问题是当我运行应用程序并检查 div 标签时，class 属性有额外的字符串需要删除。

<div class="v-csslayout v-layout v-widget .content-container v- 
csslayout-.content-container v-has-width v-has-height" style="width: 100%; 
height: 100%;"><div class="v-csslayout v-layout v-widget .inner-content- 
container v-csslayout-.inner-content-container"></div></div>

我需要的是

<div class=".content-container">
      <div class=".inner-content-container">
      </div>
</div>

Java 代码：

@StyleSheet("{css/spreadjsdefault.css}")
public class SpreadJSWidget extends CssLayout {

   /**
    * 
    */
   public SpreadJSWidget() {
      super();

      addStyleName(".content-container");

      CssLayout mainBox = new CssLayout();
      mainBox.addStyleName(".inner-content-container");

      addComponent(mainBox);

   }

spreadjsdefault.css（它们现在是空的）

.content-container
{

}

.inner-content-container
{

}

请指教 ！

标签： vaadinvaadin7

解决方案

两件事情：

  1. 为了能够正确匹配css规则，.添加样式名时必须省略前导，即addStyleName("contentContainer"). 这样，css 元素将匹配您的样式定义。

  2. 类似的Css 类v-csslayout是 vaadin 定义的默认类，默认主题使用它来提供基本布局。它们默认存在，不能（实际上不应该）完全删除。但是，您可以做的是自己定义和覆盖这些规则。重要的是：无论哪种方式，当您在样式表中定义它们时，您的自定义类仍然匹配，并且可以覆盖默认主题。

推荐阅读