如何使用css设置vaadin组件的样式？
Vaadin是一个用于构建现代Web应用程序的开发框架，它提供了一套丰富的UI组件库。要使用CSS设置Vaadin组件的样式，可以按照以下步骤进行操作：
- 创建一个CSS文件：首先，创建一个CSS文件，用于定义要应用于Vaadin组件的样式。可以使用任何文本编辑器创建该文件，并将其保存为.css文件。
- 样式选择器：在CSS文件中，使用样式选择器来选择要设置样式的Vaadin组件。可以使用组件的类名、ID或标签名作为选择器。
- 定义样式规则：在选择器后面，定义要应用于组件的样式规则。可以设置各种样式属性，如颜色、字体、边框、背景等。
- 引入CSS文件：将CSS文件引入到Vaadin应用程序中。可以在HTML文件中使用<link>标签或在Java代码中使用@StyleSheet注解来引入CSS文件。
- 应用样式：将样式应用于Vaadin组件。可以通过为组件添加样式名称或使用组件的setClassName方法来应用样式。
以下是一个示例，演示如何使用CSS设置Vaadin组件的样式：
- 创建一个名为styles.css的CSS文件，其中包含以下内容：
.my-button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.my-label {
font-size: 18px;
color: #333;
}- 在Vaadin应用程序的HTML文件中，使用<link>标签引入CSS文件：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- Vaadin组件代码 -->
</body>
</html>- 在Vaadin组件的Java代码中，应用样式：
Button myButton = new Button("Click me");
myButton.addClassName("my-button");
Label myLabel = new Label("Hello, World!");
myLabel.addClassName("my-label");在上述示例中，我们定义了两个样式规则：.my-button和.my-label。然后，在Java代码中，我们创建了一个Button和一个Label组件，并为它们添加了相应的样式类名。这样，Vaadin组件将应用定义的样式。
请注意，上述示例中的样式仅供参考，您可以根据自己的需求自定义样式规则。
对于Vaadin组件的更多样式设置和使用方法，您可以参考腾讯云的Vaadin相关文档和示例代码：
相关·内容
我使用Vaadin 23，并希望将一些自定义样式应用于Button (<vaadin-button>)元素。
我添加了一个文件/frontend/component-styles/button.css，其中我直接将一些样式应用于按钮本身(没有特定的主题、变体或状态)：
:host {
border: 1px solid #AEB136;
}
通过将@CssImport添加到这样的java类中，我包括了以下内容：
@CssImport(value = "./component-styles/button.css", themeFor = "vaadin
浏览 14提问于2022-11-02得票数 0
回答已采纳
我的客户正在使用Vaadin开发web应用程序，并希望我在Vaadin 7.3中现有的Valo主题的基础上，为一个项目创建一个新的主题。我知道HTML和CSS (SCSS)和一点jQuery，但这就是全部，我是一个网页设计师，只有非常有限的编程技能。我试图理解Vaadin是如何工作的，以及如何创建新的主题，但我对如何开始有点迷茫。我试着在互联网上读一本“vaadin书”和其他资源，但我遇到了一段艰难的时期，因为我不懂Java，而且大多数都是为程序员而不是设计师写的。
有人能给我解释一下Vaadin的主题化原理吗？我可以改变什么，Java控制了什么？我的CSS会被Java覆盖吗?如何覆盖？在哪里
浏览 2提问于2014-12-03得票数 1
1回答
如何将部件样式应用于嵌套的Vaadin组件？Vaadin组件在其发布的API中公开用于样式设置的“部件”。
具体来说，vaadin-upload组件承载了另一个组件，vaadin-upload-file。我可以为主要的vaadin上传组件设置样式，但是如何到达嵌套的vaadin上传文件组件的各个部分呢？
例如，对于vaadin-upload-file的“名称”部分，我没有成功地使用CSS选择器，例如
[part="name"] { ... // plain, as if it were passed through
vaadin-upload-file[part="n
浏览 3提问于2021-10-29得票数 1
回答已采纳
Vaadin如何使用纯粹为HTML元素编写的CSS (例如，body、h1等元素的样式和布局)，并在Vaadin中使用确切的CSS样式？
是否需要对CSS进行更改以映射到相应的Vaadin元素，或者可以按原样使用该CSS？
浏览 0提问于2011-09-22得票数 3
我试图找出如何不为所有使用@CssImport的元素应用毯子样式。我搜索了Vaadin的文档，但没有结果。
目前，我正在呈现一个MainMenuBar组件，在它下面呈现一个SecondaryMenuBar组件。我希望每个菜单栏都有自己的风格。在Vaadin 14中，我无法将类直接附加到MenuItems上，因此我必须使用@CssImport注释来锁定阴影区域中的菜单栏按钮，如下所示：
@CssImport(value="styles/main-menu-bar.css", themeFor="vaadin-menu-bar-button")
因为我想对我的Sec
浏览 1提问于2020-11-03得票数 2
回答已采纳
1回答
我是Vaadin的新手，想知道如何布局对话框(com.vaadin.flow.component.dialog)。就我所见，我可以简单地向对话框中添加组件，但是如何在该对话框中布局或格式化组件呢？
我正在尝试创建一个简单的确认对话框。它可以工作，但按钮几乎相互重叠，这样它肯定不能交付给任何客户。那么，如何设置对话框的格式/布局呢？或者，我是否必须为对话框指定Id并使用CSS进行所有格式设置？
浏览 16提问于2019-04-01得票数 3
回答已采纳
2回答
Vaadin流的主题和风格让我感到困惑。有没有办法禁用它并应用自然css。我知道如何在vaadin中引用css文件，并使用setClassName，但我更喜欢将普通的css样式用于组件。
谢谢
浏览 9提问于2022-02-14得票数 0
回答已采纳
我想通过改变文件列表中元素的外观来样式Vaadin组件(vaadin-upload)，例如隐藏命令按钮(start、remove、retry)。文件列表包含vaadin-upload-file元素。
现在，我只能通过添加自定义主题并导入适当的css来自定义vaadin-上传自己-就像下面的例子：。
@CssImport(value = "./styles/custom-upload.css", themeFor = "vaadin-upload")
public class MainView extends VerticalLayout implements H
浏览 6提问于2021-11-09得票数 3
回答已采纳
1回答
在带有Vaadin Flow 14的Maven多模块项目中，如何构建公共/共享样式/主题模块并在web应用程序模块中重用/导入。我应该在web应用程序中使用哪一个。可以处理外部CSS的@StyleSheet，还是更新的@CssImport？或者我必须使用一些maven插件将资源(CSS文件)从主题模块复制到web应用程序模块(到前端或资源文件夹)？vaadin 14多模块主题化有什么例子吗？任何提示都会很好，谢谢！
浏览 3提问于2020-05-31得票数 0
2回答
我正在尝试设置一个背景颜色的标题在一个Vaadin 14网格。但我真的不知道它是如何工作的。 到目前为止，我的代码如下： grid = new Grid<Room>(); 我可能得做点什么 @CssImport(themeFor = "vaadin-grid", value = "./styles/grid-header.css") 并访问grid-header.css中的一些Shadow DOM元素，但我就是不明白它是如何工作的。 那么，有没有人知道，如何在Vaadin 14中设置网格标题的背景颜色？ 谢谢你的帮助！托尔斯腾
浏览 39提问于2021-06-21得票数 1
回答已采纳
在我们的医疗应用中，我们集成了Nunance的Dragon语音识别。在API中它被称为SAS。
在一个仪表盘中，我们使用Vaadin框架的TabSheet来设计用户界面。Tabsheet基本上使一个选项卡(在html中，比如div)可见，并应用css属性visibility:隐藏到其他选项卡(Div)。
当页面的onLoad()事件发生时，SAS基本上会检查所有输入字段，比如文本字段。这会使其启用speach。
SAS清楚地指出，默认情况下会从语音识别中排除隐藏或禁用的控件，即具有disabled属性或CSS属性visibility:hidden或display:none的控件。可以通过将这些
浏览 0提问于2014-05-22得票数 1
我正在尝试将现有的Vaadin 8应用程序迁移到Vaadin 12，并且需要知道如何在Vaadin 12中重新创建Vaadin 8的GridLayout的功能。
根据的说法，GridLayout在Vaadin 12中可以替换为：“使用Div与大多数浏览器支持的新CSS功能一起使用”
不幸的是，目前还不完全清楚如何才能做到这一点。
让我们假设我有一个Vaadin复合"HelloGrid“
@StyleSheet("styles/hello-grid.css")
public class HelloGrid extends Composite<Div> {
浏览 0提问于2019-01-29得票数 5
我使用了Vaadin 14业务启动应用程序，它似乎已经停止在Vaadin 23。此应用程序将自定义CSS放在MainLayout下：
@CssImport(value = "./styles/components/charts.css", themeFor = "vaadin-chart", include = "vaadin-chart-default-theme")
@CssImport(value = "./styles/components/floating-action-button.css", themeFor = &
浏览 7提问于2022-04-22得票数 1
我使用Vaadin ComboBox创建一个下拉菜单，用户可以在其中设置一个状态，该状态将显示在网页的另一个元素中。所以我真的不需要文本字段- ComboBox的一部分(图像中的蓝线)。
在浏览器中手动将宽度设置为0可以获得完美的结果(没有可见的行，没有可用的文本输入区域)，但是我无法使用代码实现这一点。请帮帮我。
我在中使用了这个示例(请参阅vaadin-text-field-styes.css)，它会更改我网页上的所有ComboBoxes。当前的状态如下：
//Java-code:
comboBox.addClassName("RemoveTextField");
浏览 5提问于2021-06-10得票数 3
回答已采纳
2回答
我使用的是一个叠加在分页工具栏( vaadin-grid - pagination )上的vaadin- grid，我遇到的问题是，在移动设备上，当网格经过视区时，分页并不在视区的底部。 ? 理想情况下(忽略分页溢出)，它应该是这样的： ? 现在，通过Dev Tools检查器，我可以从滚动条中删除一个position: relative属性，这样就可以让事情按照我想要的那样运行。 ? 问题是我无法通过编程来做到这一点……我尝试使用包含以下内容的自定义css文件： :host() #scroller {
width: 100%;
height:
浏览 31提问于2021-11-04得票数 1
回答已采纳
1回答
Vaadin流自定义样式
、、、、
你好，我试图在vaadin组件上定义我的自定义样式。我有html文件和styles，如下所示：
<link rel="import" href="../bower_components/vaadin-lumo-styles/color.html">
<link rel="import" href="../bower_components/vaadin-lumo-styles/typography.html">
<dom-module id="css-style-example" t
浏览 1提问于2018-05-04得票数 3
回答已采纳
1回答
最近，我已经将应用程序和组件的CSS样式转换为主题(添加在vaadin 14.6中)。现在，我正在寻找包含@CssImport注释参数的替代方法。
@CssImport(value = "./styles/custom-charts.css", themeFor = "vaadin-chart", include = "vaadin-chart-default-theme")
我们有一些风格变化的金库图表，但我们需要包括原始的金库图表-默认-主题。
是否有办法通过主题支持实现同样的目标？
谢谢
浏览 1提问于2021-05-17得票数 3
回答已采纳
1回答
我目前正在用Vaadin开发一个web应用程序。Vaadin组件使用的是web组件标准，因此组件dom被封装在阴影中。
现在，我想为应用程序中的所有滚动条应用自定义样式。
这可以使用CSS ::-webkit-scrollbar选择器(如果浏览器支持它)。
但是，这种样式不适用于shadowDOM，因此如果其中一个web组件显示滚动条(例如vaadin-grid)，则该滚动条不使用我的自定义样式。
是否有一种方法可以将此样式应用于页面上的所有滚动条，而无需将自定义样式添加到每个web组件的阴影中？
浏览 2提问于2021-05-05得票数 3
回答已采纳
1回答
在我的聚合物项目中，我在两个页面中使用了一个vaadin-combobox，如下所示：- page1:我创建了一个定制的combobox样式文件并导入到我的页面：
<link rel="import" href="../elements/base/vaadin-text-field-custom-radius-theme.html">
此文件的内容：
<dom-module id="vaadin-text-field-custom-radius-theme" theme-for="vaadin-text-field&
浏览 2提问于2018-03-13得票数 0
回答已采纳
例如，我有一个网格，让用户使用Vaadin 8为某些数据定义颜色，我还想在Vaadin 14 / Flow中提供这一点。
在Vaadin 8中，我做到了(对于每种样式/数据类型)：
Page.getCurrent().getStyles()
.add(".MyCustomTheme .v-grid-cell." + cssName + " { background-color:" + userSelectedColor + "; }");
然后，在网格代码中，我会这样做：
addColumn(myColumn).setStyleGener
浏览 8提问于2021-08-18得票数 2
回答已采纳
我已经浪费了几个小时和几天试图风格的Vaadin上传组件。目标很简单：
有时，我需要组件显示上传的文件，使用它的内置文件列表允许删除。
其他时候，我想隐藏这个列表，因为我有另一个组件，比如Grid来显示文件细节。
现在出现了问题，我永远无法让它始终使用@CssImport与themeFor=vaadin-上载和themeFor=vaadin-上载-file一起工作。Vaadin似乎编译了影子域，最终结果是不同的，它将两个选项混合在一起，不管最后哪个选项被应用。
然后我想，可能是因为@CssImport在@Route组件中。因此，我创建了两个自定义上载组件，它们扩展了vaadin
浏览 0提问于2021-05-06得票数 3
回答已采纳
我想在ConfirmDialog /ConfirmDialog中添加边框和对比。
做以下工作：
ConfirmDialog dlg = new ConfirmDialog();
dlg.addClassNames(LumoUtility.Border.ALL, LumoUtility.BorderColor.CONTRAST);
不幸的是，这会将边框添加到画布(基本上是整个屏幕)中，而不是添加到实际对话框的覆盖中。
背景:我想在标准Lumo主题中“修正”的是，在使用“黑暗主题”时，Dialog和它的背景之间的对比太少，这使得我们很难看到从哪里开始，另一个结束。
使用Vaadin流v23.2.4
浏览 5提问于2022-10-14得票数 0
回答已采纳
2回答
如何在Vaadin中创建VerticalMenu或Sidebar？是否有任何特定的组件，或者我是否通过编程和使用CSS来完成？
我想要创建类似于的东西
我在用新的Valo主题。
浏览 12提问于2014-10-22得票数 15
回答已采纳
1回答
Vaadin 7支持自定义javascript。但我的问题是，如果我们想要将jQuery与vaadin7集成，我们如何添加jQuery文件。目前@Javascript只支持添加javascript。如果我们想要添加css，我们就把它添加为sass样式。
浏览 2提问于2015-01-09得票数 1
回答已采纳
我的问题很基本。
如何将css文件中的样式添加到基本的vaadin组件中？
我所做的--，而不是--想使用：
PolymerTemplate
getStlye().set(…)
我必须要@ImportHtml (其中包括css-代码)还是必须用css-文件来@样式表？然后，我是否必须通过.getElement().getClassList().add(.)添加“css样式”？
我真的需要帮助一个工作的简单代码示例的标签，按钮或whatsever，请。我找不到任何东西来满足我的要求。
浏览 0提问于2018-11-04得票数 0
1回答
我试图在发光元素中使用。
文档中提到“在应用程序中使用这些类，在主题的theme.json中启用它们”，但是我没有这样的文件，所以我真的很困惑。大多数文档都集中在Java上，所以我猜想这就是混淆的原因。到目前为止，我只通过NPM安装了一些组件。
无论如何，我都试图创建一个frontend/themes/common-theme/theme.json文件，但到目前为止没有成功。
下面是我的元素现在的样子：
import {LitElement, html} from 'lit';
import '@vaadin/vertical-layout';
import
浏览 16提问于2022-10-24得票数 2
回答已采纳
我有一个定制的JavaScript组件(放置在VerticalLayout中)，它的高度随用户输入而动态增长--类似于堆栈溢出编辑字段，其下面有预览。
问题是，当达到一定大小时，“预览”与放置在自定义组件下面的组件的内容重叠。假设“预览”将移动到标记字段后面，并在编写超过4行时以堆栈溢出形式提交按钮。
JavaScript组件的css不包含任何调整大小的信息(除了宽度:100%)，VerticalLayout也不包含。
问题：，我如何在Vaadin VerticalLayout中指定，如果更改了早期组件的大小，组件应该向下移动？
或者你还有其他的想法来解决这个共同的问题吗？
浏览 0提问于2013-10-28得票数 1
teher是否有机会在css中为vaadin选项卡组件设置我的按钮的样式，或者我必须为按钮单独设置类名？
根据本教程，我尝试了：
vaadin-tabs vaadin-button{
background-color:red;
}
vaadin-tab > vaadin-button{
background-color:red;
}
[part="close-tab-btn"]{
background-color:red;
}
但这些都不管用。我正在通过注释导入我的css：
@CssImport(value="./styles/compo
浏览 5提问于2021-06-21得票数 0
2回答
我正在阅读关于vaadin书的第8章，我不明白如何为每个组件定义css样式。我在styles.scss上做了定制，但是所有的定制都用到了所有组件，我不想这样做。
示例
HorizontalLayout hLayout = new HorizontalLayout();
HorizontalLayout hMainLayout = new HorizontalLayout();
我希望hLayout有一个背景图像，hMainLayout没有。
我试过这个，但不管用。
.v-horizontallayout-hLayout {
background:url("myimage.jp
浏览 3提问于2013-12-13得票数 2
回答已采纳
3回答
在vaadin-grid.css内部，我设法获得了包含网格行的#table元素
例如，
#table th {
backround-color:green;
}
我可以改变颜色。
现在，我需要在打印页面时只执行vaadin-grid.css ，我尝试在中添加
@media print {
#table th {
backround-color:green;
}
}
但是没有effect.Note，所以我使用javascript ()打印页面。我在封闭网格中添加了一个id="viewfgrid" (如屏幕截图中所示)，现在当我在shared-style.
浏览 16提问于2022-07-06得票数 0
回答已采纳
2回答
Vaadin组件样式混淆
、、、
我试图访问元素的各个部分，这些元素必须经过阴影DOM。我一直在尝试这样做，就像下面的指南：
将此代码添加到我的共享-styes.html文件可以很好地工作：
vaadin-text-field {
border: 1px solid gray;
}
然后，为了访问元素的特定部分以样式，它显示如下所示：
#shadow-root (open)
<style>
:host {
border: 1px solid gray;
}
</style>
并且您可以访问特定的部分(在本例中为输入字段)，如下所示：
#shadow-root
浏览 1提问于2018-04-08得票数 3
回答已采纳
在 (Version10及更高版本)中，有什么方法可以动态地改变字体、字体大小、字体颜色等在Vaadin布局中的小部件？
我确实了解的基本知识，但对或其他CSS的超级集了解不多，尽管我愿意学习。我不知道Vaadin流使用的CSS超集是什么。
我知道我可以在运行时动态地到一个小部件。但这意味着CSS样式必须已经定义好了。
➥有在运行时分配任意字体样式的方法吗？
浏览 0提问于2018-11-02得票数 2
回答已采纳
1回答
设置嵌套阴影域的样式
、、、、
现在，我正尝试在vaadin-combo-box的一个嵌套的卷影dom中设置输入的样式。我在自定义web组件中使用vaadin web组件。目前，我可以使用以下CSS设置vaadin-text-field的样式： vaadin-text-field::part(text-field) { ... } 但是，我无法进入嵌套的阴影根目录，并使用input-field部件设置突出显示的div的样式。 这个问题有没有解决方案，还是不可能？ ?
浏览 19提问于2021-03-24得票数 0
你好，我是新来的。我喜欢为whichI创建自己的组件，喜欢导入自己的“本地”css样式表。我试图遵循指导方针(这里和这里)，但它不起作用。我做错什么了？我使用的是Vaadin v17.0.9。提前谢谢你。
议题和问题
对于我的组件， @CssImport似乎被忽略了。是否有一种将文本颜色设置为“红色”的方法？是否有方法为我的组件设置默认的.css样式表文件，该文件可以被覆盖？
Java类
@Route("/")
@Theme(value = Lumo.class)
@CssImport(value = "./styles/hello-component.css"
浏览 4提问于2020-12-12得票数 0
1回答
我将我的主题添加为jar，如文档所述。 现在，我想添加一个菜单栏，其中包含一个用户菜单条目。但我在创建自定义css时遇到了一些麻烦。 在主题中导入我的base.css @import url('./base.css');
@import url('lumo-css-framework/all-classes.css'); 所有样式都已加载，很好:)然后我在base.css中添加阴影树css /* working */
vaadin-menu-bar{
border-radius: 0px;
background: aqua;
}
/* not wor
浏览 11提问于2021-07-05得票数 1
我试图替换默认外观的vaadin流组件，如textfield，password字段和combobox。在将下面的css用于textfield之后，我发现它们并没有被完全替换。你能告诉我怎么修改吗？
我的css
input[type=text], select
{
width: 100%;
border: 1px solid #ccd;
background-color: white;
border-radius: 4px;
}
input[type=text]:hover {
background-color: yellow;
}
浏览 8提问于2021-12-17得票数 0
例如，如果我有一个视图，在其中使用
@CssImport(value = "somefile.css")
定义为somefile.css的
.test-foobar {
color: green
}
我可以在任何视图/类中的任何组件中使用.addClassName("test-foobar")，即使类没有使用@CssImport(value = "somefile.css")注释。
就像一旦定义了@CssImport，所有视图都是全局可用的。
除了对每个组件的类文件中的css定义进行硬编码外，您还能在刚刚导入的文件中定义css规则并用于使
浏览 3提问于2022-06-26得票数 1
回答已采纳
使用Vaadin14，我想更改TextField的标签(标题)的宽度。使用默认值，即使我将TextField的大小设置为"setSizeFull“，标题也只显示部分内容。我尝试了以下方法(类似于Vaadin14应用程序的启动代码)：
TextField queryString = new TextField();
queryString.setWidth("200px");
queryString.setLabel("long label text, long label text, long label text");
queryString.
浏览 26提问于2021-06-02得票数 0
回答已采纳
1回答
我想应用CSS的Vaadin 23网格，但它不能正常工作。我想我缺少语法了
请帮助我掌握正确的语法
Grid<>QuestionOutputGrid = new Grid<>(QuestionOutputScore.class);
QuestionOutputGrid.setSizeFull();
QuestionOutputGrid.addClassName("styled");
Vaadin-Grid.CSS
[part~='cell'] ::slotted(Vaadin-Grid-cell-Content.styled)
{
浏览 7提问于2022-07-31得票数 0
回答已采纳
我正在尝试将CSS应用于Vaadin 8组件。我遵循了这个，但仍然无法应用CSS。我知道我可以调用addStyleName方法，并且能够在ValoTheme样式中应用构建(例如，ValoTheme.PANEL_BORDERLESS确实使按钮更小)，但是我的自定义样式被忽略了。我尝试在以下文件中定义我的自定义CSS规则：
/src/Main/webapp/VAADIN/themes/apptheme/styles.css
@import "../reindeer/styles.css";
.mystyle {
color: red;
background: #0
浏览 0提问于2019-12-05得票数 1
回答已采纳
我想更改所有包含errorMessage部件的vaadin组件的默认样式。我知道的唯一方法是使用@CssImport(value=“.”，themeFor=“.”)对我想要样式的每个vaadin组件进行注释。还有其他更简单、更好的方法吗？
我想这样做的原因是:我想将最大高度css属性从5 5rem增加到10 5rem(我希望我可以用一个全局css变量来编辑这个属性到任何值)，并添加单词中断:坏词属性，因为一些错误消息会溢出水平和垂直方向。
浏览 7提问于2022-04-19得票数 0
回答已采纳
2回答
我想在Vaadin14.6中创建一个定制的Lumo主题，其中按钮(<vaadin-button>)在聚焦时显示一个双边框(css：box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--some-custom-background-color);)。虽然其他<vaadin-button>伪选择器(如:hover、:active等)的自定义样式工作良好，但我无法找到自定义:focus外观的方法。
浏览 3提问于2021-06-02得票数 0
回答已采纳
我正在构建一个Vaadin 8应用程序(我的第一个)。我正在使用设计器来生成UI。我已经在仪表板上添加了几个按钮，当单击这些按钮时应该会触发一个函数。由于某种原因，单击图像时不会触发任何内容。下面是所有涉及到的代码。有没有人看到我做错了什么？
以下是.html文件中的代码：
<vaadin-horizontal-layout responsive width-full margin>
**<vaadin-image icon="theme://images/properties.png" style-name="my-image-button&
浏览 0提问于2018-04-19得票数 1
1回答
我正在为vaadin中的一些小的布局更改而苦苦挣扎，这必须在Java和Css方面完成。
每次我需要调整一个组件的布局，如顶部填充、背景颜色或粗体文本时，我也需要通过Java代码设置样式：
userLink.setStyleName("textbold");
在我的styles.css (在VAADIN/themes/app/下)中的更改将是：
@import "../runo/styles.css";
.textbold {
font-weight: bold;
}
...
这是更改CSS的正确方法吗?还是有其他方法？我可以在不影响Java代码
浏览 1提问于2010-05-13得票数 4
回答已采纳
3回答
当项目被放下时，我应该如何在组合框中设置项目的样式。我目前使用的是Svelte上的vaadin时间选择器，但由于它包含一个组合框，我的问题仍然存在。
我尝试了许多东西在CSS，但没有运气。我想要做的是使下拉框更宽，以适应文本。请注意，下拉框必须大于输入字段。
我的时间选择器的代码如下，任何帮助都将不胜感激！
<vaadin-time-picker
style="--vaadin-combo-box-overlay-width: 350px"
use:action={startMaskRef}
on:blur={valueChanged}
浏览 12提问于2022-08-25得票数 0
我花了很多时间来定位我的Vaadin组件，并且想知道其他人在开发他们自己的Vaadin应用程序时，在布局他们的GUI时会有什么体验。
浏览 2提问于2011-04-08得票数 1
1回答
我使用Vaadin和Svelte来显示用户列表。单一选择模式工作完美，但它不会改变项目的背景色。
<script>
import '@vaadin/grid'
const items = [{name: 'Alice'}, {name: 'Bob'}, {name: 'Car'}]
let selected_items = []
function change_selection(event) {
const item = event.detai
浏览 4提问于2022-08-24得票数 0
1回答
通常，Vaadin应用程序为应用程序的每个用户界面组件设置一个顺序ID。不幸的是，这些ID对于测试自动化并不十分有用，因为它们是动态生成的，并且可能在运行时(每个会话或添加新组件时)发生变化。
对于测试自动化，每个组件都需要(至少每个应用程序)唯一的静态ID。
( A) Vaadin的setId()方法1可以用来生成测试自动化友好的组件ID吗？
( B) Vaadin的addStyleName()或setStyleName()是否可以通过生成自定义的CSS样式来使用，这些样式以后可能被“滥用”为ID？
3中讨论的一些设计思想
将id创建与id分配分开
使用命名策略创建id
在组件附
浏览 7提问于2016-10-12得票数 0
1回答
我想在Vaadin中显示一个水平组合框。有可能这样做吗？如果不是，在自定义组件中放置完成此任务的最佳组件是什么？就像我为onClick更改CSS的按钮，或者使用另一个侦听器突出显示的资源。
浏览 0提问于2014-07-31得票数 2
回答已采纳
我使用Vaadin LitTemplate。所以我有我的.ts file和.java file.
现在我想在另一个Custom-View(LitElement"Standort")中使用一个Custom-View(LitElement"Standort")
那是我的standort-view.ts。我也试图添加width:100% into :host，但我没有工作。
import { LitElement, html, css, customElement } from 'lit-element';
import '@vaadi
浏览 1提问于2021-07-04得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
