0.0.4 • Published 3 years ago
projetdominante v0.0.4
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 :
- title: represents the title of your card.
- source: used to store the link of the image you want to be displayed in your card.
- imageAlt: description of the image in case the image don't load up.
- description: represents the description of your card.
- 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 :
- type: represents the variant of the alert (primary, secondary, success, danger, warning, info, light, dark).
- text: text inside the alert
Contact
If you encounter any problem, or discover a bug feel free to contact us via Github