Skip to content

🔌 Small mobile h5 component library that does not depend on any framework.

License

Notifications You must be signed in to change notification settings

cy920820/mini-uikit

Repository files navigation

mini-uikit

Mini-Uikit 是基于原生 js 实现,不依赖任何框架,是一款轻量高频的 ui 组件库; 该 ui 库内部封装了一些使用频率较高的组件,使用场景偏向一些简单的 H5 移动端项目,主要目的是为了规避当使用这些组件时而引入一个大而全的 UI 库。

Example

Toast

Loading

Dialog

ActionSheet

Getting Started

Installation

$ npm install mini-uikit -S
or
$ yarn add mini-uikit -S

Usage

模块化方式引入

import * as uikit from 'mini-uikit'
import 'mini-uikit/lib/lib.css'

uikit.loading.show()
setTimeout(() => {
  uikit.loading.hide()
}, 3500)
uikit.toast.showTop('测试')
uikit.actionsheet(...options) // options: title, options, onCancel, hideCancel, cancelBtnText
uikit.alert('测试', 'test')

使用 CDN 引入

<link href="https://unpkg.com/[email protected]/lib/lib.css">
<script src="https://unpkg.com/[email protected]/lib/lib.js"></script>

<script>
  uikit.loading.show()
  setTimeout(() => {
    uikit.loading.hide()
  }, 3500)
  uikit.toast.showTop('测试')
  uikit.actionsheet({/* options */})
  uikit.dialog.alert('测试', '�test')
</script>

API

Loading

uikit.loading.show()

import * as uikit from 'mini-uikit'

uikit.loading.show()

setTimeout(() => {
  uikit.loading.hide()
}, 2000)

Toast

uikit.toast.showTop(options)

options:

  • content: string 必选
  • time: number 显示毫秒数,默认 1800,可选
  • cb: function toast 结束后的回调,可选
import * as uikit from 'mini-uikit'

// demo 1.
uikit.toast.showTop('test')

// demo 2.
uikit.toast.showCenter('test', 5000)

// demo 3.
uikit.toast.showBottom('test', 2000, () => {
// callback
})

ActionSheet

uikit.actionsheet(options)

options:

  • title: string, 可选
  • options: array, 必选, 选项数组, 每一项包含 text、disable、destructive、onSelect
  • onCancel: function,可选,指定取消按钮回调函数
  • hideCancel: boolean,可选,是否隐藏取消按钮
  • cancelBtnText: string,可选,默认值是 “取消”
import * as uikit from 'mini-uikit'

uikit.actionsheet('标题', [
    {
      text: '选项 1',
      disable: false,
      onSelect: (i, text) => {}
    },
    {
      text: '选项 2',
      disable: true
    },
    {
      text: '选项 3',
      destructive: true,
      onSelect: (i, text) => {
      }
    }
  ],
  () => {
    // 取消回调函数
  })

Dialog

Api 示例
// alert 用法
uikit.dialog.alert(title, content, btns)

// confirm 用法
uikit.dialog.confirm(title, content, btns)

// 手动隐藏对话框
uikit.dialog.hide()

options:

  • title: string, 可选
  • content: string,必选
  • btns: array | function,可选(btns 结构:{ text: String, onClick: Function })
import * as uikit from 'mini-uikit'

// demo 1.
uikit.dialog.alert('标题 1', '内容 1')

// demo 2.
uikit.dialog.confirm(
  '标题 2',
  '内容 2',
  (result) => {
    if (result) {
      // 确定回调逻辑
    } esle {
      // 取消回调逻辑
    }
  }
)

// demo 3.
uikit.dialog.alert('标题 3', '自定义按钮', [
  {
    text: '否',
    onClick: () {
      console.log('no')
    }
  },
  {
    text: '是',
    onClick: () {
      console.log('yes')
    }
  }
])

Quick Start

git clone https://github.com/cy920820/mini-uikit
cd mini-uikit
npm install // or yarn
npm run start // or yarn start

About

🔌 Small mobile h5 component library that does not depend on any framework.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published