bloverse v0.0.2

Bloverse-Vue

A library of frontend components CSS and JS (VUE).

Major part of this documentation are for developers looking to use components for development, if you are looking for how to contibute, click here.

Installation and Usage

Components API

Every component is prefixed with Bv to prevent clash with HTML default elements, to derive the name of any component add Bv to the title e.g. Icon will be BvIcon

1. Icon
2. Button
3. SplashLogo
4. ArtWorkLogo
5. Loader
6. Alert

Icon

Props

Button

Props

Events | Event | Argument | Description | | ------| ---------| ----------- | | click | Native click event object | Emmitted when button is cliked |

slots This component has just a single unnamed slot that inserts the content of the modal

Example <BvButton>Login</BvButton>

ArtWorkLogo

Shows dynamic logos

SplashLogo

Shows a splash page logo

Loader

Loader component takes full height and width if the page

Props | Property | Type | Default | Description | | -------- | ---- | ------- | ----------- | | show | Boolean | - | decides to show component or not show, a true shows the loader and false removes it |

Alert

The alert component acts as an Alert (fixed) and toast (leaves after a while)

Props | Property | Type | Default | Description | | -------- | ---- | ------- | ----------- | | dismissible | Boolean | false | adds an icon that can dismiss the alert | | type | string | default | specifies the type of alert to be shown. Expects default, success, warning or error | | show | Boolean or Number | - | tells if the alert is to be shown or not, when number is passed the alrt is shown for that length of seconds NOTE: The v-model property is preferable over this property |

v-model You can use the v-model to control this component. It accepts same value type as the show property

slots This component has two slots, a default one that holds the content and an optional named menu to add menu buttons to the component

Events | Event | Argument | Description | | -------- | ---- | ----------- | | dismiss | false | Emmitted when the cancel icon is clicked on a dismissible alert. NOTE: Using v-model is preffered over using this |

Modal

The alert component acts as an Alert (fixed) and toast (leaves after a while)

Props | Property | Type | Default | Description | | -------- | ---- | ------- | ----------- | | position | string | bottom | decides if modal should be at bottom or center | | show | Boolean | - | tells if the modal is to be shown or not NOTE: The v-model property is preferable over this property |

v-model You can use the v-model to control this component. It accepts same value type as the show property

slots This component has just a single unnamed slot that inserts the content of the modal

Events | Event | Argument | Description | | -------- | ---- | ----------- | | dismiss | false | Emmitted when the cancel icon is clicked. NOTE: Using v-model is preffered over using this |

Project setup for Contributors

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.