kaku-ui
v0.1.19
Published
Yet Another UI Kit
Downloads
29
Readme
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
Notice: rootMargin = rootMargin ||
${yThreshold}px ${xThreshold}px ${yThreshold}px ${xThreshold}px