javascript - 从组件 vaadin-date-picker 隐藏子组件 vaadin-text-field

Question

我是 Vaadin 的新手，正在尝试创建一个实例来隐藏 vaadin-date-picker 组件中的 vaadin-text-field。

我首先阅读了 vaadin-date-picker 的文档，了解关于影子 DOM 属性的 here .

我尝试使用“主题模块中的范围样式”，但包括日历图标在内的整个东西都消失了。

当前代码如下，

render() {
    return html`
    <dom-module id="trim-inputbox" theme-for="vaadin-date-picker">
      <template>
        <style>
          :host(.special_field) [part="text-field"] {
          visibility:hidden;
          }
        </style>
      </template>
    </dom-module>
    <vaadin-date-picker class="special_field"></vaadin-date-picker>
    `;
}

再次感谢您的帮助。

Answer 1

正如您已经注意到的，日历图标是文本字段本身的一部分。

在Styling section有一个使用 <vaadin-date-picker-light> 的例子:

<style>
   .my-input2 input {
     border: none;
     font-size: 14px;
     background: none;
   }
</style>

<vaadin-date-picker-light>
  <div class="my-input2">
    <iron-icon icon="event"></iron-icon>
      CHECK-IN:
       <iron-input>
         <input size="10">
       </iron-input>
    </div>
 </vaadin-date-picker-light>

也许你可以用这个代替？