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

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

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

<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

npm run test

Document

In progress

Source Code

In progress