聚合物1.0：我需要一个登录按钮的例子 [英] Polymer 1.0: I need an example of a login button
问题描述
有没有人可以使用登录按钮代码的工作示例？
细节：
我需要它是一个< paper-button> ，说用x登录。 x是以下任何一种：Google，Google Plus，Facebook，Linked In，Yahoo或Twitter。
I need it to be a <paper-button> that says, "Login with x." Where "x" is any one of the following: "Google", "Google Plus", "Facebook", "Linked In", "Yahoo", or "Twitter".
显然，该按钮还需要指向或与其提及的相应服务集成。
Obviously, the button also needs to "point to" or integrate with the respective service it mentions.
另请注意， google-signin> 这里描述的不适用于我，因为我需要使用我自己的按钮（用于样式）。我不想使用< google-signin> 按钮。我只需要它提供的功能。更具体地说，如何使用我自己的< paper-button> 元素来实现该功能。
Also please note, <google-signin> described here doesn't work for me because I need to use my own button (for styling purposes). I don't want to use the <google-signin> button. I just need the functionality it provides. And more specifically, how to implement that functionality using my own <paper-button> element.
代码
<paper-button>Login with Google</paper-button>
<paper-button>Login with Google Plus</paper-button>
<paper-button>Login with Facebook</paper-button>
<paper-button>Login with Linked-In</paper-button>
<paper-button>Login with Yahoo</paper-button>
<paper-button>Login with Twitter</paper-button>
推荐答案
元素
Element
<!--
@license
Copyright (c) 2015 Glenn Vandeuren. All rights reserved.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-button/paper-button.html">
<dom-module id="login-button">
<style>
:host {
display: block;
box-sizing: border-box;
}
</style>
<template>
<paper-button raised>Login using <span>[[service]]</span></paper-button>
</template>
</dom-module>
<script>
Polymer({
is: 'login-button',
properties: {
service: String
},
listeners: {
'tap': '_handleTap'
},
_handleTap: function () {
this.fire('login', this.service);
}
});
</script>
索引
Index
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>login-button Demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../login-button.html">
</head>
<body>
<login-button service="google"></login-button>
<login-button service="twitter"></login-button>
<script>
document.addEventListener('login', function(service) {
// handleLogin();
alert(service.detail);
});
</script>
</body>
</html>
这篇关于聚合物1.0：我需要一个登录按钮的例子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
