ano ui

Ano-UI

Lightweight, beautiful and fast UnoCSS component library

Install

pnpm add ano-ui
pnpm add -D unocss @iconify-json/tabler unocss-applet

use

Configure UnoCSS:

 // uno.config.ts
import { defineConfig , presetIcons } from 'unocss'

// unocss-applet https://github.com/unocss-applet/unocss-applet
import { presetApplet , presetRemRpx , transformerApplet } from 'unocss-applet'
import { presetAno } from 'ano-ui'

export default defineConfig ( {
  presets : [
    presetApplet ( ) ,
    presetRemRpx ( ) ,
    presetIcons ( {
      scale : 1.2 ,
      extraProperties : {
        'display' : 'inline-block' ,
        'vertical-align' : 'middle' ,
      } ,
    } ) ,
    presetAno ( ) ,
  ] ,
  transformers : [
    transformerApplet ( ) ,
  ] ,
} )

Update the pages.json file like this:

{
  "easycom" : {
    "autoscan" : true ,
    "custom" : {
      "^A(.*)" : " ano-ui/components/A$1/A$1.vue "
    }
  }
}

Or use @uni-helper/vite-plugin-uni-components to automatically import components.

 // vite.config.ts
import { defineConfig } from 'vite'

import Components from '@uni-helper/vite-plugin-uni-components'
import { AnoResolver } from 'ano-ui'

// https://vitejs.dev/config/
export default defineConfig ( {
  // ...
  plugins : [
    // ...
    Components ( {
      include : [ / .vue$ / , / .vue?vue / ] ,
      dts : 'src/components.d.ts' ,
      resolvers : [ AnoResolver ( ) ] ,
    } ) ,
  ] ,
} )

And then enjoy it.

Just use a button component like this:

 < template >
  < AButton > Button </ AButton >
</ template > 

grateful

tool

• UnoCSS

UI framework

• Anu
• Element Plus
• Onu UI
• uView
• Vant

License

MIT License © 2022-PRESENT Neil Lee and all contributors.