npm package: @kenyu001/cui
Description: An UI library based on Bootstrap4 for vue 3.0, and not support ssr for now.
Latest version: 0.1.9

# cookie-ui v0.1.0

An UI library based on Bootstrap4 for vue 3.0, and not support ssr for now.

## Installation

```
npm i --save @kenyu001/cui
```

## Components

Support components

```
Alert, Badge, Breadcrumb, Button, Card, Carousel, Row, Collapse
Dropdown, Figure, Image, List, MediaObject, Modal, Popover
ProgressBar, Spinner, Table, Toast,
Select, Input File, Checkbox, Radio, Switch, Range, Textarea, Input
```

## Usage

Support Global import and Components import

```js
import CUI from "@kenyu001/cui";
import "@kenyu001/cui/dist/default/default.css";

const app = createApp(App);
app.use(CUI);
app.mount("#app");
```

```html
<template>
  <c-button @click="hanleClick" type="primary">Primary</c-button>
  <c-button @click="hanleClick" type="secondary">Secondary</c-button>

  <c-alert type="primary"> A simple alert—check it out! </c-alert>
  <c-alert type="secondary"> A simple alert—check it out! </c-alert>

  <c-badge type="primary">Primary</c-badge>
  <c-badge type="secondary">Secondary</c-badge>

  <c-card>
    <template v-slot:header>
      <div>test</div>
    </template>

    <c-card-body>
      <p class="card-text">
        Some quick example text to build on the card title and make up the bulk
        of the card's content.
      </p>
    </c-card-body>
  </c-card>

  <section style="background: rgb(119, 119, 119);">
    <c-carousel>
      <c-slide>
        <div style="width: 100px;height: 200px">auto start</div>
        <template v-slot:caption>
          <h5>First slide label</h5>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </template>
      </c-slide>
      <c-slide active>
        <div style="width: 100px;height: 200px">slide2</div>
        <template v-slot:caption>
          <h5>Second slide label</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </template>
      </c-slide>
      <c-slide>
        <div style="width: 100px;height: 200px">slide3</div>
        <template v-slot:caption>
          <h5>Third slide label</h5>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
          </p>
        </template>
      </c-slide>
    </c-carousel>
  </section>

  <section style="background: rgb(119, 119, 119); margin-top: 20px">
    <c-carousel :interval="0">
      <c-slide active>
        <div style="width: 100px;height: 200px">auto false</div>
        <template v-slot:caption>
          <h5>First slide label</h5>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </template>
      </c-slide>
      <c-slide>
        <div style="width: 100px;height: 200px">slide2</div>
        <template v-slot:caption>
          <h5>Second slide label</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </template>
      </c-slide>
      <c-slide>
        <div style="width: 100px;height: 200px">slide3</div>
        <template v-slot:caption>
          <h5>Third slide label</h5>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
          </p>
        </template>
      </c-slide>
    </c-carousel>
  </section>
</template>
```

### Testing

```js
npm run test

```

## Document

In progress

## Source Code

In progress