聚合物：纸张图标按钮自定义图像混合

Question

我需要用纸质图标按钮制作图像。所以，我正在查看自定义图像是否有可用的mixin。我无法在文档中找到一个。

显示预期结果的屏幕截图：

欢迎任何其他优雅的解决方法。

Answer 1

没有任何mixin可以改变图片的边框半径，但您可以在 $(document).ready( function() { event.preventDefault(); $('#checkbox1').click(function() { if(this.checked){ $('#checkbox0').prop('checked', this.checked); $('#quantity_child_1').val('1') }else{ $('#quantity_child_1').val('') //$('#checkbox0').prop('checked', false); }}); $('#quantity_child_1').keyup(function(){ $('#checkbox1').prop('checked', this.value > 0); $('#checkbox0').prop('checked', true); }) //second child $('#checkbox2').click(function() { if(this.checked){ $('#checkbox0').prop('checked', this.checked); $('#quantity_child_2').val('1') }else{ $('#quantity_child_2').val('') //$('#checkbox0').prop('checked', false); }}); $('#quantity_child_2').keyup(function(){ $('#checkbox2').prop('checked', this.value > 0); $('#checkbox0').prop('checked', true); }) }); // suming script $(document).on('change', '.quantity_class_child', function(){ var sum = 0; $('.quantity_class_child').each(function(){ sum += +$(this).val(); }); $('#quantity_parent_1').val(sum); }); //opening script $(document).ready(function() { $('#click1').click(function() { if ($('#hidden1').is(':hidden')) { $('#hidden1').show(500); } else { $('#hidden1').hide(500); } }); }); 中设置样式：

<dom-module>

＆＃13;

＆＃13;

::content paper-icon-button img {
  border-radius: 50%;
}

＆＃13;

HTMLImports.whenReady(_ => {
  Polymer({
    is: 'x-foo'
  });
});

＆＃13;

＆＃13;

＆＃13;

codepen

Answer 2

I was unable to reach the img Element with the ::content selector in the latest Polymer1.0 (1.8.1). the way to target it is:

paper-icon-button::shadow #icon::shadow img {
  border-radius: 50%;
}