isu-elements
Version:
Polymer components for building web apps.
200 lines (183 loc) • 5.69 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>
<custom-style>
<style>
#btnGrpSmall {
--isu-button-group-button: {
background: var(--isu-ui-bg);
color: white;
font-size: 18px;
};
--isu-ui-default: {
color: red;
font-size: 12px;
border: none;
background-color: yellow;
/*height: 30px;*/
};
--isu-button: {
color: red;
};
--isu-button-group-dropdown: {
background: #000;
}
}
#btnGrp2 {
--isu-button-group-height: 50px;
}
</style>
</custom-style>
<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="测试" font-size="x-small"></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-items-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-ui-default: {
color: red;
font-size: 12px;
border: none;
background-color: yellow;
/*height: 30px;*/
};
--isu-button: {
color: red;
};
--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="测试">
</isu-button-group>
<script>
btnGrp4.items = [
{ label: '测试1', value: '1' },
{ label: '测试2', value: '2' },
{ label: '测试3', value: '3' }
]
document.querySelectorAll('.btn')
.forEach(btn => btn.onclick = console.log)
</script>
</template>
</demo-snippet>
</div>
</body>
</html>