聚合物1.x：造型紙張輸入寬度和內聯

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>

來源

2016-09-06 Mowzer

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

您可以使用iron-flex-layout（https://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。

來源

2016-09-07 06:30:41 Hunex

聚合物1.x：造型紙張輸入寬度和內聯

回答

相關問題