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

【问题标题】：Hide subcomponent vaadin-text-field from Component vaadin-date-picker从组件 vaadin-date-picker 隐藏子组件 vaadin-text-field
【发布时间】：2019-10-14 10:07:38
【问题描述】：

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

我从阅读vaadin-date-picker 的文档开始，了解here 中提到的shadow DOM 属性。

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

当前代码如下，

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>
    `;
}

再次感谢您的帮助。

【问题讨论】：

你只想要日历图标吗？
@a1626，是的，我现在也在尝试。
@a1626，后来我只希望文本字段也在同一个 html 中，因此我这样问。
也许样式中的text-field 应该可以解决您的问题。
@a1626，抱歉，不太了解您的解决方案。

标签： javascript css vaadin shadow-dom

【解决方案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>

也许你可以改用这个？

【讨论】：

我会试试tmr。