Fatal编程技术网
  • polymer/
  • 聚合物1.x：帮我设计这个<；纸张按钮>；仅使用轻型DOM CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Polymer Bin</title> <base href="http://element-party.xyz/"> <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="all-elements.html"> <style> paper-button { --paper-button: { @apply(--layout-vertical); @apply(--layout-center-center); }; background: black; color: white; height: 100%; border-radius: 0; border-left: 1px solid white; margin-right: -16px; } </style> </head> <body class="fullbleed layout vertical"> <paper-header-panel> <paper-toolbar> <span>Header</span> <span class="flex"></span> <paper-button>Button</paper-button> </paper-toolbar> <div>Content goes here...</div> </paper-header-panel> <dom-module id="x-element"> <template> <style></style> <paper-button>Button</paper-button> </template> <script> (function(){ Polymer({ is: 'x-element' }); })(); </script> </dom-module> </body> </html>

聚合物1.x：帮我设计这个<；纸张按钮>；仅使用轻型DOM CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Polymer Bin</title> <base href="http://element-party.xyz/"> <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="all-elements.html"> <style> paper-button { --paper-button: { @apply(--layout-vertical); @apply(--layout-center-center); }; background: black; color: white; height: 100%; border-radius: 0; border-left: 1px solid white; margin-right: -16px; } </style> </head> <body class="fullbleed layout vertical"> <paper-header-panel> <paper-toolbar> <span>Header</span> <span class="flex"></span> <paper-button>Button</paper-button> </paper-toolbar> <div>Content goes here...</div> </paper-header-panel> <dom-module id="x-element"> <template> <style></style> <paper-button>Button</paper-button> </template> <script> (function(){ Polymer({ is: 'x-element' }); })(); </script> </dom-module> </body> </html>

polymer

聚合物1.x：帮我设计这个<；纸张按钮>；仅使用轻型DOM CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Polymer Bin</title> <base href="http://element-party.xyz/"> <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="all-elements.html"> <style> paper-button { --paper-button: { @apply(--layout-vertical); @apply(--layout-center-center); }; background: black; color: white; height: 100%; border-radius: 0; border-left: 1px solid white; margin-right: -16px; } </style> </head> <body class="fullbleed layout vertical"> <paper-header-panel> <paper-toolbar> <span>Header</span> <span class="flex"></span> <paper-button>Button</paper-button> </paper-toolbar> <div>Content goes here...</div> </paper-header-panel> <dom-module id="x-element"> <template> <style></style> <paper-button>Button</paper-button> </template> <script> (function(){ Polymer({ is: 'x-element' }); })(); </script> </dom-module> </body> </html>,polymer,polymer-1.0,paper-elements,Polymer,Polymer 1.0,Paper Elements,请仅在主文档的部分使用CSS（即轻型DOM）发布一个JSFIDLE（或JSBin等…），该JSFIDLE（或JSBin等…）垂直居中于内的“按钮”文本（即，不在自定义元素内使用CSS-即阴影DOM） 使用light DOM修改此选项 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Polymer Bin</title> <base

请仅在主
文档的
部分使用CSS（即轻型DOM）发布一个JSFIDLE（或JSBin等…），该JSFIDLE（或JSBin等…）垂直居中于
内的“按钮”文本（即，不在自定义元素内使用CSS-即阴影DOM）

使用light DOM修改此选项 
<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz/">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
  <style>
    paper-button {
      --paper-button: {
        @apply(--layout-vertical);
        @apply(--layout-center-center);
        };
      background: black;
      color: white;
      height: 100%;
      border-radius: 0;      
      border-left: 1px solid white;
      margin-right: -16px;
    }
  </style>
</head>
<body class="fullbleed layout vertical">
  <paper-header-panel>
    <paper-toolbar>
      <span>Header</span>
      <span class="flex"></span>
      <paper-button>Button</paper-button>
    </paper-toolbar>
    <div>Content goes here...</div>
  </paper-header-panel>   
<dom-module id="x-element">
  <template>
    <style></style>
    <paper-button>Button</paper-button>   
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</body>
</html>


聚合物仓
纸扣{
--纸张按钮：{
@应用（--垂直布局）；
@应用（--布局中心）；
};
背景：黑色；
颜色：白色；
身高：100%；
边界半径：0；
左边框：1px纯白；
右边距：-16px；
}
标题
按钮
内容在这里。。。
按钮
（功能（）{
聚合物({
是：“x元素”
});
})();
目标输出示例（使用阴影DOM CSS） 
<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz/">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element></x-element>
  <dom-module id="x-element">
  <template>
    <style>
      :host {
        height: 100%;
      }
      paper-button {
        --paper-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
          };
        background: black;
        color: white;
        height: 100%;
        border-radius: 0;      
        border-left: 1px solid white;
        margin-right: -16px;
      }
    </style>
    <paper-header-panel>
      <paper-toolbar>
        <span>Header</span>
        <span class="flex"></span>
        <paper-button>Button</paper-button>
      </paper-toolbar>
      <div>Content goes here...</div>
    </paper-header-panel>   
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</html>


聚合物仓
：主持人{
身高：100%；
}
纸扣{
--纸张按钮：{
@应用（--垂直布局）；
@应用（--布局中心）；
};
背景：黑色；
颜色：白色；
身高：100%；
边界半径：0；
左边框：1px纯白；
右边距：-16px；
}
标题
按钮
内容在这里。。。
（功能（）{
聚合物({
是：“x元素”
});
})();
您只需添加属性：

<style is="custom-style">
您的风格定义。

来自公认答案：

http://jsfiddle.net/pkx736up/1/ 
<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz/">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
  <style is="custom-style">
    paper-button {
      --paper-button: {
        @apply(--layout-vertical);
        @apply(--layout-center-center);
        };
      background: black;
      color: white;
      height: 100%;
      border-radius: 0;      
      border-left: 1px solid white;
      margin-right: -16px;
    }
  </style>
</head>
<body class="fullbleed layout vertical">
  <paper-header-panel>
    <paper-toolbar>
      <span>Header</span>
      <span class="flex"></span>
      <paper-button>Button</paper-button>
    </paper-toolbar>
    <div>Content goes here...</div>
  </paper-header-panel>   
<dom-module id="x-element">
  <template>
    <style></style>
    <paper-button>Button</paper-button>   
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</body>
</html>


聚合物仓
纸扣{
--纸张按钮：{
@应用（--垂直布局）；
@应用（--布局中心）；
};
背景：黑色；
颜色：白色；
身高：100%；
边界半径：0；
左边框：1px纯白；
右边距：-16px；
}
标题
按钮
内容在这里。。。
按钮
（功能（）{
聚合物({
是：“x元素”
});
})();