# teacool-ui

> 基本介绍

Latest version **0.1.0** (published 2020-04-24) · 0 weekly downloads

## Install

```sh
npm install teacool-ui
pnpm add teacool-ui
yarn add teacool-ui
bun add teacool-ui
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2020-04-24 |
| First published | 2020-04-24 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 398.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | TeaCool |
| Maintainers | teacool |

## Links

- npm: https://www.npmjs.com/package/teacool-ui
- npm.io page: https://npm.io/package/teacool-ui

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.4

## Recent versions

- 0.1.0 (latest) — 2020-04-24

## README

基本介绍

- 初始化vue项目

    vue create demo

- 安装组件库

    npm install teacool-ui

- 全局导入

    import TeaCoolUI from 'teacool-ui'
    import 'teacool-ui/lib/teacool-ui.css'
    
    Vue.use(TeaCoolUI)

- 使用组件

```html

    <template>
      <div id="app">
        <tc-button type="success" @click="visible=true">显示登录框</tc-button>
        <tc-dialog title="用户登录" :visible.sync="visible" width="30%">
          <tc-form :model="model" label-width="80px">
            <tc-form-item label="用户名">
              <tc-input v-model="model.username" placeholder="请输入用户名" clearable></tc-input>
            </tc-form-item>
            <tc-form-item label="用户密码">
              <tc-input v-model="model.password" placeholder="请输入用户密码" show-password></tc-input>
            </tc-form-item>
            <tc-form-item label="即时配送">
              <tc-switch v-model="model.soon" active-color="green" inactive-color="red"></tc-switch>
            </tc-form-item>
            <tc-form-item label="爱好">
              <tc-checkbox-group v-model="model.hobby">
                <tc-checkbox label="篮球"></tc-checkbox>
                <tc-checkbox label="足球"></tc-checkbox>
                <tc-checkbox label="乒乓球"></tc-checkbox>
              </tc-checkbox-group>
            </tc-form-item>
            <tc-form-item label="性别">
              <tc-radio-group v-model="model.gender">
                <tc-radio label="1">男</tc-radio>
                <tc-radio label="0">女</tc-radio>
              </tc-radio-group>
            </tc-form-item>
          </tc-form>
          <template v-slot:footer>
            <tc-button type="primary" @click="login">登录</tc-button>
            <tc-button @click="visible=false">取消</tc-button>
          </template>
        </tc-dialog>
      </div>
    </template>
    
    ```

---
_Source: https://npm.io/package/teacool-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._