7-UI elements Component Library
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm install 7-ui
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/7-ui@1.0.0/dist/style.css">
</head>
<body>
<div id="app">
<sf-button @click.native="visible = true">按钮</sf-button>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/7-ui@1.0.0/dist/app.js"></script>
<script>
new Vue({
el: '#app',
data: function(){
return { visible: false }
}
})
</script>
</html>
配置文件 global.config.js
/**
* 全局配置文件
*
* @type {*[]}
*/
module.exports = [
{
name : "sf-button", // 组件npm包名称
label : "Button 按钮", // 组件名字(导航栏展示)
css : "button.css", // 组件样式文件, 完整地址(sf-button/src/button.css)
path : "" // 组件打包文件地址
},
{
name: "sf-table",
label: "Table 表单",
css : "table.css",
path :"",
child : [{
path : "table-column", // 完整地址('sf-table/src/table-column')
name : 'sf-table-column'
}, {
path : "table.vue", // 完整地址('sf-table/src/table.vue')
name : 'sf-table'
}]
},
{
name: "sf-spinner",
label: "Spinner 过场",
css : "spinner",
path: "",
child : [{
path : "clipLoader/clipLoader",
name : 'sf-cliploader'
}, {
path : "scaleLoader/scaleLoader",
name : 'sf-scaleloader'
},{
path : "riseLoader/riseLoader",
name : 'sf-riseloader'
},{
path : "squareLoader/squareLoader",
name : 'sf-squareloader'
}]
},
{
name: "sf-toast",
label: "Toast 全局提示",
css: "toast",
path :"toast"
},
{
name: "sf-progressbar",
label: "Progressbar 进度条",
css : "progressbar",
path :"progressbar"
}
]
如需增加额外组件,需要在本地此仓库添加 npm包(component.package.json) 及修改响应的配置文件(global.config.js)
gulp install
gulp document
gulp build
FAQs
7-UI elements Component Library
We found that 7-ui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.