从组件 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>

也许你可以用这个代替？

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

Hide subcomponent vaadin-text-field from Component vaadin-date-picker

javascript

css

vaadin

shadow-dom