isu-element
Version:
Polymer components for building web apps.
161 lines (144 loc) • 4.59 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>isu-button-group demo</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 '../../node_modules/@polymer/iron-icons/iron-icons.js';
import '../../node_modules/@polymer/paper-styles/color.js';
import '../../isu-button-group'
</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;
}
}
/*isu-button-group {*/
/*width: 180px;*/
/*}*/
</style>
</custom-style>`;
document.body.appendChild($_documentContainer.content);
</script>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic isu-button-group demo</h3>
<demo-snippet>
<template>
<isu-button-group id="btnGrpSmall" label="测试小" size="small"></isu-button-group>
<script>
btnGrpSmall.items = [
{label: "测试1", value: "1"},
{label: "测试2", value: "2"},
{label: "测试3", value: "3"}
]
</script>
<isu-button-group id="btnGrp" label="测试"></isu-button-group>
<script>
btnGrp.items = [
{label: "测试1", value: "1"},
{label: "测试2", value: "2", disabled: true},
{label: "测试3", value: "3"}
]
</script>
<isu-button-group id="btnGrpLarge" label="测试大" size="large" divided></isu-button-group>
<script>
btnGrpLarge.items = [
{label: "测试1", value: "1", permission: true},
{label: "测试2", value: "2", permission: false},
{label: "测试3", value: "3"}
]
</script>
<isu-button-group id="btnGrpDisable" label="测试禁用" disabled></isu-button-group>
<script>
btnGrpDisable.items = [
{label: "测试1", value: "1"},
{label: "测试2", value: "2"},
{label: "测试3", value: "3"}
]
</script>
</template>
</demo-snippet>
<h3>Bind click handler</h3>
<demo-snippet>
<template>
<isu-button-group id="btnGrp2" label="测试" attr-for-label="name" hide-on-click></isu-button-group>
<script>
btnGrp2.items = [
{name: "测试1", value: "1"},
{name: "测试2", value: "2"},
{name: "测试3", value: "3"}
];
btnGrp2.addEventListener('item-click', ({detail:{bindItem, target}}) => {
console.log(bindItem, target);
})
</script>
</template>
</demo-snippet>
<h3>Append Light Dom</h3>
<demo-snippet>
<template>
<isu-button-group id="btnGrp3" label="测试">
<div bind-item="1">测试1</div>
<div bind-item="2">测试2</div>
<div bind-item="3">测试3</div>
</isu-button-group>
<script>
btnGrp3.onItemClick = ({target, bindItem}) => {
console.log(target, bindItem);
}
</script>
</template>
</demo-snippet>
<h3>Custom style</h3>
<demo-snippet>
<template>
<custom-style>
<style>
#btnGrp4 {
--isu-button-group-button: {
background: var(--isu-ui-bg);
color: white;
font-size: 18px;
};
--isu-button-group-dropdown: {
background: #000;
}
}
#btnGrp4 > .btn {
line-height: 40px;
color: white;
background: var(--isu-ui-bg);
}
#btnGrp4 > .btn:hover {
background: var(--isu-ui-color_lightblue);
/*color: black;*/
}
</style>
</custom-style>
<isu-button-group id="btnGrp4" label="测试">
<div class="btn">按钮1</div>
<div class="btn">按钮2</div>
<div class="btn">按钮3</div>
</isu-button-group>
<script>
document.querySelectorAll('.btn')
.forEach(btn => btn.onclick = console.log);
</script>
</template>
</demo-snippet>
</div>
</body>
</html>