Kaku-ui NPM | npm.io

Kaku 殻

Yet Another UI Kit

Usage

install deps

npm i kaku-ui
npm i -D babel-plugin-import

config babel.config.js

plugins: [["import", {
  libraryName: 'kaku-ui',
  libraryDirectory: 'dist',
  style: (name) => {
      if (name && name.indexOf('util') >= 0) {
        return false
      }
      return `${name}/style.css`
    },
}]]

import base style

import 'kaku-ui/dist/style.css'

import component

import { Toast } from 'kaku-ui'

Components

Toast

same as JK.toast

Toast(message: string, [duration: number, [status: string]])

Parameters		type	default
message	toast content	string
duration	display duration	number	2000
status	icon type	success\|error	success

Alert

same as JK.alert

Alert({
  imageUrl: string,
  title?: string,
  message?: string,
  positiveButtonText: string,
  negativeButtonText?: string
}): Promise<{ result: AlertResult }>

type AlertResult = 'positive' | 'negative' | 'close'

Image

Lazy load (Support Intersection Observer, auto fallback to Event-based listeners)
Support backgound img

Props		type	default
mode	use io or event, auto when not set	undefined \| 'event'	undefined
alt	img alt	string
url	img src	string
isBackground		boolean	false
lazy	enable lazy load	boolean	false
lazyOptions	config lay load	object
lazyOptions.root	Intersection Observer root	HTMLElement	undefined (viewport)
lazyOptions.rootMargin	Intersection Observer rootMargin	CSS margin string like	'200px 0px 200px 0px'
lazyOptions.xThreshold	xThreshold (px)	number	0
lazyOptions.yThreshold	yThreshold (px)	number	200
lazyOptions.maxItems	max listen items only when use event mode	number	200
lazyOptions.checkInterval	check intervel only when use event mode	number	500