2016-09-06 82 views
1

Here is my jsBin。我想把一個paper-input內聯。但是,我的下面的嘗試導致paper-input樣式爲block。我如何設計它inline?我也希望paper-input的寬度爲25px而不是100%。我該如何做到這一點?聚合物1.x:造型紙張輸入寬度和內聯

請爲您的答案提供一個有效的代碼示例。

http://jsbin.com/mufuzodife/1/edit?html,output
<!doctype html> 
<head> 
    <meta charset="utf-8"> 
    <base href="https://polygit.org/components/"> 
    <script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
    <link href="polymer/polymer.html" rel="import"> 
    <link href="paper-menu/paper-menu.html" rel="import"> 
    <link href="paper-item/paper-item.html" rel="import"> 
    <link href="paper-input/paper-input.html" rel="import"> 
</head> 
<body> 

<dom-module id="x-element"> 

<template> 
    <style> 
    .inline, paper-item, paper-input { 
     display: inline; 
    } 
    paper-input, --paper-input-container { 
     width: 25px; 
    } 
    </style> 

    <div class="inline"> 
    <paper-menu class="inline"> 
     <paper-item>Item 1</paper-item> 
     <paper-item>Item 2</paper-item> 
    </paper-menu> 
    <paper-input label="text input"></paper-input> 
    </div> 

</template> 

<script> 
    (function(){ 
    Polymer({ 
     is: "x-element", 
     properties: {}, 
    }); 
    })(); 
</script> 

</dom-module> 

<x-element></x-element> 

</body> 
+1

您正在使用'mixin'不正確。 'mixins'就像任何其他css屬性一樣使用,即用'冒號(:)'在屬性末尾分隔名稱和值以及'分號(;)'。 'paper-input {--paper-input-container:{width:25px;}; }' – a1626

回答

1

您可以使用iron-flex-layouthttps://elements.polymer-project.org/elements/iron-flex-layout)水平對齊這些元素。

這裏是一個JSBin:http://jsbin.com/cozace/edit?html,output

和代碼本身:

<dom-module id="x-element"> 

<template> 
    <style> 

    paper-input { 
     width: 25px; 
    } 

    .inline, paper-item { 
     display: inline; 
    } 

    .horizontal { 
     @apply(--layout-horizontal); 
    } 

    </style> 

    <div class="horizontal"> 
    <paper-menu class="inline"> 
     <paper-item>Item 1</paper-item> 
     <paper-item>Item 2</paper-item> 
    </paper-menu> 
    <paper-input label="text input"></paper-input> 
    </div> 

</template> 

<script> 
    (function(){ 
    Polymer({ 
     is: "x-element", 
     properties: {}, 
    }); 
    })(); 
</script> 

</dom-module> 

PS:不要忘了導入iron-flex-layout

相關問題