projetdominante vue components

Projet Setup

install the library via npm

npm install projetdominante

Configure Bootstrap styling

Register [BootstrapVue] in your app entry point (typically [app.js] or [main.js]):

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

Import the library

In your script tag import the library and add it to the exported components

<script>
import projetdominante from 'projetdominante'
export default {
  name: 'YourComponentName',
  components: {...projetdominante} 
}
</script>

Usage

Button

The Button component takes two props

1. text: String.
2. color: String

color takes 8 different styles : primary, secondary, success, danger, warning, info, light, dark.

EXAMPLE

<Button text="Signup" color="primary"/>

Card

The Card component takes multiple props as follows :

1. title: represents the title of your card.
2. source: used to store the link of the image you want to be displayed in your card.
3. imageAlt: description of the image in case the image don't load up.
4. description: represents the description of your card.
5. buttonText: button text.

Tous ces props sont du type String.

EXAMPLE

<card title="Tokyo - Japan" source="https://picsum.photos/600/300/?image=25" imageAlt="Tokyo"  description="okyo (東京, Tōkyō) is Japan's capital and the world's most populous metropolis"  buttonText="Confirmer" />

Alert

The Alert component takes two props :

1. type: represents the variant of the alert (primary, secondary, success, danger, warning, info, light, dark).
2. text: text inside the alert

Contact

If you encounter any problem, or discover a bug feel free to contact us via Github