在 Vaadin 中，如何在 Label 中设置样式而不影响整个页面

Question

例如，我在 Label 中设置了以下 html 代码：

Label label = new Label();
label.setContentMode(ContentMode.HTML);
label.setValue("<style> * { font-size: 12px; font-family: Arial; } </style> hello world");

上述代码的问题在于它将整个页面设置为 Arial 而不仅仅是 Label。如果我使用 RichTextArea，那么它只会将样式设置为该组件，但无论出于何种原因，Label 中定义的任何 css 样式都会应用于整个页面...

仅供参考 - 如果您将 RichTextArea 设置为只读，您会遇到完全相同的问题...

Answer 1

而不是添加内联样式。使用挂起 Vaadin 组件的 addStyleName 方法。

例子

Java:

Label label = new Label();
label.addStyleName("my-custom-style");

CSS:

.my-custom-style {
    font-size: 12px:
    font-family: Arial;
}

包括自定义样式表。

将 @StyleSheet("my-style-sheet.css") 添加到 Class / UI
在相同包结构下的资源文件夹中创建 CSS 文件。

编辑：

因为这是在生成的报告中使用的，您不能使用上述解决方案：

而不是像您那样使用样式标签。如果将文本包装在 span 标记中，则可以使用内联样式将其专门应用于该标签：

label.setValue("<span style=\"font-size: 12px; font-family: Arial;\">Your text here</span>");

注意：请注意使用方法。您正在向潜在的 HTML 注入敞开心扉，需要采取一些措施来防止这种情况发生。

Answer 2

通常，您不应该向 Vaadin 组件添加内联样式。您应该在主题或自定义 CSS 文件的 CSS 文件中添加样式定义，并且如 @Jay 所述。

如果你真的想使用内联样式定义，那么你必须为它使用一个CssLayout：

https://vaadin.com/docs/v8/framework/layout/layout-csslayout.html

Answer 3

隔离 HTML 树中的某些元素并不是真正的 Vaadin 问题。在 HTML5 中解决它的一种方法是使用带有 srcdoc 属性的 iframe（或者 src="data:..."）。

这是一个如何将它与 Vaadin8 一起使用的示例，但请注意：一旦您在 Label 中处理 HTML，它就是您的对 quote/encode 那里的一切负责 -- 特别是，既然你提到，所有内容都来自用户！

// run with `spring run --watch <file>.groovy`
@Grapes([
@Grab('com.vaadin:vaadin-spring-boot-starter:2.0.1'),
@Grab('com.vaadin:vaadin-server:8.1.6'),
@Grab('com.vaadin:vaadin-client-compiled:8.1.6'),
])

import com.vaadin.ui.*
import com.vaadin.ui.themes.*
import com.vaadin.shared.*
import com.vaadin.shared.ui.ContentMode


@com.vaadin.spring.annotation.SpringUI
@com.vaadin.annotations.Theme("valo")
class MyUI extends UI {
        protected void init(com.vaadin.server.VaadinRequest request) {
        setContent(new VerticalLayout(
            new Label("<h1>Hello</h1><p>Lorem Ipsum</p>", ContentMode.HTML),
            new Label("""
                <iframe srcdoc="
                    <style type='text/css'>* { font-family: monospace; font-size: 36pt; background-color: green; }</style>
                    <h1>Test</h1>
                    <p>Lorem Ipsum</p>
                "></iframe>
            """, ContentMode.HTML),
            new Label("<h1>Hello</h1><p>Lorem Ipsum</p>", ContentMode.HTML),
        ))  
    }
}

Answer 4

我最终使用的是 BrowserFrame。唯一的问题是 BrowserFrame 的高度不能像带有 -1px 的标签那样动态调整大小。

在 Vaadin 中，如何在 Label 中设置样式而不影响整个页面

In Vaadin how can I set a style within a Label and NOT have it affect the whole page

java

vaadin

vaadin8