Step 1: Creating the app structure
Table of contents
Step 1: Creating the app structure
In this step, you’ll use some pre-built Polymer elements to create the basic application structure, with a toolbar and tabs.
In this step, you’ll learn about:
- Using HTML imports.
- Using Polymer elements with standard HTML, CSS and JavaScript.
Edit index.html
Go to the starter directory and open the index.html file in your favorite editor. The starting file looks like this:
<!doctype html>
<html>
<head>
<title>unquote</title>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../components/webcomponentsjs/webcomponents.js">
</script>
<link rel="import"
href="../components/font-roboto/roboto.html">
...
Note: The font-roboto import loads the RobotoDraft font using the
Google Fonts API. If you’re working
offline or cannot access the Google Fonts API for any reason, this can block
rendering of the web page. If you experience this problem, comment out the
import for font-roboto.
Skipping over the styles for now, at the end of the file you’ll find something new:
... <body unresolved> </body> ...
Add HTML import links to import the <core-header-panel>, <core-toolbar>, and <paper-tabs> elements:
<script src="../components/webcomponentsjs/webcomponents.js"> </script> <link rel="import" href="../components/font-roboto/roboto.html"> <link rel="import" href="../components/core-header-panel/core-header-panel.html"> <link rel="import" href="../components/core-toolbar/core-toolbar.html"> <link rel="import" href="../components/paper-tabs/paper-tabs.html"> <style>
To add a toolbar, add the following code inside the <body> tag.
<core-header-panel> <core-toolbar> </core-toolbar> <!-- main page content will go here --> </core-header-panel>
Add the tabs.
The application will use tabs for navigating between two different views,
a list of all messages and a list of favorites. The
<paper-tabs>
element works much like a <select> element, but it’s styled as a set of
tabs.
...
<core-toolbar>
<paper-tabs id="tabs" selected="all" self-end>
<paper-tab name="all">All</paper-tab>
<paper-tab name="favorites">Favorites</paper-tab>
</paper-tabs>
</core-toolbar>
...
Add styles for the new elements. Add the following CSS rules inside the <style> element.
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
core-toolbar {
background: #03a9f4;
color: white;
}
#tabs {
width: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: uppercase;
}
Add a <script> tag near the end of the file to handle the tab switching
event.
<script>
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-select', function() {
console.log("Selected: " + tabs.selected);
});
</script>
</body>
Save the file and open the project in your browser (for example, http://localhost:8000/starter/). You have a Polymer app!
Note: If you have the console open, you’ll notice that you get two core-select
events each time you switch tabs—one for the previously-selected tab and one
for the newly-selected tab. The <paper-tabs> element inherits this behavior from <core-selector>, which supports
both single and multiple selections.
If something isn’t working, check your work against the index.html file in the step-1 folder:
In this step, you used HTML imports to import custom elements, and used them to create a simple app layout.
Explore: Can you use other children inside the <paper-tabs>? Try an image or a text span.