Package Exports
- ano-ui
- ano-ui/preset
- ano-ui/utils
Readme
Ano-UI (WIP)
An UniApp UI components with UnoCSS.
Installation
pnpm add ano-ui
pnpm add -D unocss @iconify-json/carbon unocss-appletUsage
Custom UnoCSS config(unocss.config.ts):
import { defineConfig, presetIcons } from 'unocss'
// unocss-applet https://github.com/unocss-applet/unocss-applet
import { presetApplet, presetRemToRpx, transformerApplet } from 'unocss-applet'
import { presetAno } from 'ano-ui'
// UniApp
const isMP = process.env.UNI_PLATFORM !== 'h5'
export default defineConfig({
presets: [
presetApplet({ enable: isMP }),
presetAttributify(),
presetRemToRpx({ enable: isMP }),
presetIcons({
scale: 1.2,
extraProperties: {
'display': 'inline-block',
'vertical-align': 'middle',
},
}),
presetAno(),
],
transformers: [
transformerApplet(),
],
})Update pages.json file like below:
{
"easycom": {
"autoscan": true,
"custom": {
"^A(.*)": "ano-ui/components/A$1/A$1.vue"
}
}
}And then enjoy it. Just use a button component like this:
<template>
<AButton>Button</ABtn>
</template>Preview
Probably not the latest version.
WeChat DevTools(Recommended)
You can see the preview by the following commands:
pnpm iRun playground to see the result.
pnpm play:mp-weixinThen you can import the project(xx/ano-ui/playground/dev/mp-weixin) into WeChat DevTools.