0.1.9 • Published 4 years ago
@kenyu001/cui v0.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
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