0.0.4 • Published 2 years ago
@arkn/breeze-ui v0.0.4
Breeze UI 
A collection of components to handle ui with Breeze.
Installation
pnpm add @arkn/breeze-uiAbout
This package provides a set of UI components that helps you develop your template faster.
Usage
Add this package globally to your template main.js:
import BreezeUI from '@arkn/breeze-ui'
import { createApp } from 'vue'
import App from './App.vue'
import '@arkn/breeze-ui/dist/style.css'
const app = createApp(App)
app.use(BreezeUI)
app.mount('#app')Or import the components locally like this:
<script setup>
import { BImg } from '@arkn/breeze-ui'
import '@arkn/breeze-ui/dist/style.css'
const url = ref('https://breezecms.github.io/breeze-docs/images/breeze-logo.svg')
</script>
<template>
<b-img
:src="url"
:width="300"
:height="300"
object-fit="cover">
</b-img>
</template>List of available components:
Image
Usage
<b-img
src="https://breezecms.github.io/breeze-docs/images/breeze-logo.svg"></b-img>Props
| Name | Type | Description | Default | Required |
|---|---|---|---|---|
| src | string | Image source | undefined | Yes |
| alt | string | Image alt information | undefined | No |
| fallbackSrc | string | Image fallback source | undefined | No |
| height | string / number | Image height | undefined | No |
| width | string / number | Image width | undefined | No |
| styles | object | Image styles | {} | No |
| objectFit | 'fill' / 'contain' / 'cover' / 'none' / 'scale-down' | Object fit property | 'fill' | No |
| displayAnimation | 'fade' / 'slide-fade' / 'bounce' | Animation when image is loaded | undefined | No |
Transition
Usage
<b-transition>
<div>Hello World !</div>
</b-transition>Props
| Name | Type | Description | Default | Required |
|---|---|---|---|---|
| name | 'fade' / 'slide-fade' / 'bounce' | Animation name | 'fade' | No |
| mode | 'default' / 'in-out' / 'out-in' / undefined | Animation mode | 'out-in' | No |
| appear | boolean | Display when element appear | false | No |
Read More
Usage
<b-read-more
text="Duis ex culpa eiusmod eiusmod esse. Aliqua aliquip quis tempor sint. Sit irure Lorem dolore officia proident dolore ad qui id ea voluptate.!"></b-read-more>Props
| Name | Type | Description | Default | Required |
|---|---|---|---|---|
| text | string | Text content | '' | Yes |
| moreStr | string | More indication text | 'Read more' | No |
| lessStr | string | Less indication text | '' | No |
| link | string | Url linked to more and less indication texts | '#' | No |
| maxChars | number | Maximum characters length | 100 | No |
Sticky Top
Usage
<b-sticky-top>
<header>
<div>Hello World !</div>
</header>
</b-sticky-top>Props
| Name | Type | Description | Default | Required |
|---|---|---|---|---|
| top | number | Position of content from top | 0 | No |
| zIndex | number | Content z-index property | 1 | No |
| className | string | Associate class to component | '' | No |
Slots
| Name | Parameters | Description |
|---|---|---|
| default | () | The default content of Sticky Top |
Sticky Bottom
Usage
<b-sticky-bottom>
<footer>
<div>Copyright XXXX</div>
</footer>
</b-sticky-bottom>Props
| Name | Type | Description | Default | Required |
|---|---|---|---|---|
| bottom | number | Position of content from bottom | 0 | No |
| zIndex | number | Content z-index property | 1 | No |
| className | string | Associate class to component | '' | No |
Slots
| Name | Parameters | Description |
|---|---|---|
| default | () | The default content of Sticky Bottom |
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Changelog
Detailed changes for each release are documented in the release notes.