@suyouwanggang/p-ui
Version:
`p-ui`是一套使用原生`Web Components`规范开发的跨框架UI组件库,基于`lit-elment`库开发。 [github项目地址](https://github.com/suyouwanggang/p-ui)
327 lines (283 loc) • 13.5 kB
HTML
<html lang="en">
<head>
<!-- Register service worker if supported. -->
<!--
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Load components via WebComponents.waitFor -->
<!-- load the element -->
<!-- Change stuff here for your app -->
<meta name="description" content="start-lit-element">
<meta name="theme-color" content="#ffffff">
<title>start-lit-element</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="build/webcomponents-loader.js"></script>
<script src="build/index.js" type="module" ></script>
<script src='build/index.legacy.js' nomodule=""></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="UTF-8">
<style>
p-input {
margin: 4px;
font-size:12px;
}
</style>
</head>
<body>
<form>
<p-for id="items" value="value" index="index">
<template>
<div >index:${index} ${value.name[0]} <p-switch .item=${value} @click=${value.handler} > ${value.label}</p-switch></div>
</template>
</p-for>
<script>
var forItem= document.getElementById("items");
const data=[];
for(let i=0,j=15;i<j;i++){
data.push({
name:['text'+i],
handler:function(event){
console.log(event.target.item +" this"+this) ;
},
label:'label'+i
});
};
forItem.items=data;
</script>
<p-color-panel></p-color-panel>
<p-switch id="switch" checked value="1"></p-switch>
<p-rate value=2 hover id="pRate" > <span>sdfsfsd</span></p-rate>
<p-slider value=10 max=100></p-slider>
<script>
document.getElementById('pRate').tipStrings=['terrible','bad','normal','good','wonderful'];
</script>
<p>输入框</p>
<p-select value='2'>
<p-option value='1'>武汉武汉武汉武汉</p-option>
<p-option value='2'>上海</p-option>
<p-option value='3'>北京</p-option>
<p-option value='4'>澳门</p-option>
<p-option value='5'>武汉</p-option>
</p-select>
<p-dialog open oktext='确定' canceltext='取消'>
<wanggang>asfasasdf</wanggang>
</p-dialog>
<p-select value='2'>
<p-option-group>asdfaf
<p-option value='1'>武汉武汉武汉武汉</p-option>
<p-option value='2'>上海</p-option>
<p-option value='3'>北京</p-option>
<p-option value='4'>澳门</p-option>
<p-option value='5'>武汉</p-option>
</p-option-group>
<p-option-group>2341324
<p-option value='123'>武汉武汉武汉武汉</p-option>
<p-option value='223'>上海</p-option>
<p-option value='3234'>北京</p-option>
<p-option value='423'>澳门</p-option>
<p-option value='5234'>武汉</p-option>
</p-option-group>
</p-select>
<p-input id="input" lefticon="creditcard" placeholder='金额' type='number' clear="true"></p-input>
<p-input id="number" type="password"></p-input>
<p-input id="password" type="number" required min=1 max=2000 step=0.1></p-input>
<p-text>wanggang </p-text>
<p-text code>wanggang </p-text>
<p-text mark >wanggang </p-text>
<p-text code mark >wanggang </p-text>
<p-text rows=3 style='width:400px;' >[2019-11-22 15:28:35] waiting for changes...
rollup v1.23.1
bundles index.ts → build\index.js, docs\build\index.js...
created build\index.js, docs\build\index.js in 3.3s
[2019-11-22 17:18:33] waiting for changes...
rollup v1.23.1
bundles index.ts → build\index.js, docs\build\index.js...
created build\index.js, docs\build\index.js in 1.1s
[2019-11-22 17:18:34] waiting for changes... </p-text>
<p-text code mark >wanggang </p-text>
<p>icon</p>
<div style='color:var(--themeColor,#42b983)'>
<p-icon name="heart" id="icon" size="20"></p-icon>
<p-icon name="heart" id="icon" size="30" lefticon="creditcard"></p-icon>
<p-icon name="heart" id="icon" size="40" lefticon="creditcard"></p-icon>
<p-icon name="heart" id="icon" size="50" lefticon="creditcard"></p-icon>
</div>
<p>Tips </p>
<p-tips style="margin-top:10px;margin-left:60%;"
tips
="我是内容
我是内容
我是内容
我是内容
我是内容
我是内容
" id="tips" show="">
<p-icon name="heart" id="icon" size="20" lefticon="creditcard"></p-icon>
<p-icon name="heart" id="icon" size="30" lefticon="creditcard"></p-icon>
<p-icon name="heart" id="icon" size="40" lefticon="creditcard"></p-icon>
</p-tips>
<p-tips tips="我是内容" id="tips" >
<p-icon name="heart" id="icon" size="20" lefticon="creditcard"></p-icon>
<p-icon name="heart" id="icon" size="30" lefticon="creditcard"></p-icon>
<p-icon name="heart" id="icon" size="40" lefticon="creditcard"></p-icon>
</p-tips>
<p-tips tips="我是内容" id="tips" >
<p-icon name="heart" id="icon" size="20" lefticon="creditcard"></p-icon>
<p-icon name="heart" id="icon" size="30" lefticon="creditcard"></p-icon>
<p-icon name="heart" id="icon" size="40" lefticon="creditcard"></p-icon>
</p-tips>
<p>Tab </p>
<p-tab id="tabDIV" style='width:80%;margin:10px auto;' >
<p-tab-content label="wanggang" icon="search" key="first">
<template slot='header'><p-button >按钮</p-button></template>
<p-row grap=5 >
<p-col span=1 style='background: #42b983;'> col1</p-col>
<p-col span=2 style='background: red;'> col1</p-col>
<p-col span=21 style='background: #42b983;'> col1</p-col>
<p-col span=8 style='background: #42b983;'> col1</p-col>
<p-col span=8 style='background: #42b983;'> col1</p-col>
<p-col span=8 style='background: #42b983;'> col1</p-col>
<p-col span=6 style='background: #42b983;'> col1</p-col>
<p-col span=6 style='background: #42b983;'> col1</p-col>
<p-col span=6 style='background: #42b983;'> col1</p-col>
<p-col span=6 style='background: #42b983;'> col1</p-col>
</p-row>
<p-layout center style='height:100px;height:100px;background: greenyellow;margin:5px;'>
<p-layout style='background-color:aliceblue' > 我是高度</p-layout>
</p-layout>
<p-layout row mainAgile='center' crossAgile='start' style='height:100px;height:100px;background: greenyellow;margin:5px;'>
<p-layout style='background-color:aliceblue;width:20%' >
20%
</p-layout>
<p-layout expand>
<p-row grap=5 >
<p-col span=1 style='background: #42b983;'> col1</p-col>
<p-col span=2 style='background: red;'> col1</p-col>
<p-col span=21 style='background:goldenrod;'> col1</p-col>
</p-row>
</p-layout>
<p-layout style='background-color:gray ;width:20%' >
20%
</p-layout>
</p-layout>
<p-layout mainAgile='center' crossAgile='start' style='height:100px;height:100px;background: greenyellow;margin:5px;'>
<p-layout style='background-color:aliceblue;height:20%;width:100%' >
20%
</p-layout>
<p-layout expand style='width:100%'>
<p-row grap=5 >
<p-col span=1 style='background: #42b983;'> col1</p-col>
<p-col span=2 style='background: red;'> col1</p-col>
<p-col span=21 style='background:goldenrod;'> col1</p-col>
</p-row>
</p-layout>
<p-layout style='background-color:gray ;height:20%;width:100%' >
20%
</p-layout>
</p-layout>
<p-slider min=1 max=100 value='10'></p-slider>
<p-color dir='righttop' style='margin-left:200px;'></p-color>
<p-message block icon='heart' color='red' show>created build\index.js, docs\build\index.js in 4.7s</p-message>
<p-message block icon='heart' color='red' show>created build\index.js, docs\build\index.js in 4.7s</p-message>
<p-message block icon='heart' color='red' show>created build\index.js, docs\build\index.js in 4.7s</p-message>
<p-message block icon='heart' color='red' show>created build\index.js, docs\build\index.js in 4.7s</p-message>
<p-router-slot route='test/AB/B'>
<p slot='test'>route= test </p>
<p slot='test/AB/B'>route= test/AB/B </p>
<p slot='name'>route=name</p>
</p-router-slot>
<p-loading size='2em' color='red'> lodding</p-loading>
<p-button icon='search' style='margin:5px;' block type='primary' checked> <span>确定</span></p-button>
<p-button icon='search' href='http://wwww.baidu.com' disabled> <span>Tips 01Tips 01Tips 01</span></p-button>
<p-button icon='search' loading> sdfasfasfd</span></p-button>
<p-button icon='search' shape='circle' checked></p-button>
<p-button icon='search' disabled type='danger' > <span>确定</span></p-button>
<p-checkbox disabled > </p-checkbox>
<p-checkbox value='12'> label </p-checkbox>
<p-checkbox checked value='12'> label </p-checkbox>
<p-checkbox checked disabled value='12'> label </p-checkbox>
<p></p>
<p-checkbox-group id='groupCheckbox' name='wanggang' min=2 max=3>
<p-checkbox checked value=1 >1 </p-checkbox>
<p-checkbox value=2 >2 </p-checkbox>
<p-checkbox value=3 >3</p-checkbox>
<p-checkbox value=4 >4</p-checkbox>
</p-checkbox-group>
<p-checkbox-group id='groupCheckbox02' vertical name='wangang03' value=[1,2,3] min=2 max=3>
<p-checkbox value=1 >1 </p-checkbox>
<p-checkbox value=2 >2 </p-checkbox>
<p-checkbox value=3 >3</p-checkbox>
<p-checkbox value=4 >4</p-checkbox>
</p-checkbox-group>
<p>Tips 01 </p>
<p>Tips 03</p>
<p-radio name='test' value=1> Lit element</p-radio>
<p-radio name='test' value=3>Polymer </p-radio>
<p-radio name='test' value=angular>angular </p-radio>
<p-radio name='test' value='vue'>Vue.js </p-radio>
<p-radio name='test' value='React'>React.js </p-radio>
<p>group radio disabled </p>
<p-radio-group value='2' disabled>
<p-radio value=1>1</p-radio>
<p-radio value=2>2</p-radio>
<p-radio value=3>3</p-radio>
</p-radio-group >
<p>group radio </p>
<p-radio-group required >
<p-radio value=1>1</p-radio>
<p-radio value=2>2</p-radio>
<p-radio value=3>3</p-radio>
</p-radio-group >
<p>
<style> p-page-btn{
margin:.5em;
}</style>
</p>
<p-page-btn value=2 pagesize=10 total=0 > </p-page-btn>
<p-page-btn value=1 pagesize=10 total=200 > </p-page-btn>
<p-page-btn value=20 pagesize=10 total=400 > </p-page-btn>
</p-tab-content>
<p-tab-content label="zhengmin" icon="creditcard" key="zhengmin">
<p-button-group onchange="console.log(this); console.log(this.value);">
<p-button value='1' >KSDF1</p-button>
<p-button value='2' >KSDF2</p-button>
<p-button value='3' >KSDF3</p-button>
<p-button value='4' >KSDF5</p-button>
</p-button-group>
<p>Tips 03 zhengmin</p>
<p>Tips 04 zhengmin</p>
<p>Tips 0 zhengmin3</p>
<p>Tips 04</p>
<p>Tips 04</p>
</p-tab-content>
<p-tab-content label="王刚01" ><div style='height:300px;'>王刚01王刚01</div></p-tab-content>
<p-tab-content label="王刚02" ><div style='height:300px;'>王刚02王刚01</div></p-tab-content>
<p-tab-content label="王刚03" ><div style='height:300px;'>王刚03王刚01</div></p-tab-content>
<p-tab-content label="王刚04" ><div style='height:300px;'>王刚04王刚01</div></p-tab-content>
<p-tab-content label="王刚05" ><div style='height:300px;'>王刚05王刚01</div></p-tab-content>
<p-tab-content label="王刚06" ><div style='height:300px;'>王刚06王刚01</div></p-tab-content>
<p-tab-content label="王刚07" ><div style='height:300px;'>王刚07王刚01</div></p-tab-content>
<p-tab-content label="王刚08" ><div style='height:300px;'>王刚08王刚01</div></p-tab-content>
<p-tab-content label="王刚09" ><div style='height:300px;'>王刚09王刚01</div></p-tab-content>
<p-tab-content label="王刚10" ><div style='height:300px;'>王刚10王刚01</div></p-tab-content>
<p-tab-content label="王刚11" ><div style='height:300px;'>王刚11王刚01</div></p-tab-content>
<p-tab-content label="王刚12" ><div style='height:300px;'>王刚12王刚01</div></p-tab-content>
<p-tab-content label="王刚" disabled key="last">
<p>王刚王刚王刚王刚王刚 03</p>
<p>Tips 04</p>
<p>Tips 03</p>
<p>Tips 04</p>
<p>Tips 04</p>
<p>Tips 03</p>
<p>Tips 04</p>
</p-tab-content>
</p-tab>
</form>
</script>
</body>
</html>