在vaadin web组件中从angular app中自定义风格。

问题描述 投票:1回答:1

我试着将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>

我注意到这个例子在他们的官方文档中都不能用,也许是包本身的问题,谢谢... ...

javascript angular vaadin
1个回答
1
投票

我也有同样的问题,通过应用自定义样式来实现 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>
© www.soinside.com 2019 - 2024. All rights reserved.