Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP #1

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+402 −272
Open

WIP #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
62d136a
WIP
vdhpieter Dec 19, 2017
7d92417
Starter for subtabs
klaascharlier Jan 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
311 changes: 40 additions & 271 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,293 +26,62 @@
<link rel="import" href="../../paper-styles/typography.html">
<link rel="import" href="../paper-tab.html">
<link rel="import" href="../paper-tabs.html">
<link rel="import" href="../paper-tab-with-submenu.html">
<link rel="import" href="../paper-subtab.html">

</head>
<body unresolved>
<body>

<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
#container {
max-width: 600px;
}

body{
padding: 0;
height: 100vh;
}

paper-tabs {
background-color: var(--paper-blue-900);
background-color: #000;
color: #fff;
height: 60px;
position: fixed;
width: 100%;
top: 0;
z-index: 150;
--paper-tabs-selection-bar-color: #E1143C;
--paper-tabs-selection-bar: {
height: 7px;
z-index: 300;
}
;
}
</style>
</custom-style>

<div id="container" class="vertical-section-container centered">

<h3>Plain <code>paper-tabs</code>.</h3>
<demo-snippet>
<template>
<paper-tabs selected="0">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
</template>
</demo-snippet>

<h3>The <code>no-bar</code> attribute disables the selection bar.</h3>
<demo-snippet>
<template>
<custom-style>
<style is="custom-style">
paper-tabs[no-bar] paper-tab.iron-selected {
color: #ffff8d;
}
</style>
</custom-style>

<paper-tabs id="plain-tabs" selected="0" no-bar>
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
</template>
</demo-snippet>

<h3>
The <code>no-slide</code> attribute prevents the selection bar from
animating when the selection changes.
</h3>
<demo-snippet>
<template>
<paper-tabs selected="0" no-slide>
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
</template>
</demo-snippet>

<h3>
The <code>noink</code> attribute disables the ink ripple animation seen
when the user activates a tab (by clicking, tapping, etc.).
</h3>
<demo-snippet>
<template>
<paper-tabs selected="0" noink>
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
</template>
</demo-snippet>

<h3>
The <code>scrollable</code> attribute causes the tabs to scroll, rather
than compress, when there is not enough space. Arrow buttons appear when
any of the tabs are not completely visible.
</h3>
<demo-snippet>
<template>
<paper-tabs selected="0" scrollable>
<paper-tab>NUMBER ONE ITEM</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>THE THIRD ITEM</paper-tab>
<paper-tab>THE ITEM FOUR</paper-tab>
<paper-tab>FIFTH</paper-tab>
<paper-tab>THE SIXTH TAB</paper-tab>
<paper-tab>NUMBER SEVEN</paper-tab>
<paper-tab>EIGHT</paper-tab>
<paper-tab>NUMBER NINE</paper-tab>
<paper-tab>THE TENTH</paper-tab>
<paper-tab>THE ITEM ELEVEN</paper-tab>
<paper-tab>TWELFTH ITEM</paper-tab>
</paper-tabs>
</template>
</demo-snippet>

<h3>
The <code>fit-container</code> attribute causes scrollable tabs to
stretch to fit their container if the tabs don't need to scroll.
</h3>
<demo-snippet>
<template>
<paper-tabs selected="0" scrollable fit-container>
<paper-tab>NUMBER ONE ITEM</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>THE THIRD ITEM</paper-tab>
</paper-tabs>
<br>
<paper-tabs selected="0" scrollable fit-container style="width: 50%;">
<paper-tab>NUMBER ONE ITEM</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>THE THIRD ITEM</paper-tab>
</paper-tabs>
</template>
</demo-snippet>

<h3>
Tab layout is affected by the writing direction of the surrounding area.
</h3>
<demo-snippet>
<template>
<div dir="rtl">
<paper-tabs selected="0">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
&nbsp;
<paper-tabs selected="0" scrollable>
<paper-tab>NUMBER ONE ITEM</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>THE THIRD ITEM</paper-tab>
<paper-tab>THE ITEM FOUR</paper-tab>
<paper-tab>FIFTH</paper-tab>
<paper-tab>THE SIXTH TAB</paper-tab>
<paper-tab>NUMBER SEVEN</paper-tab>
<paper-tab>EIGHT</paper-tab>
<paper-tab>NUMBER NINE</paper-tab>
<paper-tab>THE TENTH</paper-tab>
<paper-tab>THE ITEM ELEVEN</paper-tab>
<paper-tab>TWELFTH ITEM</paper-tab>
</paper-tabs>
</div>
</template>
</demo-snippet>

