drip-ui

Lightweight Mobile UI Components built on Vue

Usage no npm install needed!

<script type="module">
  import dripUi from 'https://cdn.skypack.dev/drip-ui';
</script>

README

Features

  • 50+ Reusable components
  • 80%+ Unit test coverage
  • Extensive documentation and demos
  • Support babel-plugin-import
  • Support TypeScript
  • Support SSR

Install

NPM

npm i drip-ui -S

YARN

yarn add drip-ui

Quickstart

1. Use babel-plugin-import (Recommended)

# Install babel-plugin-import
npm i babel-plugin-import -D

// set babel config in .babelrc or babel-loader
// Note: Don't set libraryDirectory if you are using webpack 1.
{
  "plugins": [
    ["import", {
      "libraryName": "drip-ui",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

Then you can import components from vant, equivalent to import manually below.

import { Button, Cell } from 'drip-ui';

If you are using TypeScript，please use ts-import-plugin instead

2. Manually import

import Button from 'drip-ui/lib/button';
import 'drip-ui/lib/drip-css/base.css';
import 'drip-ui/lib/drip-css/button.css';

3. Import all components

import Vue from 'vue';
import drip-ui from 'drip-ui';
import 'drip-ui/lib/drip-css/index.css';

Vue.use(drip-ui);

> If you configured babel-plugin-import, you won't be allowed to import all components.

See more in [Quickstart](https://dripsui.shuiditech.com/#/zh-CN/quickstart).

## Browser Support

Modern browsers and Android 4.0+, iOS 6+.

## Links

* [Documentation](https://dripsui.shuiditech.com/#/zh-CN/intro)