x-elements/index.html at master · jshaker/x-elements · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>X-Elements</title>
    <link rel="stylesheet" type="text/css" href="bower_components/material-design-lite/material.css"/>
    <link rel="stylesheet" type="text/css" href="styles/styles.css"/>
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <script src="scripts/customelement/customelement.min.js"></script>
    <script src="bower_components/material-design-lite/material.min.js"></script>
    <link rel="import" href="components/x-navlink.html" id="x-navlink"/>
    <link rel="import" href="components/x-header-link.html" id="x-header-link"/>
    <link rel="import" href="components/x-sidenav-link.html" id="x-sidenav-link"/>
    <link rel="import" href="components/x-header-nav.html" id="x-header-nav"/>
    <link rel="import" href="components/x-title.html" id="x-title"/>
    <link rel="import" href="components/x-sidenav-title.html" id="x-sidenav-title"/>
    <link rel="import" href="components/x-sidenav.html" id="x-sidenav"/>
    <link rel="import" href="components/x-header.html" id="x-header" />

</head>
<body>
    <x-header>
        <x-title>X-Elements</x-title>
        <x-header-link href="#link">Link</x-header-link>
        <x-header-link href="#link">Link</x-header-link>
        <x-header-link href="#link">Link</x-header-link>
        <x-header-link href="#link">Link</x-header-link>
    </x-header>
    <x-sidenav style="top: 64px;">
        <x-sidenav-title>Navigation</x-sidenav-title>
        <x-sidenav-link href="#about">About</x-sidenav-link>
        <x-sidenav-link href="#demos">Demos</x-sidenav-link>
        <x-sidenav-link href="#contactus">Contact Us</x-sidenav-link>
    </x-sidenav>
    <div class="x-container">
        <p>Content</p>
    </div>
</body>
</html>