❤
npm
Sign UpSign In

@liyuzhong/simple-ui

1.3.5 • Public • Published

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 原子样式

  1. 布局

参考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%;
}
  1. 字号

字号分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);
}
  1. 边距

分内外边距，内边距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);
}
  1. 边框

通过伪类::before使用scale方案实现细边框，具体设置class如下：

  • .s-border 四边细边
  • .b-t 顶部细边框
  • .b-r 右边细边框
  • .b-b 底部细边框
  • .b-l 左边细边框

由于边框是采用scale缩放方案实现，所以涉及border-radius属性的设置需要谨慎处理，比如元素设置背景色且设置了细边框，当需要给元素设置圆角1em，则需要同时设置 ::before { border-radius:2em }

  1. 圆角

圆角分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，禁止页面滚动。

  1. loading
// 用法1
$S.loading()
// 用法2
$S.loading('加载中...')
// 用法3
// 可通过theme自定义class样式
// 通过fade启用渐入
$S.loading({theme:'primary', fade:true, msg: '加载中...'})
// 关闭
$S.loading(false)
  1. 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)
    })
  1. 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}`)
})
  1. toast
// 用法1， 默认3秒关闭
$S.toast('toast提示')
// 用法2,6秒后关闭
$S.toast('提示内容', 6)

5 其他模块

  1. 基础工具函数：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]}

...
  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}`)})
  1. css动画：animation.scss

Readme

Keywords

Package Sidebar

Install

npm i @liyuzhong/simple-ui

Weekly Downloads

1

Version

1.3.5

License

none

Unpacked Size

201 kB

Total Files

22

Last publish

Collaborators

  • liyuzhong
Try on RunKit
Report malware