@liyuzhong/simple-ui
v1.3.5
Published
基于[sass](https://www.sass.hk/)编写的移动场景css库，包括主题色号配置、基准字号配置、原子样式(布局、字号、边距)、常用ui组件。
Downloads
6
Maintainers
liyuzhongReadme
simple-ui
基于sass编写的移动场景css库，包括主题色号配置、基准字号配置、原子样式(布局、字号、边距)、常用ui组件。
安装
npm
npm install @liyuzhong/simple-ui
使用说明
引用
// 引用css样式
import '@liyuzhong/simple-ui/style.scss'
// 引用scss样式
import '@liyuzhong/simple-ui/index.scss'
// 引用js库
import $S from '@liyuzhong/simple-ui'
主题配置，可配置的内容包括主题色、字号尺寸、内外边距尺寸、圆角尺寸、模态控件相关属性。
:root {
--main-color: #303133;
--content-color: #606266;
--tips-color: #909193;
--light-color: #c0c4cc;
--border-color: #dadbde;
--bg-color: #f3f4f6;
--disabled-color: #c8c9cc;
--primary: #3c9cff;
--primary-dark: #398ade;
--primary-disabled: #9acafc;
--primary-light: #ecf5ff;
--warning: #f9ae3d;
--warning-dark: #f1a532;
--warning-disabled: #f9d39b;
--warning-light: #fdf6ec;
--success: #5ac725;
--success-dark: #53c21d;
--success-disabled: #a9e08f;
--success-light: #f5fff0;
--error: #f56c6c;
--error-dark: #e45656;
--error-disabled: #f7b2b2;
--error-light: #fef0f0;
--info: #909399;
--info-dark: #767a82;
--info-disabled: #c4c6c9;
--info-light: #f4f4f5;
// 字号尺寸
--font-xsmall:1rem;
--font-small:1.2rem;
--font-medium:1.4rem;
--font-large:1.6rem;
--font-xlarge:1.8rem;
--font-xxlarge:2rem;
// 内外边距尺寸
--padding-xsmall: .5rem;
--padding-small: .8rem;
--padding-medium: 1.2rem;
--padding-large: 1.6rem;
--padding-xlarge: 2rem;
--padding-xxlarge: 3rem;
// 圆角尺寸
--radiu-xsmall: .3rem;
--radiu-small: .4rem;
--radiu-medium: .6rem;
--radiu-large: .8rem;
--radiu-xlarge: 1.2rem;
// modal蒙版透明度
--modal-opacity: .15;
// modal窗口组件的圆角，包括loading，alert，confirm，toast
--modal-radiu: .4rem;
// toast/loading背景
--loading-bg: rgba(0,0,0, .8);
// alert(confirm)边距
--alert-padding: 1.2rem;
// alert(confirm)标题背景颜色
--alert-title-bg: #c0c4cc;
// alert(confirm)默认标题颜色
--alert-title-color: #303133;
// alert(confirm)标题字号
--alert-title-ft_size: 1.4rem;
// alert(confirm)内容字号
--alert-content-ft_size: 1.6rem;
// alert(confirm)内容字体颜色
--alert-content-color: #606266;
// alert(confirm)内容边距
--alert-content-padding: 1.6rem 1.2rem;
// alert(confirm)常规按钮（未设置主题class）字体颜色
--alert-btn-color: #303133;
// alert(confirm)按钮字号
--alert-btn-ft_size: 1.6rem;
// alert(confirm)按钮边距
--alert-btn-padding: 1.4rem 1rem;
}
2 基准字号设置
rem.scss中根据屏幕像素比设置基准字号
/**
* 适配基准字号配置文件 rem.scss
*/
@media screen and (max-width: 450px) and (min-width: 350px) {
html {
font-size: 12px;
}
}
@media screen and (max-width: 550px) and (min-width: 450px) {
html {
font-size: 13.3333px;
}
}
@media screen and (max-width: 650px) and (min-width: 550px) {
html {
font-size: 16px;
}
}
@media screen and (max-width: 750px) and (min-width: 650px) {
html {
font-size: 18.6666px;
}
}
@media screen and (min-width: 750px){
html {
font-size: 20px;
}
}
@media screen and (max-width: 300px) {
html {
font-size: 10px;
}
}
3 原子样式
- 布局
参考Foundation css布局设计，截取其中grid-x布局，宽度12等分，并按百分比设定等分组合宽度，如果想使用Foundation css完整布局方案，可引用grid.scss文件（默认不包括）。
// 主要代码
.s-grid-x {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
...
.s-grid-x>.s-cell-1 {
width: 8.33333%;
}
.s-grid-x>.s-cell-2 {
width: 16.66667%;
}
.s-grid-x>.s-cell-3 {
width: 25%;
}
.s-grid-x>.s-cell-4 {
width: 33.33333%;
}
.s-grid-x>.s-cell-5 {
width: 41.66667%;
}
.s-grid-x>.s-cell-6 {
width: 50%;
}
.s-grid-x>.s-cell-7 {
width: 58.33333%;
}
.s-grid-x>.s-cell-8 {
width: 66.66667%;
}
.s-grid-x>.s-cell-9 {
width: 75%;
}
.s-grid-x>.s-cell-10 {
width: 83.33333%;
}
.s-grid-x>.s-cell-11 {
width: 91.66667%;
}
.s-grid-x>.s-cell-12 {
width: 100%;
}
- 字号
字号分size等级设计，size包括xsmall/small/medium/large/xlarge/xxlarge，每个size需要在主题配置设定实际大小值。
.font_xsmall {
font-size: var(--font-xsmall);
}
.font_small {
font-size: var(--font-small);
}
.font_medium {
font-size: var(--font-medium);
}
.font_large {
font-size: var(--font-large);
}
.font_xlarge {
font-size: var(--font-xlarge);
}
.font_xxlarge {
font-size: var(--font-xxlarge);
}
- 边距
分内外边距，内边距class格式为.p[-t/r/b/l]_{size}，外边距class格式为.m[-t/r/b/l]_{size}，每个size需要在主题配置设定实际大小，size包括xsmall/small/medium/large/xlarge/xxlarge。
// xsmall size的外边距
.m_xsmall {
margin: var(--padding-xsmall);
}
.m-t_xsmall {
margin-top: var(--padding-xsmall);
}
.m-r_xsmall {
margin-right: var(--padding-xsmall);
}
.m-b_xsmall {
margin-bottom: var(--padding-xsmall);
}
.m-l_xsmall {
margin-left: var(--padding-xsmall);
}
// large size的内边距
.p_large {
padding: var(--padding-large);
}
.p-t_large {
padding-top: var(--padding-large);
}
.p-r_large {
padding-right: var(--padding-large);
}
.p-b_large {
padding-bottom: var(--padding-large);
}
.p-l_large {
padding-left: var(--padding-large);
}
- 边框
通过伪类::before使用scale方案实现细边框，具体设置class如下：
.s-border四边细边.b-t顶部细边框.b-r右边细边框.b-b底部细边框.b-l左边细边框
由于边框是采用scale缩放方案实现，所以涉及border-radius属性的设置需要谨慎处理，比如元素设置背景色且设置了细边框，当需要给元素设置圆角1em，则需要同时设置 ::before { border-radius:2em }
- 圆角
圆角分5个size，xsmall/small/medium/large/xlarge，格式.r_{size}，为了兼容处理边框圆角，对应的样式会同时设置伪类::before的圆角，每个size需要在主题配置设定实际大小。
.r_small,
.r_small::before {
border-radius: var(--radiu-small);
}4 模态控件
模态控件包括loading/alert/confirm/toast，其中loading/alert/confirm会锁定body，禁止页面滚动。
- loading
// 用法1
$S.loading()
// 用法2
$S.loading('加载中...')
// 用法3
// 可通过theme自定义class样式
// 通过fade启用渐入
$S.loading({theme:'primary', fade:true, msg: '加载中...'})
// 关闭
$S.loading(false)
- alert
// 用法1
alert('测试alert弹窗').then(()=>{ console.info('点击了alert按钮')})
// 用法2
// 通过btnText自定义按钮文案
// 通过btnType配置按钮展示类型，可选值confirm / cancel，confirm-按钮以确定按钮展示，cancel-按钮以取消按钮样式展示
alert({msg:'配置按钮的弹窗', btnText:'我知道了', btnType:'confirm'})
.then((res)=>{
console.info(res)
})
- confirm
// 用法
/**
* 确认弹窗
* {
* msg: {String} 必填 弹窗内容,
* title: {String} 弹窗标题,
* fade: {Boolean} 是否启用渐入，默认true
* confirmText: {String} 确认按钮文案,
* cancelText: {String} 取消按钮文案,
* confirmPos: {String} 确认按钮位置，left/right，默认是right
* theme: {String} 样式主题class，已有主题class dark/success/error/warning
* }
*/
$S.confirm({
title:'温馨提示',
msg: '你准备好了吗？',
confirmText:'已准备好',
cancelText:'没准备好',
confirmPos:'left',
theme: 'warning'
}).then((res) => {
console.info(`操作是confirm?${res.confirm}`)
})
- toast
// 用法1， 默认3秒关闭
$S.toast('toast提示')
// 用法2,6秒后关闭
$S.toast('提示内容', 6)
5 其他模块
- 基础工具函数：utils.js
...
// 合并对象
merge({name:'hola', age: 23, info:{r:1}}, {age:34, info:{t:4} citys:[1]}) // => {name:'hola', age:34, info:{r:1, t:4}, citys:[1]}
...
- 常用工具函数：helpers.js
// 设置缓存数据data，并设置有效期1个小时
$S.setStorage('data', JSON.stringify({name:'hola', age:24}), 60 * 60);
// 尝试重新设置缓存数据data
$S.setStorage('data', something); // will throw Error(`the data of key(${key}) is already exist`);
// 更新缓存数据，并更新有效期1个小时
$S.updateStorage('data', JSON.stringify({name: 'hola', age: 24, isStudy: true}), 60 * 60);
// 尝试更新缓存list,并且有效期是长久
$S.updateStorage('list', [1,2,3,4]) // will throw Error(`the data of key(${key}) is not exist, can't update storage`);
// parse url query string to object
$S.parseQueryString()
// parse url query string data id
$S.parseQueryString('id')
$S.isIos()
$S.isAndroid()
$S.isWechat()
$S.isWeChatMiniApp().then((f) => {console.info(`is WeChatMiniApp? ${f}`)})
- css动画：animation.scss