iakit

iakit

La biblioteca de mini componentes sin dependencia solo encapsula los componentes que se usan con más frecuencia, como alerta, tostadas, carga, hoja de acción. Un proyecto móvil simple como H5 Active Pages no tiene que introducir una biblioteca y marco de interfaz de usuario grande y completa para usar estos componentes.

iakit.alert

iakit.loading

Iakit.Actionsheet

iakit.

Uso

Instalado con hilo/npm, introducido de manera modular

 $ yarn add iakit

 import * as iakit from 'iakit'
import 'iakit/dist/style.css'

iakit . alert ( '提示' , '测试测试测试测试' )
iakit . loading . show ( )
iakit . actionsheet ( { /* 你的选项 */ } )
iakit . toast . showTop ( '测试测试测试' )

También puede importar directamente archivos, como usar CDN

 < link rel =" stylesheet " href =" https://unpkg.com/[email protected]/dist/style.css " >
< script src =" https://unpkg.com/[email protected]/dist/index.js " > </ script >

< script >
  iakit . alert ( '提示' , '测试测试测试测试' )
  iakit . loading . show ( )
  iakit . actionsheet ( { /* 你的选项 */ } )
  iakit . toast . showTop ( '测试测试测试' )
</ script > 

API

iakit.alert(title, content, buttons)

• Título: string , opcional
• Contenido: string , requerido
• Botones: array | function , opcional (estructura del botón: {text: string, onclick: function})

 import * as iakit from 'iakit'

// demo 1.
iakit . alert ( '注册失败' , '该邮箱已经被注册，如果有您有任何疑问请咨询客服。' )

// demo 2.
iakit . alert (
  '注册失败' ,
  '该邮箱已经被注册，如果有您有任何疑问请咨询客服。' ,
  [
    { text : '取消' , onClick : ( ) => { } } ,
    { text : '确定' , onClick : ( ) => { } }
  ]
) 

Opciones personalizadas

• z-index : cuando hay otros elementos en la página, y la jerarquía es relativamente alta, puede usar este parámetro para ajustar el nivel de alerta.
• btnText : la copia del botón predeterminada es "Aceptar", que se puede modificar a través de este parámetro

 iakit . alert . config ( {
  zIndex : 9999 , // alert 的 z-index
  btnText : 'ok' // 默认按钮的文案
} )

iakit.toast.showTop(content, time, callback)

• Contenido: string requerida
• Tiempo: number muestra cuántos milisegundos, opcionales, predeterminados es 1500
• devolución de llamada: function brindan por la devolución de llamada, opcional

 import * as iakit from 'iakit'

// demo 1.
iakit . toast . showTop ( '注册成功' )

// demo 2.
iakit . toast . showCenter ( '注册成功' , 5000 )

// demo 3.
iakit . toast . showBottom ( '注册成功' , ( ) => {
  // do something you want
} )

iakit.loading.show()

 import * as iakit from 'iakit'

iakit . loading . show ( )

setTimeout ( ( ) => {
  iakit . oading . hide ( )
} , 3000 )

iakit.actionsheet(options)

Opciones:

• Título: string , opcional
• Opciones: Opciones que pueden operarse mediante array , requerido (estructura de opciones: {Text: String, Disable: Boolean, OnClick: Function})
• DestructiveIndex: índice de number , opcional

 import * as iakit from 'iakit'

iakit . actionsheet ( {
  options : [
    {
      text : '我再想想' ,
      disable : false ,
      onClick : ( i , text ) => { }
    } ,
    {
      text : '去它的(disabled)' ,
      disable : true
    } ,
    {
      text : '就这样吧' ,
      onClick : ( i , text ) => {
      }
    }
  ] ,
  destructiveIndex : 2 ,
  title : '确认要分手吗？' ,
  onClick ( i , text ) {
    // 点击了没有指定 onClick 函数的选项时，执行这个函数
  } ,
  onCancel ( ) {
    // 取消了
  }
} ) 

Licencia

MIT