isu-elements
Version:
Polymer components for building web apps.
212 lines (200 loc) • 9.09 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-form demo</title>
<!--<script type="text/javascript" src="../../utils/mock_setup.js"></script>-->
<script type="application/javascript" src="../node_modules/web-animations-js/web-animations-next.min.js"></script>
<script type="module">
import '../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader';
import '../node_modules/@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
import '../node_modules/@polymer/iron-demo-helpers/demo-snippet.js';
import '../isu-grid-layout';
import '../isu-button.js';
import '../isu-button-group';
import '../isu-checkbox-group';
import '../isu-dialog';
import '../isu-image-upload.js';
import '../isu-input.js';
import '../isu-input-date';
import '../isu-input-datetime';
import '../isu-mask';
import '../isu-pagination';
import '../isu-radio';
import '../isu-select';
import '../isu-table-column';
import '../isu-table';
import '../isu-textarea';
import '../isu-tip';
import '../isu-form.js';
import '../isu-cascading.js'
import '../isu-edit-table.js'
</script>
<script type="module">
const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
demo-snippet {
width: 800px;
margin: 0 auto;
--demo-snippet-code: {
max-height: 1500px;
}
}
</style>
</custom-style>`;
document.body.appendChild($_documentContainer.content);
</script>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic isu-button demo</h3>
<demo-snippet>
<template>
<custom-style>
<style>
isu-button-group {
width: 180px;
height: 35px;
}
.text-box {
width: 100%;
}
</style>
</custom-style>
<isu-grid-layout columns="2" row-grip="40" colunm-grip="10">
<isu-button id="btn" type="danger" size="small">测试</isu-button>
<isu-button-group id="btnGrp" label="测试"></isu-button-group>
<isu-checkbox-group layout-colspan="2" id="checkbox" label="材料" value="0, 1, 2"></isu-checkbox-group>
<isu-image-upload id="uploader" label="上河图"></isu-image-upload>
<isu-input class="typed-input" label="文本框" placeholder="Please input something..."></isu-input>
<isu-input class="typed-input" label="电话" type="tel" maxlength="11"></isu-input>
<isu-input layout-colspan="2" class="typed-input" label="数字框" type="number" required="" min="10" max="20" prompt="请输入10到20之间的数字"></isu-input>
<isu-input-date class="input-date" label="日期"></isu-input-date>
<isu-input-date class="input-date" label="默认value" value="2017-10-26"></isu-input-date>
<isu-input-date class="input-date" label="默认time" timestamp="1509008130349"></isu-input-date>
<isu-input-datetime class="datetime" label="无默认日期"></isu-input-datetime>
<isu-input-datetime class="datetime" label="默认value" value="2017-10-26T10:20"></isu-input-datetime>
<isu-input-datetime class="datetime" label="默认time" timestamp="1509008130349"></isu-input-datetime>
<isu-mask label="输入框" class="mask">
<isu-input placeholder="测试输入" value="梅西"></isu-input>
</isu-mask>
<isu-mask label="时间框">
<isu-input-datetime placeholder="时间"></isu-input-datetime>
</isu-mask>
<isu-mask label="Select下拉框">
<isu-select placeholder="测试输入" id="select" value="1,2,3" multi=""></isu-select>
</isu-mask>
<isu-pagination id="page1" total="5000" page-sizes='[10,20]' limit="10" layout-colspan="2"></isu-pagination>
<isu-radio id="radio2" label="姓名" attr-for-value="id" attr-for-label="name" value="3"></isu-radio>
<isu-select id="select" label="球员" placeholder="选择球员" value="1"></isu-select>
<isu-select id="select1" label="球员" placeholder="选择球员" multi="" value="1, 2, 3, 4"></isu-select>
<isu-table id="table" layout-colspan="2">
<isu-table-column prop="sex" label="性别" width="60" type="expand" model-as="user">
<template>
<style>
.ext-container {
display: flex;
}
.ext-container > div {
width: 200px;
}
</style>
<div class="ext-container">
<div>姓名：[[user.name]]</div>
<div>sex: [[user.sex]]</div>
<div>phone: [[user.phone]]</div>
</div>
</template>
</isu-table-column>
<isu-table-column prop="name" label="名称" width="80" sortable></isu-table-column>
<isu-table-column prop="phone" label="电话号码" width="100" sortable></isu-table-column>
<isu-table-column prop="phone" label="操作" width="100" type="operate">
<template>
<isu-button class="action-bar">查看</isu-button>
<template is="dom-if" if="[[ item.modify ]]">
<isu-button class="action-bar">修改</isu-button>
</template>
</template>
</isu-table-column>
</isu-table>
<isu-textarea label="备注" value="readonly" layout-colspan="2" layout-rowspan="6" class="text-box"></isu-textarea>
<isu-textarea label="备注" value="disabled" disabled layout-colspan="2" class="text-box"></isu-textarea>
<isu-button id="btn1" onclick="tip.open();" size="large">Success</isu-button>
<isu-button id="btn2" onclick="tip2.open(2000);" size="large">Warn</isu-button>
<isu-button id="btn3" onclick="tip3.open(5000);" size="large">Error</isu-button>
<isu-cascading id="cascading" label="层叠"></isu-cascading>
<isu-picker></isu-picker>
</isu-grid-layout>
<isu-dialog id="dialog" stop-auto-dismiss>
<div>
Put your Content here inside an element which with
</div>
<div>
<isu-button id="btn4" dialog-dismiss size="large">关闭</isu-button>
<isu-button id="btn5" size="large">确定</isu-button>
</div>
</isu-dialog>
<isu-tip type="success" message="新建成功" id="tip" duration="5000"></isu-tip>
<isu-tip type="warn" message="警告：warning,warning,warning,warning,warning,warning,warning" id="tip2"></isu-tip>
<isu-tip type="error" message="出错了：这是一条出错的提示消息, 这是一条出错的提示消息" id="tip3"></isu-tip>
<script>
cascading.treeItems = [[
{label: "测试1", value: "1",children: [
{label: "测试1", value: "1", children: [
{label: "测试1", value: "1"},
{label: "测试2", value: "2"},
{label: "测试3", value: "3"}
]},
{label: "测试2", value: "2"},
{label: "测试3", value: "3"}
]},
{label: "测试2", value: "2",children: [
{label: "测试1", value: "1"},
{label: "测试2", value: "2"},
{label: "测试3", value: "3"}
]},
{label: "测试3", value: "3"}
]
]
btnGrp.items = [
{label: "测试1", value: "1"},
{label: "测试2", value: "2"},
{label: "测试3", value: "3"}
];
checkbox.items = [
{label: '薄膜', value: 0},
{label: '纤维', value: 1},
{label: '塑料', value: 2},
{label: '其它', value: 3}
];
btn.onclick = () => dialog.open();
btn4.onclick = () => {
}
radio2.items = [{id: 1, name: "张三"}, {id: 2, name: "李四水电费"}, {id: 3, name: "王五"}];
const items11 = [
{"label": "梅西", "value": 1},
{"label": "C罗", "value": 2},
{"label": "苏亚雷斯", "value": 3},
{"label": "库蒂尼奥", "value": 4},
{"label": "特尔斯特根", "value": 5},
{"label": "保利尼奥", "value": 6},
{"label": "内马尔", "value": 13}
];
select.items = items11;
select1.items = items11;
table.data = [
{sex: '男', name: 'Apple', phone: '12345', modify: true},
{sex: '男', name: 'Wahson', phone: '12346', modify: true},
{sex: '女', name: 'Rose', phone: '12356'},
{sex: '女', name: 'Lucy', phone: '12390'},
{sex: '男', name: 'James', phone: '12326'},
{sex: '男', name: 'Cat', phone: '12349'}
]
</script>
</template>
</demo-snippet>
</div>
</body>
</html>