demo.html - Android社区 - https://www.androidos.net.cn/

<!doctype html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

  <title>paper-fab</title>

  <script src="../webcomponentsjs/webcomponents.js"></script>

  <link href="../font-roboto/roboto.html" rel="import">
  <link href="../core-icons/core-icons.html" rel="import">
  <link href="paper-fab.html" rel="import">

  <style shim-shadowdom>

    body {
      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
      font-size: 14px;
      margin: 0;
      padding: 24px;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      -webkit-touch-callout: none;
    }

    section {
      padding: 20px 0;
    }

    section > div {
      padding: 14px;
      font-size: 16px;
    }

    paper-fab {
      color: #fff;
      margin-right:2em;
    }

    paper-fab.blue {
      background: #5677fc;
    }

    paper-fab.green {
      background: #259b24;
    }

    paper-fab.yellow {
      background: #ffeb3b;
    }

  </style>

</head>
<body unresolved>

  <section>

    <div>Regular</div>

    <paper-fab icon="arrow-forward" title="arrow-forward"></paper-fab>
    <paper-fab icon="create" class="blue" title="create"></paper-fab>

  </section>

  <section>

    <div>Mini</div>

    <paper-fab mini icon="done" class="green" title="done"></paper-fab>
    <paper-fab mini icon="reply" class="yellow" title="reply"></paper-fab>

  </section>

</body>
</html>