为什么同时拥有paper-fab和paper-icon-button组件？

Posted 2021-04-12

聚合物有paper-icon-button：https://www.webcomponents.org/element/PolymerElements/paper-icon-button

聚合物也有paper-fab：https://www.webcomponents.org/element/PolymerElements/paper-fab/elements/paper-fab

我理解设计的不同之处; material design spec推荐使用using these differently（例如“每个屏幕只推荐一个浮动动作按钮”），但组件的确有什么区别吗？或者是paper-fab只是一个粉红色的背景，边界半径和一个盒子阴影（三行css？）的paper-icon-button。基本上，我不明白为什么我应该打扰两者。

答案

正如您所评论的那样，这是因为它遵循Material Design规范的行为。 <paper-fab>旨在表示应用程序的主要操作，而<paper-icon-button>提供其他功能。

我们以Twitter移动应用程序为例。在android中，它有一个发布新推文的“纸制品”，我们都同意Twitter应用的主要目的是发布推文，因此为该动作设置浮动按钮是有意义的，同时它还有其他按钮代表作为添加功能的图标，例如您可以在搜索栏旁边找到的查找联系人按钮。

注意：考虑到此答案发布的日期，因为Twitter UI可能已经被更改。如果示例说明不明确，请对其进行评论，我会尝试发布截图。

关于Polymer中这些组件的实现，两者都使用<iron-icon>，我们可以认为代码“非常接近”，你可以在这里查看：<paper-icon-button>和<paper-fab>

因此，总而言之，尽管认为它们几乎相同，但最好将它们用作不同的组件，因为它们代表不同的东西。