폴리머 용지 - 입력이 작동하지 않거나 렌더링되지 않습니다.

내 페이지에서 용지 입력 요소를 사용하려고하는데 작동하지 않는 것 같습니다. 그런 다음 Polymer 사이트에서 데모 코드를 실행하려고했지만 그 중 하나도 작동하지 않았고 Polymer의 용지 입력 요소 대신 간단한 텍스트 필드를 얻었습니다. 나는 즉폴리머 용지 - 입력이 작동하지 않거나 렌더링되지 않습니다.

<!doctype html> 
<html> 
<head> 

    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 

    <title>paper-input</title> 

    <script src="..components/webcomponentsjs/webcomponents.js"></script> 

    <link href="..components/paper-input/paper-autogrow-textarea.html" rel="import"> 
    <link href="..components/paper-input/paper-input-decorator.html" rel="import"> 
    <link href="..components/paper-input/paper-input.html" rel="import"> 

    <style shim-shadowdom> 

    body { 
     font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; 
     font-size: 14px; 
     margin: 0; 
     padding: 24px; 
     -webkit-tap-highlight-color: rgba(0,0,0,0); 
     -webkit-touch-callout: none; 
    } 

    section { 
     padding: 20px 0; 
    } 

    section > div { 
     padding: 14px; 
     font-size: 16px; 
    } 

    paper-input { 
     width: 80%; 
    } 

    paper-input-decorator { 
     max-width: 80%; 
    } 

    @media only screen and (min-width : 320px) { 
     paper-input { 
     width: 100%; 
     } 

     paper-input-decorator { 
     max-width: 100%; 
     } 
    } 

    paper-input.narrow { 
     width: 150px; 
    } 

    .custom /deep/ ::-webkit-input-placeholder { 
     color: #f4b400; 
    } 

    .custom /deep/ ::-moz-placeholder { 
     color: #f4b400; 
    } 

    .custom /deep/ :-ms-input-placeholder { 
     color: #f4b400; 
    } 

    .custom /deep/ .label-text, 
    .custom /deep/ .error { 
     color: #f4b400; 
    } 

    .custom /deep/ .unfocused-underline { 
     background-color: #f4b400; 
    } 

    .custom[focused] /deep/ .floated-label .label-text { 
     color: #0f9d58; 
    } 

    .custom /deep/ .focused-underline { 
     background-color: #0f9d58; 
    } 

    .custom.invalid /deep/ .floated-label .label-text, 
    .custom /deep/ .error { 
     color: #f06292; 
    } 

    .custom.invalid /deep/ .focused-underline { 
     background-color: #f06292; 
    } 

    .custom { 
     color: #1a237e; 
    } 

    </style> 

</head> 
<body unresolved> 

    <section> 

    <div>Standalone</div> 

    <br> 

    <paper-input label="label"></paper-input> 

    <br> 

    <paper-input label="floating label" floatingLabel></paper-input> 

    <br> 

    <paper-input label="disabled" disabled></paper-input> 

    </section> 

    <section> 

    <div>Decorator</div> 

    <br> 

    <paper-input-decorator label="with core-input"> 
     <input is="core-input"> 
    </paper-input-decorator> 

    <br> 

    <paper-input-decorator label="with core-input + floatingLabel" floatingLabel> 
     <input is="core-input"> 
    </paper-input-decorator> 

    <br> 

    <paper-input-decorator label="with autogrowing text area"> 
     <paper-autogrow-textarea> 
     <textarea></textarea> 
     </paper-autogrow-textarea> 
    </paper-input-decorator> 

    <br> 

    <paper-input-decorator label="with autogrowing text area + floatingLabel" floatingLabel> 
     <paper-autogrow-textarea> 
     <textarea></textarea> 
     </paper-autogrow-textarea> 
    </paper-input-decorator> 

    </section> 

    <section> 

    <div>Auto-Validation</div> 

    <paper-input-decorator label="required" floatingLabel error="input is required!" autoValidate> 
     <input is="core-input" required> 
    </paper-input-decorator> 

    </section> 

    <section> 

    <div>Custom styling</div> 

    <br> 

    <paper-input class="custom" label="paper-input"></paper-input> 

    <br> 

    <paper-input-decorator class="custom" label="decorator"> 
     <input is="core-input"> 
    </paper-input-decorator> 

    </section> 

    <script> 

    document.body.addEventListener('change', function(e) { 
     console.log('change', e.target); 
    }); 

    </script> 

</body> 
</html>

출처

2015-01-28 Shivam Bhalla

내가 조금 이상한 듯이 경우에 CORE-INPUT에 대한 404 (요소를 찾을 수 없음 예외)를 얻기에 보관 것 같다 샘플로 동일한 코드를 사용하고 있습니다. 하지만 용지 입력을 사용하기 전에 먼저 코어 입력을 가져와야합니다. 이것이 내가 작동하게 한 방법입니다.

출처

2015-01-28 10:24:36

폴리머 용지 - 입력이 작동하지 않거나 렌더링되지 않습니다.

답변

관련 문제