<h3>
Use the <code>align-bottom</code> attribute when your tabs are
positioned below the content they control. The selection bar will be
shown at the top of the tabs.
</h3>
<demo-snippet>
<template>
<paper-tabs selected="0" align-bottom>
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
</template>
</demo-snippet>

<h3>
Use the <code>link</code> attribute when a <code>paper-tab</code>
contains a link. The link will fill the entire tab. <code>paper-tabs</code>
implements its own tabindexing and keyboard focus patterns so an anchor
placed inside should set <code>tabindex="-1"</code>.
</h3>
<demo-snippet>
<template>
<custom-style>
<style is="custom-style">
paper-tab[link] a {
/* These mixins (from iron-flex-layout) center the link text. */
@apply --layout-horizontal;
@apply --layout-center-center;
color: #fff;
text-decoration: none;
}
</style>
</custom-style>

<paper-tabs selected="0">
<paper-tab link>
<a href="#item1" tabindex="-1">ITEM ONE</a>
</paper-tab>
<paper-tab link>
<a href="#item2" tabindex="-1">ITEM TWO</a>
</paper-tab>
<paper-tab link>
<a href="#item3" tabindex="-1">ITEM THREE</a>
</paper-tab>
</paper-tabs>
</template>
</demo-snippet>

<h3>
Use <code>autoselect</code> to enable automatic tab selection.
</h3>
<demo-snippet>
<template>
<paper-tabs selected="0" autoselect>
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
</template>
</demo-snippet>
paper-tab-with-submenu{
--paper-tabs-background-color: #000;
}

<h3>
Use <code>autoselect-delay</code> to adjust the delay between the last
keyup event and when the tab is automatically selected (when
<code>autoselect</code> is true).
</h3>
<demo-snippet>
<template>
<h4>
<code>autoselect-delay="0"</code>
</h4>
<paper-tabs selected="0" no-slide autoselect autoselect-delay="0">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
paper-tabs {
overflow: visible;
}
</style>
</custom-style>

<h4>
<code>autoselect-delay="1000"</code>
</h4>
<paper-tabs selected="0" autoselect autoselect-delay="1000">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
<paper-tabs selected="{{page}}" attr-for-selected="name" scrollable hide-scroll-buttons noink>
<paper-tab name="home">Home</paper-tab>
<paper-tab-with-submenu title="Info voor leden" selected="{{page}}" attr-for-selected="name" name={{page}} scrollable noink>
<paper-subtab name="leiding">Leiding</paper-subtab>
<paper-subtab name="prikkeling">Prikkeling</paper-subtab>
<paper-subtab name="nieuwsbrief">Nieuwsbrief</paper-subtab>
<paper-subtab name="documenten">Documenten</paper-subtab>
</paper-tab-with-submenu>
<paper-tab name="inschrijven">Inschrijven</paper-tab>
<paper-tab name="kalender">Kalender</paper-tab>
<paper-tab name="fotos">Foto's</paper-tab>
<paper-tab name="contact">Contact</paper-tab>
</paper-tabs>
</template>
</demo-snippet>

<!--
Nested templates are not supported in IE, meaning they can't be used in a
demo-snippet. See Polymer/polymer#2495 for more details.
-->
<!--
<h3>J. Bound Selection</h3>
<demo-snippet>
<template>
<template is="dom-bind">
<h2>Current Tab: <span>[[selected]]</span></h2>
<paper-tabs selected="{{selected}}">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
</template>
</template>
</demo-snippet>

<h3>K. Controlling content</h3>
<demo-snippet>
<template>
<style is="custom-style">
iron-pages {
border: 1px solid #ccc;
border-top: none;
padding: 8px;
}
</style>

<template is="dom-bind">
<paper-tabs selected="{{selected}}">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
<iron-pages selected="{{selected}}">
<div>CONTENT ONE</div>
<div>CONTENT TWO</div>
<div>CONTENT THREE</div>
</iron-pages>
</template>
</template>
</demo-snippet>
-->

</div>

</body>
</html>
3 changes: 3 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading