OnebayUI (A mobile web UI library write by vue3)

OnebayUI

Install


npm i onebay-ui -S

or


yarn add onebay-ui

Usage


import { defineComponent } from 'vue'

import { Button } from 'onebay-ui'

export default defineComponent({

  setup() {

    return () => {

      return (

        <Button>Submit</Button>

      )

    }

  }

})

Import component style (Recommended)

Only import the styles of the components that are used


import { Button } from 'onebay-ui'

import 'onebay-ui/dist/style/button.css'

Using with vite

If your app was created by vite, it is strongly recommended to use the vite plugin vite-plugin-imp in your project, which can automatically import component styles for you on demand.


import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import vitePluginImp from 'vite-plugin-imp'

export default defineConfig({

  plugins: [

    vue(),

    vitePluginImp({

      libList: [

        {

          libName: 'onebay-ui',

          style(name) {

            return `onebay-ui/dist/style/${name}.css`

          }

        }

      ]

    })

  ]

})

Checkout the demo on codesandbox

Using with vue-cli

If your app was created by vue-cli, you can use babel-plugin-import as below:


module.exports = {

  presets: ["@vue/cli-plugin-babel/preset"],

  plugins: [

    [

      "import",

      {

        libraryName: "onebay-ui",

        libraryDirectory: "es",

        style: name => {

          return `${name.replace("/es/", "/dist/style/")}.css`;

        }

      }

    ]

  ]

};

Import all components styles (Not recommended)


import 'onebay-ui/dist/style/index.css'

Custom theme

You need to inject scss variables in your project.

Using with vite


// vite.vonfig.ts

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import vitePluginImp from 'vite-plugin-imp'

export default defineConfig({

  esbuild: {

    jsxFactory: 'h',

    jsxFragment: 'Fragment',

    jsxInject: "import { h } from 'vue';"

  },

  css: {

    preprocessorOptions: {

      scss: {

        additionalData: `

          $color-brand: #ffc701;

          $color-brand-light: #ffd541;

          $color-brand-dark: #cc9f01;

        `

      }

    }

  },

  plugins: [

    vue(),

    vitePluginImp({

      libList: [

        {

          libName: 'onebay-ui',

          style(name) {

            return `onebay-ui/src/style/components/${name}.scss`

          }

        }

      ]

    })

  ]

})

Checkout demo in onebay-ui-custom-theme-with-vite

Using with vue-cli


module.exports = {

  css: {

    loaderOptions: {

      sass: {

        additionalData: `

          $color-brand: #ffc701;

          $color-brand-light: #ffd541;

          $color-brand-dark: #cc9f01;

        `

      }

    }

  }

}

Checkout demo in onebay-ui-custom-theme-with-vue-cli

1 Like

Really cool! Thanks for sharing!

Side note: I think you missed the link to the main website, I had to Google to find it :sweat_smile:

Thanks!
This is OnebayUI document.

1 Like