📌  相关文章
📜  polimer paper 图标按钮(1)

📅  最后修改于: 2023-12-03 14:45:33.213000             🧑  作者: Mango

Polimer Paper 图标按钮

Polimer Paper 是由 Google 开源推出的一款 Web 组件库，其中包含了大量的 UI 组件供开发人员使用。其中 Polimer Paper 图标按钮组件可以快速添加带有图标的按钮到你的网站。

安装 Polimer Paper

要使用 Polimer Paper，你需要在你的项目中引入 Polimer 库。你可以通过在 HTML <head> 标签中添加以下代码来引入 Polimer：

<head>
  <link rel="stylesheet" href="path/to/paper-styles/paper-styles.css">
  <script type="text/javascript" src="path/to/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="path/to/paper-button/paper-button.html">
  <link rel="import" href="path/to/iron-icons/iron-icons.html">
</head>

这里需要注意的是，你需要先将 path/to 替换为你真正的路径。

使用 Polimer Paper 图标按钮

在引入了 Polimer Paper 后，你就可以开始使用它的图标按钮组件了。以下是一个简单的例子：

<paper-button raised>
  <iron-icon icon="polymer"></iron-icon>
  Click me!
</paper-button>

在这个例子中，我们创建了一个简单的图标按钮，它带有 Google Polymer 的图标。

如果你想使用其他的图标，你可以在 iron-icon 标签中使用其他的图标名称，例如：

<iron-icon icon="add"></iron-icon>

这里的 add 是 Material Design 中的一个图标名称，你也可以使用其他的图标。你可以在 Material Design Icons 网站上找到所有的图标。

除了使用预定义的图标之外，你也可以使用自己的 SVG 图片作为图标：

<paper-button raised>
  <iron-icon src="my-icon.svg"></iron-icon>
  Click me!
</paper-button>
自定义 Polimer Paper 图标按钮

如果你想要进一步自定义 Polimer Paper 图标按钮的样式，你可以使用 CSS。以下是一个简单的例子：

<style>
  paper-button iron-icon {
    color: red;
  }
</style>

<paper-button raised>
  <iron-icon icon="polymer"></iron-icon>
  Click me!
</paper-button>

在这个例子中，我们重写了默认的图标颜色，将其变为了红色。

总结

Polimer Paper 图标按钮提供了快速创建带有图标的按钮的功能。通过引入 Polimer 和使用 Iron Icon 元素，你可以轻松地创建自己的定制按钮。

如果你想要进一步自定义按钮的样式，你可以使用 CSS。