ポリマー-ペーパートグルボタン

ペーパー切り替えボタンは、ユーザーがスイッチをクリックまたはドラッグすることで状態を切り替えることができるON/OFFスイッチです。次のコマンドを実行してプロジェクトディレクトリにインストールすることにより、アプリケーションでこの要素を使用できます。

bower install --save PolymerElements/paper-toggle-button

例

次の例では、Polymer.jsでpaper-toggleボタン要素の使用を指定しています。 indexlファイルを作成し、その中に次のコードを追加します。

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-appl'>
   </head>

   <body>
      <my-app></my-app>
   </body>
</html>

次に、my-applファイルを開き、次のコードを含めます。

<link rel = 'import' href = 'bower_components/polymer/polymerl'>
<link rel = "import" href = "bower_components/paper-tabs/paper-tabsl">
<link rel = "import" href = "bower_components/iron-pages/iron-pagesl">

<dom-module id = 'my-app'>
   <template>
      <style>
         paper-tabs {
            background-color: black;
            width: 50%;
            margin-bottom: 1px;
            color: #fff;
         }
      </style>

      <h3>Paper-Tabs Example</h3>
      <paper-tabs selected = "0">
         <paper-tab>Tab One</paper-tab>
         <paper-tab>Tab Two</paper-tab>
      </paper-tabs>
   </template>

   <script>
      Polymer ({
         is: 'my-app', ready: function() {
            this.async(function() {
            });
         }
      });
   </script>
</dom-module>

出力

アプリケーションを実行するには、作成されたプロジェクトディレクトリに移動し、次のコマンドを実行します。

polymer serve

ここでブラウザを開き、 http：//127.0.0.1：8081/ に移動します。出力は次のようになります。

ポリマーペーパートグルボタン

Polymer-paper-toggle-button

ポリマー-ペーパートグルボタン

例

出力