Breeze UI

A collection of components to handle ui with Breeze.

Installation

pnpm add @arkn/breeze-ui

About

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.