README

Sng (Snged-ui)

$ npm i snged-ui

跨框架的UI组件库，该项目基于 Web Components 封装，借助webpack引入，兼容React、Vue等前端框架并无视其版本，也可同时引入于这些框架的第三方组件库中使用，Sng 参考了Google Material Design 设计规范，并针对移动端做了优化，适用于需要同时兼容移动端的Web项目，门户网站、后台管理系统等。

引入Sng

完全引入：

import 'snged-ui'

按需引入：

//引入按钮组件
import 'snged-ui/button'
//引入单选框
import 'snged-ui/radio'

注意：按需引入时，请务必引入样式。

import 'styles/style.css'

CDN 使用

<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/snged-ui/dist/sng.min.css">
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/snged-ui/dist/sng.min.js"></script>

兼容性

浏览器	版本
Chrome	50+
Edge	79+
Firefox	63+
Internet Explorer	None
Opera	37+
Safari	10+
Android webview	50+
Chrome for Android	50+
Firefox for Android	None
Opera for Android	10+
Safari on iOS	10+
Samsung Internet	5+

使用组件

所有组件均使用s-开头的双标签。(在React中可以使用闭合标签)：

<s-button>按钮</s-button><s-radio />

全局CSS变量

组件列表

button 按钮

<s-button>按钮</button>

radio 单选框

<s-radio name="radio">单选</s-radio>

checkbox 多选框

<s-checkbox name="radio">多选</s-checkbox>

icon 图标

<s-icon src="apps"></s-icon>

edit 编辑框

<s-edit hint="请输入内容"></s-edit>

支持单行or多行自适应的编辑框。

switch 开关

<s-switch>切换</s-switch>

rating 评分

<s-rating max="10" min="1" value="5"></s-rating>

seek 拖动条

<s-seek max="100" min="1" value="50"></s-seek>

progress 进度条

<s-progress></s-progress>
<s-progress max="100" value="60"></s-progress>

ripple 波纹

<s-ripple>容器</s-ripple>

触摸反馈容器，该组件是个容器，用来承载需要用户点击触摸等的容器

appbar 应用栏

<s-appbar title="应用程序" subtitle="副标题"></s-appbar>

card 卡片

<s-card>容器</s-card>

dialog 对话框

<s-dialog title="对话框" message="消息"></s-dialog>

对话框支持动态调用，镶入布局，请查阅文档

toast 消息框

<s-toast message="消息"></s-toast>

list 列表

<s-list></s-list>

list-item 列表项

<s-list>
  <s-list-item title="列表项"></s-list-item>
</s-list>

menu 菜单

<s-menu>
  <s-button>唤起菜单</s-button>
  <s-menu-item title="菜单项"></s-menu-item>
</s-menu>

menu-item 菜单项 菜单项
tab 选项卡

<s-tab>
  <s-tab-item title="选项"></s-tab-item>
</s-tab>

tab-item 选项卡项

选项卡项

scrollbar 滚动布局

<s-scrollbar>容器</s-scrollbar>

tooltip 工具提示

<s-tooltip title="更多信息">点我</s-tooltip>

toast 消息框

<s-toast state="true">消息内容</s-toast>

动态调用：

window.Sng.toast('消息内容')

dialog 对话框

<s-dialog state="true" title="对话框" message="消息" positive="确定" negative="取消"></s-toast>