0

私のポリマー プロジェクトでは、次のように 2 つのページで vaadin-combobox を使用します: - page1: カスタム コンボボックス スタイル ファイルを作成し、ページにインポートします。

<link rel="import" href="../elements/base/vaadin-text-field-custom-radius-theme.html">  

このファイルの内容:

<dom-module id="vaadin-text-field-custom-radius-theme" theme-for="vaadin-text-field">
<template>
    <style>
        [part="input-field"] {
            border-radius: 2px;
            background-color: white;
            border: 1px solid #808080;
            height: 100%;
            font-family: "Roboto", sans-serif !important;
            color: #4c4c4c !important;
            padding-left: 10px;
            font-size: 14px;
            box-sizing: border-box;
            max-height: 100%;
            background-color: transparent;
            background-image: none !important;
        }
        [part="value"] {
            border: 0px !important;
            box-shadow: none !important;
            height: 100%;
            box-sizing: border-box;
            max-height: 100%;
            background-color: transparent;
            text-align: var(--cmb-align,left);
        }
        .vaadin-text-field {
            height: 100%;
            box-sizing: border-box;
            max-height: 100%;
        }
        .vaadin-text-field-container {
            height: 100%;
            box-sizing: border-box;
            max-height: 100%;
        }
       @media(max-width:1024px){
        [part="input-field"] {
            font-size: 12px !important;
            padding-left: 5px;
        }
        [part="value"] {
            font-size: 12px !important;
        }
        }
    </style>
</template>

page2 には、他のいくつかの css プロパティを持つ別のカスタム スタイル ファイルがあります。

私が使う

this.set('route.path',"/page2")

page1 から page2 にリダイレクトしてから使用する

 this.set('route.path',"/page1")

page2 で page1 を返します。この時点で、ページ 1 のコンボボックスは、ページ 2 にインポートしたカスタム ファイルで定義された css によってスタイル設定されています (まだ vaadin-text-field-custom-radius-theme.html の css によってスタイル設定されていると予想していましたが)。理由を教えてください。

p/s: Anton Platonov の提案を実装しようとしましたが、ページ 2 がカスタム スタイル ファイルをインポートしない場合、ページ 2 からページ 1 に戻ると、で定義された vaadin-text-field のデフォルト スタイルが..\bower_components\vaadin-text-field\vaadin-text-field.html は、vaadin-text-field-custom-radius-theme.html の代わりにコンボボックスに使用されます。

vaadin-text-field.html でスタイルのデフォルトを削除すると、コンボボックスはブラウザのデフォルト スタイルから css を修正しますが、vaadin-text-field-custom-radius-theme.html は削除しません。私の vaadin-text-field-custom-radius-theme が存在しないように扱われます。

そして、ページ1を更新すると、すべてが正常になります。これは私のコンボボックスのコードです:

<vaadin-combo-box-light style="width:100%;height:30px" id="cmdCompanyName" class="fix-size combobox" label="" allow-custom-value items='[[companies]]'
                        value="" item-label-path="name" item-value-path="id" attr-for-selected="id" on-keyup="searchData"
                        on-custom-value-set="searchData2" on-value-changed="searchData2">
                        <vaadin-text-field style="width:100%;height:30px;" class="cmb-text-field" maxlength="150">
                            <iron-icon class="prefix" icon="icons:search" slot="prefix"></iron-icon>
                            <iron-icon class="suffix toggle-button" slot="suffix" icon="icons:expand-more"></iron-icon>
                        </vaadin-text-field>
                    </vaadin-combo-box-light>
4

1 に答える 1