我试着将vaddin web组件添加到angular app.我通过文档了解了关于inporting vaddin web组件到angular app的内容。https:/vaadin.comlearntutorialsusing-web-components-in-angular。 在共同配置一切并从npm安装了必要的组件(datepicker)后,我从组件中创建了一个实例,我可以查看它。我可以查看它,问题是自定义样式。我读到我需要创建一个dom-module和创建主题,但该组件保持原样,没有主题的变化。我从他们的官方文档中摘录了这句话,但它对我不起作用。
<dom-module id="custom-input-field-style" theme-for="vaadin-text-field">
<template>
<style>
:host([theme~="custom-input-field-style"]) [part="input-field"] {
background-color: white;
}
</style>
</template>
</dom-module>
<vaadin-date-picker theme="custom-input-field-style" label="Label"></vaadin-date-picker>
我注意到这个例子在他们的官方文档中都不能用,也许是包本身的问题,谢谢... ...
我也有同样的问题,通过应用自定义样式来实现 vaadin-checkbox
组件,这是我的解决方案。
1.-你需要安装Origami: npm install @codebakery/origami
这是一套实用工具,以连接Angular + Polymer。按照他们提供的安装步骤进行安装。https:/github.comhotforfeatureorigami。
2.-复制样式代码到 <head>
标签的index.html。
<head>
....
<dom-module id="checkbox-button-icon-color" theme-for="vaadin-checkbox">
<template>
<style>
:host([theme~="custom"][checked]) [part="checkbox"] {
background-color: #F5DEB3;
}
</style>
</template>
</dom-module>
</head>
3.-在你的app.component.ts中执行以下操作。你必须包含根组件的样式(所以变化适用于所有的子组件),不要忘记使用你想实现的dom-module的id。
...
import { IncludeStyles } from '@codebakery/origami/styles';
@IncludeStyles('checkbox-button-icon-color')
@Component({
selector: 'app-root',
...
4.-安最后在整个app的实际组件上使用主题。
<vaadin-checkbox checked theme="custom" value="1">...</vaadin-checkbox>