isu-elements
Version:
Polymer components for building web apps.
184 lines (169 loc) • 7.47 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>h2-paper-tab</title>
<script type="module">
import '../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js';
import '../../node_modules/@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
import '../../node_modules/@polymer/iron-demo-helpers/demo-snippet.js';
import '@polymer/paper-tabs/paper-tabs'
import '@polymer/paper-tabs/paper-tab'
import '@polymer/polymer/lib/elements/dom-bind.js';
import '../../isu-paper-tabs'
</script>
<script type="application/javascript"
src="../../node_modules/web-animations-js/web-animations-next.min.js"></script>
<script type="module">
const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
/*.centered {*/
/* min-width: 800px;*/
/*}*/
/*demo-snippet {*/
/* --demo-snippet-code: {*/
/* max-height: 500px;*/
/* }*/
/*}*/
/*:root {*/
/* --paper-toolbar-background: #00bcd4;*/
/*}*/
/*body {*/
/* font-family: sans-serif;*/
/* margin: 0;*/
/* padding: 24px;*/
/* color: #333;*/
/*}*/
/*h2-paper-tabs, h2-paper-toolbar {*/
/* box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);*/
/*}*/
/*h2-paper-toolbar h2-paper-tabs {*/
/* box-shadow: none;*/
/*}*/
/*h2-paper-tabs[noink][no-bar] h2-paper-tab.iron-selected {*/
/* color: #ffff8d;*/
/*}*/
/*h2-paper-tabs[align-bottom] {*/
/* box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);*/
/*}*/
/*h3 {*/
/* font-size: 16px;*/
/* font-weight: 400;*/
/* padding-top: 20px;*/
/*}*/
</style>
</custom-style>`;
document.body.appendChild($_documentContainer.content);
</script>
</head>
<body>
<div class="vertical-section-container centered">
<h3>h2 isu-paper-tabs demo</h3>
<h3>Plain <code>isu-paper-tabs-border-card-type</code>.</h3>
<demo-snippet>
<script type="module">
import "@polymer/iron-icons/communication-icons.js";
</script>
<template>
<isu-paper-tabs value="0" id="iSuPaperTabs1"></isu-paper-tabs>
<script>
iSuPaperTabs1.tabList = [
{label: 'ITEM ONE',value:0,disabled:false,permission:true},
{label: 'ITEM TWO',value:1,disabled:false,permission:true},
{label: 'ITEM Three',value:2,disabled:false,permission:true},
{label: 'ITEM Four',value:3,disabled:false,permission:true}
];
iSuPaperTabs1.isClear = true
</script>
</template>
</demo-snippet>
<h3>Plain <code>isu-paper-tabs-position-right</code>.</h3>
<demo-snippet>
<template>
<isu-paper-tabs value="one" attr-for-selected="name"
id="iSuPaperTabsRight" tab-position="right"></isu-paper-tabs>
<script>
iSuPaperTabsRight.tabList = [
{label: 'ITEM ONE',name:'one',disabled:false,permission:true},
{label: 'ITEM TWO',name:'two',disabled:false,permission:true},
{label: 'ITEM Three',name:'three',disabled:false,permission:true},
{label: 'ITEM Four',name:'four',disabled:false,permission:true}
];
</script>
</template>
</demo-snippet>
<h3>Plain <code>isu-paper-tabs-position-left</code>.</h3>
<demo-snippet>
<template>
<isu-paper-tabs value="0" id="iSuPaperTabsLeft" tab-position="left"></isu-paper-tabs>
<script>
iSuPaperTabsLeft.tabList = [
{label: 'ITEM ONE',value:0,disabled:false,permission:true},
{label: 'ITEM TWO',value:1,disabled:false,permission:true},
{label: 'ITEM Three',value:2,disabled:false,permission:true},
{label: 'ITEM Four',value:3,disabled:false,permission:true}
];
</script>
</template>
</demo-snippet>
<h3>Plain <code>isu-paper-tabs-position-bottom</code>.</h3>
<demo-snippet>
<template>
<isu-paper-tabs value="0" id="iSuBottomPaperTabs" tab-position="bottom"></isu-paper-tabs>
<script>
iSuBottomPaperTabs.tabList = [
{label: 'ITEM ONE',value:0,disabled:false,permission:true,iconName:'menu'},
{label: 'ITEM TWO',value:1,disabled:false,permission:true,iconName:'menu'},
{label: 'ITEM Three',value:2,disabled:false,permission:true,iconName:'menu'},
{label: 'ITEM Four',value:3,disabled:false,permission:true,iconName:'menu'}
];
</script>
</template>
</demo-snippet>
<h3>Plain <code>isu-paper-tabs-card-type</code>.</h3>
<demo-snippet>
<template>
<isu-paper-tabs value="0" id="iSuCardPaperTabs" tab-type="card"></isu-paper-tabs>
<script>
iSuCardPaperTabs.tabList = [
{label: 'ITEM ONE',value:0,disabled:false,permission:false},
{label: 'ITEM TWO',value:1,disabled:false,permission:false},
{label: 'ITEM Three',value:2,disabled:false,permission:true},
{label: 'ITEM Four',value:3,disabled:false,permission:true }
];
</script>
</template>
</demo-snippet>
<h3>Plain <code>isu-paper-tabs-border-card-type</code>.</h3>
<demo-snippet>
<template>
<isu-paper-tabs value="0" id="iSuBorderCardPaperTabs" tab-type="border-card"></isu-paper-tabs>
<script>
iSuBorderCardPaperTabs.tabList = [
{label: 'ITEM ONE',value:0,disabled:false,permission:true},
{label: 'ITEM TWO',value:1,disabled:false,permission:true},
{label: 'ITEM Three',value:2,disabled:false,permission:true},
{label: 'ITEM Four',value:3,disabled:false,permission:true}
];
</script>
</template>
</demo-snippet>
<h3>Plain <code>isu-paper-tabs-width-bar</code>.</h3>
<demo-snippet>
<template>
<isu-paper-tabs value="0" id="iSuWidthBarPaperTabs" tab-type="width-bar"></isu-paper-tabs>
<script>
iSuWidthBarPaperTabs.tabList = [
{label: 'ITEM ONE',value:0,disabled:false,permission:true},
{label: 'ITEM TWO',value:1,disabled:false,permission:true},
{label: 'ITEM Three',value:2,disabled:false,permission:true},
{label: 'ITEM Four',value:3,disabled:false,permission:true}
];
</script>
</template>
</demo-snippet>
</div>
</body>
</html>