聚合物-带有纸质徽章的图标

Question

我试过用论文-badge.I写了这段代码：

<iron-icon id="star" icon="icons:star-border" style="fill:blue;height: 38px;
        width: 58px;"></iron-icon>
<paper-badge label="6" for="star"></paper-badge>

我的问题是 6 离星星不近。

我想让它更像

我不知道它们是否是聚合物的属性。

Answer 1

您可以修改 paper-badge 的自定义 css 属性来实现此目的。请注意，我将 iron-icon 的 width 更改为 38px。

<style>
    paper-badge {
        --paper-badge-margin-left: -8px;
        --paper-badge-margin-bottom: -12px;
    }
</style>

<div class="wrapper">
    <iron-icon id="star" icon="icons:star-border" style="fill:blue;height:38px;width:38px;"></iron-icon>
    <paper-badge label="6" for="star"></paper-badge>
</div>

看看here。

Answer 2

paper-badge 有两个简单的属性

<paper-badge for="btn" label="♥︎"></paper-badge>

默认宽度和高度：

--paper-badge-width 徽章圈的宽度22px

--paper-badge-height 徽章圆圈高度22px

自定义 CSS 可以在

中更改样式

<style>
    paper-badge {
        --paper-badge-margin-left: 22px;
        --paper-badge-margin-bottom: 22px;

    }
</style>

关于iron-icon

默认宽度和高度是

--iron-icon-width 图标宽度24px

--iron-icon-height 图标高度24px

并且您可以通过更改样式以自己的方式进行自定义

如果你可以为 booth paper-badge 和 iron-icn 使用相同的默认高度和宽度值，你可以获得你想要的视图。

请阅读聚合物元素文档以获取更多参考

iron-core , paper-badge

聚合物-带有纸质徽章的图标

Polymer - icon with paper-badge

css

icons

polymer

polymer-1.0