如何在 Liferay 的 Vaadin portlet 中管理样式

Posted

技术标签:

【中文标题】如何在 Liferay 的 Vaadin portlet 中管理样式【英文标题】:How manage styles in Vaadin portlet in Liferay 【发布时间】:2015-09-03 23:21:43 【问题描述】:

我有一个 Portlet,其中使用了 Valo 主题。大多数图形组件都能正确显示,但 TextField 不能。它应该有圆形边框半径和高度应该是大约 35px。它通常有大约 15 像素,并且该字段是有角度的。 当我将浏览器窗口的宽度缩小到大约 200 像素时,突然 TextField 具有适当的高度。 我可以在源代码中显式更改高度以使用方法 ...setHeight,但是如何使用样式来管理它? 我将 tests-valo 主题复制到 VAADIN/主题中,但我仍然不知道如何更改文本字段的外观。看起来没有任何反应。 即使是非常简单的颜色变化也会影响其他组件,但不会影响 TextField。 即

((ComboBox) testComb).addStyleName("color2");

有效果。

((TextField) testField).addStyleName("color2");

没有效果。

示例中的重新输入已经过时,它是为了清晰起见。

【问题讨论】:

【参考方案1】:

我找到了解决方案,虽然并不完美,但仍然足以满足我的目的:

1.从 vaadin-themes-7.0.5..jar 复制 Valo 主题,如 http://www.rapidpm.org/2014/05/25/vaadin-valo--the-new-theme-%28since-vers.html 中所述 2. 编辑valo root 主题中的styles.css。 3. 将 !important 子句添加到 .valo .v-textfield .. 类定义中,如 http://www.liferay.com/community/forums/-/message_boards/message/15001322 上所写的边框半径和高度。它改变了出现的优先级。

    .valo .v-textfield 
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    margin: 0;
    font: inherit;
    
    font-weight: 400;
    line-height: normal;
    height: 37px !important;
    border-radius: 4px !important;
    padding: 4px 9px;
    border: 1px solid #c5c5c5;
    background: white;
    color: #474747;
    -webkit-box-shadow: inset 0 1px 0 #f7f7f7, 0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 #f7f7f7, 0 1px 0 rgba(255, 255, 255, 0.1);
    -webkit-transition: box-shadow 180ms, border 180ms;
    -moz-transition: box-shadow 180ms, border 180ms;
    transition: box-shadow 180ms, border 180ms;
    width: 185px;

就是这样。外观如愿。

【讨论】:

另一种方式 - 使用自己的样式,解决外观问题 v-textfield 描述有 [link] vaadin.com/forum#!/thread/9325564.

以上是关于如何在 Liferay 的 Vaadin portlet 中管理样式的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Vaadin 14 中播放声音?

我们如何在 liferay7 中覆盖 liferay 模块?

如何使用 Vaadin 将图像上传到画布?

Liferay:如何配置 Liferay 门户

如何将滚动条添加到 Vaadin 布局

如何在 Vaadin 应用程序中使用单点登录