Snged-ui NPM | npm.io

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 'snged-ui/styles/style.css'

你可以在 <body> 添加属性 theme="dark" 来使用夜间主题。

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+

常见问题

如果你在 Vue2 中安装使用，你可能需要在 main.js 屏蔽 Vue 组件未定义的提示。

Vue.config.ignoredElements = [/^s-/]

如果您使用 Vite (Vue3) ，您可能需要在项目根目录创建 vite.config.js 来屏蔽组件定义的提示。

module.exports = {
  vueCompilerOptions: {
    isCustomElement: tag => /^s-/.test(tag)
  }
}

在 React 中组件使用 className 属性会变得无效，你需要使用 class 替代，常规事件如 onChange 也不会触发，你可能需要 ref.addEventListener('change') 替代。

使用组件

所有组件均使用s-开头的双标签：

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

全局CSS变量

body {
  --color-primary: 25, 118, 210;
  --color-accent: 220, 0, 78;

  --color-background: #FAFAFA;
  --color-background-bar: #F5F5F5;
  --color-background-card: #FFFFFF;

  --color-border: rgba(0, 0, 0, .12);

  --color-icon: rgba(0, 0, 0, .54);

  --color-text: rgba(0, 0, 0, .87);
  --color-text-secondary: rgba(0, 0, 0, .54);
  --color-text-disabled: rgba(0, 0, 0, .38);

  --color-ripple: rgba(0, 0, 0, .12);
}

这些变量挂载在 <body> 下，大多数组件都使用了这些值，也正因为如此，重新定义这些变量可以自定义所有组件配色。(夜间模式也是基于它实现的)

甚至你可以定义单个组件的配色。

s-button{
  --color-accent: 25,25,25;
}

组件列表

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>

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>

动态调用：

new window.Sng.dialog().setTitle('对话框').setMessage('消息').setPositive('确定',Function).setNegative('取消',Function).show()

datepicker 日期选择器

<s-datepicker value="2020-11-04" onchange="console.log('日期已改变：',event.value)">
  <s-button>选择日期</s-button>
</s-datepicker>

文档和资料

当前版本尚不稳定暂时没有文档，如果你需要使用且需要帮助，可以添加交流群：315014446 获取帮助。

sng ui UI UI组件库实用工具 web component 跨平台跨框架 UI框架

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago