web components plus 简单易用的 web components 组件库

基于 web components 编写的组件库，除了常用的按钮，输入框，对话框等基础组件，还包括 table，upload，player 等较复杂组件，使用简单，库非常小，可跨框架使用。

npm地址：www.npmjs.com/package/web…

table组件的使用demo

安装

npm install web-components-plus

导入

import {WTableRow, WTableItem} from 'web-components-plus'

代码

// 表头
<w-table-row columns="100px 100px 1fr">
    <w-table-item style="background-color: black; color:#fff">name</w-table-item>
    <w-table-item style="background-color: rgb(190, 15, 15); color:#fff">age</w-table-item>
    <w-table-item style="background-color: rgb(59, 60, 153); color:#fff">school</w-table-item>
</w-table-row>
// 表格内容
<w-table-row columns="100px 100px 1fr" hover>
    <w-table-item>jack</w-table-item>
    <w-table-item>18</w-table-item>
    <w-table-item>MIT</w-table-item>
</w-table-row>
<w-table-row columns="100px 100px 1fr" hover>
    <w-table-item>paul</w-table-item>
    <w-table-item>18</w-table-item>
    <w-table-item>MIT</w-table-item>
</w-table-row>
<w-table-row columns="100px 100px 1fr" hover>
    <w-table-item>mike</w-table-item>
    <w-table-item>18</w-table-item>
    <w-table-item>MIT</w-table-item>
</w-table-row>

效果

组件属性

w-table-row

attr	value
columns	string
hover	boolean
sticky	boolean
bordered	boolean
selected	boolean

w-table-item

attr	value
row	string
column	string

想要了解更多组件的使用方法，可以去 www.npmjs.com/package/web… 查询文档