중합체 2.x - <paper-label><paper-input> 성분 이외의 무엇인가?

레이블이있는 <paper-input> 개의 요소와 <paper-input>이 아닌 하나의 요소가있는 대화 상자가 있지만 동일한 모양의 레이블을 제공하고 싶습니다.중합체 2.x - <paper-label><paper-input> 성분 이외의 무엇인가?

나는 여러 가지 해결책을 시도했지만 올바르게 배치 된 동일한 레이블을 제공하지 않는 것 같습니다. 얻을 수있는 방법이 있나요

: 내가 기대했던 것

<paper-input-container> 
    <label slot="label">Location</label> 
    <div slot="input"> 
     <img src="https://maps.googleapis.com/maps/api/staticmap?center=[[_position.lat]],[[_position.lng]]&zoom=16&size=200x125&maptype=roadmap&markers=color:red%7label:%7C[[_position.lat]],[[_position.lng]]&key=MY_API_KEY"> 
     <paper-button on-tap="doStuff"><iron-icon icon="maps:place"></iron-icon> &nbsp; Pick location</paper-button> 
    </div> 
</paper-input-container>

결과는 정확히되지 않습니다 : 예를 들어,이 코드는 <div slot="input"> 요소의 상단에 라벨을 배치 <paper-input>이없는 다른 레이블 (예 : Name, Description 및 Category)이 있습니까?

출처

2017-11-27 BadCash

종이 입력 컨테이너의 구현에서 가져온 것 "### 맞춤 입력 요소 사용 예를 들어 복합 입력 필드를 구현하기 위해 ''에서 맞춤 입력 요소를 사용할 수 있습니다 커스텀 입력 요소는 'paper-input-input' 클래스를 가져야하고,'notify : true' 값 속성을 가져야하며, 유효성이 있다면 'Polymer.IronValidatableBehavior'를 선택적으로 구현해야합니다. " 저는'paper-input-input' 클래스를 추가하는 것만으로 스타일을 보지 않고 문제를 해결할 수 있기를 희망합니다. – craPkit

@craPkit 문서에서 그 정보를 놓쳤습니다. 그러나'class = "paper-input-input"도 사용하지 못합니다. ' '을 탭하면 라벨의'z-index'를 바꿔서 이미지 뒤에 놓을 수 있습니다. – BadCash

수정하기가 쉬워졌습니다. <paper-input-container>에 always-float-label을 추가하기 만하면 예상대로 작동하기 시작했습니다.

<paper-input-container always-float-label> 
    ... 
</paper-input-container>

내가 다른 입력 요소에 그것을 추가 할 필요하지 않은 이유는 그들이 자동으로 라벨 (즉 작은 "부동"를 입력 위에 표시를하게하는, 자신의 placeholder 속성이 설정되어 있다는 것 같다).

출처

2017-11-27 10:35:30 BadCash

중합체 2.x - <paper-label><paper-input> 성분 이외의 무엇인가?

답변

관련 문제