-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·120 lines (90 loc) · 6.22 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Polymer Workshop -- By Steven Buccini</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Hello Polymer
</a>
</li>
<li>
<a href="#hello-polymer">Using your first Polymer element</a>
</li>
<li>
<a href="#create">Create your first Polymer element</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div id="hello-polymer" class="col-lg-12">
<h1>Hello Polymer!</h1>
<p>In this demo, you'll use your first Polymer element! But first, notice that we're working in a Bootstrap template. One of the neat things about Polymer is that since it's just plain ol' HTML®, it fits neatly into any existing stack or framework. Polymer and React? Sure, why not. Polymer and Bootstrap? No problem. The browser doesn't even know the difference, and neither will your users</p>
<p>Don't you just hate it when you're filling out a text input, but when you start typing the placeholder disappears and you forget what format you're supposed to use? Yeah, me neither. But just work with me here.<p>
<input type="text" name="email" placeholder="Enter your email!">
<p>We can do better than that. Let's use Polymer's "paper-input" element, which has a neat floating label.</p>
<ol>
<li>First, install Polymer's paper-label web component:<br><code>bower install --save Polymer/paper-input</code></li>
<li>Next, load the element using HTML imports. Add the following snippet of code to your page's <code><head></code>:<br><code><link href="bower_components/paper-input/paper-input.html" rel="import"></code></li>
<li>Now, add the element to the page by adding it in the HTML below:<br><code><paper-input floatingLabel label="Enter your email!""></paper-input></code></li>
<li>Note: Chrome's Same Origin Policy sucks, so loading this file locally won't work. Instead, in your terminal navigate to the directory where this file lives and run the command <code>python -m SimpleHTTPServer 8000</code>. Now navigate to <code>localhost:8000/</code></li>
</ol>
<!-- Insert your new element here! -->
<p>Congratulations! You just experienced the magic of Polymer for the first time. Notice you didn't have to do any hard work. The text box has smooth animations built-in. Pretty cool! This isn't great for all scenarios (i.e. this doesn't work in forms) but you can use the <code><paper-input-decorator></code> to wrap the normal HTML <code><input></code> to use in forms and to add validation.</p>
<h3>Additional challenge problems:</h3>
<ul>
<li>Use <code><paper-input-decorator></code> to create a textbox that raises an error when you type an invalid email</li>
<li>After completing the above form, add it to a form where the submit button is a Polymer Paper component.</li>
<li>Package this form up into its own atomic component.</li>
</div>
<hr/>
<div id="create">
<h1>Creating your own Polymer element</h1>
<p>Now, we're going to create our own Polymer element. Let's say our site has a gallery of business cards, one for each one of our team members. First, run the following command:<br>
<code>bower install --save Polymer/core-icon-button</code><br>
Hop on over to <code>business-card.html</code> to begin!</p>
<!-- Uncomment me when ready!
<business-card>
<img src="https://scontent-sjc.xx.fbcdn.net/hphotos-xfp1/v/t1.0-9/10407588_10205485733488964_922178211701415560_n.jpg?oh=56cd973d9fdcaf078edcc2b71dbda1e8&oe=55ABC2C9" width="70" height="70">
<h2>Steven Buccini</h2>
<a href="mailto:sbuccini@berkeley.edu">Email me!</a>
</business-card>
-->
<p>What happens if you remove the wildcard <code><conent></code> tag in the <code><business-card></code> template, then try to add a <code><h3></code> tag inside the <code><business-card></code>? It shouldn't appear! This is because there is no specific insertion point for this type of element, so the template doesn't know how to draw the <code><h3></code> tag.</p>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>